import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { UserData } from "@/types/auth";

interface ProfileManagerProps {
  userData: UserData | undefined;
  edit: boolean;
  setUserData: React.Dispatch<React.SetStateAction<UserData | undefined>>;
}

export default function ProfileManager({
  userData,
  edit,
  setUserData,
}: ProfileManagerProps) {
  if (!userData) return null;

  const handleChange = (field: keyof UserData, value: string | number) => {
    setUserData((prev) => (prev ? { ...prev, [field]: value } : prev));
  };

  console.log(userData);

  return (
    <div className="mx-auto">
      <div className="space-y-4">
        {/* Full Name */}
        <h1 className="text-xl font-semibold tracking-tight">
          Personal Information
        </h1>
        <div className="space-y-2">
          <Label
            htmlFor="full_name"
            className="text-sm font-semibold text-gray-700"
          >
            Full Name
          </Label>
          <Input
            id="full_name"
            type="text"
            value={userData.full_name}
            onChange={(e) => handleChange("full_name", e.target.value)}
            className="bg-gray-50 py-6"
            readOnly={!edit}
          />
        </div>
        <div className="space-y-2">
          <Label
            htmlFor="username"
            className="text-sm font-semibold text-gray-700"
          >
            Username
          </Label>
          <Input
            id="username"
            type="text"
            value={userData.username}
            onChange={(e) => handleChange("username", e.target.value)}
            className="bg-gray-50 py-6"
            readOnly={!edit}
          />
        </div>

        {/* SSC & HSC Rolls */}

        {/* Email */}
        <div className="space-y-2">
          <Label
            htmlFor="email"
            className="text-sm font-semibold text-gray-700"
          >
            Email
          </Label>
          <Input
            id="email"
            type="email"
            value={userData.email}
            onChange={(e) => handleChange("email", e.target.value)}
            className="bg-gray-50 py-6"
            readOnly={!edit}
          />
        </div>

        {/* Phone */}
        <div className="space-y-2">
          <Label
            htmlFor="phone_number"
            className="text-sm font-semibold text-gray-700"
          >
            Phone
          </Label>
          <Input
            id="phone_number"
            type="tel"
            value={userData.phone_number}
            onChange={(e) => handleChange("phone_number", e.target.value)}
            className="bg-gray-50 py-6"
            readOnly={!edit}
          />
        </div>
        <h1 className="text-xl tracking-tight font-semibold">
          Educational Background
        </h1>
        <div className="space-y-2">
          <Label
            htmlFor="preparation_unit"
            className="text-sm font-semibold text-gray-700"
          >
            Unit
          </Label>
          <Input
            id="preparation_unit"
            type="text"
            value={userData.preparation_unit}
            onChange={(e) => handleChange("preparation_unit", e.target.value)}
            className="bg-gray-50 py-6"
            readOnly={!edit}
          />
        </div>
        <div className="space-y-2">
          <Label
            htmlFor="college"
            className="text-sm font-semibold text-gray-700"
          >
            College
          </Label>
          <Input
            id="college"
            type="text"
            value={userData.college}
            onChange={(e) => handleChange("college", e.target.value)}
            className="bg-gray-50 py-6"
            readOnly={!edit}
          />
        </div>
        <div className="flex gap-4">
          <div className="space-y-2 w-full">
            <Label
              htmlFor="ssc_roll"
              className="text-sm font-semibold text-gray-700"
            >
              SSC Roll
            </Label>
            <Input
              id="ssc_roll"
              type="number"
              value={userData.ssc_roll}
              onChange={(e) => handleChange("ssc_roll", Number(e.target.value))}
              className="bg-gray-50 py-6"
              readOnly={!edit}
            />
          </div>

          <div className="space-y-2 w-full">
            <Label
              htmlFor="ssc_board"
              className="text-sm font-semibold text-gray-700"
            >
              SSC Board
            </Label>
            <Input
              id="ssc_board"
              type="text"
              value={userData.ssc_board}
              onChange={(e) => handleChange("ssc_board", e.target.value)}
              className="bg-gray-50 py-6"
              readOnly={!edit}
            />
          </div>
        </div>
        <div className="flex gap-4">
          <div className="space-y-2 w-full">
            <Label
              htmlFor="hsc_roll"
              className="text-sm font-semibold text-gray-700"
            >
              HSC Roll
            </Label>
            <Input
              id="hsc_roll"
              type="number"
              value={userData.hsc_roll}
              onChange={(e) => handleChange("hsc_roll", Number(e.target.value))}
              className="bg-gray-50 py-6"
              readOnly={!edit}
            />
          </div>

          <div className="space-y-2 w-full">
            <Label
              htmlFor="hsc_board"
              className="text-sm font-semibold text-gray-700"
            >
              HSC Board
            </Label>
            <Input
              id="hsc_board"
              type="text"
              value={userData.hsc_board}
              onChange={(e) => handleChange("hsc_board", e.target.value)}
              className="bg-gray-50 py-6"
              readOnly={!edit}
            />
          </div>
        </div>
      </div>
    </div>
  );
}