jaecoo-kelapagading/components/dialog/promo-dialog.tsx

"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);

  // 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}`;
  };

  // FETCH API PROMO BY ID
  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-center 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-center 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>
              </div>
            </>
          ) : (
            <p className="text-center text-gray-600">Data tidak ditemukan</p>
          )}
        </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>
  );
}