"use client";

import { useEffect, useState, useCallback } from "react";
import { useParams, useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Skeleton } from "@/components/ui/skeleton";
import { DataKaryawan, DataAnak } from "@/types";
import { Loader2 } from "lucide-react";
import { editFieldGroups } from "@/lib/utils";
import toast from "react-hot-toast";

const defaultData = (id: string): DataKaryawan => ({
  id,
  name: "",
  email: "",
  nip: "",
  nik: "",
  telephone: "",
  alamat: "",
  agama_id: "",
  tempat_lahir: "",
  tanggal_lahir: "",
  kelurahan_id: "",
  pendidikan_id: "",
  npwp: "",
  jenis_kelamin_id: "",
  mulai_tugas: "",
  pangkat_id: "",
  jabatan_id: "",
  pekerjaan_id: "",
  golongan_id: "",
  divisi_id: "",
  lokasi_kantor_id: "",
  lokasi_kerja_id: "",
  status_id: "",
  nama_pasangan: "",
  tempat_lahir_pasangan: "",
  pekerjaan_id_pasangan: "",
  telephone_pasangan: "",
  nama_ayah: "",
  nama_ibu: "",
  alamat_ayah: "",
  alamat_ibu: "",
});

export default function EditKaryawanPage() {
  const { id } = useParams();
  const router = useRouter();

  const [karyawan, setKaryawan] = useState<DataKaryawan | null>(null);
  const [anak, setAnak] = useState<DataAnak[]>([]);
  const [options, setOptions] = useState<
    Record<string, { value: string; label: string }[]>
  >({});
  const [loading, setLoading] = useState(true);
  const [isSubmitting, setIsSubmitting] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const karyawanRes = await fetch(`/api/data/karyawan/${id}`);
        const optionsRes = await fetch("/api/data/select-options");

        const karyawanJson = await karyawanRes.json();
        const optionsJson = await optionsRes.json();

        if (!karyawanRes.ok) throw new Error(karyawanJson.message);

        setKaryawan(karyawanJson.karyawan);
        setAnak(karyawanJson.anak || []);
        setOptions(optionsJson.data);
      } catch (err) {
        toast.error("Gagal ambil data");
        router.push("/admin/data-karyawan");
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [id]);

  const [karyawanData, setKaryawanData] = useState<DataKaryawan | null>(null);
  const [childrenData, setChildrenData] = useState<DataAnak[]>([]);

  useEffect(() => {
    if (karyawan) {
      setKaryawanData({ ...defaultData(id as string), ...karyawan });
      setChildrenData(anak);
    }
  }, [karyawan, anak, id]);

  const handleChange = useCallback(
    (name: keyof DataKaryawan, value: string) => {
      if (!karyawanData) return;
      setKaryawanData((prev) => ({ ...prev!, [name]: value }));
    },
    [karyawanData]
  );

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!karyawanData) return;
    setIsSubmitting(true);
    try {
      const res = await fetch(`/api/data/karyawan/${id}`, {
        method: "PATCH",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ ...karyawanData, anak: childrenData }),
      });
      if (!res.ok) throw new Error("Gagal update data");
      toast.success("Data berhasil diperbarui");
      router.push("/admin/data-karyawan");
    } catch (err) {
      console.error(err);
      toast.error("Gagal update data");
    } finally {
      setIsSubmitting(false);
    }
  };

  if (loading || !karyawanData) {
    return <Skeleton className="w-full h-full rounded-xl m-10" />;
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4 max-w-3xl mx-auto py-8">
      <h1 className="text-3xl font-bold pb-6">Edit Data Karyawan</h1>

      {editFieldGroups.map(({ title, fields }) => (
        <section
          key={title}
          className="flex flex-col gap-4 border rounded-xl p-6 shadow-sm"
        >
          <h2 className="text-xl font-semibold mb-2">{title}</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {fields.map(({ label, name, type, required }) => (
              <div key={name} className="space-y-2">
                <Label htmlFor={name}>
                  {label}
                  {required && <span className="text-red-500">*</span>}
                </Label>
                {type === "select" ? (
                  <Select
                    value={karyawanData[name]?.toString() || ""}
                    onValueChange={(value) => handleChange(name, value)}
                  >
                    <SelectTrigger className="w-full">
                      <SelectValue placeholder={`Pilih ${label}`} />
                    </SelectTrigger>
                    <SelectContent>
                      {options[name]?.map((option) => (
                        <SelectItem key={option.value} value={option.value}>
                          {option.label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                ) : (
                  <Input
                    id={name}
                    type={type}
                    value={karyawanData[name]?.toString() || ""}
                    onChange={(e) => handleChange(name, e.target.value)}
                    autoComplete="off"
                    required={required}
                  />
                )}
              </div>
            ))}
          </div>
        </section>
      ))}

      {childrenData.length > 0 && (
        <section className="flex flex-col gap-4 border rounded-xl p-6 shadow-sm">
          <h2 className="text-xl font-semibold mb-2">Data Anak</h2>
          {childrenData.map((child, index) => (
            <div
              key={child.id}
              className="grid grid-cols-1 md:grid-cols-2 gap-4 border-b pb-4"
            >
              <div className="space-y-2">
                <Label htmlFor={`child-nama-${index}`}>Nama Anak</Label>
                <Input
                  id={`child-nama-${index}`}
                  value={child.name}
                  onChange={(e) => {
                    const newData = [...childrenData];
                    newData[index].name = e.target.value;
                    setChildrenData(newData);
                  }}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor={`child-jk-${index}`}>Jenis Kelamin</Label>
                <Select
                  value={child.jenis_kelamin_id}
                  onValueChange={(value) => {
                    const newData = [...childrenData];
                    newData[index].jenis_kelamin_id = value;
                    setChildrenData(newData);
                  }}
                >
                  <SelectTrigger className="w-full">
                    <SelectValue placeholder="Pilih Jenis Kelamin" />
                  </SelectTrigger>
                  <SelectContent>
                    {options["jenis_kelamin_id"]?.map((option) => (
                      <SelectItem key={option.value} value={option.value}>
                        {option.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>
          ))}
        </section>
      )}

      <div className="flex justify-end gap-4 pt-6">
        <Button
          type="button"
          variant="outline"
          onClick={() => router.push("/admin/data-karyawan")}
          disabled={isSubmitting}
        >
          Batal
        </Button>
        <Button
          type="submit"
          disabled={isSubmitting}
          className="min-w-24 bg-[#17876E]"
        >
          {isSubmitting ? (
            <span className="flex items-center gap-2">
              <Loader2 className="animate-spin" /> Menyimpan...
            </span>
          ) : (
            "Simpan"
          )}
        </Button>
      </div>
    </form>
  );
}