// app/admin/upload/_components/map/StylingLayers.tsx
"use client";

import React, { useState } from "react";
import { Button } from "@/shared/components/ui/button"; 
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/shared/components/ui/tabs";
import CustomLayerStyle from "./CustomLayerStyle"; // ⬅️ Import Komponen Baru

function normalizeBase64(xmlString:any) {
  return xmlString.replace(
    /xlink:href="base64:([^"?]+)(\?[^"]*)?"/g,
    (_: any, base64Content: any) => {
      return `xlink:href="data:image/svg+xml;base64,${base64Content}"`;
    }
  );
}

const StylingLayers = ({ 
  data, 
  geometryType, 
  onSubmit, 
  geosStyle 
}: { data: any, geometryType: string, onSubmit: (val: any) => void, geosStyle: any[] }) => {
  
  // Ubah default tab ke 'custom' agar user langsung bisa edit warna
  const [activeTab, setActiveTab] = useState("custom"); 
  const [parsedSld, setParsedSld] = useState<string | null>(null);

  return (
    <div className="w-full h-full bg-white flex flex-col">
      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full flex-1 flex flex-col">
        <TabsList className="grid grid-cols-2 w-full mb-4">
            {/* 🔥 Aktifkan Tab Custom */}
            <TabsTrigger value="custom">Custom</TabsTrigger>
            <TabsTrigger value="upload">Upload SLD</TabsTrigger>
            {/* <TabsTrigger value="geoserver">List Style</TabsTrigger> */}
        </TabsList>

        {/* 🔥 Tambahkan Content Tab Custom */}
        <TabsContent value="custom" className="flex-1 overflow-auto h-full">
             <CustomLayerStyle 
                data={data}
                geometryType={geometryType}
                onSubmit={onSubmit}
             />
        </TabsContent>

        <TabsContent value="upload" className="flex-1 overflow-auto">
             <div className="p-4 h-full flex flex-col">
              <div className="p-4 border rounded-lg text-center">
                <h3 className="text-lg font-semibold mb-2">Upload File SLD</h3>

                <p className="text-sm text-gray-500 mb-3">
                  Unggah file .sld untuk mengganti style layer.
                </p>

                <input
                  type="file"
                  accept=".sld"
                  className="block w-full text-sm file:mr-4 file:px-4 file:py-2
                            file:rounded-md file:border file:bg-gray-100
                            file:hover:bg-gray-200 cursor-pointer"
                  onChange={(e) => {
                    const file = e.target.files?.[0];
                    if (!file) return;
                    const reader = new FileReader();

                    reader.onload = () => {
                      const sld = normalizeBase64(reader.result)
                      setParsedSld(sld)
                      onSubmit({
                        styleType: "sld",
                        sldContent: sld,
                      });
                    };

                    reader.readAsText(file);
                  }}
                />
              </div>
              <div className="pt-4 border-t mt-auto">
                <Button
                    className="w-full disabled:bg-gray-400"
                    onClick={() =>
                      onSubmit({
                        styleType: "sld",
                        sldContent: parsedSld,
                      })
                    }
                    disabled={!parsedSld}
                >
                    Terapkan Style
                </Button>
              </div>
            </div>
        </TabsContent>
        
        <TabsContent value="geoserver" className="flex-1 overflow-auto">
             {/* ... (Konten List Style tetap sama) ... */}
        </TabsContent>
      </Tabs>
    </div>
  );
};

export default StylingLayers;