"use client";

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import Image from "next/image";
import { CheckCircle } from "lucide-react";
import { useEffect, useState } from "react";
import { getGaleryFileData } from "@/service/galery";

export function DialogDetailGaleri({ open, onClose, data }: any) {
  const [images, setImages] = useState<any[]>([]);

  const fetchImages = async () => {
    try {
      const res = await getGaleryFileData(data.id);
      const allImages = res?.data?.data ?? [];

      const filteredImages = allImages.filter(
        (img: any) => img.gallery_id === data.id
      );

      setImages(filteredImages);
    } catch (e) {
      console.error("Error fetch files:", e);
    }
  };

  useEffect(() => {
    if (open && data?.id) {
      fetchImages();
    }
  }, [open, data]);

  const openFile = (url: string) => {
    window.open(url, "_blank");
  };

  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent className="max-w-3xl rounded-2xl p-0 overflow-hidden">
        {/* Header */}
        <div className="bg-[#1F6779] text-white px-6 py-4">
          <DialogTitle className="text-white">Detail Galeri</DialogTitle>
        </div>

        <div className="px-6 py-6 space-y-6">
          {/* Images List */}
          <div>
            <p className="font-medium mb-2">Daftar Gambar</p>

            <div className="grid grid-cols-3 gap-4">
              {images.length === 0 && (
                <p className="text-gray-500 col-span-3 text-center">
                  Tidak ada gambar.
                </p>
              )}

              {images.map((img) => (
                <div
                  key={img.id}
                  className="relative h-32 w-full cursor-pointer group"
                  onClick={() => openFile(img.image_url)}
                >
                  <Image
                    src={img.image_url}
                    alt={img.title}
                    fill
                    className="object-cover rounded-lg"
                  />

                  <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 text-white flex items-center justify-center text-sm transition">
                    Lihat File
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Title */}
          <h2 className="text-2xl font-semibold text-[#1F6779]">
            {data.title}
          </h2>

          {/* Deskripsi */}
          <div>
            <p className="font-medium text-sm text-gray-700">Deskripsi</p>
            <p className="text-gray-600">{data.description}</p>
          </div>

          {/* Tanggal Upload */}
          <div>
            <p className="font-medium text-sm text-gray-700">Tanggal Upload</p>
            <p className="text-gray-600">
              {new Date(data.created_at).toLocaleDateString("id-ID")}
            </p>
          </div>

          {/* Timeline */}
          <div>
            <p className="font-medium text-sm text-gray-700 mb-2">
              Status Timeline
            </p>

            <div className="flex flex-col gap-3">
              <div className="flex items-start gap-3">
                <CheckCircle className="text-green-600" />
                <div>
                  <p className="font-semibold">Upload Berhasil</p>
                  <p className="text-gray-500 text-sm">
                    {new Date(data.created_at).toLocaleString("id-ID")}
                  </p>
                </div>
              </div>

              {data.approved_at && (
                <div className="flex items-start gap-3">
                  <CheckCircle className="text-green-600" />
                  <div>
                    <p className="font-semibold">Disetujui oleh Approver</p>
                    <p className="text-gray-500 text-sm">
                      {new Date(data.approved_at).toLocaleString("id-ID")}
                    </p>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>

        <DialogFooter className="px-6 pb-6">
          <button
            onClick={onClose}
            className="bg-gray-300 text-gray-700 px-6 py-2 rounded-lg"
          >
            Tutup
          </button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}