"use client";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { z } from "zod";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import withReactContent from "sweetalert2-react-content";
import Swal from "sweetalert2";
import { useRouter } from "@/i18n/routing";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { useEffect, useState } from "react";
import {
  AdministrationLevelList,
  getListCompetencies,
  getListExperiences,
  getUserById,
  saveUserInternal,
  saveUserRolePlacements,
} from "@/service/management-user/management-user";
import { loading } from "@/config/swal";
import { Eye, EyeOff } from "lucide-react";
import { useParams } from "next/navigation";

const FormSchema = z.object({
  name: z.string().optional(),
  username: z.string().optional(),
  password: z.string().optional(),
  phoneNumber: z.string().optional(),
  email: z.string().optional(),
  skills: z.string().optional(),
  experiences: z.string().optional(),
  company: z.string().optional(),
});

// const FormSchema = z.object({
//   name: z.string({
//     required_error: "Required",
//   }),
//   username: z.string({
//     required_error: "Required",
//   }),
//   password: z.string({
//     required_error: "Required",
//   }),
//   phoneNumber: z.string({
//     required_error: "Required",
//   }),
//   email: z.string({
//     required_error: "Required",
//   }),
//   skills: z.string({
//     required_error: "Required",
//   }),
//   experiences: z.string({
//     required_error: "Required",
//   }),
//   company: z.string({
//     required_error: "Required",
//   }),
// });

export type Placements = {
  index: number;
  roleId?: string;
  userLevelId?: number;
};

interface Detail {
  id: string;
  fullname: string;
  username: string;
  phoneNumber: string;
  email: string;
  birthPlace: string;
  birthDate: string;
  education: string;
  career: string;
  expertise: string;
  experience: string;
  position: string;
  region: string;
  cvUrl: string;
  photoUrl: string;
  isActive: boolean;
  userProfilesAdditional?: {
    companyName: string;
    userExperienceId: any;
    userCompetency?: {
      id: number;
      name: string;
      isActive: boolean;
      createdAt: string;
    };
  };
}

export default function UpdateExpertForm() {
  const MySwal = withReactContent(Swal);
  const router = useRouter();
  const params = useParams();
  const id = params?.id;
  const [detail, setDetail] = useState<Detail | null>(null);
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
  });
  const [incrementId, setIncrementId] = useState(1);
  const [placementRows, setPlacementRows] = useState<Placements[]>([
    { index: 0, roleId: "", userLevelId: 0 },
  ]);
  const [userCompetencies, setUserCompetencies] = useState<any>();
  const [userExperiences, setUserExperiences] = useState<any>();
  const [userLevels, setUserLevels] = useState<any>();
  const [passwordType, setPasswordType] = useState("password");
  const [showPassword, setShowPassword] = useState(false);

  useEffect(() => {
    getDataAdditional();
  }, []);

  useEffect(() => {
    async function initState() {
      if (id) {
        const response = await getUserById(String(id));
        const details = response?.data?.data;
        setDetail(details);
      }
      if (detail?.userProfilesAdditional?.companyName) {
        form.setValue("company", detail.userProfilesAdditional.companyName);
      }

      if (detail?.userProfilesAdditional?.userCompetency?.id) {
        form.setValue(
          "skills",
          String(detail.userProfilesAdditional.userCompetency.id)
        );
      }

      if (detail?.userProfilesAdditional?.userExperienceId) {
        form.setValue(
          "experiences",
          String(detail.userProfilesAdditional.userExperienceId)
        );
      }
    }
    initState();
  }, [id]);

  useEffect(() => {
    if (!detail) return;

    form.reset({
      name: detail.fullname || "",
      username: detail.username || "",
      phoneNumber: detail.phoneNumber || "",
      email: detail.email || "",
      password: "",
      skills: detail?.userProfilesAdditional?.userCompetency?.id
        ? String(detail.userProfilesAdditional.userCompetency.id)
        : "",
      experiences: detail?.userProfilesAdditional?.userExperienceId
        ? String(detail.userProfilesAdditional.userExperienceId)
        : "",
      company: detail?.userProfilesAdditional?.companyName || "",
    });
  }, [detail]);

  if (!detail) return <div>Loading...</div>;

  const togglePasswordType = () => {
    setPasswordType((prevType) =>
      prevType === "password" ? "text" : "password"
    );
  };

  const roleSelection = [
    {
      id: "11",
      name: "Koor Kurator",
    },
    {
      id: "12",
      name: "Kurator",
    },
  ];

  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
    MySwal.fire({
      title: "Simpan Data",
      text: "Apakah Anda yakin ingin menyimpan data ini?",
      icon: "warning",
      showCancelButton: true,
      cancelButtonColor: "#d33",
      confirmButtonColor: "#3085d6",
      confirmButtonText: "Simpan",
    }).then((result) => {
      if (result.isConfirmed) {
        save(data);
      }
    });
  };

  const save = async (data: z.infer<typeof FormSchema>) => {
    console.log("data", data);

    const dataReq = {
      id: detail?.id,
      firstName: data.name || detail.fullname,
      username: data.username || detail.username,
      email: data.email || detail.email,
      password: data.password || undefined,
      address: "",
      roleId: "EXP-ID",
      phoneNumber: data.phoneNumber || detail.phoneNumber,
      userCompetencyId:
        data.skills || detail.userProfilesAdditional?.userCompetency?.id,
      userExperienceId:
        data.experiences || detail.userProfilesAdditional?.userExperienceId,
      companyName: data.company || detail.userProfilesAdditional?.companyName,
      isAdmin: true,
    };

    // const dataReq = {
    //   id: detail?.id,
    //   firstName: data.name,
    //   username: data.username,
    //   email: data.email,
    //   password: data.password,
    //   address: "",
    //   roleId: "EXP-ID",
    //   phoneNumber: data.phoneNumber,
    //   userCompetencyId: data.skills,
    //   userExperienceId: data.experiences,
    //   companyName: data.company,
    // };

    loading();
    const res = await saveUserInternal(dataReq);
    const resData = res?.data?.data;
    const userProfileId = resData?.id;

    var placementArr: any[] = [];
    placementRows.forEach((row: any) => {
      placementArr.push({
        roleId: Number(row.roleId),
        userLevelId: Number(row.userLevelId),
        userProfileId: userProfileId,
      });
    });

    const dataReq2 = {
      userId: userProfileId,
      placements: placementArr,
    };
    const res2 = await saveUserRolePlacements(dataReq2);
    const resData2 = res2?.data?.data;

    success("/admin/add-experts");
  };

  function success(redirect: string): void {
    MySwal.fire({
      title: '<p class="text-green-600 font-bold">Sukses</p>',
      icon: "success",
      confirmButtonColor: "#3085d6",
      confirmButtonText: '<span class="text-white">OK</span>',
      allowOutsideClick: false,
    }).then((result) => {
      if (result.isConfirmed) {
        router.push(redirect);
      }
    });
  }

  async function getDataAdditional() {
    const resCompetencies = await getListCompetencies();
    setUserCompetencies(resCompetencies?.data?.data);

    const resExperiences = await getListExperiences();
    setUserExperiences(resExperiences?.data?.data);
    console.log("experience", resExperiences?.data?.data);

    const resUserLevels = await AdministrationLevelList();
    const data = resUserLevels?.data?.data;
    var levelsArr: any[] = [];
    data.forEach((levels: any) => {
      levelsArr.push({
        id: levels.id,
        label: levels.name,
        name: levels.name,
        value: String(levels.id),
        levelNumber: levels.levelNumber,
      });
    });
    setUserLevels(levelsArr);
  }

  function successSubmit() {
    MySwal.fire({
      title: "Sukses",
      icon: "success",
      confirmButtonColor: "#3085d6",
      confirmButtonText: "OK",
    }).then((result) => {
      if (result.isConfirmed) {
        router.push("/admin/add-experts");
      }
    });
  }

  const handleSelectionChange = (
    index: number,
    type: "roleId" | "userLevelId",
    value: string
  ) => {
    setPlacementRows((prevRows) =>
      prevRows.map((row) =>
        row.index === index ? { ...row, [type]: value } : row
      )
    );
  };

  const handleRemoveRow = (index: number) => {
    console.log(index);
    console.log(placementRows);
    const newPlacements = placementRows.filter((row) => row.index != index);
    console.log(newPlacements);
    setPlacementRows(newPlacements);
  };

  const handleAddRow = () => {
    if (placementRows.length < 2) {
      setPlacementRows((prevRows) => [
        ...prevRows,
        { index: incrementId, roleId: "", userLevelId: 0 },
      ]);
      setIncrementId((prevId) => prevId + 1);
    }
  };

  return (
    <div>
      <SiteBreadcrumb />

      <Form {...form}>
        {detail !== undefined ? (
          <form
            onSubmit={form.handleSubmit(onSubmit)}
            className="space-y-3 bg-white rounded-sm p-4"
          >
            <p className="fonnt-semibold">Campaign</p>
            <FormField
              control={form.control}
              name="name"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Nama Lengkap</FormLabel>
                  {/* <Input
                    defaultValue={detail?.fullname}
                    placeholder="Masukkan Nama Lengkap"
                    onChange={field.onChange}
                  /> */}
                  <Input
                    {...field}
                    defaultValue={detail?.fullname}
                    placeholder="Masukkan Nama Lengkap"
                  />

                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="username"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Username</FormLabel>
                  {/* <Input
                    type="text"
                    defaultValue={detail?.username}
                    placeholder="Masukkan"
                    onChange={field.onChange}
                  /> */}
                  <Input
                    {...field}
                    type="text"
                    defaultValue={detail?.username}
                    placeholder="Masukkan"
                  />
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="phoneNumber"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>No. HP</FormLabel>
                  {/* <Input
                    type="number"
                    defaultValue={detail?.phoneNumber}
                    placeholder="Masukkan No.Hp"
                    onChange={field.onChange}
                  /> */}
                  <Input
                    {...field}
                    type="number"
                    defaultValue={detail?.phoneNumber}
                    placeholder="Masukkan"
                  />
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="email"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Email</FormLabel>
                  {/* <Input
                    type="email"
                    defaultValue={detail?.email}
                    placeholder="Masukkan email"
                    onChange={field.onChange}
                  /> */}
                  <Input
                    {...field}
                    type="email"
                    defaultValue={detail?.email}
                    placeholder="Masukkan email"
                  />
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="password"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Password (Opsional)</FormLabel>
                  <div className="relative">
                    <Input
                      {...field}
                      type={showPassword ? "text" : "password"}
                      placeholder="Kosongkan jika tidak ingin mengubah password"
                    />
                    <button
                      type="button"
                      onClick={() => setShowPassword(!showPassword)}
                      className="absolute right-3 top-1/2 -translate-y-1/2"
                    >
                      {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
                    </button>
                  </div>
                </FormItem>
              )}
            />
            {/* <FormField
              control={form.control}
              name="password"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Password</FormLabel>
                  <div className="relative">
                    <Input
                      value={field.value}
                      type={showPassword ? "text" : "password"}
                      placeholder="Masukkan Password"
                      onChange={field.onChange}
                    />
                    <button
                      type="button"
                      onClick={() => setShowPassword(!showPassword)}
                      className="absolute right-3 top-1/2 -translate-y-1/2 text-default-500 hover:text-default-700"
                      tabIndex={-1}
                    >
                      {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
                    </button>
                  </div>
                  <FormMessage />
                </FormItem>
              )}
            /> */}
            <FormField
              control={form.control}
              name="skills"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Bidang Keahlian</FormLabel>
                  <Select onValueChange={field.onChange} value={field.value}>
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue
                          placeholder={
                            detail?.userProfilesAdditional?.userCompetency?.name
                              ? detail.userProfilesAdditional.userCompetency
                                  .name
                              : "Pilih Bidang Keahlian"
                          }
                        />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      {userCompetencies?.map((item: any) => (
                        <SelectItem key={item.id} value={String(item.id)}>
                          {item.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="experiences"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Pengalaman</FormLabel>
                  <Select onValueChange={field.onChange} value={field.value}>
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue
                          placeholder={
                            detail &&
                            detail.userProfilesAdditional &&
                            detail.userProfilesAdditional.userExperienceId
                              ? userExperiences?.find(
                                  (item: any) =>
                                    item.id ===
                                    detail.userProfilesAdditional!
                                      .userExperienceId
                                )?.name
                              : "Pilih Pengalaman"
                          }
                        />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      {userExperiences?.map((item: any) => (
                        <SelectItem key={item.id} value={String(item.id)}>
                          {item.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="company"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Nama Institusi/Perusahaan</FormLabel>
                  {/* <Input
                    type="text"
                    value={detail?.userProfilesAdditional?.companyName || ""}
                    placeholder="Nama Institusi/Perusahaan"
                    onChange={field.onChange}
                  /> */}
                  <Input
                    {...field}
                    type="text"
                    defaultValue={
                      detail?.userProfilesAdditional?.companyName || ""
                    }
                    placeholder="Nama Institusi/Perusahaan"
                  />

                  <FormMessage />
                </FormItem>
              )}
            />

            <div className="mt-4">
              <FormLabel>Posisi</FormLabel>
              {placementRows?.map((row: any) => (
                <div key={row.index} className="flex items-center gap-2 my-2">
                  <Select
                    onValueChange={(e) =>
                      handleSelectionChange(row.index, "roleId", e)
                    }
                  >
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue placeholder="Pilih Role" />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      {roleSelection?.map((item: any) => (
                        <SelectItem key={item.id} value={String(item.id)}>
                          {item.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  {/* <Select
                  onValueChange={(e) =>
                    handleSelectionChange(row.index, "userLevelId", e)
                  }
                >
                  <FormControl>
                    <SelectTrigger>
                      <SelectValue placeholder="Pilih User Level" />
                    </SelectTrigger>
                  </FormControl>
                  <SelectContent>
                    {userLevels?.map((item: any) => (
                      <SelectItem key={item.id} value={String(item.id)}>
                        {item.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select> */}
                  <Select
                    onValueChange={(e) =>
                      handleSelectionChange(row.index, "userLevelId", e)
                    }
                  >
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue placeholder="Pilih User Level" />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      <SelectItem value="216">MABES POLRI</SelectItem>
                    </SelectContent>
                  </Select>
                  {placementRows.length > 1 && (
                    <Button
                      type="button"
                      size="md"
                      color="destructive"
                      onClick={() => handleRemoveRow(row.index)}
                    >
                      Hapus
                    </Button>
                  )}
                </div>
              ))}
              <Button
                type="button"
                size="md"
                onClick={handleAddRow}
                disabled={placementRows.length >= 2}
              >
                Tambah
              </Button>
            </div>

            <div className="flex flex-row justify-end gap-2 mt-4 pt-4">
              <Button
                size="md"
                type="button"
                variant="outline"
                color="destructive"
                className="text-xs"
              >
                Cancel
              </Button>
              <Button
                size="md"
                type="submit"
                color="primary"
                className="text-xs"
              >
                Submit
              </Button>
            </div>
          </form>
        ) : (
          ""
        )}
      </Form>
    </div>
  );
}