import React, { useState, useRef } from "react";
import * as XLSX from "xlsx";
import { Employee, AuditLog } from "../types";
import { 
  Upload, 
  FileSpreadsheet, 
  FileText, 
  Download, 
  AlertCircle, 
  CheckCircle2, 
  X, 
  UserPlus, 
  FileCheck, 
  Info,
  Trash2,
  RefreshCw
} from "lucide-react";

interface BulkEmployeeUploadModalProps {
  isOpen: boolean;
  onClose: () => void;
  existingEmployees: Employee[];
  onBulkSave: (newEmployees: Employee[]) => void;
  currentUser?: Employee | null;
}

export interface ParsedEmployeeRow {
  id: string;
  nip: string;
  nik: string;
  name: string;
  position: string;
  division: string;
  status: Employee['status'];
  tmtKerja: string;
  birthPlace: string;
  birthDate: string;
  reportingTo: string;
  phone: string;
  email: string;
  address: string;
  gender: 'L' | 'P';
  kpiScore: number;
  
  // Validation status
  isValid: boolean;
  validationError?: string;
  isDuplicateNip?: boolean;
  selectedForImport: boolean;
}

export function BulkEmployeeUploadModal({
  isOpen,
  onClose,
  existingEmployees,
  onBulkSave,
  currentUser
}: BulkEmployeeUploadModalProps) {
  const [parsedData, setParsedData] = useState<ParsedEmployeeRow[]>([]);
  const [fileName, setFileName] = useState<string>("");
  const [fileType, setFileType] = useState<string>("");
  const [isDragging, setIsDragging] = useState<boolean>(false);
  const [rawText, setRawText] = useState<string>("");
  const [activeTab, setActiveTab] = useState<'upload' | 'paste'>('upload');
  const [isProcessing, setIsProcessing] = useState<boolean>(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  if (!isOpen) return null;

  // Existing NIPs set for duplicate checking
  const existingNipSet = new Set(existingEmployees.map(e => e.nip.trim().toLowerCase()));

  // Auto-generate missing NIP
  const generateNip = (index: number) => {
    const year = new Date().getFullYear();
    const randomNum = Math.floor(1000 + Math.random() * 9000);
    return `EMP-${year}-${(index + 1).toString().padStart(3, '0')}${randomNum}`;
  };

  // Convert Excel dates (serial numbers) or string dates to YYYY-MM-DD
  const formatExcelDate = (val: any): string => {
    if (!val) return new Date().toISOString().split('T')[0];
    if (typeof val === 'number') {
      const date = XLSX.SSF.parse_date_code(val);
      if (date) {
        const yyyy = date.y;
        const mm = String(date.m).padStart(2, '0');
        const dd = String(date.d).padStart(2, '0');
        return `${yyyy}-${mm}-${dd}`;
      }
    }
    const str = String(val).trim();
    if (str.match(/^\d{4}-\d{2}-\d{2}$/)) return str;
    // Format DD/MM/YYYY or DD-MM-YYYY
    const dmy = str.match(/^(\d{1,2})[/-](\d{1,2})[/-](\d{4})$/);
    if (dmy) {
      return `${dmy[3]}-${dmy[2].padStart(2, '0')}-${dmy[1].padStart(2, '0')}`;
    }
    return str || new Date().toISOString().split('T')[0];
  };

  // Helper to map dynamic raw headers to standard employee keys
  const mapRowToEmployee = (rawRow: Record<string, any>, index: number): ParsedEmployeeRow => {
    const normalizedRow: Record<string, any> = {};
    Object.keys(rawRow).forEach(key => {
      const cleanKey = key.trim().toLowerCase().replace(/[^a-z0-9]/g, '');
      normalizedRow[cleanKey] = rawRow[key];
    });

    // Helper value finder
    const getValue = (aliases: string[]): any => {
      for (const alias of aliases) {
        if (normalizedRow[alias] !== undefined && normalizedRow[alias] !== null && String(normalizedRow[alias]).trim() !== '') {
          return normalizedRow[alias];
        }
      }
      return undefined;
    };

    const name = String(getValue(['name', 'nama', 'namalengkap', 'namapegawai', 'fullname']) || '').trim();
    let nip = String(getValue(['nip', 'nonip', 'nip pegawai', 'employeeid']) || '').trim();
    if (!nip) {
      nip = generateNip(index);
    }
    
    let nik = String(getValue(['nik', 'nonik', 'noktp', 'ktp']) || '').trim();
    if (!nik) {
      nik = `3171${Math.floor(100000000000 + Math.random() * 900000000000)}`;
    }

    const position = String(getValue(['position', 'jabatan', 'title', 'posisi']) || 'Staff Operational').trim();
    const division = String(getValue(['division', 'divisi', 'dept', 'departemen', 'unit']) || 'Human Capital').trim();
    
    // Status normalizer
    const rawStatus = String(getValue(['status', 'statuspegawai', 'statushubungankerja']) || 'Aktif').trim();
    let status: Employee['status'] = 'Aktif';
    const statusLower = rawStatus.toLowerCase();
    if (statusLower.includes('kontrak') || statusLower.includes('pkwt')) status = 'Kontrak';
    else if (statusLower.includes('probation') || statusLower.includes('percobaan')) status = 'Probation';
    else if (statusLower.includes('outsource')) status = 'Outsource';
    else if (statusLower.includes('magang') || statusLower.includes('intern')) status = 'Magang';
    else if (statusLower.includes('pensiun')) status = 'Pensiun';
    else if (statusLower.includes('resigned') || statusLower.includes('keluar')) status = 'Resigned';
    else if (statusLower.includes('tetap') || statusLower.includes('aktif')) status = 'Aktif';

    const tmtKerja = formatExcelDate(getValue(['tmtkerja', 'tmt', 'tanggalmasuk', 'tglmasuk', 'hiredate', 'joindate']));
    const birthPlace = String(getValue(['birthplace', 'tempatlahir', 'tmplahir']) || 'Jakarta').trim();
    const birthDate = formatExcelDate(getValue(['birthdate', 'tanggallahir', 'tgllahir', 'dob']) || '1995-01-01');
    const reportingTo = String(getValue(['reportingto', 'atasan', 'atasanlangsung', 'supervisor']) || 'Direksi Utama').trim();
    const phone = String(getValue(['phone', 'telepon', 'nohp', 'hp', 'notelp']) || '0812-9000-0000').trim();
    const email = String(getValue(['email', 'emailkedinasan', 'emailkantor', 'mail']) || (name ? `${name.toLowerCase().replace(/\s+/g, '.')}@company.co.id` : 'pegawai@company.co.id')).trim();
    const address = String(getValue(['address', 'alamat', 'domisili']) || 'Jakarta, Indonesia').trim();

    // Gender normalizer
    const rawGender = String(getValue(['gender', 'jeniskelamin', 'jk', 'sex']) || 'L').trim().toUpperCase();
    const gender: 'L' | 'P' = rawGender.startsWith('P') || rawGender.includes('FEMALE') || rawGender.includes('WANITA') ? 'P' : 'L';

    // KPI Score
    const kpiRaw = getValue(['kpiscore', 'kpi', 'skorkpi', 'nilai']);
    const kpiScore = typeof kpiRaw === 'number' ? Math.min(100, Math.max(0, kpiRaw)) : 85;

    // Validation
    let isValid = true;
    let validationError = "";
    let isDuplicateNip = false;

    if (!name) {
      isValid = false;
      validationError = "Nama Pegawai wajib diisi";
    } else if (existingNipSet.has(nip.toLowerCase())) {
      isDuplicateNip = true;
      validationError = `NIP "${nip}" sudah digunakan pegawai lain di sistem`;
    }

    return {
      id: `emp-import-${Date.now()}-${index}-${Math.random().toString(36).substring(2, 6)}`,
      nip,
      nik,
      name,
      position,
      division,
      status,
      tmtKerja,
      birthPlace,
      birthDate,
      reportingTo,
      phone,
      email,
      address,
      gender,
      kpiScore,
      isValid,
      validationError,
      isDuplicateNip,
      selectedForImport: isValid && !isDuplicateNip
    };
  };

  // Process Excel or CSV File
  const processFile = async (file: File) => {
    setIsProcessing(true);
    setFileName(file.name);
    setFileType(file.name.endsWith('.csv') || file.name.endsWith('.txt') ? 'CSV / Text' : 'Excel');

    try {
      const arrayBuffer = await file.arrayBuffer();
      const workbook = XLSX.read(arrayBuffer, { type: 'array', cellDates: true });
      
      const firstSheetName = workbook.SheetNames[0];
      const worksheet = workbook.Sheets[firstSheetName];
      
      // Convert to JSON
      const rawJson = XLSX.utils.sheet_to_json<Record<string, any>>(worksheet, { defval: "" });

      if (rawJson.length === 0) {
        alert("File kosong atau format kolom tidak terbaca. Mohon periksa kembali file Anda.");
        setParsedData([]);
        return;
      }

      const parsedRows = rawJson.map((row, idx) => mapRowToEmployee(row, idx));
      setParsedData(parsedRows);
    } catch (err) {
      console.error("Gagal membaca file Excel/Text:", err);
      alert("Terjadi kesalahan saat membaca file. Pastikan format file .xlsx, .xls, .csv, atau .txt sesuai.");
    } finally {
      setIsProcessing(false);
    }
  };

  // Process Pasted Delimited Text (CSV/TSV)
  const processPastedText = () => {
    if (!rawText.trim()) {
      alert("Masukkan teks berformat CSV/TSV atau hasil copas dari Excel.");
      return;
    }

    setIsProcessing(true);
    setFileName("Pasted_Text_Data.txt");
    setFileType("Text CSV/TSV");

    try {
      const workbook = XLSX.read(rawText, { type: 'string' });
      const firstSheet = workbook.SheetNames[0];
      const rawJson = XLSX.utils.sheet_to_json<Record<string, any>>(workbook.Sheets[firstSheet], { defval: "" });

      if (rawJson.length === 0) {
        alert("Teks tidak dapat diproses. Pastikan baris pertama berisi nama kolom.");
        return;
      }

      const parsedRows = rawJson.map((row, idx) => mapRowToEmployee(row, idx));
      setParsedData(parsedRows);
    } catch (err) {
      console.error("Gagal membaca teks:", err);
      alert("Format teks tidak valid. Gunakan pemisah koma (,), titik koma (;), atau Tab.");
    } finally {
      setIsProcessing(false);
    }
  };

  // File Input Drag & Drop Handlers
  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(false);
    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
      processFile(e.dataTransfer.files[0]);
    }
  };

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      processFile(e.target.files[0]);
    }
  };

  // Toggle selection of individual parsed row
  const toggleRowImport = (id: string) => {
    setParsedData(prev => prev.map(row => row.id === id ? { ...row, selectedForImport: !row.selectedForImport } : row));
  };

  // Select / Deselect all valid rows
  const toggleSelectAllValid = () => {
    const validRows = parsedData.filter(r => r.isValid && !r.isDuplicateNip);
    const allValidSelected = validRows.every(r => r.selectedForImport);

    setParsedData(prev => prev.map(row => {
      if (row.isValid && !row.isDuplicateNip) {
        return { ...row, selectedForImport: !allValidSelected };
      }
      return row;
    }));
  };

  // Generate and Download Excel Template
  const downloadExcelTemplate = () => {
    const templateData = [
      {
        "NIP": "EMP-2026-001",
        "NIK": "3171098765432101",
        "Nama Lengkap": "Ahmad Rizky Pratama",
        "Email Kedinasan": "ahmad.rizky@company.co.id",
        "Jabatan": "Senior Software Engineer",
        "Divisi": "Teknologi Informasi",
        "Status Pegawai": "Tetap",
        "TMT Kerja": "2026-01-15",
        "Jenis Kelamin": "L",
        "No Telepon": "081298765432",
        "Alamat": "Jl. Sudirman No. 45, Jakarta Selatan",
        "Tempat Lahir": "Bandung",
        "Tanggal Lahir": "1994-05-12",
        "Atasan Direct": "Budi Santoso",
        "Skor KPI": 90
      },
      {
        "NIP": "EMP-2026-002",
        "NIK": "3171098765432102",
        "Nama Lengkap": "Siti Nurhaliza",
        "Email Kedinasan": "siti.nurhaliza@company.co.id",
        "Jabatan": "Talent Acquisition Specialist",
        "Divisi": "Human Capital",
        "Status Pegawai": "Kontrak",
        "TMT Kerja": "2026-02-01",
        "Jenis Kelamin": "P",
        "No Telepon": "081387654321",
        "Alamat": "Jl. Gatot Subroto No. 12, Jakarta Selatan",
        "Tempat Lahir": "Surabaya",
        "Tanggal Lahir": "1997-08-20",
        "Atasan Direct": "Rina Wijaya",
        "Skor KPI": 88
      }
    ];

    const worksheet = XLSX.utils.json_to_sheet(templateData);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, "Template Pegawai");

    // Auto fit column widths
    worksheet["!cols"] = [
      { wch: 15 }, { wch: 18 }, { wch: 25 }, { wch: 28 },
      { wch: 25 }, { wch: 22 }, { wch: 15 }, { wch: 14 },
      { wch: 14 }, { wch: 15 }, { wch: 35 }, { wch: 15 },
      { wch: 14 }, { wch: 20 }, { wch: 10 }
    ];

    XLSX.writeFile(workbook, "Template_Upload_Pegawai_Baru.xlsx");
  };

  // Commit and execute bulk import
  const handleCommitImport = () => {
    const selectedRows = parsedData.filter(r => r.selectedForImport);
    if (selectedRows.length === 0) {
      alert("Tidak ada baris data yang dipilih untuk diimport.");
      return;
    }

    const nowStr = new Date().toISOString().replace("T", " ").substring(0, 19);

    const newEmployees: Employee[] = selectedRows.map(row => {
      const empId = `emp-${Date.now()}-${Math.random().toString(36).substring(2, 7)}`;
      
      const auditLog: AuditLog = {
        id: `audit-${Date.now()}-${Math.random().toString(36).substring(2, 6)}`,
        timestamp: nowStr,
        action: 'CREATE',
        category: 'Biodata',
        actorName: currentUser ? currentUser.name : "HR Administrator",
        actorPosition: currentUser ? currentUser.position : "HR Specialist",
        details: `Registrasi Pegawai Baru via Upload Massal (${fileType}) - Status: ${row.status}`
      };

      return {
        id: empId,
        nip: row.nip,
        nik: row.nik,
        name: row.name,
        photoUrl: "",
        division: row.division,
        position: row.position,
        status: row.status,
        tmtKerja: row.tmtKerja,
        birthPlace: row.birthPlace,
        birthDate: row.birthDate,
        reportingTo: row.reportingTo,
        phone: row.phone,
        email: row.email,
        address: row.address,
        gender: row.gender,
        kpiScore: row.kpiScore,

        // Default initial histories
        riwayatJabatan: [
          {
            id: `jab-${Date.now()}-1`,
            date: row.tmtKerja,
            position: row.position,
            division: row.division,
            type: "Pengangkatan Pertama",
            note: `Pengangkatan awal status ${row.status} melalui Impor Massal`
          }
        ],
        riwayatPendidikan: [
          {
            id: `edu-${Date.now()}-1`,
            level: "S1",
            school: "Universitas Terkemuka",
            major: "Studi Terkait",
            yearGraduated: 2020
          }
        ],
        riwayatPelatihan: [],
        riwayatSK: [
          {
            id: `sk-${Date.now()}-1`,
            type: "SK Pengangkatan Pegawai",
            skNumber: `SK/HC/${new Date().getFullYear()}/${Math.floor(1000 + Math.random() * 9000)}`,
            date: row.tmtKerja,
            effectiveDate: row.tmtKerja
          }
        ],
        riwayatKPI: [
          {
            id: `kpi-${Date.now()}-1`,
            period: `Q1 ${new Date().getFullYear()}`,
            score: row.kpiScore,
            grade: row.kpiScore >= 85 ? "Sangat Baik" : "Baik",
            evaluator: "Manager Human Capital"
          }
        ],
        riwayatReward: [],
        riwayatPunishment: [],
        timeline: [
          {
            id: `tl-imp-${Date.now()}`,
            date: row.tmtKerja,
            title: `Mulai Bekerja (TMT Kerja)`,
            description: `Diangkat pertama kali dengan posisi ${row.position} di Divisi ${row.division}`,
            type: "career"
          }
        ],
        documents: [],
        auditLogs: [auditLog]
      };
    });

    onBulkSave(newEmployees);
    onClose();
  };

  const selectedCount = parsedData.filter(r => r.selectedForImport).length;
  const totalValidCount = parsedData.filter(r => r.isValid && !r.isDuplicateNip).length;
  const invalidCount = parsedData.filter(r => !r.isValid || r.isDuplicateNip).length;

  return (
    <div className="fixed inset-0 bg-black/85 backdrop-blur-xs z-50 flex items-center justify-center p-3 sm:p-5">
      <div className="bg-[#0a0a0a] border-2 border-[#facc15] max-w-5xl w-full p-4 sm:p-6 text-white space-y-5 shadow-2xl relative max-h-[92vh] flex flex-col">
        
        {/* Header */}
        <div className="flex items-center justify-between border-b border-[#222] pb-3 shrink-0">
          <div className="flex items-center gap-2.5">
            <div className="p-2 bg-yellow-500/10 border border-yellow-500/30">
              <UserPlus className="w-5 h-5 text-[#facc15]" />
            </div>
            <div>
              <h3 className="text-sm sm:text-base font-black uppercase tracking-wider flex items-center gap-2">
                Upload Data Utama Pegawai Baru Massal
                <span className="text-[10px] bg-[#facc15] text-black px-2 py-0.5 font-bold">
                  Excel / CSV / Text
                </span>
              </h3>
              <p className="text-[11px] text-slate-400">
                Impor data puluhan hingga ratusan karyawan baru secara kolektif dengan validasi otomatis.
              </p>
            </div>
          </div>
          
          <button 
            onClick={onClose}
            className="text-slate-400 hover:text-white p-1 transition-colors"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Tab & Template Bar */}
        <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3 bg-[#050505] border border-[#222] p-2.5 shrink-0">
          <div className="flex items-center gap-2 font-mono text-xs">
            <button
              onClick={() => setActiveTab('upload')}
              className={`px-3 py-1.5 border text-xs font-bold uppercase transition-all flex items-center gap-1.5 ${
                activeTab === 'upload' 
                  ? "bg-[#facc15] text-black border-[#facc15]" 
                  : "bg-[#141414] text-slate-300 border-[#333] hover:border-slate-500"
              }`}
            >
              <FileSpreadsheet className="w-4 h-4" />
              Upload File Excel / CSV
            </button>
            <button
              onClick={() => setActiveTab('paste')}
              className={`px-3 py-1.5 border text-xs font-bold uppercase transition-all flex items-center gap-1.5 ${
                activeTab === 'paste' 
                  ? "bg-[#facc15] text-black border-[#facc15]" 
                  : "bg-[#141414] text-slate-300 border-[#333] hover:border-slate-500"
              }`}
            >
              <FileText className="w-4 h-4" />
              Copas Teks / CSV
            </button>
          </div>

          <button
            onClick={downloadExcelTemplate}
            className="px-3.5 py-1.5 bg-emerald-600/90 hover:bg-emerald-500 text-white font-bold uppercase text-[11px] tracking-wider transition-all flex items-center justify-center gap-1.5 border border-emerald-400/30 shadow-xs"
            title="Unduh Format Berkas Excel Standar HR"
          >
            <Download className="w-3.5 h-3.5 text-emerald-200" />
            Unduh Template Excel (.xlsx)
          </button>
        </div>

        {/* Upload / Paste Area */}
        {parsedData.length === 0 ? (
          <div className="flex-1 min-h-[220px] flex flex-col justify-center">
            {activeTab === 'upload' ? (
              <div
                onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
                onDragLeave={() => setIsDragging(false)}
                onDrop={handleDrop}
                onClick={() => fileInputRef.current?.click()}
                className={`border-2 border-dashed p-8 text-center cursor-pointer transition-all flex flex-col items-center justify-center gap-3 ${
                  isDragging 
                    ? "border-[#facc15] bg-yellow-500/10 scale-[0.99]" 
                    : "border-[#333] hover:border-[#facc15] bg-[#050505]"
                }`}
              >
                <input
                  type="file"
                  ref={fileInputRef}
                  onChange={handleFileChange}
                  accept=".xlsx,.xls,.csv,.txt"
                  className="hidden"
                />
                <div className="p-3 bg-[#151515] border border-[#333] text-[#facc15]">
                  <Upload className="w-8 h-8 animate-bounce" />
                </div>
                <div>
                  <h4 className="text-sm font-bold text-white uppercase tracking-wider">
                    Tarik & Drop File Excel (.xlsx, .xls) atau Text (.csv, .txt) di sini
                  </h4>
                  <p className="text-xs text-slate-400 mt-1">
                    atau klik area ini untuk memilih berkas dari komputer Anda
                  </p>
                </div>
                <div className="flex items-center gap-2 text-[10px] text-slate-500 font-mono mt-2">
                  <Info className="w-3.5 h-3.5 text-sky-400" />
                  <span>Sistem otomatis mencocokkan nama kolom (Nama, NIP, Jabatan, Divisi, Email, TMT Kerja, dll)</span>
                </div>
              </div>
            ) : (
              <div className="space-y-3 bg-[#050505] border border-[#222] p-4">
                <label className="block text-xs uppercase font-bold text-slate-300">
                  Tempelkan (Paste) Data Tabel CSV atau Salinan dari Excel:
                </label>
                <textarea
                  rows={7}
                  value={rawText}
                  onChange={(e) => setRawText(e.target.value)}
                  placeholder={`NIP, NIK, Nama Lengkap, Jabatan, Divisi, Status, TMT Kerja, Email, Telepon\nEMP-001, 317101, Budi Santoso, Engineer, IT, Tetap, 2026-01-01, budi@co.id, 0812999\nEMP-002, 317102, Ani Wijaya, Specialist, HR, Kontrak, 2026-02-01, ani@co.id, 0813888`}
                  className="w-full bg-[#0a0a0a] border border-[#333] text-white p-3 text-xs font-mono focus:border-[#facc15] focus:outline-hidden resize-none"
                />
                <div className="flex justify-end">
                  <button
                    onClick={processPastedText}
                    disabled={isProcessing || !rawText.trim()}
                    className="px-5 py-2 bg-[#facc15] hover:bg-yellow-500 disabled:opacity-50 text-black font-black uppercase text-xs tracking-wider flex items-center gap-2"
                  >
                    <RefreshCw className={`w-3.5 h-3.5 ${isProcessing ? 'animate-spin' : ''}`} />
                    Proses Teks Paste
                  </button>
                </div>
              </div>
            )}
          </div>
        ) : (
          /* Preview & Validation Table View */
          <div className="flex-1 flex flex-col min-h-0 space-y-3">
            
            {/* Action Bar Above Table */}
            <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-2 bg-[#050505] border border-[#222] p-3 text-xs shrink-0">
              <div className="flex flex-wrap items-center gap-3">
                <span className="font-bold text-white flex items-center gap-1.5">
                  <FileCheck className="w-4 h-4 text-[#facc15]" />
                  Hasil Parsing: <strong className="text-[#facc15]">{parsedData.length} Baris</strong> ({fileName})
                </span>
                <span className="text-emerald-400 font-bold bg-emerald-950/60 border border-emerald-800 px-2 py-0.5 text-[10px]">
                  ✓ {totalValidCount} Valid
                </span>
                {invalidCount > 0 && (
                  <span className="text-rose-400 font-bold bg-rose-950/60 border border-rose-800 px-2 py-0.5 text-[10px]">
                    ⚠ {invalidCount} Perlu Perhatian / Duplikat
                  </span>
                )}
              </div>

              <div className="flex items-center gap-2">
                <button
                  type="button"
                  onClick={toggleSelectAllValid}
                  className="px-2.5 py-1 bg-[#181818] hover:bg-[#252525] border border-[#333] text-slate-300 font-bold text-[11px] uppercase"
                >
                  Pilih/Batal Semua Valid
                </button>
                <button
                  type="button"
                  onClick={() => { setParsedData([]); setFileName(""); setRawText(""); }}
                  className="px-2.5 py-1 bg-rose-950/50 hover:bg-rose-900 border border-rose-800 text-rose-200 font-bold text-[11px] uppercase flex items-center gap-1"
                >
                  <Trash2 className="w-3 h-3" /> Reset File
                </button>
              </div>
            </div>

            {/* Scrollable Preview Table */}
            <div className="flex-1 overflow-auto border border-[#222] bg-[#050505]">
              <table className="w-full text-left font-mono text-[11px] border-collapse">
                <thead className="sticky top-0 bg-[#111] border-b border-[#333] text-slate-400 uppercase text-[10px] tracking-wider z-10">
                  <tr>
                    <th className="p-2.5 text-center w-10">Pilih</th>
                    <th className="p-2.5">Status Validasi</th>
                    <th className="p-2.5">NIP</th>
                    <th className="p-2.5">Nama Lengkap</th>
                    <th className="p-2.5">Jabatan</th>
                    <th className="p-2.5">Divisi</th>
                    <th className="p-2.5">Status Kerja</th>
                    <th className="p-2.5">TMT Kerja</th>
                    <th className="p-2.5">Email / Kontak</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-[#1a1a1a]">
                  {parsedData.map((row) => (
                    <tr 
                      key={row.id} 
                      className={`hover:bg-[#121212] transition-colors ${
                        row.selectedForImport ? "bg-yellow-500/5" : ""
                      } ${!row.isValid || row.isDuplicateNip ? "opacity-85 bg-rose-950/10" : ""}`}
                    >
                      <td className="p-2.5 text-center">
                        <input
                          type="checkbox"
                          checked={row.selectedForImport}
                          disabled={!row.isValid || row.isDuplicateNip}
                          onChange={() => toggleRowImport(row.id)}
                          className="accent-[#facc15] cursor-pointer"
                        />
                      </td>
                      <td className="p-2.5">
                        {row.isValid && !row.isDuplicateNip ? (
                          <span className="inline-flex items-center gap-1 text-[10px] text-emerald-400 font-bold bg-emerald-950/80 px-1.5 py-0.5 border border-emerald-800">
                            <CheckCircle2 className="w-3 h-3" /> Valid
                          </span>
                        ) : (
                          <span className="inline-flex items-center gap-1 text-[10px] text-rose-300 font-bold bg-rose-950/80 px-1.5 py-0.5 border border-rose-800" title={row.validationError}>
                            <AlertCircle className="w-3 h-3 text-rose-400" /> {row.validationError || "Error"}
                          </span>
                        )}
                      </td>
                      <td className="p-2.5 font-bold text-yellow-400/90">{row.nip}</td>
                      <td className="p-2.5 font-bold text-white">{row.name}</td>
                      <td className="p-2.5 text-slate-300">{row.position}</td>
                      <td className="p-2.5 text-slate-400">{row.division}</td>
                      <td className="p-2.5">
                        <span className="px-1.5 py-0.5 text-[10px] bg-slate-800 border border-slate-700 text-slate-300">
                          {row.status}
                        </span>
                      </td>
                      <td className="p-2.5 text-slate-400">{row.tmtKerja}</td>
                      <td className="p-2.5 text-slate-400 text-[10px]">{row.email}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

          </div>
        )}

        {/* Footer Actions */}
        <div className="flex items-center justify-between pt-3 border-t border-[#222] shrink-0">
          <div className="text-xs text-slate-400 font-mono">
            {parsedData.length > 0 && (
              <span>Siap Diimpor: <strong className="text-[#facc15]">{selectedCount} Pegawai</strong></span>
            )}
          </div>
          <div className="flex items-center gap-3">
            <button
              type="button"
              onClick={onClose}
              className="px-4 py-2 bg-[#151515] hover:bg-[#222] border border-[#333] text-xs font-bold uppercase tracking-wider text-slate-300 cursor-pointer"
            >
              Batal
            </button>
            <button
              type="button"
              onClick={handleCommitImport}
              disabled={selectedCount === 0}
              className="px-5 py-2 bg-[#facc15] hover:bg-yellow-500 disabled:opacity-40 text-black font-black uppercase text-xs tracking-wider flex items-center gap-1.5 cursor-pointer shadow-md shadow-yellow-500/10"
            >
              <UserPlus className="w-4 h-4" />
              Impor Massal ({selectedCount} Pegawai)
            </button>
          </div>
        </div>

      </div>
    </div>
  );
}