"use client";

import { useEffect, useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Check,
  CheckCheck,
  CheckCircle2,
  Clock,
  FileText,
  X,
} from "lucide-react";
import {
  approvePromotion,
  getPromotionById,
  rejectPromotion,
} from "@/service/promotion";
import { convertDateFormat } from "@/utils/global";
import { Button } from "../ui/button";
import { useRouter } from "next/navigation";
import Cookies from "js-cookie";
import { error, loading, success } from "@/config/swal";
import withReactContent from "sweetalert2-react-content";
import Swal from "sweetalert2";
import promo from "../landing-page/promo";

type PromoDetailDialogProps = {
  promoId: number | null;
  open: boolean;
  onOpenChange: (open: boolean) => void;
};

export default function PromoDetailDialog({
  promoId,
  open,
  onOpenChange,
}: PromoDetailDialogProps) {
  const [loadingData, setLoadingData] = useState(false);
  const [promo, setPromo] = useState<any>(null);
  const [openApproverHistory, setOpenApproverHistory] = useState(false);

  const [userLevelId, setUserLevelId] = useState<string | null>(null);

  const router = useRouter();

  // 🔹 Ambil userlevelId dari cookies
  useEffect(() => {
    const ulne = Cookies.get("ulne"); // contoh: "3"
    setUserLevelId(ulne ?? null);
  }, []);

  // FORMAT TANGGAL → DD-MM-YYYY
  const formatDate = (dateStr: string) => {
    const d = new Date(dateStr);
    const day = String(d.getDate()).padStart(2, "0");
    const month = String(d.getMonth() + 1).padStart(2, "0");
    const year = d.getFullYear();
    return `${day}-${month}-${year}`;
  };

  const handleOpenApproverHistory = () => {
    setOpenApproverHistory(true);
  };

  const handleRejectPromotion = async (id: number) => {
    const MySwal = withReactContent(Swal);
    const { value: message } = await MySwal.fire({
      title: "Tolak Promotion",
      input: "textarea",
      inputLabel: "Alasan penolakan (opsional)",
      inputPlaceholder: "Masukkan alasan penolakan...",
      inputAttributes: {
        "aria-label": "Masukkan alasan penolakan",
      },
      showCancelButton: true,
      confirmButtonText: "Tolak",
      cancelButtonText: "Batal",
      confirmButtonColor: "#dc2626",
    });

    if (message === undefined) {
      return; // User cancelled
    }

    loading();
    const res = await rejectPromotion(id, message || undefined);

    if (res?.error) {
      error(res.message || "Gagal menolak promotion");
      close();
      return;
    }

    close();
    success("Promotion berhasil ditolak");
    // initState(); // refresh table
  };

  const handleApprovePromotion = async (promoId: number) => {
    loading();
    const res = await approvePromotion(promoId);

    if (res?.error) {
      error(res.message || "Gagal menyetujui promotion");
      close();
      return;
    }

    close();
    success("Promotion berhasil disetujui");
    // fetchData(); // refresh table
  };

  useEffect(() => {
    if (!promoId || !open) return;

    async function fetchData() {
      try {
        setLoadingData(true);
        const res = await getPromotionById(promoId);

        // Mapping ke format dialog
        const mapped = {
          id: res?.data?.data?.id,
          title: res?.data?.data?.title,
          status_id: res?.data?.data?.status_id,
          created_at: res?.data?.data?.created_at,
          updated_at: res?.data?.data?.updated_at,
          fileSize: "Tidak diketahui",
          uploadDate: formatDate(res?.data?.data?.created_at),
          status: res?.data?.data?.is_active ? "Aktif" : "Nonaktif",
          timeline: [
            {
              label: "Dibuat",
              date: formatDate(res?.data?.data?.created_at),
              time: new Date(res?.data?.data?.created_at).toLocaleTimeString(
                "id-ID",
                { hour: "2-digit", minute: "2-digit" },
              ),
            },
            {
              label: "Diupdate",
              date: formatDate(res?.data?.data?.updated_at),
              time: new Date(res?.data?.data?.updated_at).toLocaleTimeString(
                "id-ID",
                { hour: "2-digit", minute: "2-digit" },
              ),
            },
          ],
        };

        setPromo(mapped);
      } catch (err) {
        console.error("ERROR FETCH PROMO:", err);
      } finally {
        setLoadingData(false);
      }
    }

    fetchData();
  }, [promoId, open]);

  const [openCommentModal, setOpenCommentModal] = useState(false);
  const [commentValue, setCommentValue] = useState("");
  const [openViewDialog, setOpenViewDialog] = useState(false);

  if (!open) return null;

  const handleSubmitComment = async () => {
    // await api.post("/banner/comment", {
    //   bannerId: promo.id,
    //   comment: commentValue,
    // });

    setOpenCommentModal(false);
  };

  return (
    <>
      <Dialog open={open} onOpenChange={onOpenChange}>
        <DialogContent className="p-0 max-w-lg overflow-hidden">
          {/* HEADER */}
          <div className="bg-gradient-to-r from-[#0f6c75] to-[#145f66] text-white px-6 py-5 relative">
            <DialogHeader>
              <DialogTitle className="text-white text-xl font-semibold">
                Detail Promoaa
              </DialogTitle>
            </DialogHeader>

            <div className="flex items-center gap-2 mt-3">
              <span
                className={`text-xs font-medium px-3 py-1 rounded-full ${
                  promo?.status_id === 1
                    ? "bg-yellow-100 text-yellow-800"
                    : promo?.status_id === 2
                      ? "bg-green-100 text-green-800"
                      : promo?.status_id === 3
                        ? "bg-red-100 text-red-800"
                        : "bg-gray-100 text-gray-800"
                }`}
              >
                {promo?.status_id === 1
                  ? "Menunggu"
                  : promo?.status_id === 2
                    ? "Disetujui"
                    : promo?.status_id === 3
                      ? "Ditolak"
                      : "Tidak Diketahui"}
              </span>

              <span className="bg-white text-[#0F6C75] text-xs font-medium px-3 py-1 rounded-full">
                Promo
              </span>

              {/* <span className="bg-white/20 text-white text-xs px-2 py-[2px] rounded-full">
                {promo.position}
              </span> */}
            </div>
          </div>

          {/* BODY */}
          <div className="p-6">
            {loadingData ? (
              <p className="text-Start text-gray-600">Memuat data...</p>
            ) : promo ? (
              <>
                {/* <div className="flex justify-center mb-4">
                  <div className="bg-[#E8F1F6] p-4 rounded-xl">
                    <FileText size={60} className="text-[#0f6c75]" />
                  </div>
                </div> */}

                <h2 className="text-xl font-semibold text-Start mb-6">
                  {promo.title}
                </h2>

                <div className="space-y-4 text-sm">
                  <div>
                    <p className="text-gray-600">Ukuran File</p>
                    <p className="font-medium">{promo.fileSize}</p>
                  </div>

                  <div>
                    <p className="text-gray-600">Tanggal Upload</p>
                    <p className="font-medium">{promo.uploadDate}</p>
                  </div>

                  {/* TIMELINE */}
                  <div>
                    <h4 className="text-sm font-semibold text-gray-700 mb-3">
                      Status Timeline
                    </h4>

                    <div className="space-y-4">
                      <div className="flex gap-3">
                        <div className="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center">
                          <Check className="w-4 h-4 text-green-600" />
                        </div>
                        <div>
                          <p className="font-medium text-gray-800">
                            Diupload oleh Operator
                          </p>
                          <p className="text-sm text-gray-500">
                            {convertDateFormat(promo?.created_at)} WIB
                          </p>
                        </div>
                      </div>

                      <div className="flex gap-3">
                        <div
                          className={`w-6 h-6 rounded-full flex items-center justify-center ${
                            promo?.status_id === 1
                              ? "bg-yellow-100"
                              : promo?.status_id === 2
                                ? "bg-green-100"
                                : "bg-red-100"
                          }`}
                        >
                          {promo?.status_id === 1 ? (
                            <Clock className="w-4 h-4 text-yellow-700" />
                          ) : promo?.status_id === 2 ? (
                            <Check className="w-4 h-4 text-green-600" />
                          ) : (
                            <X className="w-4 h-4 text-red-700" />
                          )}
                        </div>

                        <div>
                          <p className="font-medium text-gray-800">
                            {promo?.status_id === 1
                              ? "Menunggu disetujui oleh Approver"
                              : promo?.status_id === 2
                                ? "Disetujui oleh Approver"
                                : "Ditolak oleh Approver"}
                          </p>

                          <p className="text-sm text-gray-500">
                            {convertDateFormat(promo?.updated_at)} WIB
                          </p>
                        </div>
                      </div>

                      <div className="border rounded-lg px-3 py-3">
                        <p>Comment : </p>
                        <div className="flex flex-row justify-between">
                          <button
                            onClick={handleOpenApproverHistory}
                            className="text-sm text-blue-600 hover:underline mt-2"
                          >
                            View Approver History
                          </button>
                          <p>Jaecoo - Approver | 10/11/2026</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </>
            ) : (
              <p className="text-center text-gray-600">Data tidak ditemukan</p>
            )}
          </div>
          {userLevelId !== "2" && promo && (
            <div className="flex justify-between items-center gap-3 px-6 py-4 border-t bg-[#F2F7FA]">
              {promo.status_id === 1 ? (
                <>
                  <Button
                    variant="secondary"
                    className="bg-blue-200 hover:bg-blue-400"
                    onClick={(e) => {
                      e.stopPropagation();
                      setOpenCommentModal(true);
                    }}
                  >
                    Beri Tanggapan
                  </Button>

                  <Button
                    className=" w-[150]"
                    variant="destructive"
                    onClick={(e) => {
                      e.stopPropagation();
                      handleRejectPromotion(promo.id);
                    }}
                  >
                    Reject
                  </Button>

                  {userLevelId === "1" && (
                    <Button
                      // variant="ghost"
                      size="sm"
                      className="bg-green-600 hover:bg-green-700 text-white w-[150]"
                      onClick={(e) => {
                        e.stopPropagation();
                        handleApprovePromotion(promo.id);
                      }}
                    >
                      <CheckCheck className="w-4 h-4 mr-1" />
                      Approve
                    </Button>
                  )}
                </>
              ) : (
                <Button
                  variant="secondary"
                  className="mx-auto"
                  onClick={(e) => {
                    e.stopPropagation();
                    setOpenViewDialog(false);
                  }}
                >
                  Tutup
                </Button>
              )}
            </div>
          )}
          {openApproverHistory && (
            <div
              className=" flex items-center justify-center bg-black/50 p-4"
              onClick={() => setOpenApproverHistory(false)}
            >
              <div
                className="bg-white rounded-2xl shadow-2xl max-w-3xl w-full overflow-hidden"
                onClick={(e) => e.stopPropagation()}
              >
                {/* HEADER */}
                <div className="bg-gradient-to-br from-[#1F6779] to-[#0F6C75] text-white px-6 py-5 relative">
                  <button
                    onClick={() => setOpenApproverHistory(false)}
                    className="absolute top-4 right-4 text-white/80 hover:text-white text-xl"
                  >
                    ✕
                  </button>

                  <h2 className="text-lg font-semibold">Approver History</h2>

                  <div className="flex items-center gap-2 mt-3">
                    <span className="bg-yellow-100 text-yellow-800 text-xs font-medium px-3 py-1 rounded-full">
                      Menunggu
                    </span>
                    <span className="bg-white text-[#0F6C75] text-xs font-medium px-3 py-1 rounded-full">
                      Banner
                    </span>
                    <span className="bg-white/20 text-white text-xs px-2 py-[2px] rounded-full">
                      1
                    </span>
                  </div>
                </div>

                {/* BODY */}
                <div className="p-6 grid grid-cols-[1fr_auto_1fr] gap-6 items-start">
                  {/* LEFT TIMELINE */}
                  <div className="relative space-y-6">
                    {/* Upload */}
                    <div className="flex flex-col items-center">
                      <span className="bg-[#C7DDE4] text-[#0F6C75] text-xs px-4 py-1 rounded-full">
                        Upload
                      </span>
                      <div className="w-px h-6 bg-gray-300" />
                    </div>

                    {/* Diterima */}
                    <div className="relative bg-[#1F6779] text-white rounded-xl p-4">
                      <h4 className="font-semibold text-sm mb-2">Diterima</h4>
                      <span className="inline-block bg-[#E3EFF4] text-[#0F6C75] text-xs px-3 py-1 rounded-full">
                        Direview oleh: approver-jaecoo1
                      </span>
                    </div>

                    <div className="w-px h-6 bg-gray-300 mx-auto" />

                    {/* Pending */}
                    <div className="relative bg-[#B36A00] text-white rounded-xl p-4">
                      <h4 className="font-semibold text-sm mb-2">Pending</h4>
                      <span className="inline-block bg-[#FFF6CC] text-[#7A4A00] text-xs px-3 py-1 rounded-full">
                        Direview oleh: approver-jaecoo1
                      </span>
                    </div>
                  </div>

                  {/* ARROW */}
                  <div className="flex flex-col gap-20 text-gray-500 font-bold">
                    <span>&gt;</span>
                    <span>&gt;</span>
                  </div>

                  {/* RIGHT NOTES */}
                  <div className="space-y-14">
                    <div>
                      <div className="bg-[#C7DDE4] text-sm px-4 py-2 rounded-lg">
                        Catatan:
                      </div>
                    </div>

                    <div>
                      <div className="bg-[#FFF9C4] text-sm px-4 py-2 rounded-lg">
                        Catatan:
                      </div>
                    </div>
                  </div>
                </div>

                {/* FOOTER */}
                <div className="border-t bg-[#F2F7FA] text-center py-3">
                  <button
                    onClick={() => setOpenApproverHistory(false)}
                    className="text-[#0F6C75] font-medium hover:underline"
                  >
                    Tutup
                  </button>
                </div>
              </div>
            </div>
          )}
          {/* FOOTER
          <div className="bg-[#E3EFF4] text-center py-3">
            <button
              onClick={() => onOpenChange(false)}
              className="text-[#0F6C75] font-medium hover:underline w-full"
            >
              Tutup
            </button>
          </div> */}
        </DialogContent>
      </Dialog>
      {openApproverHistory && (
        <div
          className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 p-4"
          onClick={() => setOpenApproverHistory(false)}
        >
          <div
            className="bg-white rounded-2xl shadow-2xl max-w-3xl w-full overflow-hidden"
            onClick={(e) => e.stopPropagation()}
          >
            {/* HEADER */}
            <div className="bg-gradient-to-br from-[#1F6779] to-[#0F6C75] text-white px-6 py-5 relative">
              <button
                onClick={() => setOpenApproverHistory(false)}
                className="absolute top-4 right-4 text-white/80 hover:text-white text-xl"
              >
                ✕
              </button>

              <h2 className="text-lg font-semibold">Approver History</h2>

              <div className="flex items-center gap-2 mt-3">
                <span className="bg-yellow-100 text-yellow-800 text-xs font-medium px-3 py-1 rounded-full">
                  Menunggu
                </span>
                <span className="bg-white text-[#0F6C75] text-xs font-medium px-3 py-1 rounded-full">
                  Banner
                </span>
                <span className="bg-white/20 text-white text-xs px-2 py-[2px] rounded-full">
                  1
                </span>
              </div>
            </div>

            {/* BODY */}
            <div className="p-6 grid grid-cols-[1fr_auto_1fr] gap-6 items-start">
              {/* LEFT TIMELINE */}
              <div className="relative space-y-6">
                {/* Upload */}
                <div className="flex flex-col items-center">
                  <span className="bg-[#C7DDE4] text-[#0F6C75] text-xs px-4 py-1 rounded-full">
                    Upload
                  </span>
                  <div className="w-px h-6 bg-gray-300" />
                </div>

                {/* Diterima */}
                <div className="relative bg-[#1F6779] text-white rounded-xl p-4">
                  <h4 className="font-semibold text-sm mb-2">Diterima</h4>
                  <span className="inline-block bg-[#E3EFF4] text-[#0F6C75] text-xs px-3 py-1 rounded-full">
                    Direview oleh: approver-jaecoo1
                  </span>
                </div>

                <div className="w-px h-6 bg-gray-300 mx-auto" />

                {/* Pending */}
                <div className="relative bg-[#B36A00] text-white rounded-xl p-4">
                  <h4 className="font-semibold text-sm mb-2">Pending</h4>
                  <span className="inline-block bg-[#FFF6CC] text-[#7A4A00] text-xs px-3 py-1 rounded-full">
                    Direview oleh: approver-jaecoo1
                  </span>
                </div>
              </div>

              {/* ARROW */}
              <div className="flex flex-col gap-20 text-gray-500 font-bold">
                <span>&gt;</span>
                <span>&gt;</span>
              </div>

              {/* RIGHT NOTES */}
              <div className="space-y-14">
                <div>
                  <div className="bg-[#C7DDE4] text-sm px-4 py-2 rounded-lg">
                    Catatan:
                  </div>
                </div>

                <div>
                  <div className="bg-[#FFF9C4] text-sm px-4 py-2 rounded-lg">
                    Catatan:
                  </div>
                </div>
              </div>
            </div>

            {/* FOOTER */}
            <div className="border-t bg-[#F2F7FA] text-center py-3">
              <button
                onClick={() => setOpenApproverHistory(false)}
                className="text-[#0F6C75] font-medium hover:underline"
              >
                Tutup
              </button>
            </div>
          </div>
        </div>
      )}
      {openCommentModal && promo && (
        <div
          className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 p-4"
          onClick={() => setOpenCommentModal(false)}
        >
          <div
            className="bg-white rounded-2xl shadow-2xl max-w-lg w-full overflow-hidden"
            onClick={(e) => e.stopPropagation()}
          >
            {/* HEADER */}
            <div className="bg-gradient-to-br from-[#1F6779] to-[#0F6C75] text-white px-6 py-5 relative">
              <button
                onClick={() => setOpenCommentModal(false)}
                className="absolute top-4 right-4 text-white/80 hover:text-white text-xl"
              >
                ✕
              </button>

              <h2 className="text-lg font-semibold">Beri Tanggapan</h2>

              {/* Badge */}
              <div className="flex items-center gap-2 mt-3">
                <span className="bg-yellow-100 text-yellow-800 text-xs font-medium px-3 py-1 rounded-full">
                  Menunggu
                </span>

                <span className="bg-white text-[#0F6C75] text-xs font-medium px-3 py-1 rounded-full">
                  Banner
                </span>

                <span className="bg-white/20 text-white text-xs px-2 py-[2px] rounded-full">
                  {promo.position}
                </span>
              </div>
            </div>

            {/* BODY */}
            <div className="p-6 space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-500 mb-2">
                  Comment
                </label>
                <textarea
                  value={commentValue}
                  onChange={(e) => setCommentValue(e.target.value)}
                  placeholder="Masukkan komentar"
                  className="w-full min-h-[100px] border rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-[#0F6C75]"
                />
              </div>
            </div>

            {/* FOOTER */}
            <div className="flex justify-between gap-3 px-6 py-4 border-t bg-[#F2F7FA]">
              <button
                onClick={() => setOpenCommentModal(false)}
                className="flex-1 py-2 rounded-xl bg-blue-100 hover:bg-blue-200 text-gray-700 font-medium"
              >
                Batal
              </button>

              <button
                onClick={handleSubmitComment}
                className="flex-1 py-2 rounded-xl bg-[#1F6779] hover:bg-[#0F6C75] text-white font-medium"
              >
                Submit
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}