"use client";

import { useState, useEffect } from "react";
import { v4 as uuidv4 } from "uuid";
import { Tabs, TabsContent } from "@/shared/components/ui/tabs";
import FormMultiSelect from "@/shared/components/forms/form-multi-select";

const satupetaCategory = [
              "Batas Wilayah",
              "Kependudukan",
              "Lingkungan Hidup",
              "Pemerintah Desa",
              "Pendidikan",
              "Sosial",
              "Pendidikan SD",
              "Pariwisata Kebudayaan",
              "Kesehatan",
              "Ekonomi",
              "Kemiskinan",
              "Infrastruktur"
            ]
  const satupetaCategoryId =  [
              "019a0997-5b42-7c34-9ab8-35b4765ecb39",
              "0196c80b-e680-7dca-9b90-b5ebe65de70d",
              "0196c80c-855f-77f9-abd0-0c8a30b8c2f5",
              "0196c80c-f805-76a8-82c7-af50b794871b",
              "0196c80d-228d-7e1e-9116-78ba912b812c",
              "0196c80d-3f05-7750-ab2a-f58655fef6ea",
              "019936a6-4a5b-719f-8d88-d2df0af5aa20",
              "0196c80c-c4fc-7ea6-afc0-3672a1b44b5b",
              "0196c80c-61d8-7616-9abc-550a89283a57",
              "0196c809-a0b0-79fb-b597-422d716fdce8",
              "0196c80b-bb09-7424-9cd5-e3ec4946c7af",
              "0196c80b-8710-7577-bc28-3ce66a02f56f"
            ]

export const getInitialMetadata = (initialValues: any = {}) => {
  const today = new Date().toISOString().split('T')[0];


  function getIndexCategoryId(value: string) {
    return satupetaCategory.indexOf(value);
  }

  return {
    title: initialValues.title || "",
    abstract: initialValues.abstract || "",
    keywords: initialValues.keyword ? (Array.isArray(initialValues.keyword) ? initialValues.keyword.join(', ') : initialValues.keyword) : "",
    topicCategory: initialValues.metadata_category || "",
    
    mapsetCategory: satupetaCategoryId[getIndexCategoryId(initialValues.mapset_category)] || "", 
    dateCreated: today,
    status: "completed",
    language: "eng",

    organization: "PUPR",
    contactName: "Dimas",
    contactEmail: "pu@gmail.com",
    contactPhone: "08222222222",

    // 🌐 Distribusi
    downloadLink: "",
    serviceLink: "",
    format: "",
    license: "Copyright",

    // 🧭 Referensi Spasial
    crs: "EPSG:4326",
    geometryType: "",
    xmin: "",
    xmax: "",
    ymin: "",
    ymax: "",

    // 🧾 Metadata Umum
    metadataStandard: "ISO 19115:2003/19139",
    metadataVersion: "1.0",
    metadataUUID: "", // Nanti di-generate di useEffect agar tidak hydration error
    metadataDate: "",
    charset: "utf8",
    rsIdentifier: "WGS 1984",

    // Override dengan apapun yang ada di initialValues jika key-nya cocok
    // ...initialValues 
  };
};

export default function MetadataForm({ onChange, initialValues = {} }: { onChange: (val: any) => void, initialValues?: any }) {
  const [formData, setFormData] = useState(initialValues);

  // Generate UUID saat mount (Client Side Only)
  // useEffect(() => {
  //   if (!formData.metadataUUID) {
  //     setFormData((prev: any) => {
  //       const updated = {
  //         ...prev,
  //         metadataUUID: uuidv4(),
  //         metadataDate: new Date().toISOString().split("T")[0],
  //       };
  //       // Penting: Kabari parent tentang update UUID ini
  //       onChange(updated); 
  //       return updated;
  //     });
  //   }
  // }, []);

  useEffect(() => {
    // Cek jika UUID belum ada (hanya saat mount)
    if (!formData.metadataUUID) {
      const generatedUUID = uuidv4();
      const generatedDate = new Date().toISOString().split("T")[0];

      // 1. Siapkan data baru
      const updatedData = {
        ...formData, // Menggunakan state saat ini
        metadataUUID: generatedUUID,
        metadataDate: generatedDate,
      };

      // 2. Update State Lokal
      setFormData((prev: any) => ({
        ...prev,
        metadataUUID: generatedUUID,
        metadataDate: generatedDate,
      }));

      // 3. Update State Parent (PENTING: Dilakukan terpisah di sini, BUKAN di dalam setFormData)
      onChange(updatedData);
    }
  }, []);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    const updated = { ...formData, [name]: value };
    setFormData(updated);
    onChange(updated);
  };

  return (
    <div className="w-full">
      <Tabs defaultValue="identifikasi">
        {/* <TabsList className="mb-4">
            <TabsTrigger value="identifikasi">Identifikasi</TabsTrigger>
            <TabsTrigger value="penanggung">Kontak</TabsTrigger>
        </TabsList> */}

        <TabsContent value="identifikasi" className="space-y-4">
            <Input label="Judul Dataset" name="title" value={formData.title} onChange={handleChange} />
            <Textarea label="Abstrak" name="abstract" value={formData.abstract} onChange={handleChange} />
            <Input label="Kata Kunci (pisahkan dengan koma)" name="keywords" value={formData.keywords} onChange={handleChange} />
            
            <SelectMultiple 
              label="Kategori Metadata" 
              name="topicCategory"
              value={formData.topicCategory} 
              onChange={handleChange}
              options={[
                {label: "Biota", value: "Biota"},
                {label: "Farming", value: "Farming"},
                {label: "Boundaries", value: "Boundaries"},
                {label: "Climatology, meteorology, atmospherea", value: "Climatology, meteorology, atmospherea"},
                {label: "Economy", value: "Economy"},
                {label: "Elevation", value: "Elevation"},
                {label: "Environment", value: "Environment"},
                {label: "Geoscientific information", value: "Geoscientific information"},
                {label: "Health", value: "Health"},
                {label: "Imagery base maps earth cover", value: "Imagery base maps earth cover"},
                {label: "Intelligence military", value: "Intelligence military"},
                {label: "Inland waters", value: "Inland waters"},
                {label: "Location", value: "Location"},
                {label: "Oceans", value: "Oceans"},
                {label: "Planning cadastre", value: "Planning cadastre"},
                {label: "Society", value: "Society"},
                {label: "Structure", value: "Structure"},
                {label: "Transportation", value: "Transportation"},
                {label: "Utilities communication", value: "Utilities communication"}
              ]} 
            />

            {/* Ganti dengan Select shadcn jika mau, ini versi native HTML agar cepat */}
            <Select 
              label="Kategori Mapset" 
              name="mapsetCategory" 
              value={formData.mapsetCategory} 
              onChange={handleChange}
              options={satupetaCategory} 
              optValue={satupetaCategoryId}
            />
        </TabsContent>

        {/* <TabsContent value="penanggung" className="space-y-4">
            <Input label="Organisasi" name="organization" value={formData.organization} onChange={handleChange} />
            <Input label="Nama Kontak" name="contactName" value={formData.contactName} onChange={handleChange} />
            <Input label="Email" name="contactEmail" value={formData.contactEmail} onChange={handleChange} />
        </TabsContent> */}
      </Tabs>
    </div>
  );
}

// Helper Components (Bisa dipisah file atau inline)
function Input({ label, name, value, onChange }: any) {
  return (
    <div>
      <label className="block text-sm font-medium mb-1">{label} <span className="text-red-500">*</span></label>
      <input className="w-full border rounded p-2 text-sm" name={name} value={value} onChange={onChange} />
    </div>
  );
}
function Textarea({ label, name, value, onChange }: any) {
  return (
    <div>
      <label className="block text-sm font-medium mb-1">{label} <span className="text-red-500">*</span></label>
      <textarea className="w-full border rounded p-2 text-sm" rows={3} name={name} value={value} onChange={onChange} />
    </div>
  );
}
function Select({ label, name, value, onChange, options, optValue }: any) {
  return (
    <div>
      <label className="block text-sm font-medium mb-1">{label} <span className="text-red-500">*</span></label>
      <select className="w-full border rounded p-2 text-sm bg-white" name={name} value={value} onChange={onChange}>
        {options.map((opt: string, i: number) => <option key={i} value={optValue[i]}>{opt}</option>)}
      </select>
    </div>
  );
}
function SelectMultiple({ label, name, value, onChange, options = []}: any) {
  return (
    <div>
      <label className="block text-sm font-semibold text-gray-700 mb-1">
        {label}{" "}<span className="text-red-500">*</span>
      </label>
      <FormMultiSelect 
          name={name}
          value={value} 
          onChange={onChange}
          options={options}
        />
    </div>
  );
}