// app/admin/upload/_components/step-1-upload.tsx
"use client";

import { useUploadLogic } from "../_hooks/use-upload";
import { FileUpload } from "@/shared/components/file-upload"; // Pastikan path import benar
import { Button } from "@/shared/components/ui/button";
import { Input } from "@/shared/components/ui/input";
import { Label } from "@/shared/components/ui/label";
import { 
  Select, 
  SelectContent, 
  SelectItem, 
  SelectTrigger, 
  SelectValue 
} from "@/shared/components/ui/select";
import { AlertCircle } from "lucide-react";

export default function StepUpload() {
  const { 
    file, 
    handleFileSelect, 
    handleUploadProcess, 
    loading, 
    fileDesc, 
    setFileDesc,
    sheetNames,
    selectedSheet,
    setSelectedSheet,
    // Kita butuh fungsi reset file di hook, anggap namanya resetFile
    setState 
  } = useUploadLogic();

  const handleRemoveFile = () => {
    // Reset state di context/hook
    setState(prev => ({ 
        ...prev, 
        file: null, 
        sheetCount: 0, 
        sheetNames: [], 
        selectedPages: [] 
    }));
  };

  return (
    <div className="max-w-3xl mx-auto py-8">
       <div className="mb-8 text-center">
        <h1 className="text-2xl font-bold text-slate-800">Upload Data Baru</h1>
        <p className="text-slate-500 text-sm mt-1">Unggah file CSV, Excel, PDF, atau ZIP spasial Anda.</p>
       </div>

       <div className="bg-white rounded-xl border shadow-sm p-6 space-y-6">
           
           {/* 1. Component File Upload Custom */}
           <div className="space-y-2">
                <Label>File Sumber</Label>
                <FileUpload 
                    // Kirim file yang ada di state agar sinkron (optional jika komponen controlled)
                    filePreview={file} 
                    fileName={file?.name}
                    // Saat drop, kirim raw file ke logic
                    onFileSelect={(f) => handleFileSelect(f)} 
                    // Saat remove, reset state
                    onRemove={handleRemoveFile}
                    description=""
                />
           </div>

           {/* 2. Logic Form Tambahan (Hanya muncul jika file ada) */}
           {file && (
             <div className="space-y-5 animate-in fade-in slide-in-from-top-4 duration-300">
                
                {/* Input Deskripsi */}
                <div className="space-y-2">
                  <Label htmlFor="desc">Deskripsi File <span className="text-red-500">*</span></Label>
                  <Input 
                    id="desc"
                    value={fileDesc} 
                    onChange={(e) => setFileDesc(e.target.value)} 
                    placeholder="Contoh: Data Curah Hujan Tahun 2024"
                    className="bg-slate-50"
                  />
                </div>

                {/* Sheet Selector (Khusus Excel) */}
                {sheetNames && sheetNames.length > 1 && (
                    <div className="p-4 bg-blue-50 border border-blue-100 rounded-lg space-y-3">
                        <div className="flex items-start gap-2 text-blue-700">
                            <AlertCircle className="w-5 h-5 mt-0.5" />
                            <div className="text-sm">
                                <p className="font-semibold">File Excel memiliki banyak sheet.</p>
                                <p>Silakan pilih sheet mana yang ingin diproses.</p>
                            </div>
                        </div>
                        
                        <Select value={selectedSheet || ""} onValueChange={setSelectedSheet}>
                            <SelectTrigger className="w-full bg-white border-blue-200">
                                <SelectValue placeholder="Pilih Sheet..." />
                            </SelectTrigger>
                            <SelectContent>
                                {sheetNames.map((name: string) => (
                                    <SelectItem key={name} value={name}>{name}</SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                    </div>
                )}

                {/* Tombol Aksi */}
                <div className="pt-4 flex justify-end">
                    <Button 
                        size="lg"
                        className="w-full md:w-auto min-w-[150px]" 
                        onClick={() => handleUploadProcess(selectedSheet || undefined)}
                        disabled={loading || !fileDesc || (sheetNames.length > 1 && !selectedSheet)}
                    >
                        {loading ? "Memproses..." : "Lanjut Proses →"}
                    </Button>
                </div>
             </div>
           )}
       </div>
    </div>
  );
}