"use client";

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Upload } from "lucide-react";
import { useState, useRef } from "react";
import { createGalery } from "@/service/galery";

export function GaleriDialog({ open, onClose, onSubmit }: any) {
  const [title, setTitle] = useState("");
  const [desc, setDesc] = useState("");
  const [file, setFile] = useState<File | null>(null);

  const fileRef = useRef<HTMLInputElement>(null);

  const handleSubmit = async () => {
    if (!file) {
      alert("File wajib diupload!");
      return;
    }

    const form = new FormData();
    form.append("gallery_id", "1"); // nilai default (bisa dinamis)
    form.append("title", title);
    form.append("desc", desc);
    form.append("file", file);

    try {
      const res = await createGalery(form);

      console.log("Upload Success:", res?.data);

      onSubmit(); // tutup dialog
    } catch (error: any) {
      console.error("Upload failed:", error);
      alert("Gagal mengupload file");
    }
  };

  const handleFileChange = (e: any) => {
    const selected = e.target.files[0];
    if (selected) setFile(selected);
  };

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

        <div className="px-6 py-6 space-y-6">
          {/* Judul */}
          <div>
            <label className="font-medium text-sm">
              Judul Galeri <span className="text-red-500">*</span>
            </label>
            <Input
              placeholder="Masukkan judul galeri"
              className="mt-1 h-12"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
            />
          </div>

          {/* Deskripsi */}
          <div>
            <label className="font-medium text-sm">
              Deskripsi Galeri <span className="text-red-500">*</span>
            </label>
            <Input
              placeholder="Masukkan deskripsi galeri"
              className="mt-1 h-12"
              value={desc}
              onChange={(e) => setDesc(e.target.value)}
            />
          </div>

          {/* Upload */}
          <div>
            <label className="font-medium text-sm">
              Upload File <span className="text-red-500">*</span>
            </label>

            <div
              className="border-2 border-dashed rounded-xl flex flex-col items-center justify-center py-10 cursor-pointer"
              onClick={() => fileRef.current?.click()}
            >
              <Upload className="w-10 h-10 text-[#1F6779]" />

              <p className="text-sm text-gray-600 mt-2">
                Klik untuk upload atau drag & drop
              </p>
              <p className="text-xs text-gray-400">PNG, JPG (max 2MB)</p>

              <input
                ref={fileRef}
                type="file"
                className="hidden"
                onChange={handleFileChange}
                accept="image/*"
              />
            </div>

            {file && (
              <p className="text-xs mt-2 text-green-700">
                File dipilih: {file.name}
              </p>
            )}
          </div>
        </div>

        {/* Footer */}
        <DialogFooter className="flex justify-between px-6 pb-6 gap-4">
          <Button
            variant="ghost"
            onClick={onClose}
            className="bg-slate-200 text-slate-700 w-full h-12"
          >
            Batal
          </Button>

          <Button
            onClick={handleSubmit}
            className="bg-[#1F6779] hover:bg-[#165766] text-white w-full h-12"
          >
            Submit
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}