"use client";

import { useEffect, useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { CheckCircle2, FileText } from "lucide-react";
import { getPromotionById } from "@/service/promotion";

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

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

  // 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);
  };
  useEffect(() => {
    if (!promoId || !open) return;

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

        // Mapping ke format dialog
        const mapped = {
          title: res?.data?.data?.title,
          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 {
        setLoading(false);
      }
    }

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

  if (!open) return null;

  return (
    <>
      <Dialog open={open} onOpenChange={onOpenChange}>
        <DialogContent className="p-0 max-w-xl overflow-hidden rounded-2xl">
          {/* 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 Promo
              </DialogTitle>
            </DialogHeader>

            {/* STATUS BADGE */}
            {promo && (
              <div className="mt-2 bg-white/20 text-white px-4 py-[3px] rounded-full text-xs inline-flex items-center gap-2">
                <span className="w-2 h-2 rounded-full bg-lime-300"></span>
                {promo.status}
              </div>
            )}
          </div>

          {/* BODY */}
          <div className="p-6">
            {loading ? (
              <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 className="mt-4">
                    <p className="text-gray-600 mb-3 font-medium">
                      Status Timeline
                    </p>

                    <div className="space-y-4">
                      {promo.timeline.map((item: any, idx: number) => (
                        <div key={idx} className="flex gap-3 items-start">
                          <CheckCircle2
                            size={20}
                            className="text-green-600 shrink-0"
                          />
                          <div>
                            <p className="font-medium">{item.label}</p>
                            <p className="text-gray-600 text-sm">
                              {item.date} • {item.time} WIB
                            </p>
                          </div>
                        </div>
                      ))}
                    </div>
                    <div className="border rounded-lg px-3 py-3 mt-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>
              </>
            ) : (
              <p className="text-center text-gray-600">Data tidak ditemukan</p>
            )}
          </div>
          {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>
          )}
          {/* 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>
      )}
    </>
  );
}