import { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import SidebarAdmin from "../Layout/SidebarAdmin";
import NavbarAdmin from "../Layout/NavbarAdmin";
import "froala-editor/js/plugins.pkgd.min.js";
import "froala-editor/css/froala_editor.pkgd.min.css";
import "froala-editor/css/froala_style.min.css";
import FroalaEditor from "react-froala-wysiwyg";
import axios from "axios";

type LowonganDetail = {
  id: number;
  posisi: string;
  kelompok_peminatan: string;
  lokasi: string;
  paid: "paid" | "unpaid" | string;
  durasi_awal: string;
  durasi_akhir: string;
  jobdesk: string;
  image?: string;
};

const EditLowongan = () => {
  const { id } = useParams();
  const navigate = useNavigate();

  const [posisi, setPosisi] = useState("");
  const [kelompok, setKelompok] = useState("");
  const [kelompokOptions, setKelompokOptions] = useState<string[]>([]);
  const [lokasi, setLokasi] = useState("");
  const [paid, setPaid] = useState("paid");
  const [durasiAwal, setDurasiAwal] = useState("");
  const [durasiAkhir, setDurasiAkhir] = useState("");
  const [jobdesk, setJobdesk] = useState<string>("");
  const [image, setImage] = useState<File | null>(null);

  const [isCustomKelompok, setIsCustomKelompok] = useState(false);
  const [customKelompok, setCustomKelompok] = useState("");

  const [isLoading, setIsLoading] = useState(true);

  const [froalaReady, setFroalaReady] = useState(false);

  const token = document.cookie
    .split("; ")
    .find((row) => row.startsWith("token="))
    ?.split("=")[1];

  useEffect(() => {
    axios
      .get(
        `${
          import.meta.env.VITE_API_BASE_URL
        }/lowongan-magang-api/get/kelompok-all`
      )
      .then((res) => {
        const data = res.data.data || [];
        setKelompokOptions(data);
      })
      .catch((err) => {
        console.error("Gagal memuat kelompok peminatan:", err);
        setKelompokOptions([]);
      });
  }, []);

  useEffect(() => {
    const fetchDetail = async () => {
      if (!id) {
        alert("ID lowongan tidak ditemukan.");
        navigate("/lowongan-list");
        return;
      }

      if (!token) {
        alert("Token tidak ditemukan.");
        navigate("/humic-20242025-2");
        return;
      }

      try {
        setIsLoading(true);
        setFroalaReady(false);

        const res = await axios.get(
          `${import.meta.env.VITE_API_BASE_URL}/lowongan-magang-api/get/id/${id}`,
          {
            headers: {
              Authorization: `Bearer ${token}`,
            },
          }
        );

        const data: LowonganDetail = res.data.data;

        setPosisi(data.posisi ?? "");
        setLokasi(data.lokasi ?? "");
        setPaid((data.paid ?? "paid") as string);
        setDurasiAwal((data.durasi_awal ?? "").slice(0, 10));
        setDurasiAkhir((data.durasi_akhir ?? "").slice(0, 10));
        setJobdesk(String(data.jobdesk ?? ""));

        const kp = data.kelompok_peminatan ?? "";
        setKelompok(kp);
        setCustomKelompok(kp);
      } catch (err) {
        console.error("Gagal memuat detail lowongan:", err);
        alert("Gagal memuat detail lowongan.");
        navigate("/lowongan-list");
      } finally {
        setIsLoading(false);
      }
    };

    fetchDetail();
  }, [id]);

  useEffect(() => {
    if (!isLoading) {
      const t = setTimeout(() => setFroalaReady(true), 0);
      return () => clearTimeout(t);
    }
  }, [isLoading]);

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

    if (kelompokOptions.length === 0) {
      setIsCustomKelompok(true);
      setCustomKelompok(kelompok);
      return;
    }

    const exists = kelompokOptions.includes(kelompok);
    if (exists) {
      setIsCustomKelompok(false);
      setCustomKelompok("");
    } else {
      setIsCustomKelompok(true);
      setCustomKelompok(kelompok);
    }
  }, [kelompokOptions, kelompok]);

  const handleSubmit = async () => {
    if (!id) {
      alert("ID lowongan tidak ditemukan.");
      return;
    }

    if (!token) {
      alert("Token tidak ditemukan.");
      return;
    }

    const finalKelompok =
      isCustomKelompok || kelompokOptions.length === 0
        ? customKelompok
        : kelompok;

    if (!finalKelompok.trim()) {
      alert("Kategori internship wajib diisi.");
      return;
    }

    const formData = new FormData();
    formData.append("posisi", posisi);
    formData.append("kelompok_peminatan", finalKelompok);
    formData.append("lokasi", lokasi);
    formData.append("jobdesk", jobdesk);
    formData.append("durasi_awal", durasiAwal);
    formData.append("durasi_akhir", durasiAkhir);
    formData.append("paid", paid);

    if (image) formData.append("image", image);

    try {
      await axios.patch(
        `${import.meta.env.VITE_API_BASE_URL}/lowongan-magang-api/update/${id}`,
        formData,
        {
          headers: {
            Authorization: `Bearer ${token}`,
            "Content-Type": "multipart/form-data",
          },
        }
      );

      alert("Lowongan berhasil diperbarui!");
      navigate("/lowongan-list");
    } catch (error) {
      console.error("Error updating internship:", error);
      alert("Gagal memperbarui lowongan.");
    }
  };

  return (
    <div className="min-h-screen w-full overflow-hidden">
      <NavbarAdmin />
      <div className="flex flex-row">
        <SidebarAdmin />
        <div className="p-10 bg-white flex-col flex-wrap w-full">
          <div className="flex justify-between items-center mb-8">
            <h2 className="text-xl font-semibold">Edit Lowongan</h2>
            <button
              className="bg-[#1F4A92] hover:bg-[#677c9f] cursor-pointer text-white px-6 py-2 rounded-md font-medium"
              onClick={handleSubmit}
              disabled={isLoading}
              title={isLoading ? "Memuat data..." : "Submit"}
            >
              Submit
            </button>
          </div>

          <form className="flex flex-col gap-6 max-w-full">
            {/* Internship Fields Only */}
            <div className="grid grid-cols-2 gap-6">
              <div className="flex flex-col gap-2">
                <label className="text-sm font-medium">
                  Kategori Internship
                </label>

                {kelompokOptions.length > 0 && (
                  <select
                    className="border border-gray-300 rounded-lg p-3"
                    value={isCustomKelompok ? "lainnya" : kelompok}
                    onChange={(e) => {
                      const value = e.target.value;
                      if (value === "lainnya") {
                        setIsCustomKelompok(true);
                        setCustomKelompok("");
                      } else {
                        setKelompok(value);
                        setIsCustomKelompok(false);
                        setCustomKelompok("");
                      }
                    }}
                  >
                    {kelompokOptions.map((option) => (
                      <option key={option} value={option}>
                        {option}
                      </option>
                    ))}
                    <option value="lainnya">Lainnya (masukan manual)</option>
                  </select>
                )}

                {(isCustomKelompok || kelompokOptions.length === 0) && (
                  <input
                    type="text"
                    className="border border-gray-300 rounded-lg p-3 mt-2"
                    placeholder="Tulis kategori internship baru"
                    value={customKelompok}
                    onChange={(e) => setCustomKelompok(e.target.value)}
                  />
                )}
              </div>

              <div className="flex flex-col gap-2">
                <label className="text-sm font-medium">Paid</label>
                <select
                  className="border border-gray-300 rounded-lg p-3"
                  value={paid}
                  onChange={(e) => setPaid(e.target.value)}
                >
                  <option value="paid">Paid</option>
                  <option value="unpaid">Unpaid</option>
                </select>
              </div>

              <div className="flex flex-col gap-2">
                <label className="text-sm font-medium">Lokasi</label>
                <input
                  type="text"
                  className="border border-gray-300 rounded-lg p-3"
                  value={lokasi}
                  onChange={(e) => setLokasi(e.target.value)}
                  placeholder="Onsite,Jakarta"
                />
              </div>

              <div className="flex flex-col gap-2">
                <label className="text-sm font-medium">Nama Internship</label>
                <input
                  type="text"
                  className="border border-gray-300 rounded-lg p-3"
                  value={posisi}
                  onChange={(e) => setPosisi(e.target.value)}
                  placeholder="UI/UX Designer"
                />
              </div>

              <div className="flex flex-col gap-2">
                <label className="text-sm font-medium">
                  Tanggal Mulai Oprec
                </label>
                <input
                  type="date"
                  className="border border-gray-300 rounded-lg p-3"
                  value={durasiAwal}
                  onChange={(e) => setDurasiAwal(e.target.value)}
                />
              </div>

              <div className="flex flex-col gap-2">
                <label className="text-sm font-medium">
                  Tanggal Akhir Oprec
                </label>
                <input
                  type="date"
                  className="border border-gray-300 rounded-lg p-3"
                  value={durasiAkhir}
                  onChange={(e) => setDurasiAkhir(e.target.value)}
                />
              </div>

              <div className="flex flex-col gap-2 col-span-2">
                <label className="text-sm font-medium">Thumbnail / Image</label>
                <input
                  type="file"
                  accept="image/*"
                  onChange={(e) =>
                    setImage(e.target.files ? e.target.files[0] : null)
                  }
                  className="border border-gray-300 rounded-lg p-3"
                />
              </div>
            </div>

            {/* Isi Konten */}
            <div className="flex flex-col gap-2">
              <label className="text-sm font-medium">Isi Konten</label>

              {froalaReady ? (
                <FroalaEditor
                  key={id}
                  tag="textarea"
                  model={jobdesk || ""}
                  onModelChange={(model: any) => setJobdesk(model || "")}
                  config={{
                    placeholderText: "Tulis deskripsi lowongan...",
                    charCounterCount: true,
                    toolbarSticky: true,
                    heightMin: 200,
                  }}
                />
              ) : (
                <div className="border border-gray-300 rounded-lg p-3 h-[200px]" />
              )}
            </div>
          </form>
        </div>
      </div>
    </div>
  );
};

export default EditLowongan;