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: Record<string, any>[]) => Promise<void>;
  currentUser?: Employee | null;
}

  export interface ParsedEmployeeRow {
  id: 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;
  salary?: number;
  bankAccount: string;
  npwp: string;

  isValid: boolean;
  validationError?: string;
  isDuplicateNik?: 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 NIK set hanya untuk validasi preview.
  // Database tetap menjadi final authority.
  const existingNikSet = new Set(
    existingEmployees
      .map(e => String(e.nik || "").trim())
      .filter(Boolean)
  );

  // Convert Excel dates / JS Date / string to YYYY-MM-DD.
  // Nilai kosong tetap kosong agar validation bisa menolak data wajib.
  const formatExcelDate = (val: any): string => {
    if (val === undefined || val === null || val === "") {
      return "";
    }

    if (val instanceof Date && !Number.isNaN(val.getTime())) {
      const yyyy = val.getFullYear();
      const mm = String(val.getMonth() + 1).padStart(2, "0");
      const dd = String(val.getDate()).padStart(2, "0");
      return `${yyyy}-${mm}-${dd}`;
    }

    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 (/^\d{4}-\d{2}-\d{2}$/.test(str)) {
      return str;
    }

    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;
  };

  // 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];
    });

    const getValue = (aliases: string[]): any => {
      for (const alias of aliases) {
        const cleanAlias = alias
          .toLowerCase()
          .replace(/[^a-z0-9]/g, "");

        const value = normalizedRow[cleanAlias];

        if (
          value !== undefined &&
          value !== null &&
          String(value).trim() !== ""
        ) {
          return value;
        }
      }

      return undefined;
    };

    const name = String(
      getValue([
        "name",
        "nama",
        "namalengkap",
        "namapegawai",
        "fullname"
      ]) || ""
    ).trim();

    // NIK wajib berasal dari file.
    // Tidak pernah dibuat secara random.
    const nik = String(
      getValue([
        "nik",
        "nonik",
        "noktp",
        "ktp"
      ]) || ""
    )
      .replace(/[^0-9]/g, "")
      .trim();

    const position = String(
      getValue([
        "position",
        "jabatan",
        "title",
        "posisi"
      ]) || ""
    ).trim();

    const division = String(
      getValue([
        "division",
        "divisi",
        "dept",
        "departemen",
        "unit"
      ]) || ""
    ).trim();

    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("resign") ||
      statusLower.includes("keluar")
    ) {
      status = "Resigned";
    } else {
      status = "Aktif";
    }

    const tmtKerja = formatExcelDate(
      getValue([
        "tmtkerja",
        "tmt",
        "tanggalmasuk",
        "tglmasuk",
        "hiredate",
        "joindate"
      ])
    );

    const birthPlace = String(
      getValue([
        "birthplace",
        "tempatlahir",
        "tmplahir"
      ]) || ""
    ).trim();

    const birthDate = formatExcelDate(
      getValue([
        "birthdate",
        "tanggallahir",
        "tgllahir",
        "dob"
      ])
    );

    const reportingTo = String(
      getValue([
        "reportingto",
        "atasan",
        "atasanlangsung",
        "supervisor"
      ]) || ""
    ).trim();

    const phone = String(
      getValue([
        "phone",
        "telepon",
        "nohp",
        "hp",
        "notelp"
      ]) || ""
    ).trim();

    const email = String(
      getValue([
        "email",
        "emailkedinasan",
        "emailkantor",
        "mail"
      ]) || ""
    ).trim();

    const address = String(
      getValue([
        "address",
        "alamat",
        "domisili"
      ]) || ""
    ).trim();

    const rawGender = String(
      getValue([
        "gender",
        "jeniskelamin",
        "jk",
        "sex"
      ]) || ""
    )
      .trim()
      .toUpperCase();

    let gender: "L" | "P" | undefined;

    if (
      rawGender === "P" ||
      rawGender.includes("PEREMPUAN") ||
      rawGender.includes("WANITA") ||
      rawGender.includes("FEMALE")
    ) {
      gender = "P";
    } else if (
      rawGender === "L" ||
      rawGender.includes("LAKI") ||
      rawGender.includes("PRIA") ||
      rawGender.includes("MALE")
    ) {
      gender = "L";
    }

    const kpiRaw = getValue([
      "kpiscore",
      "kpi",
      "skorkpi",
      "nilai"
    ]);

    let kpiScore: number | undefined;

    if (
      kpiRaw !== undefined &&
      String(kpiRaw).trim() !== ""
    ) {
      const parsed = Number(kpiRaw);

      if (Number.isFinite(parsed)) {
        kpiScore = Math.min(
          100,
          Math.max(0, parsed)
        );
      }
    }

    const salaryRaw = getValue([
      "salary",
      "gaji",
      "gajipokok"
    ]);

    let salary: number | undefined;

    if (
      salaryRaw !== undefined &&
      String(salaryRaw).trim() !== ""
    ) {
      const cleaned = String(salaryRaw)
        .replace(/[^0-9-]/g, "");

      const parsed = Number(cleaned);

      if (Number.isFinite(parsed)) {
        salary = parsed;
      }
    }

    const bankAccount = String(
      getValue([
        "bankaccount",
        "rekening",
        "norekening",
        "nomorrekening"
      ]) || ""
    ).trim();

    const npwp = String(
      getValue([
        "npwp",
        "nomornpwp"
      ]) || ""
    ).trim();

    const errors: string[] = [];
    let isDuplicateNik = false;

    if (!nik) {
      errors.push("NIK wajib diisi");
    } else if (!/^\d{16}$/.test(nik)) {
      errors.push("NIK harus 16 digit");
    }

    if (
      nik &&
      existingNikSet.has(nik)
    ) {
      isDuplicateNik = true;
      errors.push(
        `NIK "${nik}" sudah digunakan`
      );
    }

    if (!name) {
      errors.push("Nama Pegawai wajib diisi");
    }

    if (!birthDate) {
      errors.push("Tanggal lahir wajib diisi");
    } else if (
      !/^\d{4}-\d{2}-\d{2}$/.test(birthDate)
    ) {
      errors.push(
        "Tanggal lahir harus YYYY-MM-DD"
      );
    }

    if (!tmtKerja) {
      errors.push("TMT Kerja wajib diisi");
    } else if (
      !/^\d{4}-\d{2}-\d{2}$/.test(tmtKerja)
    ) {
      errors.push(
        "TMT Kerja harus YYYY-MM-DD"
      );
    }

    if (
      rawGender &&
      !gender
    ) {
      errors.push(
        "Jenis kelamin harus L atau P"
      );
    }

    if (
      kpiRaw !== undefined &&
      String(kpiRaw).trim() !== "" &&
      kpiScore === undefined
    ) {
      errors.push("Skor KPI tidak valid");
    }

    const isValid = errors.length === 0;

    return {
      id: `import-row-${Date.now()}-${index}`,
      nik,
      name,
      position,
      division,
      status,
      tmtKerja,
      birthPlace,
      birthDate,
      reportingTo,
      phone,
      email,
      address,
      gender,
      kpiScore,
      salary,
      bankAccount,
      npwp,
      isValid,
      validationError: errors.join("; "),
      isDuplicateNik,
      selectedForImport: isValid
    };
  };

  // Semua NIK yang berulang di file dibuat invalid.
  const markDuplicateNiks = (
    rows: ParsedEmployeeRow[]
  ): ParsedEmployeeRow[] => {
    const counts = new Map<string, number>();

    rows.forEach(row => {
      if (!row.nik) return;

      counts.set(
        row.nik,
        (counts.get(row.nik) || 0) + 1
      );
    });

    return rows.map(row => {
      if (
        !row.nik ||
        (counts.get(row.nik) || 0) <= 1
      ) {
        return row;
      }

      const message =
        `NIK "${row.nik}" duplikat di file upload`;

      return {
        ...row,
        isValid: false,
        isDuplicateNik: true,
        validationError:
          row.validationError
            ? `${row.validationError}; ${message}`
            : message,
        selectedForImport: false
      };
    });
  };

  // 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(markDuplicateNiks(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(markDuplicateNiks(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.isDuplicateNik);
    const allValidSelected = validRows.every(r => r.selectedForImport);

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

  // Generate and Download Production Excel Template
  const downloadExcelTemplate = () => {
    const headers = [
      "nik",
      "name",
      "birthPlace",
      "birthDate",
      "tmtKerja",
      "division",
      "position",
      "status",
      "gender",
      "reportingTo",
      "email",
      "phone",
      "address",
      "salary",
      "bankAccount",
      "npwp",
      "kpiScore"
    ];

    const worksheet =
      XLSX.utils.aoa_to_sheet([headers]);

    worksheet["!cols"] = [
      { wch: 20 },
      { wch: 25 },
      { wch: 18 },
      { wch: 14 },
      { wch: 14 },
      { wch: 20 },
      { wch: 24 },
      { wch: 15 },
      { wch: 10 },
      { wch: 22 },
      { wch: 30 },
      { wch: 18 },
      { wch: 35 },
      { wch: 16 },
      { wch: 22 },
      { wch: 22 },
      { wch: 12 }
    ];

    const exampleSheet =
      XLSX.utils.json_to_sheet([
        {
          nik: "3573010101900003",
          name: "Siti Rahmawati",
          birthPlace: "Surabaya",
          birthDate: "1990-02-14",
          tmtKerja: "2026-08-29",
          division: "Finance",
          position: "Staff Finance",
          status: "Aktif",
          gender: "P",
          reportingTo: "Direktur Keuangan",
          email: "siti.rahmawati@example.com",
          phone: "081234567801",
          address: "Jl. Contoh No. 1, Surabaya",
          salary: 6500000,
          bankAccount: "012345678901",
          npwp: "12.345.678.9-001.000",
          kpiScore: 88
        }
      ]);

    exampleSheet["!cols"] =
      worksheet["!cols"];

    const guideSheet =
      XLSX.utils.aoa_to_sheet([
        ["ATURAN IMPORT PEGAWAI MEDIAN CLOUD"],
        [
          "1",
          "NIP tidak boleh diisi. NIP diterbitkan database."
        ],
        [
          "2",
          "tenant_id tidak boleh diisi. Tenant berasal dari session login."
        ],
        [
          "3",
          "Kolom wajib: nik, name, birthDate, tmtKerja."
        ],
        [
          "4",
          "NIK harus 16 digit."
        ],
        [
          "5",
          "Tanggal menggunakan format YYYY-MM-DD."
        ],
        [
          "6",
          "Gunakan sheet Template Import untuk upload production."
        ]
      ]);

    const workbook =
      XLSX.utils.book_new();

    XLSX.utils.book_append_sheet(
      workbook,
      worksheet,
      "Template Import"
    );

    XLSX.utils.book_append_sheet(
      workbook,
      exampleSheet,
      "Contoh Data"
    );

    XLSX.utils.book_append_sheet(
      workbook,
      guideSheet,
      "Panduan"
    );

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

  // Commit and execute bulk import.
  // UUID, tenant_id dan NIP adalah authority server/database.
  const handleCommitImport = async () => {
    const selectedRows =
      parsedData.filter(
        row => row.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 drafts: Record<string, any>[] =
      selectedRows.map(
        (row, index) => {
          const unique =
            `${Date.now()}-${index}`;

          const auditLog: AuditLog = {
            id: `audit-bulk-${unique}`,
            timestamp: nowStr,
            action: "CREATE",
            category: "Biodata",
            actorName:
              currentUser?.name ||
              "HR Administrator",
            actorPosition:
              currentUser?.position ||
              "HR Specialist",
            details:
              `Registrasi Pegawai Baru via Import Massal (${fileType})`
          };

          const draft: Record<string, any> = {
            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,

            riwayatJabatan:
              row.position || row.division
                ? [
                    {
                      id: `jab-bulk-${unique}`,
                      date: row.tmtKerja,
                      position: row.position,
                      division: row.division,
                      type: "Pengangkatan",
                      note:
                        "Pengangkatan awal melalui Import Massal"
                    }
                  ]
                : [],

            riwayatPendidikan: [],
            riwayatPelatihan: [],
            riwayatSK: [],
            riwayatKPI: [],
            riwayatReward: [],
            riwayatPunishment: [],

            timeline: [
              {
                id: `tl-bulk-${unique}`,
                date: row.tmtKerja,
                title:
                  "Mulai Bekerja (TMT Kerja)",
                description:
                  "Registrasi melalui Import Massal",
                type: "career"
              }
            ],

            documents: [],
            auditLogs: [auditLog]
          };

          if (row.gender) {
            draft.gender = row.gender;
          }

          if (
            row.kpiScore !== undefined
          ) {
            draft.kpiScore =
              row.kpiScore;
          }

          if (
            row.salary !== undefined
          ) {
            draft.salary =
              row.salary;
          }

          if (row.bankAccount) {
            draft.bankAccount =
              row.bankAccount;
          }

          if (row.npwp) {
            draft.npwp =
              row.npwp;
          }

          return draft;
        }
      );

    setIsProcessing(true);

    try {
      await onBulkSave(drafts);
      onClose();
    } catch (error: any) {
      console.error(
        "[BULK EMPLOYEE IMPORT]",
        error
      );

      alert(
        `Import massal belum berhasil.\n\n${
          error?.message ||
          "Terjadi kesalahan server."
        }`
      );
    } finally {
      setIsProcessing(false);
    }
  };

  const selectedCount = parsedData.filter(r => r.selectedForImport).length;
  const totalValidCount = parsedData.filter(r => r.isValid && !r.isDuplicateNik).length;
  const invalidCount = parsedData.filter(r => !r.isValid || r.isDuplicateNik).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>Kolom wajib production: NIK, Nama, Tanggal Lahir dan TMT Kerja. NIP dibuat otomatis oleh database.</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={`nik,name,birthDate,tmtKerja,division,position,status,email
3573010101900003,Siti Rahmawati,1990-02-14,2026-08-29,Finance,Staff Finance,Aktif,siti@example.com`}
                  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">NIK</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.isDuplicateNik ? "opacity-85 bg-rose-950/10" : ""}`}
                    >
                      <td className="p-2.5 text-center">
                        <input
                          type="checkbox"
                          checked={row.selectedForImport}
                          disabled={!row.isValid || row.isDuplicateNik}
                          onChange={() => toggleRowImport(row.id)}
                          className="accent-[#facc15] cursor-pointer"
                        />
                      </td>
                      <td className="p-2.5">
                        {row.isValid && !row.isDuplicateNik ? (
                          <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.nik}</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 || isProcessing}
              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" />
              {isProcessing ? "Menyimpan ke Database..." : `Impor Massal (${selectedCount} Pegawai)`}
            </button>
          </div>
        </div>

      </div>
    </div>
  );
}