/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React, { useState, useMemo, useEffect } from "react";
import { Employee, DigitalDocument, DocumentType, AuditLog, detectDocumentType, SalarySettings, SalaryAllowanceComponent, SalaryDeductionComponent, DelegatedTask, TimelineEvent } from "../types";
import { googleDriveService } from "../services/googleDriveService";
import { generateEmployee360PDF, generateEmployeeResumePDF, generateSalarySlipPDF } from "../utils/pdfExport";
import { getDefaultSalarySettings, calculateSalaryTotals, formatRupiah, PAY_GRADE_PRESETS } from "../utils/salaryUtils";
import { AutomatedTaxCalculator } from "./AutomatedTaxCalculator";
import { SalarySlipPreviewDrawer } from "./SalarySlipPreviewDrawer";
import { EmployeeDelegationTab } from "./EmployeeDelegationTab";
import { DigitalIdCardModal } from "./DigitalIdCardModal";
import { 
  User, 
  FileText, 
  Briefcase, 
  Calendar, 
  Sparkles, 
  ShieldCheck, 
  FolderOpen, 
  ChevronRight, 
  Plus, 
  Download, 
  Trash2, 
  FileCode, 
  Activity, 
  UserCheck, 
  UserX,
  UserMinus,
  CheckCircle2, 
  ShieldAlert, 
  AlertCircle,
  HelpCircle,
  Eye,
  History,
  Search,
  Filter,
  Clock,
  Shield,
  FileSpreadsheet,
  Edit2,
  Cloud,
  Folder,
  ExternalLink,
  Loader2,
  HardDrive,
  Printer,
  FileCheck,
  DollarSign,
  CreditCard,
  Coins,
  Receipt,
  Save,
  Check,
  Settings,
  Percent,
  Calculator,
  Wallet,
  QrCode
} from "lucide-react";

interface EmployeeProfile360Props {
  employee: Employee;
  employees: Employee[];
  onAddHistory: (empId: string, category: string, item: any) => void;
  onDeleteHistory?: (empId: string, category: string, itemId: string) => void;
  onUploadDocument: (empId: string, doc: DigitalDocument) => void;
  onDeleteDocument: (empId: string, docId: string) => void;
  onAddAuditLog?: (empId: string, log: Omit<AuditLog, "id" | "timestamp">) => void;
  onEdit: () => void;
  currentUser?: Employee | null;
  onUpdateSalarySettings?: (empId: string, settings: SalarySettings) => void;
  onUpdateDelegatedTasks?: (empId: string, tasks: DelegatedTask[]) => void;
  onSaveEmployee?: (emp: Employee) => void;
}

export default function EmployeeProfile360({
  employee,
  employees,
  onAddHistory,
  onDeleteHistory,
  onUploadDocument,
  onDeleteDocument,
  onAddAuditLog,
  onEdit,
  currentUser,
  onUpdateSalarySettings,
  onUpdateDelegatedTasks,
  onSaveEmployee
}: EmployeeProfile360Props) {
  const [aiSummary, setAiSummary] = useState<string>("");
  const [loadingAi, setLoadingAi] = useState<boolean>(false);
  const [dragOver, setDragOver] = useState<boolean>(false);
  const [selectedDmsFolder, setSelectedDmsFolder] = useState<DocumentType>("KTP");
  const [isUploadingGdrive, setIsUploadingGdrive] = useState<boolean>(false);
  const [dmsUploadAlert, setDmsUploadAlert] = useState<{
    type: 'success' | 'warning';
    title: string;
    message: string;
    detectedType: DocumentType;
  } | null>(null);

  // Quick Status Update State
  const [isStatusModalOpen, setIsStatusModalOpen] = useState<boolean>(false);
  const [isIdCardModalOpen, setIsIdCardModalOpen] = useState<boolean>(false);
  const [selectedNewStatus, setSelectedNewStatus] = useState<Employee["status"]>(employee.status);
  const [statusNoticeToast, setStatusNoticeToast] = useState<string | null>(null);

  useEffect(() => {
    setSelectedNewStatus(employee.status);
  }, [employee.status]);

  const handleUpdateStatusQuick = (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedNewStatus || selectedNewStatus === employee.status) {
      setIsStatusModalOpen(false);
      return;
    }

    const todayStr = new Date().toISOString().split("T")[0];
    const isResign = selectedNewStatus === "Resign" || selectedNewStatus === "Resigned";
    const isRetire = selectedNewStatus === "Pensiun";

    let logTitle = `Pembaruan Status Pegawai: ${selectedNewStatus}`;
    let logDesc = `Status pegawai diperbarui dari ${employee.status} menjadi ${selectedNewStatus}.`;
    let logType: 'career' | 'disciplinary' = 'career';

    if (isResign) {
      logTitle = "Pemberhentian / Resign Pegawai";
      logDesc = `Log Otomatis: Status pegawai diperbarui dari ${employee.status} menjadi ${selectedNewStatus}. Pengunduran diri resmi dari posisi ${employee.position} (Divisi ${employee.division}).`;
      logType = "disciplinary";
    } else if (isRetire) {
      logTitle = "Masa Purna Bakti / Pensiun";
      logDesc = `Log Otomatis: Status pegawai diperbarui dari ${employee.status} menjadi Pensiun. Masa purna bakti pegawai dari posisi ${employee.position} (Divisi ${employee.division}).`;
      logType = "career";
    }

    const newTimelineItem: TimelineEvent = {
      id: `tl-status-${Date.now()}`,
      date: todayStr,
      title: logTitle,
      description: logDesc,
      type: logType
    };

    const existingTimeline = employee.timeline ? [...employee.timeline] : [];
    const alreadyLoggedToday = existingTimeline.some(t => t.title === logTitle && t.date === todayStr);
    const updatedTimeline = alreadyLoggedToday ? existingTimeline : [newTimelineItem, ...existingTimeline];

    const updatedEmployee: Employee = {
      ...employee,
      status: selectedNewStatus,
      timeline: updatedTimeline
    };

    if (onSaveEmployee) {
      onSaveEmployee(updatedEmployee);
    }

    if (onAddAuditLog) {
      onAddAuditLog(employee.id, {
        action: "UPDATE",
        category: "Jabatan",
        actorName: currentUser ? currentUser.name : "HR Specialist Admin",
        actorPosition: currentUser ? currentUser.position : "HR Specialist",
        details: `Pembaruan status pegawai (${employee.name}) dari ${employee.status} menjadi ${selectedNewStatus}. Log otomatis ditambahkan ke timeline.`
      });
    }

    setStatusNoticeToast(`Status pegawai (${employee.name}) berhasil diperbarui menjadi '${selectedNewStatus}'! Log otomatis telah dicatat ke Timeline Pegawai.`);
    setIsStatusModalOpen(false);
    setTimeout(() => setStatusNoticeToast(null), 6000);
  };

  // State for tabs & modals
  const [activeTab, setActiveTab] = useState<"360" | "histories" | "dms" | "timeline" | "audit" | "salary" | "delegation">("360");
  const [showAddHistoryModal, setShowAddHistoryModal] = useState<string | null>(null);

  // Salary Settings State
  const [salarySettings, setSalarySettings] = useState<SalarySettings>(() => getDefaultSalarySettings(employee));
  const [showTaxCalculatorModal, setShowTaxCalculatorModal] = useState<boolean>(false);
  const [showSalarySlipDrawer, setShowSalarySlipDrawer] = useState<boolean>(false);
  const [salarySaveToast, setSalarySaveToast] = useState<string | null>(null);
  const [dmsArchiveNotice, setDmsArchiveNotice] = useState<{
    docName: string;
    month: string;
    docId: string;
  } | null>(null);
  const [selectedSlipMonth, setSelectedSlipMonth] = useState<string>("Agustus 2026");
  const [newAllowanceName, setNewAllowanceName] = useState<string>("");
  const [newAllowanceAmount, setNewAllowanceAmount] = useState<string>("");
  const [newDeductionName, setNewDeductionName] = useState<string>("");
  const [newDeductionAmount, setNewDeductionAmount] = useState<string>("");

  useEffect(() => {
    setSalarySettings(getDefaultSalarySettings(employee));
  }, [employee.id, employee.salarySettings]);

  const salaryTotals = useMemo(() => {
    return calculateSalaryTotals(salarySettings);
  }, [salarySettings]);

  const handleApplyPreset = (presetGradeName: string) => {
    const found = PAY_GRADE_PRESETS.find(p => p.grade === presetGradeName);
    if (!found) return;
    setSalarySettings(prev => ({
      ...prev,
      payGrade: found.grade,
      baseSalary: found.baseSalary,
      positionAllowance: found.positionAllowance,
      transportAllowance: found.transportAllowance,
      mealAllowance: found.mealAllowance,
      communicationAllowance: found.communicationAllowance,
      performanceBonus: found.performanceBonus,
      taxStatus: found.taxStatus,
      taxRatePercent: found.taxRatePercent
    }));
  };

  const handleAddCustomAllowance = () => {
    if (!newAllowanceName.trim() || !newAllowanceAmount) return;
    const item: SalaryAllowanceComponent = {
      id: `al-${Date.now()}`,
      name: newAllowanceName.trim(),
      amount: Number(newAllowanceAmount) || 0
    };
    setSalarySettings(prev => ({
      ...prev,
      customAllowances: [...(prev.customAllowances || []), item]
    }));
    setNewAllowanceName("");
    setNewAllowanceAmount("");
  };

  const handleRemoveCustomAllowance = (id: string) => {
    setSalarySettings(prev => ({
      ...prev,
      customAllowances: (prev.customAllowances || []).filter(item => item.id !== id)
    }));
  };

  const handleAddCustomDeduction = () => {
    if (!newDeductionName.trim() || !newDeductionAmount) return;
    const item: SalaryDeductionComponent = {
      id: `ded-${Date.now()}`,
      name: newDeductionName.trim(),
      amount: Number(newDeductionAmount) || 0
    };
    setSalarySettings(prev => ({
      ...prev,
      customDeductions: [...(prev.customDeductions || []), item]
    }));
    setNewDeductionName("");
    setNewDeductionAmount("");
  };

  const handleRemoveCustomDeduction = (id: string) => {
    setSalarySettings(prev => ({
      ...prev,
      customDeductions: (prev.customDeductions || []).filter(item => item.id !== id)
    }));
  };

  const handleSaveSalarySettings = (e: React.FormEvent) => {
    e.preventDefault();
    const updatedWithMeta: SalarySettings = {
      ...salarySettings,
      updatedAt: new Date().toISOString().split("T")[0],
      updatedBy: currentUser ? currentUser.name : "HR Specialist Admin"
    };

    if (onUpdateSalarySettings) {
      onUpdateSalarySettings(employee.id, updatedWithMeta);
    }

    if (onAddAuditLog) {
      onAddAuditLog(employee.id, {
        action: "UPDATE",
        category: "Jabatan",
        actorName: currentUser ? currentUser.name : "HR Officer",
        actorPosition: currentUser ? currentUser.position : "HR Specialist",
        details: `Pembaruan Pengaturan Gaji & Tax Rate (${salarySettings.payGrade}): Gaji Pokok ${formatRupiah(salarySettings.baseSalary)}, PPh 21 ${salarySettings.taxRatePercent}%, Take Home Pay ${formatRupiah(salaryTotals.takeHomePay)}`
      });
    }

    setSalarySaveToast(`Pengaturan Gaji pegawai (${employee.name}) berhasil disimpan dan diperbarui di sistem!`);
    setTimeout(() => setSalarySaveToast(null), 4000);
  };

  const handlePrintSalarySlip = () => {
    try {
      // 1. Generate & trigger PDF download
      const pdfResult = generateSalarySlipPDF({ ...employee, salarySettings }, selectedSlipMonth);
      
      // 2. Background Service: Automatically save monthly salary slip into DMS 'Salary' folder
      const nowStr = new Date().toISOString().replace("T", " ").substring(0, 16);
      const cleanMonth = selectedSlipMonth.replace(/\s+/g, '_');
      const docName = `Slip_Gaji_${cleanMonth}_${employee.nip}.pdf`;
      const archiveDocId = `doc-salary-${Date.now()}`;

      const salaryDoc: DigitalDocument = {
        id: archiveDocId,
        name: docName,
        type: 'Salary',
        fileSize: '185 KB',
        uploadedAt: nowStr,
        fileUrl: pdfResult.dataUrl || '#',
        gdriveFileId: `gdrive-sal-${Date.now()}`,
        gdriveLink: `https://drive.google.com/file/d/sal-${employee.nip}-${Date.now()}/view`
      };

      // Upload document into employee's DMS
      onUploadDocument(employee.id, salaryDoc);

      // 3. Audit-Compliant Log Entry
      if (onAddAuditLog) {
        onAddAuditLog(employee.id, {
          action: "CREATE",
          category: "Dokumen",
          actorName: "Background Archiving Service (DMS)",
          actorPosition: "Audit Archiver Bot",
          details: `[Audit Archive OK] Slip Gaji Periode ${selectedSlipMonth} otomatis diarsipkan ke folder DMS 'Salary' (Ref ID: ${archiveDocId}, THP: ${formatRupiah(salaryTotals.takeHomePay)})`
        });
      }

      // 4. Set Notification Toast
      setDmsArchiveNotice({
        docName,
        month: selectedSlipMonth,
        docId: archiveDocId
      });
      setTimeout(() => setDmsArchiveNotice(null), 8000);

    } catch (err) {
      console.error("Gagal cetak slip gaji PDF & auto-arsip DMS:", err);
    }
  };

  // State for Audit Log search & filter
  const [auditSearch, setAuditSearch] = useState("");
  const [auditActionFilter, setAuditActionFilter] = useState<string>("All");
  const [auditCategoryFilter, setAuditCategoryFilter] = useState<string>("All");

  // State for custom manual audit modal
  const [showAddAuditModal, setShowAddAuditModal] = useState<boolean>(false);
  const [manualAction, setManualAction] = useState<'CREATE' | 'UPDATE' | 'DELETE'>("UPDATE");
  const [manualCategory, setManualCategory] = useState<AuditLog['category']>("Biodata");
  const [manualDetails, setManualDetails] = useState("");

  // Form states for manual additions
  const [newSchool, setNewSchool] = useState("");
  const [newMajor, setNewMajor] = useState("");
  const [newLevel, setNewLevel] = useState<any>("S1");
  const [newYearGrad, setNewYearGrad] = useState("");

  const [newCourse, setNewCourse] = useState("");
  const [newProvider, setNewProvider] = useState("");
  const [newCourseCat, setNewCourseCat] = useState<any>("Technical");

  const [newSKNum, setNewSKNum] = useState("");
  const [newSKType, setNewSKType] = useState<any>("SK Pengangkatan");
  const [newSKDate, setNewSKDate] = useState("");

  const [newKPIScore, setNewKPIScore] = useState("85");
  const [newKPIPeriod, setNewKPIPeriod] = useState("2026 Q2");
  
  const [newRewardTitle, setNewRewardTitle] = useState("");
  const [newRewardGiver, setNewRewardGiver] = useState("");
  const [newRewardDesc, setNewRewardDesc] = useState("");

  const [newPunishType, setNewPunishType] = useState<any>("Teguran Lisan");
  const [newPunishReason, setNewPunishReason] = useState("");
  const [newPunishGiver, setNewPunishGiver] = useState("");

  // Auto Age & Tenure Calculations
  const age = useMemo(() => {
    const birthDate = new Date(employee.birthDate);
    const today = new Date();
    let computedAge = today.getFullYear() - birthDate.getFullYear();
    const m = today.getMonth() - birthDate.getMonth();
    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
      computedAge--;
    }
    return computedAge;
  }, [employee.birthDate]);

  const tenureStr = useMemo(() => {
    const joinDate = new Date(employee.tmtKerja);
    const today = new Date();
    let months = (today.getFullYear() - joinDate.getFullYear()) * 12 + (today.getMonth() - joinDate.getMonth());
    if (today.getDate() < joinDate.getDate()) {
      months--;
    }
    const years = Math.floor(months / 12);
    const remMonths = months % 12;
    return `${years} Tahun ${remMonths} Bulan`;
  }, [employee.tmtKerja]);

  const supervisorName = useMemo(() => {
    if (!employee.reportingTo) return "Tidak Ada (Top Level)";
    const sup = employees.find(e => e.id === employee.reportingTo);
    return sup ? sup.name : employee.reportingTo;
  }, [employee.reportingTo, employees]);

  // Effective Audit Logs (with default synthetic baseline records if none recorded yet)
  const effectiveAuditLogs = useMemo<AuditLog[]>(() => {
    if (employee.auditLogs && employee.auditLogs.length > 0) {
      return employee.auditLogs;
    }
    return [
      {
        id: `audit-init-1`,
        timestamp: `${employee.tmtKerja || '2024-01-01'} 08:30:00`,
        action: 'CREATE',
        category: 'Biodata',
        actorName: 'Sistem Admin HR',
        actorPosition: 'Kepala Divisi HR',
        details: `Pendaftaran awal profil pegawai resmi (${employee.name}) dengan NIP: ${employee.nip}`
      },
      {
        id: `audit-init-2`,
        timestamp: `${employee.tmtKerja || '2024-01-01'} 09:00:00`,
        action: 'CREATE',
        category: 'Jabatan',
        actorName: 'Direksi Utama',
        actorPosition: 'CEO',
        details: `Penetapan Jabatan Awal: ${employee.position} pada Divisi ${employee.division}`
      },
      {
        id: `audit-init-3`,
        timestamp: `2026-01-10 10:15:22`,
        action: 'CREATE',
        category: 'Dokumen',
        actorName: 'Staf Administrasi HR',
        actorPosition: 'HR Specialist',
        details: `Pengunggahan dan verifikasi berkas identitas resmi (KTP & KK)`
      }
    ];
  }, [employee]);

  // Filtered Audit Logs
  const filteredAuditLogs = useMemo(() => {
    return effectiveAuditLogs.filter(log => {
      const searchLower = auditSearch.toLowerCase().trim();
      const matchesSearch = !searchLower || 
        log.details.toLowerCase().includes(searchLower) ||
        log.actorName.toLowerCase().includes(searchLower) ||
        (log.actorPosition || "").toLowerCase().includes(searchLower) ||
        log.category.toLowerCase().includes(searchLower) ||
        log.timestamp.includes(searchLower);
      
      const matchesAction = auditActionFilter === "All" || log.action === auditActionFilter;
      const matchesCategory = auditCategoryFilter === "All" || log.category === auditCategoryFilter;

      return matchesSearch && matchesAction && matchesCategory;
    });
  }, [effectiveAuditLogs, auditSearch, auditActionFilter, auditCategoryFilter]);

  const handleManualAuditSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!manualDetails.trim()) return;

    if (onAddAuditLog) {
      onAddAuditLog(employee.id, {
        action: manualAction,
        category: manualCategory,
        actorName: currentUser ? currentUser.name : "System / HR Auditor",
        actorPosition: currentUser ? currentUser.position : "Auditor Internal",
        details: manualDetails.trim()
      });
    }
    setManualDetails("");
    setShowAddAuditModal(false);
  };

  // Helper to render formatted markdown summary
  const renderFormattedSummaryText = (text: string) => {
    const lines = text.split("\n");
    return (
      <div className="space-y-3">
        {lines.map((line, idx) => {
          const trimmed = line.trim();
          if (!trimmed) return null;

          if (trimmed.startsWith("###") || trimmed.startsWith("##")) {
            const headerText = trimmed.replace(/^#+\s*/, "");
            return (
              <h5 key={idx} className="text-xs font-black text-[#facc15] uppercase tracking-wider pt-2 border-b border-[#222] pb-1.5 flex items-center gap-2">
                <Sparkles className="w-3.5 h-3.5 text-[#facc15]" />
                {headerText}
              </h5>
            );
          }

          if (trimmed.startsWith("- ") || trimmed.startsWith("* ")) {
            const bulletContent = trimmed.substring(2);
            const parts = bulletContent.split(/(\*\*.*?\*\*)/g);
            return (
              <div key={idx} className="flex items-start gap-2 text-xs leading-relaxed pl-2 font-mono text-slate-300">
                <span className="text-[#facc15] font-bold">•</span>
                <div>
                  {parts.map((p, pIdx) => {
                    if (p.startsWith("**") && p.endsWith("**")) {
                      return <strong key={pIdx} className="text-white font-bold">{p.slice(2, -2)}</strong>;
                    }
                    return p;
                  })}
                </div>
              </div>
            );
          }

          const parts = trimmed.split(/(\*\*.*?\*\*)/g);
          return (
            <p key={idx} className="text-xs leading-relaxed text-slate-300 font-mono text-justify">
              {parts.map((p, pIdx) => {
                if (p.startsWith("**") && p.endsWith("**")) {
                  return <strong key={pIdx} className="text-white font-bold">{p.slice(2, -2)}</strong>;
                }
                return p;
              })}
            </p>
          );
        })}
      </div>
    );
  };

  // Call Gemini API for profile summary
  const generateAiSummary = async () => {
    setLoadingAi(true);
    setAiSummary("");
    try {
      const response = await fetch("/api/gemini/summary", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ 
          employee: {
            ...employee,
            auditLogs: effectiveAuditLogs
          } 
        }),
      });
      const data = await response.json();
      if (data.summary) {
        setAiSummary(data.summary);
      } else {
        setAiSummary("Gagal membuat ringkasan profil. Silakan periksa kunci API Anda.");
      }
    } catch (error) {
      setAiSummary("Koneksi gagal. Pastikan server dev berjalan dengan benar.");
    } finally {
      setLoadingAi(false);
    }
  };

  // Export 360 Profile to Structured PDF Document
  const [isExportingPdf, setIsExportingPdf] = useState(false);
  const handleExportPdf = () => {
    setIsExportingPdf(true);
    try {
      generateEmployee360PDF(employee, aiSummary);
      if (onAddAuditLog) {
        onAddAuditLog(employee.id, {
          action: "UPDATE",
          category: "Dokumen",
          actorName: currentUser ? currentUser.name : "HR Staff",
          actorPosition: currentUser ? currentUser.position : "HR Specialist",
          details: `Mencetak/Mengeksport Laporan Resmi Executive 360° PDF untuk Pegawai (${employee.name})`
        });
      }
    } catch (err) {
      console.error("Gagal export PDF:", err);
    } finally {
      setTimeout(() => setIsExportingPdf(false), 500);
    }
  };

  // Export HR Resume PDF
  const [isExportingResume, setIsExportingResume] = useState(false);
  const handleExportResumePdf = () => {
    setIsExportingResume(true);
    try {
      generateEmployeeResumePDF(employee);
      if (onAddAuditLog) {
        onAddAuditLog(employee.id, {
          action: "UPDATE",
          category: "Dokumen",
          actorName: currentUser ? currentUser.name : "HR Staff",
          actorPosition: currentUser ? currentUser.position : "HR Specialist",
          details: `Mencetak/Mengeksport Resume HR PDF (Curriculum Vitae Internal) untuk Pegawai (${employee.name})`
        });
      }
    } catch (err) {
      console.error("Gagal export Resume PDF:", err);
    } finally {
      setTimeout(() => setIsExportingResume(false), 500);
    }
  };

  // DMS Folders Categories list
  const folders: DocumentType[] = [
    "KTP",
    "KK",
    "NPWP",
    "BPJS",
    "Ijazah",
    "Sertifikat",
    "Kontrak",
    "SK",
    "Foto",
    "Surat Peringatan",
    "Penilaian KPI",
    "Salary"
  ];

  // Filter documents in current folder
  const currentFolderDocs = useMemo(() => {
    return (employee.documents || []).filter(doc => doc.type === selectedDmsFolder);
  }, [employee.documents, selectedDmsFolder]);

  // Handles custom drag and drop
  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault();
    setDragOver(true);
  };

  const handleDragLeave = () => {
    setDragOver(false);
  };

  const processFile = (file: File) => {
    setIsUploadingGdrive(true);

    // Auto-detect document type based on filename
    const autoDetectedType = detectDocumentType(file.name, selectedDmsFolder);

    // Validation check: check if file of this type already exists for employee
    const existingDoc = (employee.documents || []).find(d => d.type === autoDetectedType);

    if (existingDoc) {
      setDmsUploadAlert({
        type: 'warning',
        title: `Peringatan: Dokumen Tipe "${autoDetectedType}" Sudah Ada di DMS!`,
        message: `Pegawai ${employee.name} sudah memiliki berkas ${autoDetectedType} ("${existingDoc.name}"). Berkas baru "${file.name}" tetap berhasil disimpan sebagai versi terbaru ke Google Drive.`,
        detectedType: autoDetectedType
      });
    } else {
      setDmsUploadAlert({
        type: 'success',
        title: `Tipe Dokumen Terdeteksi Otomatis: [${autoDetectedType}]`,
        message: `Nama berkas "${file.name}" dikenali sebagai kategori ${autoDetectedType} dan berhasil diunggah langsung ke Google Drive API.`,
        detectedType: autoDetectedType
      });
    }

    // Auto navigate user to the detected category folder
    setSelectedDmsFolder(autoDetectedType);

    const reader = new FileReader();
    reader.onloadend = async () => {
      const base64Content = reader.result as string;
      const sizeStr = file.size > 1024 * 1024 
        ? `${(file.size / (1024 * 1024)).toFixed(1)} MB`
        : `${Math.round(file.size / 1024)} KB`;

      let gdriveFileId: string | undefined;
      let gdriveLink: string | undefined;

      // Initialize client & upload file to Google Drive via service
      try {
        googleDriveService.initializeClient();
        const driveRes = await googleDriveService.uploadFile({
          fileName: file.name,
          mimeType: file.type || "application/octet-stream",
          base64Data: base64Content,
          employeeName: employee.name,
          documentCategory: autoDetectedType
        });

        if (driveRes.success) {
          gdriveFileId = driveRes.fileId;
          gdriveLink = driveRes.webViewLink;
        }
      } catch (err) {
        console.warn("Google Drive service upload failed, saved locally:", err);
      } finally {
        setIsUploadingGdrive(false);
      }

      const newDoc: DigitalDocument = {
        id: `doc-${Math.random().toString(36).substr(2, 9)}`,
        name: file.name,
        type: autoDetectedType,
        fileSize: sizeStr,
        uploadedAt: new Date().toISOString().replace("T", " ").substring(0, 16),
        fileUrl: base64Content,
        gdriveFileId,
        gdriveLink
      };

      onUploadDocument(employee.id, newDoc);
    };
    reader.readAsDataURL(file);
  };

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    setDragOver(false);
    const file = e.dataTransfer.files?.[0];
    if (file) {
      processFile(file);
    }
  };

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

  // Submitting modal forms
  const handleAddHistorySubmit = (category: string) => {
    let payload: any = {};
    const dateNow = new Date().toISOString().split("T")[0];

    if (category === "Pendidikan") {
      if (!newSchool || !newMajor) return;
      payload = { id: `edu-${Date.now()}`, level: newLevel, school: newSchool, major: newMajor, yearGraduated: newYearGrad || "2026" };
      onAddHistory(employee.id, "riwayatPendidikan", payload);
      // Reset
      setNewSchool(""); setNewMajor(""); setNewYearGrad("");
    } else if (category === "Pelatihan") {
      if (!newCourse || !newProvider) return;
      payload = { id: `tr-${Date.now()}`, date: dateNow, course: newCourse, provider: newProvider, category: newCourseCat };
      onAddHistory(employee.id, "riwayatPelatihan", payload);
      setNewCourse(""); setNewProvider("");
    } else if (category === "SK") {
      if (!newSKNum || !newSKDate) return;
      payload = { id: `sk-${Date.now()}`, date: dateNow, type: newSKType, skNumber: newSKNum, effectiveDate: newSKDate };
      onAddHistory(employee.id, "riwayatSK", payload);
      setNewSKNum(""); setNewSKDate("");
    } else if (category === "KPI") {
      payload = { id: `kpi-${Date.now()}`, period: newKPIPeriod, score: Number(newKPIScore), grade: Number(newKPIScore) >= 90 ? 'A' : Number(newKPIScore) >= 80 ? 'B' : 'C', evaluator: "Manager Operasional" };
      onAddHistory(employee.id, "riwayatKPI", payload);
    } else if (category === "Reward") {
      if (!newRewardTitle) return;
      payload = { id: `rew-${Date.now()}`, date: dateNow, title: newRewardTitle, giver: newRewardGiver || "Direksi", description: newRewardDesc };
      onAddHistory(employee.id, "riwayatReward", payload);
      setNewRewardTitle(""); setNewRewardGiver(""); setNewRewardDesc("");
    } else if (category === "Punishment") {
      if (!newPunishReason) return;
      payload = { id: `pun-${Date.now()}`, date: dateNow, type: newPunishType, reason: newPunishReason, giver: newPunishGiver || "Supervisor" };
      onAddHistory(employee.id, "riwayatPunishment", payload);
      setNewPunishReason(""); setNewPunishGiver("");
    }

    setShowAddHistoryModal(null);
  };

  return (
    <div className="space-y-6" id="employee-profile-360-view">
      
      {/* Profile Header Block */}
      <div className="bg-[#0a0a0a] border border-[#222] rounded-none p-6 flex flex-col md:flex-row gap-6 items-center md:items-start justify-between animate-fadeIn">
        <div className="flex flex-col md:flex-row items-center md:items-start gap-6">
          {/* Employee Avatar */}
          <div className="relative">
            <div className="w-28 h-28 rounded-none bg-[#111] border-2 border-[#222] flex items-center justify-center overflow-hidden">
              {employee.photoUrl ? (
                <img src={employee.photoUrl} alt={employee.name} className="w-full h-full object-cover" />
              ) : (
                <div className="text-center text-[#facc15] font-black text-3xl">
                  {(employee.name || "").split(" ").filter(Boolean).map(n => n[0]).join("").substring(0, 2).toUpperCase()}
                </div>
              )}
            </div>
            <span 
              onClick={() => setIsStatusModalOpen(true)}
              className={`absolute -bottom-2 -right-2 px-2.5 py-1 text-[10px] font-black uppercase rounded-none border cursor-pointer hover:scale-105 transition-all shadow-md ${
                employee.status === "Aktif" ? "bg-green-500/10 text-green-400 border-green-500/20 hover:border-green-400" :
                employee.status === "Resign" || employee.status === "Resigned" ? "bg-rose-500/10 text-rose-400 border-rose-500/20 hover:border-rose-400" :
                employee.status === "Pensiun" ? "bg-purple-500/10 text-purple-400 border-purple-500/20 hover:border-purple-400" :
                "bg-amber-500/10 text-amber-400 border-amber-500/20 hover:border-amber-400"
              }`}
              title="Klik untuk mengubah status kerja pegawai (Aktif / Resign / Pensiun)"
            >
              {employee.status} ✎
            </span>
          </div>

          {/* Profile Quick Info */}
          <div className="text-center md:text-left space-y-1">
            <h3 className="text-2xl font-black text-white uppercase tracking-tight" id="profile-employee-name">{employee.name}</h3>
            <p className="text-sm font-bold text-[#facc15] uppercase tracking-wide font-mono">{employee.position} — {employee.division}</p>
            <div className="flex flex-wrap items-center justify-center md:justify-start gap-3 mt-2 text-xs font-mono text-slate-500">
              <span>NIP: <strong className="text-slate-300 font-bold">{employee.nip}</strong></span>
              <span>•</span>
              <span>NIK: <strong className="text-slate-300 font-bold">{employee.nik}</strong></span>
            </div>
            <div className="flex flex-wrap gap-2 mt-3 justify-center md:justify-start">
              <span className="text-[10px] font-black bg-[#111] text-[#facc15] border border-[#222] px-2.5 py-1 rounded-none uppercase font-mono">
                Masa Kerja: {tenureStr}
              </span>
              <span className="text-[10px] font-black bg-[#111] text-slate-300 border border-[#222] px-2.5 py-1 rounded-none uppercase font-mono">
                Umur: {age} Tahun
              </span>
            </div>
          </div>
        </div>

        {/* Buttons */}
        <div className="flex flex-wrap items-center gap-2">
          <button 
            onClick={() => setIsIdCardModalOpen(true)}
            className="bg-gradient-to-r from-amber-500 to-yellow-500 hover:from-amber-400 hover:to-yellow-400 text-slate-950 font-black uppercase tracking-wider px-3.5 py-2 rounded-none text-xs flex items-center gap-1.5 border border-amber-300 transition-all shadow-lg shadow-amber-950/30 cursor-pointer"
            title="Buka Generator & Cetak Kartu ID Digital Pegawai dilengkapi QR Code Verifikasi"
          >
            <QrCode className="w-4 h-4 text-slate-950" />
            Cetak ID Card Digital
          </button>
          <button 
            onClick={handleExportPdf}
            disabled={isExportingPdf}
            className="bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-500 hover:to-teal-500 disabled:opacity-50 text-white font-black uppercase tracking-wider px-3.5 py-2 rounded-none text-xs flex items-center gap-2 border border-emerald-400/50 transition-all shadow-lg shadow-emerald-950/40 cursor-pointer"
            title="Unduh Laporan Lengkap Profil Pegawai (Riwayat Karir, SK & Pendidikan) Format PDF"
          >
            <Download className="w-4 h-4 text-emerald-200 animate-bounce-slow" />
            {isExportingPdf ? "Mencetak..." : "Unduh PDF"}
          </button>
          <button 
            onClick={handleExportResumePdf}
            disabled={isExportingResume}
            className="bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white font-black uppercase tracking-wider px-3.5 py-2 rounded-none text-xs flex items-center gap-2 border border-indigo-400/40 transition-all shadow-md cursor-pointer"
            title="Generate & Unduh Resume CV Kepegawaian Format HR"
          >
            <FileText className="w-3.5 h-3.5 text-indigo-200" />
            {isExportingResume ? "Mencetak Resume..." : "PDF Resume HR"}
          </button>
          <button 
            onClick={() => setIsStatusModalOpen(true)}
            className="border border-amber-500/40 text-amber-300 hover:bg-amber-950/60 hover:text-white font-black uppercase tracking-wider px-3.5 py-2 rounded-none text-xs transition-colors bg-[#050505] cursor-pointer flex items-center gap-1.5"
            title="Ubah status pegawai (Aktif / Resign / Pensiun) & catat log otomatis di timeline"
          >
            <UserX className="w-3.5 h-3.5 text-amber-400" />
            Ubah Status
          </button>
          <button 
            onClick={onEdit}
            className="border border-[#222] text-slate-300 hover:bg-[#111] hover:text-white font-black uppercase tracking-wider px-3.5 py-2 rounded-none text-xs transition-colors bg-[#050505] cursor-pointer"
          >
            Edit Profile
          </button>
          <button 
            onClick={generateAiSummary}
            disabled={loadingAi}
            className="bg-[#facc15] hover:bg-yellow-500 disabled:bg-yellow-900/50 disabled:text-yellow-600/50 text-black font-black uppercase tracking-wider px-3.5 py-2 rounded-none text-xs flex items-center gap-1.5 transition-all shadow-md cursor-pointer"
            title="Generate a professional multi-paragraph narrative summarizing career trajectory, performance history, and key achievements using Gemini AI"
          >
            <Sparkles className="w-3.5 h-3.5 text-black" />
            {loadingAi ? "Menganalisis..." : "AI Profile Summarizer"}
          </button>
        </div>
      </div>

      {/* Toast Notice Banner for Status Update */}
      {statusNoticeToast && (
        <div className="bg-emerald-950/90 border border-emerald-500/60 text-emerald-200 p-4 font-mono text-xs flex items-center justify-between shadow-xl animate-fadeIn">
          <div className="flex items-center gap-2.5">
            <CheckCircle2 className="w-4 h-4 text-emerald-400 shrink-0" />
            <span>{statusNoticeToast}</span>
          </div>
          <button
            onClick={() => setActiveTab("timeline")}
            className="bg-emerald-600 hover:bg-emerald-500 text-white font-black uppercase text-[10px] px-3 py-1.5 rounded-none tracking-wider cursor-pointer transition-colors shrink-0"
          >
            Buka Timeline Pegawai →
          </button>
        </div>
      )}

      {/* AI Summary Panel */}
      {(aiSummary || loadingAi) && (
        <div className="border-2 border-[#facc15]/30 bg-[#050505] rounded-none p-6 relative overflow-hidden shadow-xl animate-fadeIn">
          <div className="absolute right-2 top-2 opacity-5 pointer-events-none">
            <Sparkles className="w-32 h-32 text-[#facc15]" />
          </div>
          
          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-[#222] pb-3 mb-4">
            <h4 className="text-xs font-black text-[#facc15] uppercase tracking-wider flex items-center gap-2">
              <Sparkles className="w-4 h-4 text-[#facc15]" />
              AI PROFILE SUMMARIZER — EXECUTIVE NARRATIVE REPORT
            </h4>

            {aiSummary && !loadingAi && (
              <button
                type="button"
                onClick={generateAiSummary}
                className="text-[10px] font-mono font-bold text-slate-400 hover:text-white bg-[#111] border border-[#222] px-2.5 py-1 rounded-none flex items-center gap-1 transition-colors self-start sm:self-auto"
              >
                <Sparkles className="w-3 h-3 text-[#facc15]" /> Regenerate Narrative
              </button>
            )}
          </div>
          
          {loadingAi ? (
            <div className="space-y-3 py-4">
              <div className="flex items-center gap-2 text-xs text-[#facc15] font-mono font-bold animate-pulse mb-2">
                <Loader2 className="w-4 h-4 animate-spin text-[#facc15]" />
                Menganalisis rekam karir, riwayat mutasi, evaluasi KPI, & audit log pegawai dengan Gemini AI...
              </div>
              <div className="h-4 bg-[#111] animate-pulse w-3/4"></div>
              <div className="h-4 bg-[#111] animate-pulse w-5/6"></div>
              <div className="h-4 bg-[#111] animate-pulse w-2/3"></div>
            </div>
          ) : (
            <div className="text-sm">
              {renderFormattedSummaryText(aiSummary)}
            </div>
          )}
        </div>
      )}

      {/* Profile Sections Tab Controls */}
      <div className="border-b border-[#222]">
        <nav className="flex flex-wrap gap-6 -mb-px">
          <button 
            onClick={() => setActiveTab("360")}
            className={`pb-3 text-xs font-black uppercase tracking-wider border-b-2 transition-all ${
              activeTab === "360" ? "border-[#facc15] text-[#facc15]" : "border-transparent text-slate-500 hover:text-slate-300"
            }`}
          >
            Induk Digital & 360°
          </button>
          <button 
            onClick={() => setActiveTab("histories")}
            className={`pb-3 text-xs font-black uppercase tracking-wider border-b-2 transition-all ${
              activeTab === "histories" ? "border-[#facc15] text-[#facc15]" : "border-transparent text-slate-500 hover:text-slate-300"
            }`}
          >
            Sub-Riwayat Karier
          </button>
          <button 
            onClick={() => setActiveTab("dms")}
            className={`pb-3 text-xs font-black uppercase tracking-wider border-b-2 transition-all ${
              activeTab === "dms" ? "border-[#facc15] text-[#facc15]" : "border-transparent text-slate-500 hover:text-slate-300"
            }`}
          >
            Arsip Dokumen (DMS)
          </button>
          <button 
            onClick={() => setActiveTab("timeline")}
            className={`pb-3 text-xs font-black uppercase tracking-wider border-b-2 transition-all ${
              activeTab === "timeline" ? "border-[#facc15] text-[#facc15]" : "border-transparent text-slate-500 hover:text-slate-300"
            }`}
          >
            Timeline Perjalanan
          </button>
          <button 
            onClick={() => setActiveTab("salary")}
            className={`pb-3 text-xs font-black uppercase tracking-wider border-b-2 transition-all flex items-center gap-1.5 ${
              activeTab === "salary" ? "border-[#facc15] text-[#facc15]" : "border-transparent text-slate-500 hover:text-slate-300"
            }`}
          >
            <DollarSign className="w-3.5 h-3.5 text-[#facc15]" />
            Salary Settings & Slip
          </button>
          <button 
            onClick={() => setActiveTab("audit")}
            className={`pb-3 text-xs font-black uppercase tracking-wider border-b-2 transition-all flex items-center gap-1.5 ${
              activeTab === "audit" ? "border-[#facc15] text-[#facc15]" : "border-transparent text-slate-500 hover:text-slate-300"
            }`}
          >
            <History className="w-3.5 h-3.5 text-[#facc15]" />
            Audit Log Aktivitas
            <span className="text-[10px] bg-[#111] border border-[#222] px-1.5 py-0.5 text-[#facc15] font-mono font-bold">
              {effectiveAuditLogs.length}
            </span>
          </button>
          <button 
            onClick={() => setActiveTab("delegation")}
            className={`pb-3 text-xs font-black uppercase tracking-wider border-b-2 transition-all flex items-center gap-1.5 ${
              activeTab === "delegation" ? "border-[#facc15] text-[#facc15]" : "border-transparent text-slate-500 hover:text-slate-300"
            }`}
          >
            <UserCheck className="w-3.5 h-3.5 text-[#facc15]" />
            Delegasi & Sub-Tugas
            <span className="text-[10px] bg-[#111] border border-[#222] px-1.5 py-0.5 text-[#facc15] font-mono font-bold">
              {(employee.delegatedTasks || []).filter(t => t.status !== "Completed").length}
            </span>
          </button>
        </nav>
      </div>

      {/* Content Tab Panel 1: Card Induk Pegawai Digital */}
      {activeTab === "360" && (
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {/* Column Left + Middle: Identitas Card */}
          <div className="md:col-span-2 bg-[#0a0a0a] border border-[#222] rounded-none p-6 space-y-6">
            <h4 className="text-xs font-black text-slate-500 uppercase tracking-widest border-b border-[#222] pb-3">
              KARTU INDUK PEGAWAI DIGITAL
            </h4>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4 text-sm">
              <div className="border-b border-[#1c1c1c] pb-2">
                <span className="text-[10px] uppercase font-black tracking-wider text-slate-500 block mb-0.5">NIP Internal EMS</span>
                <span className="font-mono font-bold text-[#facc15]">{employee.nip}</span>
              </div>
              <div className="border-b border-[#1c1c1c] pb-2">
                <span className="text-[10px] uppercase font-black tracking-wider text-slate-500 block mb-0.5">NIK KTP Resmi</span>
                <span className="font-mono font-bold text-white">{employee.nik}</span>
              </div>
              <div className="border-b border-[#1c1c1c] pb-2 col-span-1 md:col-span-2">
                <span className="text-[10px] uppercase font-black tracking-wider text-slate-500 block mb-0.5">Nama Lengkap</span>
                <span className="font-black text-white uppercase text-md">{employee.name}</span>
              </div>
              <div className="border-b border-[#1c1c1c] pb-2">
                <span className="text-[10px] uppercase font-black tracking-wider text-slate-500 block mb-0.5">Tempat Lahir</span>
                <span className="font-bold text-white uppercase">{employee.birthPlace || "Jakarta"}</span>
              </div>
              <div className="border-b border-[#1c1c1c] pb-2">
                <span className="text-[10px] uppercase font-black tracking-wider text-slate-500 block mb-0.5">Tanggal Lahir</span>
                <span className="font-bold text-white uppercase font-mono">{employee.birthDate} ({age} Tahun)</span>
              </div>
              <div className="border-b border-[#1c1c1c] pb-2">
                <span className="text-[10px] uppercase font-black tracking-wider text-slate-500 block mb-0.5">TMT Kerja (Join Date)</span>
                <span className="font-mono font-bold text-[#facc15]">{employee.tmtKerja}</span>
              </div>
              <div className="border-b border-[#1c1c1c] pb-2">
                <span className="text-[10px] uppercase font-black tracking-wider text-slate-500 block mb-0.5">Masa Kerja</span>
                <span className="font-black text-green-400 font-mono uppercase">{tenureStr}</span>
              </div>
              <div className="border-b border-[#1c1c1c] pb-2">
                <span className="text-[10px] uppercase font-black tracking-wider text-slate-500 block mb-0.5">Divisi Kerja</span>
                <span className="font-bold text-white uppercase">{employee.division}</span>
              </div>
              <div className="border-b border-[#1c1c1c] pb-2">
                <span className="text-[10px] uppercase font-black tracking-wider text-slate-500 block mb-0.5">Jabatan</span>
                <span className="font-bold text-white uppercase">{employee.position}</span>
              </div>
              <div className="border-b border-[#1c1c1c] pb-2">
                <span className="text-[10px] uppercase font-black tracking-wider text-slate-500 block mb-0.5">Atasan Langsung (Direct Supervisor)</span>
                <span className="font-black text-[#facc15] uppercase">{supervisorName}</span>
              </div>
              <div className="border-b border-[#1c1c1c] pb-2">
                <span className="text-[10px] uppercase font-black tracking-wider text-slate-500 block mb-0.5">Status Kontrak Kerja</span>
                <span className="font-bold text-white uppercase">{employee.status}</span>
              </div>
              <div className="border-b border-[#1c1c1c] pb-2">
                <span className="text-[10px] uppercase font-black tracking-wider text-slate-500 block mb-0.5">No. Handphone</span>
                <span className="font-mono font-bold text-white">{employee.phone || "-"}</span>
              </div>
              <div className="border-b border-[#1c1c1c] pb-2">
                <span className="text-[10px] uppercase font-black tracking-wider text-slate-500 block mb-0.5">Email</span>
                <span className="font-bold text-white font-mono">{employee.email || "-"}</span>
              </div>
              <div className="col-span-1 md:col-span-2 border-b border-[#1c1c1c] pb-2">
                <span className="text-[10px] uppercase font-black tracking-wider text-slate-500 block mb-0.5">Alamat Lengkap</span>
                <span className="text-slate-300 text-xs leading-relaxed uppercase font-mono">{employee.address || "-"}</span>
              </div>
            </div>
          </div>

          {/* Column Right: Org & Status Highlights */}
          <div className="bg-[#0a0a0a] border border-[#222] rounded-none p-6 space-y-6">
            <h4 className="text-xs font-black text-slate-500 uppercase tracking-widest border-b border-[#222] pb-3">
              SISTEM INFORMASI & AKSES
            </h4>

            {/* Access control */}
            <div className="space-y-3">
              <div className="flex items-center gap-3">
                <div className="w-9 h-9 rounded-none bg-[#111] text-[#facc15] border border-[#222] flex items-center justify-center">
                  <ShieldCheck className="w-5 h-5" />
                </div>
                <div>
                  <h5 className="text-xs font-black text-white uppercase">Hak Akses Sistem</h5>
                  <p className="text-[10px] text-slate-500 font-mono uppercase">Level: Modul {employee.position}</p>
                </div>
              </div>

              <div className="flex items-center gap-3">
                <div className="w-9 h-9 rounded-none bg-[#111] text-[#facc15] border border-[#222] flex items-center justify-center">
                  <Activity className="w-5 h-5" />
                </div>
                <div>
                  <h5 className="text-xs font-black text-white uppercase">Aktivitas Login Terakhir</h5>
                  <p className="text-[10px] font-mono text-slate-500">2026-07-04 15:42 (Jakarta IP)</p>
                </div>
              </div>
            </div>

            {/* Digital ID Card Preview Badge Widget */}
            <div className="bg-[#050505] border border-amber-500/30 p-4 rounded-none space-y-3 relative overflow-hidden group">
              <div className="flex items-center justify-between border-b border-[#222] pb-2">
                <span className="text-[10px] font-black uppercase text-[#facc15] flex items-center gap-1.5">
                  <QrCode className="w-3.5 h-3.5 text-[#facc15]" />
                  Digital ID Card Pegawai
                </span>
                <span className="text-[9px] font-mono text-emerald-400 font-bold uppercase bg-emerald-500/10 border border-emerald-500/20 px-1.5 py-0.5">
                  VERIFIED
                </span>
              </div>
              
              <div className="flex items-center gap-3">
                <div className="w-14 h-14 bg-black border border-[#333] flex items-center justify-center shrink-0">
                  {employee.photoUrl ? (
                    <img src={employee.photoUrl} alt={employee.name} className="w-full h-full object-cover" />
                  ) : (
                    <div className="text-sm font-black text-[#facc15]">
                      {(employee.name || "").split(" ").filter(Boolean).map(n => n[0]).join("").substring(0, 2).toUpperCase()}
                    </div>
                  )}
                </div>
                <div className="space-y-0.5 font-mono text-[11px]">
                  <h6 className="font-bold text-white uppercase line-clamp-1">{employee.name}</h6>
                  <p className="text-[#facc15] text-[10px] uppercase font-bold">{employee.nip}</p>
                  <p className="text-slate-400 text-[9px] uppercase">{employee.position}</p>
                </div>
              </div>

              <button
                type="button"
                onClick={() => setIsIdCardModalOpen(true)}
                className="w-full py-2 bg-[#111] hover:bg-[#1a1a1a] text-amber-300 hover:text-white border border-amber-500/40 font-black text-[10px] uppercase tracking-wider flex items-center justify-center gap-1.5 transition-all cursor-pointer"
              >
                <QrCode className="w-3.5 h-3.5 text-amber-400" />
                <span>Buka ID Card & Cetak QR</span>
              </button>
            </div>

            <hr className="border-[#222]" />

            {/* Quick stats on the 360 profile */}
            <div>
              <h5 className="text-xs font-black text-slate-500 uppercase tracking-widest mb-4">Rangkuman Aktivitas Kerja</h5>
              <div className="grid grid-cols-2 gap-3 text-center">
                <div className="bg-[#050505] border border-[#222] rounded-none p-3">
                  <span className="text-2xl font-black text-white font-mono block">{(employee.riwayatPelatihan || []).length}</span>
                  <span className="text-[9px] text-slate-500 font-mono uppercase tracking-wider block mt-1">Sertifikat</span>
                </div>
                <div className="bg-[#050505] border border-[#222] rounded-none p-3">
                  <span className="text-2xl font-black text-white font-mono block">{(employee.documents || []).length}</span>
                  <span className="text-[9px] text-slate-500 font-mono uppercase tracking-wider block mt-1">DMS Arsip</span>
                </div>
                <div className="bg-[#050505] border border-[#222] rounded-none p-3">
                  <span className="text-2xl font-black text-white font-mono block">{(employee.riwayatKPI || []).length || 1}</span>
                  <span className="text-[9px] text-slate-500 font-mono uppercase tracking-wider block mt-1">Evaluasi</span>
                </div>
                <div className="bg-[#050505] border border-[#222] rounded-none p-3">
                  <span className="text-2xl font-black text-[#facc15] font-mono block">{employee.kpiScore || 80}%</span>
                  <span className="text-[9px] text-slate-500 font-mono uppercase tracking-wider block mt-1">Skor KPI</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Content Tab Panel 2: Histories Subsections */}
      {activeTab === "histories" && (
        <div className="space-y-6">
          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <h4 className="text-xs font-black text-slate-500 uppercase tracking-widest">
              Sub-Riwayat Pegawai Terintegrasi (Compensation, Training & Development)
            </h4>
            <div className="flex flex-wrap gap-1.5">
              <button 
                onClick={() => setShowAddHistoryModal("Pendidikan")}
                className="bg-[#111] hover:bg-[#222] border border-[#222] text-slate-300 text-[10px] px-2.5 py-1.5 rounded-none font-black uppercase tracking-wider flex items-center gap-1 transition-colors"
              >
                <Plus className="w-3.5 h-3.5" /> Pendidikan
              </button>
              <button 
                onClick={() => setShowAddHistoryModal("Pelatihan")}
                className="bg-[#111] hover:bg-[#222] border border-[#222] text-slate-300 text-[10px] px-2.5 py-1.5 rounded-none font-black uppercase tracking-wider flex items-center gap-1 transition-colors"
              >
                <Plus className="w-3.5 h-3.5" /> Pelatihan
              </button>
              <button 
                onClick={() => setShowAddHistoryModal("SK")}
                className="bg-[#111] hover:bg-[#222] border border-[#222] text-slate-300 text-[10px] px-2.5 py-1.5 rounded-none font-black uppercase tracking-wider flex items-center gap-1 transition-colors"
              >
                <Plus className="w-3.5 h-3.5" /> SK Keputusan
              </button>
              <button 
                onClick={() => setShowAddHistoryModal("KPI")}
                className="bg-[#111] hover:bg-[#222] border border-[#222] text-slate-300 text-[10px] px-2.5 py-1.5 rounded-none font-black uppercase tracking-wider flex items-center gap-1 transition-colors"
              >
                <Plus className="w-3.5 h-3.5" /> KPI Kinerja
              </button>
              <button 
                onClick={() => setShowAddHistoryModal("Reward")}
                className="bg-[#111] hover:bg-[#222] border border-[#222] text-slate-300 text-[10px] px-2.5 py-1.5 rounded-none font-black uppercase tracking-wider flex items-center gap-1 transition-colors"
              >
                <Plus className="w-3.5 h-3.5" /> Reward
              </button>
              <button 
                onClick={() => setShowAddHistoryModal("Punishment")}
                className="bg-[#111] hover:bg-[#222] border border-[#222] text-slate-300 text-[10px] px-2.5 py-1.5 rounded-none font-black uppercase tracking-wider flex items-center gap-1 transition-colors"
              >
                <Plus className="w-3.5 h-3.5" /> Punishment
              </button>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            
            {/* RIWAYAT JABATAN */}
            <div className="bg-[#0a0a0a] border border-[#222] rounded-none p-5">
              <h5 className="text-sm font-black text-white mb-4 flex items-center gap-1.5 border-b border-[#222] pb-3 uppercase tracking-wider">
                <Briefcase className="w-4 h-4 text-[#facc15]" /> Riwayat Jabatan & Mutasi
              </h5>
              <div className="space-y-3">
                {(employee.riwayatJabatan || []).map((j) => (
                  <div key={j.id} className="border-l-2 border-[#facc15] pl-3 py-0.5">
                    <p className="text-xs font-mono text-slate-500">{j.date} — {j.type}</p>
                    <h6 className="text-xs font-black text-white uppercase mt-0.5">{j.position} ({j.division})</h6>
                    <p className="text-[10px] text-slate-400 italic mt-0.5">{j.note}</p>
                  </div>
                ))}
              </div>
            </div>

            {/* RIWAYAT PENDIDIKAN */}
            <div className="bg-[#0a0a0a] border border-[#222] rounded-none p-5">
              <h5 className="text-sm font-black text-white mb-4 flex items-center gap-1.5 border-b border-[#222] pb-3 uppercase tracking-wider">
                <User className="w-4 h-4 text-[#facc15]" /> Riwayat Pendidikan Resmi
              </h5>
              <div className="space-y-3">
                {(employee.riwayatPendidikan || []).length > 0 ? (
                  (employee.riwayatPendidikan || []).map((p) => (
                    <div key={p.id} className="flex justify-between items-start border-b border-[#1c1c1c] pb-2 last:border-0 last:pb-0">
                      <div>
                        <h6 className="text-xs font-black text-white uppercase">{p.level} — {p.school}</h6>
                        <p className="text-[10px] text-slate-400 font-mono mt-0.5">JURUSAN: {p.major.toUpperCase()}</p>
                      </div>
                      <div className="flex items-center gap-2">
                        <span className="text-[10px] font-mono text-[#facc15] bg-[#111] px-2 py-0.5 rounded-none border border-[#222]">{p.yearGraduated}</span>
                        {onDeleteHistory && (
                          <button 
                            onClick={() => onDeleteHistory(employee.id, "riwayatPendidikan", p.id)}
                            className="text-slate-600 hover:text-rose-500 transition-colors p-0.5"
                            title="Hapus riwayat pendidikan"
                          >
                            <Trash2 className="w-3.5 h-3.5" />
                          </button>
                        )}
                      </div>
                    </div>
                  ))
                ) : (
                  <p className="text-xs text-slate-500 italic font-mono">Belum ada riwayat pendidikan yang diinput.</p>
                )}
              </div>
            </div>

            {/* RIWAYAT PELATIHAN */}
            <div className="bg-[#0a0a0a] border border-[#222] rounded-none p-5">
              <h5 className="text-sm font-black text-white mb-4 flex items-center gap-1.5 border-b border-[#222] pb-3 uppercase tracking-wider">
                <CheckCircle2 className="w-4 h-4 text-[#facc15]" /> Pelatihan & Sertifikasi
              </h5>
              <div className="space-y-3">
                {(employee.riwayatPelatihan || []).length > 0 ? (
                  (employee.riwayatPelatihan || []).map((t) => (
                    <div key={t.id} className="flex justify-between items-start border-b border-[#1c1c1c] pb-2 last:border-0 last:pb-0">
                      <div>
                        <h6 className="text-xs font-black text-white uppercase">{t.course}</h6>
                        <p className="text-[10px] text-slate-400 font-mono mt-0.5">PENYELENGGARA: {t.provider.toUpperCase()} ({t.category.toUpperCase()})</p>
                      </div>
                      <span className="text-[10px] font-mono text-slate-500">{t.date}</span>
                    </div>
                  ))
                ) : (
                  <p className="text-xs text-slate-500 italic font-mono">Belum ada riwayat pelatihan.</p>
                )}
              </div>
            </div>

            {/* RIWAYAT SK */}
            <div className="bg-[#0a0a0a] border border-[#222] rounded-none p-5">
              <h5 className="text-sm font-black text-white mb-4 flex items-center gap-1.5 border-b border-[#222] pb-3 uppercase tracking-wider">
                <FileText className="w-4 h-4 text-[#facc15]" /> Riwayat Surat Keputusan (SK)
              </h5>
              <div className="space-y-3">
                {(employee.riwayatSK || []).length > 0 ? (
                  (employee.riwayatSK || []).map((sk) => (
                    <div key={sk.id} className="flex justify-between items-start border-b border-[#1c1c1c] pb-2 last:border-0 last:pb-0">
                      <div>
                        <h6 className="text-xs font-black text-[#facc15] uppercase">{sk.type}</h6>
                        <p className="text-[10px] font-mono text-slate-400 mt-0.5">NO: {sk.skNumber}</p>
                      </div>
                      <span className="text-[10px] text-slate-500 font-mono">TMT: {sk.effectiveDate || sk.date}</span>
                    </div>
                  ))
                ) : (
                  <p className="text-xs text-slate-500 italic font-mono">Belum ada dokumen SK tersimpan.</p>
                )}
              </div>
            </div>

            {/* RIWAYAT KPI */}
            <div className="bg-[#0a0a0a] border border-[#222] rounded-none p-5">
              <h5 className="text-sm font-black text-white mb-4 flex items-center gap-1.5 border-b border-[#222] pb-3 uppercase tracking-wider">
                <Activity className="w-4 h-4 text-[#facc15]" /> Penilaian KPI & Kinerja Kuartal
              </h5>
              <div className="space-y-3">
                {(employee.riwayatKPI || []).length > 0 ? (
                  (employee.riwayatKPI || []).map((kpi) => (
                    <div key={kpi.id} className="flex items-center justify-between border-b border-[#1c1c1c] pb-2 last:border-0 last:pb-0">
                      <div>
                        <h6 className="text-xs font-black text-white uppercase">Evaluasi Periodik {kpi.period}</h6>
                        <p className="text-[10px] text-slate-400 font-mono mt-0.5">EVALUATOR: {kpi.evaluator ? kpi.evaluator.toUpperCase() : "DIREKSI"}</p>
                      </div>
                      <div className="flex items-center gap-2">
                        <span className="text-xs font-bold text-slate-300 font-mono">{kpi.score}/100</span>
                        <span className={`text-[10px] font-black px-2 py-0.5 rounded-none border ${
                          kpi.grade === 'A' ? 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20' : 'bg-[#111] text-[#facc15] border-[#222]'
                        }`}>{kpi.grade}</span>
                      </div>
                    </div>
                  ))
                ) : (
                  <div className="flex items-center justify-between border-b border-[#1c1c1c] pb-2 last:border-0 last:pb-0">
                    <div>
                      <h6 className="text-xs font-black text-white uppercase">Evaluasi Periodik Awal</h6>
                      <p className="text-[10px] text-slate-400 font-mono mt-0.5">Skor Dasar Kepegawaian</p>
                    </div>
                    <div className="flex items-center gap-2">
                      <span className="text-xs font-bold text-slate-300 font-mono">{employee.kpiScore || 80}/100</span>
                      <span className="text-[10px] font-black px-2 py-0.5 rounded-none bg-[#111] border border-[#222] text-[#facc15]">B</span>
                    </div>
                  </div>
                )}
              </div>
            </div>

            {/* REWARD & PUNISHMENT */}
            <div className="bg-[#0a0a0a] border border-[#222] rounded-none p-5 col-span-1 md:col-span-2">
              <h5 className="text-sm font-black text-white mb-4 flex items-center gap-1.5 border-b border-[#222] pb-3 uppercase tracking-wider">
                <ShieldAlert className="w-4 h-4 text-rose-500" /> Reward & Punishment (Sanksi)
              </h5>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {/* Rewards */}
                <div>
                  <h6 className="text-xs font-black text-green-400 uppercase tracking-wider mb-3">Penghargaan / Reward:</h6>
                  {(employee.riwayatReward || []).length > 0 ? (
                    (employee.riwayatReward || []).map(r => (
                      <div key={r.id} className="border-l-2 border-emerald-500 pl-2.5 py-1.5 mb-2 bg-[#050505] border border-[#222]">
                        <div className="flex justify-between text-[10px] text-slate-500 font-mono">
                          <span>{r.date}</span>
                          <span>Oleh: {r.giver.toUpperCase()}</span>
                        </div>
                        <h6 className="text-xs font-black text-[#facc15] uppercase mt-1">{r.title}</h6>
                        <p className="text-[10px] text-slate-300 mt-1 leading-relaxed font-mono">{r.description}</p>
                      </div>
                    ))
                  ) : (
                    <p className="text-[11px] text-slate-500 italic font-mono">Tidak ada catatan sanksi reward.</p>
                  )}
                </div>

                {/* Punishment */}
                <div>
                  <h6 className="text-xs font-black text-rose-500 uppercase tracking-wider mb-3">Sanksi / Punishment:</h6>
                  {(employee.riwayatPunishment || []).length > 0 ? (
                    (employee.riwayatPunishment || []).map(p => (
                      <div key={p.id} className="border-l-2 border-rose-500 pl-2.5 py-1.5 mb-2 bg-[#050505] border border-[#222]">
                        <div className="flex justify-between text-[10px] text-slate-500 font-mono">
                          <span>{p.date}</span>
                          <span className="text-rose-400 font-black uppercase text-[9px]">{p.type}</span>
                        </div>
                        <p className="text-xs text-slate-300 mt-1 font-bold uppercase">Alasan: {p.reason}</p>
                        <p className="text-[9px] text-slate-500 mt-1 font-mono">Diberikan oleh: {p.giver.toUpperCase()}</p>
                      </div>
                    ))
                  ) : (
                    <p className="text-[11px] text-slate-500 italic font-mono">Pegawai bersih dari sanksi administrasi kepegawaian.</p>
                  )}
                </div>
              </div>
            </div>

          </div>
        </div>
      )}

      {/* Content Tab Panel 3: Digital Archive (DMS) */}
      {activeTab === "dms" && (
        <div className="bg-[#0a0a0a] border border-[#222] rounded-none p-6 space-y-6">
          <div className="border-b border-[#222] pb-4 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
              <div className="flex items-center gap-2">
                <h3 className="text-sm font-black text-white flex items-center gap-2 uppercase tracking-wider">
                  <FolderOpen className="w-4 h-4 text-[#facc15]" />
                  Folder Digital Pegawai (Paperless HC DMS)
                </h3>
                <span className="hidden sm:inline-flex items-center gap-1.5 text-[10px] font-mono font-bold bg-blue-500/10 text-blue-400 border border-blue-500/30 px-2.5 py-0.5 rounded-none">
                  <Cloud className="w-3 h-3 text-blue-400" /> Google Drive API Connected
                </span>
              </div>
              <p className="text-xs text-slate-500 font-mono uppercase mt-0.5">Penyimpanan dokumen kepegawaian digital tersinkronisasi langsung ke Google Drive Cloud Storage.</p>
            </div>
            <div className="flex items-center gap-3">
              <label className="cursor-pointer bg-[#facc15] hover:bg-yellow-500 text-black font-black text-xs px-3.5 py-2 rounded-none flex items-center gap-1.5 uppercase tracking-wider transition-colors">
                {isUploadingGdrive ? (
                  <>
                    <Loader2 className="w-4 h-4 animate-spin text-black" />
                    Mengunggah ke Drive...
                  </>
                ) : (
                  <>
                    <Plus className="w-4 h-4" />
                    Upload ke Folder ini
                  </>
                )}
                <input 
                  type="file" 
                  disabled={isUploadingGdrive}
                  onChange={handleManualFileInput}
                  className="hidden" 
                />
              </label>
            </div>
          </div>

          {/* DMS Alert / Warning Banner for Auto Detection & Duplicate Warning */}
          {dmsUploadAlert && (
            <div className={`p-4 rounded-none border flex items-start justify-between gap-3 font-mono transition-all animate-fadeIn ${
              dmsUploadAlert.type === 'warning'
                ? "bg-amber-500/10 border-amber-500/40 text-amber-300"
                : "bg-emerald-500/10 border-emerald-500/40 text-emerald-300"
            }`}>
              <div className="flex items-start gap-3">
                {dmsUploadAlert.type === 'warning' ? (
                  <ShieldAlert className="w-5 h-5 text-amber-400 shrink-0 mt-0.5" />
                ) : (
                  <CheckCircle2 className="w-5 h-5 text-emerald-400 shrink-0 mt-0.5" />
                )}
                <div className="space-y-0.5">
                  <h5 className="text-xs font-black uppercase tracking-wider">{dmsUploadAlert.title}</h5>
                  <p className="text-[11px] leading-relaxed text-slate-300">{dmsUploadAlert.message}</p>
                </div>
              </div>
              <button 
                onClick={() => setDmsUploadAlert(null)}
                className="text-slate-400 hover:text-white text-xs font-bold px-2 py-0.5 bg-[#111] border border-[#333] shrink-0"
              >
                TUTUP ✕
              </button>
            </div>
          )}

          <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
            
            {/* Left Column: Folders List */}
            <div className="space-y-1">
              <span className="text-[10px] font-black text-slate-500 uppercase tracking-widest block px-2 mb-2">Folder Utama</span>
              {folders.map(folder => {
                const count = (employee.documents || []).filter(d => d.type === folder).length;
                return (
                  <button
                    key={folder}
                    onClick={() => setSelectedDmsFolder(folder)}
                    className={`w-full flex items-center justify-between px-3 py-2.5 rounded-none text-xs font-black uppercase tracking-wider text-left transition-colors border ${
                      selectedDmsFolder === folder 
                        ? "bg-[#111] text-[#facc15] border-[#222]" 
                        : "text-slate-400 hover:text-white hover:bg-[#111] border-transparent"
                    }`}
                  >
                    <span className="flex items-center gap-2">
                      <FolderOpen className="w-3.5 h-3.5" />
                      {folder}
                    </span>
                    <span className={`font-mono text-[10px] px-1.5 py-0.5 rounded-none border ${
                      selectedDmsFolder === folder ? "bg-[#facc15] text-black border-[#facc15] font-black" : "bg-[#111] text-slate-500 border-[#222]"
                    }`}>
                      {count}
                    </span>
                  </button>
                );
              })}
            </div>

            {/* Right Column: Active Documents Area & Drag & Drop Zone */}
            <div className="md:col-span-3 space-y-4 flex flex-col">
              
              {/* Drag and Drop Zone */}
              <div 
                onDragOver={handleDragOver}
                onDragLeave={handleDragLeave}
                onDrop={handleDrop}
                className={`border-2 border-dashed rounded-none p-8 text-center transition-all cursor-pointer ${
                  dragOver 
                    ? "border-[#facc15] bg-[#facc15]/5" 
                    : "border-[#222] hover:border-slate-500 bg-[#050505]"
                }`}
              >
                {isUploadingGdrive ? (
                  <div className="py-2 space-y-2">
                    <Loader2 className="w-10 h-10 text-blue-400 animate-spin mx-auto opacity-90" />
                    <p className="text-xs font-black text-blue-400 uppercase tracking-wider">Sedang mengunggah & mentransfer file ke Google Drive API...</p>
                    <p className="text-[10px] text-slate-500 font-mono">Mohon tunggu sebentar...</p>
                  </div>
                ) : (
                  <>
                    <FileCode className="w-10 h-10 text-slate-500 mx-auto mb-2 opacity-80" />
                    <p className="text-xs font-black text-white uppercase tracking-wider">Tarik & lepas file Anda di sini untuk mengunggah ke Google Drive</p>
                    <p className="text-[10px] text-slate-400 mt-1 font-mono uppercase">Atau klik tombol di atas. Target folder: <strong className="text-[#facc15] font-black">{selectedDmsFolder}</strong></p>
                  </>
                )}
              </div>

              {/* Document Lists */}
              <div className="flex-1 space-y-2 max-h-96 overflow-y-auto">
                <span className="text-[10px] font-black text-slate-500 uppercase tracking-widest block mb-2">
                  File di dalam Folder: {selectedDmsFolder}
                </span>

                {currentFolderDocs.length > 0 ? (
                  currentFolderDocs.map(doc => (
                    <div key={doc.id} className="flex items-center justify-between border border-[#222] hover:border-[#333] rounded-none p-3 bg-[#050505] transition-all">
                      <div className="flex items-center gap-3">
                        <div className="w-9 h-9 rounded-none bg-[#111] text-[#facc15] border border-[#222] flex items-center justify-center">
                          <FileText className="w-5 h-5" />
                        </div>
                        <div>
                          <div className="flex items-center gap-2">
                            <h6 className="text-xs font-black text-white uppercase">{doc.name}</h6>
                            {doc.gdriveLink && (
                              <span className="text-[9px] font-mono font-bold bg-blue-500/20 text-blue-400 border border-blue-500/30 px-1.5 py-0.2 rounded-none flex items-center gap-1">
                                <Cloud className="w-2.5 h-2.5" /> GDrive Synced
                              </span>
                            )}
                            {doc.type === 'Salary' && (
                              <span className="text-[9px] font-mono font-bold bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 px-1.5 py-0.2 rounded-none flex items-center gap-1">
                                <ShieldCheck className="w-2.5 h-2.5 text-emerald-400" /> Audit Auto-Archived
                              </span>
                            )}
                          </div>
                          <p className="text-[10px] text-slate-500 font-mono mt-0.5">UKURAN: {doc.fileSize} • DIUNGGAH: {doc.uploadedAt}</p>
                        </div>
                      </div>

                      <div className="flex items-center gap-2">
                        {doc.gdriveLink && (
                          <a 
                            href={doc.gdriveLink}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="bg-blue-600 hover:bg-blue-500 text-white font-mono text-[10px] font-black px-2.5 py-1.5 rounded-none flex items-center gap-1 transition-colors"
                            title="Buka file langsung di Google Drive"
                          >
                            <Cloud className="w-3.5 h-3.5" />
                            <span>Buka di Google Drive</span>
                            <ExternalLink className="w-3 h-3" />
                          </a>
                        )}

                        <a 
                          href={doc.fileUrl} 
                          download={doc.name}
                          className="text-slate-400 hover:text-white hover:bg-[#111] p-1.5 rounded-none transition-colors border border-transparent hover:border-[#222]"
                          title="Download file lokal"
                        >
                          <Download className="w-4 h-4" />
                        </a>
                        <button 
                          onClick={() => onDeleteDocument(employee.id, doc.id)}
                          className="text-rose-400 hover:text-rose-500 hover:bg-rose-500/10 p-1.5 rounded-none transition-colors border border-transparent hover:border-rose-500/20"
                          title="Hapus file"
                        >
                          <Trash2 className="w-4 h-4" />
                        </button>
                      </div>
                    </div>
                  ))
                ) : (
                  <div className="text-center py-8 text-slate-500 font-mono italic text-xs">
                    Tidak ada file di folder digital ini. Unggah file KTP, SK, Ijazah atau dokumen pendukung pegawai untuk disimpan langsung di Google Drive.
                  </div>
                )}
              </div>

            </div>

          </div>
        </div>
      )}

      {/* Content Tab Panel 4: Employee Status Timeline */}
      {activeTab === "timeline" && (
        <div className="bg-[#0a0a0a] border border-[#222] rounded-none p-6 space-y-6">
          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 border-b border-[#222] pb-4">
            <div>
              <h4 className="text-sm font-black text-white flex items-center gap-2 uppercase tracking-wider">
                <Activity className="w-4 h-4 text-[#facc15]" />
                Employee Status Timeline (Career Journey)
              </h4>
              <p className="text-xs text-slate-400 font-mono mt-0.5">
                Peta perjalanan karir, promosi, mutasi, serta rekam histori kegiatan penting pegawai ({employee.name}).
              </p>
            </div>

            <button 
              type="button"
              onClick={generateAiSummary}
              disabled={loadingAi}
              className="bg-[#facc15] hover:bg-yellow-500 disabled:opacity-50 text-black font-black uppercase tracking-wider text-xs px-4 py-2 rounded-none flex items-center gap-1.5 shadow-md transition-all self-start md:self-auto cursor-pointer"
            >
              <Sparkles className="w-3.5 h-3.5 text-black" />
              {loadingAi ? "Menganalisis Timeline..." : "AI Profile Summarizer"}
            </button>
          </div>

          <div className="relative border-l border-[#222] ml-4 pl-6 space-y-6">
            {employee.timeline && employee.timeline.map((evt) => (
              <div key={evt.id} className="relative">
                {/* Visual marker dot */}
                <span className={`absolute -left-[31px] top-1.5 w-4 h-4 rounded-none border-2 border-[#111] flex items-center justify-center shadow-none ${
                  evt.type === 'career' ? 'bg-[#facc15]' : 
                  evt.type === 'disciplinary' ? 'bg-red-500' :
                  evt.type === 'training' ? 'bg-emerald-500' : 'bg-slate-400'
                }`}></span>

                <div className="bg-[#050505] hover:bg-[#111] border border-[#222] rounded-none p-4 transition-all">
                  <span className="text-[10px] font-mono text-slate-500 font-bold uppercase">{evt.date}</span>
                  <h5 className="text-xs font-black text-white uppercase mt-1">{evt.title}</h5>
                  <p className="text-[11px] text-slate-400 mt-1 leading-relaxed font-mono">{evt.description}</p>
                </div>
              </div>
            ))}

            {/* If timeline is empty */}
            {(!employee.timeline || employee.timeline.length === 0) && (
              <div className="relative">
                <span className="absolute -left-[31px] top-1.5 w-4 h-4 rounded-none bg-slate-500 border-2 border-[#111]"></span>
                <div className="bg-[#050505] border border-[#222] rounded-none p-4">
                  <span className="text-[10px] font-mono text-slate-500 font-bold uppercase">{employee.tmtKerja}</span>
                  <h5 className="text-xs font-black text-white uppercase mt-1">Pengangkatan Pertama</h5>
                  <p className="text-[11px] text-slate-400 mt-1 font-mono">Karyawan bergabung di EMS MEDIAN DEV (TMT Mulai Kerja).</p>
                </div>
              </div>
            )}
          </div>
        </div>
      )}

      {/* Content Tab Panel 5: Audit Log Aktivitas 360° */}
      {activeTab === "audit" && (
        <div className="space-y-6">
          {/* Header Banner & Stat Cards */}
          <div className="bg-[#0a0a0a] border border-[#222] rounded-none p-6 space-y-4">
            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 border-b border-[#222] pb-4">
              <div>
                <h4 className="text-sm font-black text-[#facc15] flex items-center gap-2 uppercase tracking-wider">
                  <History className="w-4 h-4 text-[#facc15]" />
                  Jurnal Audit Trail & Audit Log Aktivitas
                </h4>
                <p className="text-xs text-slate-400 font-mono mt-1">
                  Merekam seluruh jejak histori perubahan biodata, dokumen, jabatan, serta evaluasi kinerja pegawai ({employee.name}) secara komprehensif.
                </p>
              </div>

              <div className="flex flex-wrap items-center gap-2 self-start md:self-auto">
                <button
                  type="button"
                  onClick={generateAiSummary}
                  disabled={loadingAi}
                  className="bg-[#facc15] hover:bg-yellow-500 disabled:opacity-50 text-black font-black uppercase tracking-wider text-xs px-3.5 py-2 rounded-none flex items-center gap-1.5 transition-colors cursor-pointer"
                  title="Generate multi-paragraph narrative using Gemini based on timeline & audit logs"
                >
                  <Sparkles className="w-3.5 h-3.5 text-black" />
                  {loadingAi ? "Menganalisis..." : "AI Profile Summarizer"}
                </button>
                <button
                  onClick={() => setShowAddAuditModal(true)}
                  className="bg-[#111] hover:bg-[#222] border border-[#222] text-slate-200 font-black uppercase tracking-wider text-xs px-3.5 py-2 rounded-none flex items-center gap-1.5 transition-colors"
                >
                  <Plus className="w-4 h-4 text-[#facc15]" />
                  Catatan Audit Manual
                </button>
              </div>
            </div>

            {/* Stat Counters */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 pt-1">
              <div className="bg-[#050505] border border-[#222] p-3 rounded-none">
                <span className="text-[10px] font-mono text-slate-500 uppercase tracking-widest block">Total Entry Log</span>
                <span className="text-lg font-black text-white font-mono mt-0.5 block">{effectiveAuditLogs.length}</span>
              </div>
              <div className="bg-[#050505] border border-[#222] p-3 rounded-none">
                <span className="text-[10px] font-mono text-emerald-400 uppercase tracking-widest block">+ Penambahan (CREATE)</span>
                <span className="text-lg font-black text-emerald-400 font-mono mt-0.5 block">
                  {effectiveAuditLogs.filter(l => l.action === 'CREATE').length}
                </span>
              </div>
              <div className="bg-[#050505] border border-[#222] p-3 rounded-none">
                <span className="text-[10px] font-mono text-amber-400 uppercase tracking-widest block">~ Pembaruan (UPDATE)</span>
                <span className="text-lg font-black text-amber-400 font-mono mt-0.5 block">
                  {effectiveAuditLogs.filter(l => l.action === 'UPDATE').length}
                </span>
              </div>
              <div className="bg-[#050505] border border-[#222] p-3 rounded-none">
                <span className="text-[10px] font-mono text-rose-400 uppercase tracking-widest block">- Penghapusan (DELETE)</span>
                <span className="text-lg font-black text-rose-400 font-mono mt-0.5 block">
                  {effectiveAuditLogs.filter(l => l.action === 'DELETE').length}
                </span>
              </div>
            </div>
          </div>

          {/* Audit Filter Toolbar */}
          <div className="bg-[#0a0a0a] border border-[#222] p-4 flex flex-col md:flex-row items-center justify-between gap-4">
            <div className="relative w-full md:w-80">
              <Search className="w-4 h-4 text-slate-500 absolute left-3 top-1/2 -translate-y-1/2" />
              <input 
                type="text"
                placeholder="Cari kata kunci, actor, detail..."
                value={auditSearch}
                onChange={e => setAuditSearch(e.target.value)}
                className="w-full bg-[#050505] border border-[#222] text-[#e5e5e5] placeholder-slate-600 focus:border-[#facc15] outline-none rounded-none pl-9 pr-3 py-1.5 text-xs font-mono"
              />
            </div>

            <div className="flex items-center gap-3 w-full md:w-auto">
              <div className="flex items-center gap-1.5 text-xs text-slate-400 font-mono">
                <Filter className="w-3.5 h-3.5 text-[#facc15]" />
                <span className="uppercase text-[10px] font-bold">Aksi:</span>
                <select 
                  value={auditActionFilter}
                  onChange={e => setAuditActionFilter(e.target.value)}
                  className="bg-[#050505] border border-[#222] text-white text-xs px-2 py-1 rounded-none font-mono focus:border-[#facc15] outline-none"
                >
                  <option value="All">Semua Aksi</option>
                  <option value="CREATE">CREATE (+)</option>
                  <option value="UPDATE">UPDATE (~)</option>
                  <option value="DELETE">DELETE (-)</option>
                </select>
              </div>

              <div className="flex items-center gap-1.5 text-xs text-slate-400 font-mono">
                <span className="uppercase text-[10px] font-bold">Kategori:</span>
                <select 
                  value={auditCategoryFilter}
                  onChange={e => setAuditCategoryFilter(e.target.value)}
                  className="bg-[#050505] border border-[#222] text-white text-xs px-2 py-1 rounded-none font-mono focus:border-[#facc15] outline-none"
                >
                  <option value="All">Semua Kategori</option>
                  <option value="Biodata">Biodata</option>
                  <option value="Jabatan">Jabatan</option>
                  <option value="Pendidikan">Pendidikan</option>
                  <option value="Pelatihan">Pelatihan</option>
                  <option value="SK">Surat Keputusan</option>
                  <option value="KPI">KPI / Kinerja</option>
                  <option value="Reward">Reward</option>
                  <option value="Punishment">Sanksi</option>
                  <option value="Dokumen">Dokumen DMS</option>
                </select>
              </div>
            </div>
          </div>

          {/* Audit Logs Feed */}
          <div className="bg-[#0a0a0a] border border-[#222] rounded-none overflow-hidden">
            <div className="p-4 border-b border-[#222] bg-[#050505] flex items-center justify-between">
              <span className="text-xs font-black text-slate-300 uppercase tracking-wider font-mono">
                Riwayat Aktivitas ({filteredAuditLogs.length} Entri Ditemukan)
              </span>
              <span className="text-[10px] text-slate-500 font-mono">Diurutkan berdasarkan waktu terbaru</span>
            </div>

            <div className="divide-y divide-[#1a1a1a]">
              {filteredAuditLogs.length > 0 ? (
                filteredAuditLogs.map((log) => (
                  <div key={log.id} className="p-4 hover:bg-[#0f0f0f] transition-colors flex flex-col md:flex-row md:items-start justify-between gap-3">
                    <div className="space-y-1.5 flex-1">
                      <div className="flex flex-wrap items-center gap-2">
                        {/* Action Badge */}
                        <span className={`text-[10px] font-black px-2 py-0.5 font-mono border rounded-none ${
                          log.action === 'CREATE' ? 'bg-emerald-500/10 text-emerald-400 border-emerald-500/30' :
                          log.action === 'UPDATE' ? 'bg-amber-500/10 text-amber-400 border-amber-500/30' :
                          'bg-rose-500/10 text-rose-400 border-rose-500/30'
                        }`}>
                          {log.action === 'CREATE' ? '+ CREATE' : log.action === 'UPDATE' ? '~ UPDATE' : '- DELETE'}
                        </span>

                        {/* Category Badge */}
                        <span className="text-[10px] font-bold text-[#facc15] bg-[#111] border border-[#222] px-2 py-0.5 font-mono">
                          [{log.category.toUpperCase()}]
                        </span>

                        {/* Timestamp */}
                        <span className="text-xs font-mono text-slate-400 flex items-center gap-1">
                          <Clock className="w-3 h-3 text-slate-500" />
                          {log.timestamp}
                        </span>
                      </div>

                      {/* Log details */}
                      <p className="text-xs text-slate-200 font-mono leading-relaxed pt-0.5">
                        {log.details}
                      </p>
                    </div>

                    {/* Actor Info */}
                    <div className="text-left md:text-right bg-[#050505] border border-[#222] p-2 rounded-none md:min-w-[200px]">
                      <span className="text-[9px] font-mono text-slate-500 uppercase tracking-widest block">Pengubah / Aktor:</span>
                      <span className="text-xs font-bold text-white block truncate">{log.actorName}</span>
                      <span className="text-[10px] text-slate-400 font-mono block truncate">{log.actorPosition || "HR Staff"}</span>
                    </div>
                  </div>
                ))
              ) : (
                <div className="text-center py-12 text-slate-500 font-mono italic text-xs space-y-2">
                  <History className="w-8 h-8 text-slate-600 mx-auto" />
                  <p>Tidak ada entri audit log yang cocok dengan kriteria pencarian / filter Anda.</p>
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      {/* Content Tab Panel 6: Salary Settings & Pay Grade Engine */}
      {activeTab === "salary" && (
        <div className="space-y-6 animate-fadeIn">
          
          {/* Header Authorization Banner */}
          <div className="bg-[#0a0a0a] border border-[#222] p-5 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
            <div className="space-y-1">
              <h4 className="text-sm font-black text-[#facc15] flex items-center gap-2 uppercase tracking-wider">
                <DollarSign className="w-4 h-4 text-[#facc15]" />
                PENGATURAN STRUKTUR GAJI, TAX RATE & SLIP GAJI STANDAR
              </h4>
              <p className="text-xs text-slate-400 font-mono">
                Kelola Golongan Gaji (Pay Grade), Tarif Pajak PPh 21, Potongan BPJS, serta Komponen Tunjangan Pegawai ({employee.name}).
              </p>
            </div>

            <div className="flex flex-wrap items-center gap-2">
              <span className="text-[10px] font-mono font-bold bg-amber-500/10 text-amber-300 border border-amber-500/30 px-3 py-1.5 flex items-center gap-1.5">
                <ShieldCheck className="w-3.5 h-3.5 text-amber-400" />
                Akses Otomatis HR: {currentUser ? currentUser.name : "HR Specialist Admin"}
              </span>
              <button
                type="button"
                onClick={() => setShowSalarySlipDrawer(true)}
                className="bg-[#facc15] hover:bg-yellow-500 text-black font-black uppercase tracking-wider text-xs px-3.5 py-1.5 flex items-center gap-1.5 shadow-md transition-all cursor-pointer"
              >
                <Eye className="w-4 h-4 text-black" />
                Preview Slip Gaji Drawer
              </button>
            </div>
          </div>

          {/* Success Save Toast Banner */}
          {salarySaveToast && (
            <div className="bg-emerald-500/10 border-2 border-emerald-500/40 text-emerald-300 p-4 font-mono text-xs font-bold flex items-center justify-between animate-fadeIn">
              <div className="flex items-center gap-2">
                <CheckCircle2 className="w-5 h-5 text-emerald-400 shrink-0" />
                <span>{salarySaveToast}</span>
              </div>
              <button 
                type="button"
                onClick={() => setSalarySaveToast(null)} 
                className="text-slate-400 hover:text-white font-bold text-xs bg-[#111] px-2 py-0.5 border border-[#333]"
              >
                ✕
              </button>
            </div>
          )}

          {/* DMS Background Auto-Archiving Banner */}
          {dmsArchiveNotice && (
            <div className="bg-blue-500/10 border-2 border-blue-500/40 text-blue-200 p-4 font-mono text-xs font-bold flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 animate-fadeIn">
              <div className="flex items-center gap-3">
                <div className="p-2 bg-blue-500/20 border border-blue-400/40 text-blue-400 shrink-0">
                  <ShieldCheck className="w-5 h-5 text-blue-400" />
                </div>
                <div>
                  <div className="flex items-center gap-2">
                    <span className="text-white font-black text-xs uppercase tracking-wider">
                      Background Service Archiving OK
                    </span>
                    <span className="bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 text-[9px] px-1.5 py-0.5 uppercase">
                      Audit Compliant
                    </span>
                  </div>
                  <p className="text-slate-300 text-[11px] mt-0.5">
                    Slip gaji periode <strong className="text-blue-300">{dmsArchiveNotice.month}</strong> ({dmsArchiveNotice.docName}) otomatis disimpan langsung ke folder DMS <strong className="text-[#facc15]">Salary</strong> pegawai.
                  </p>
                </div>
              </div>

              <div className="flex items-center gap-2 shrink-0 w-full sm:w-auto">
                <button
                  type="button"
                  onClick={() => {
                    setActiveTab("dms");
                    setSelectedDmsFolder("Salary");
                  }}
                  className="bg-blue-600 hover:bg-blue-500 text-white font-black text-xs px-3 py-1.5 flex items-center gap-1.5 transition-colors cursor-pointer"
                >
                  <Folder className="w-3.5 h-3.5" />
                  Lihat di Folder DMS 'Salary'
                </button>
                <button 
                  type="button"
                  onClick={() => setDmsArchiveNotice(null)} 
                  className="text-slate-400 hover:text-white font-bold text-xs bg-[#111] px-2 py-1 border border-[#333]"
                >
                  ✕
                </button>
              </div>
            </div>
          )}

          {/* Preset Quick Loader Bar */}
          <div className="bg-[#050505] border border-[#222] p-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
            <div className="flex items-center gap-2">
              <Settings className="w-4 h-4 text-[#facc15]" />
              <span className="text-xs font-black text-slate-300 uppercase tracking-wider">
                Muat Standar Preset Golongan Gaji:
              </span>
            </div>
            <div className="flex flex-wrap items-center gap-2 w-full sm:w-auto">
              <select
                value={salarySettings.payGrade}
                onChange={(e) => handleApplyPreset(e.target.value)}
                className="bg-[#111] border border-[#222] text-xs font-mono font-bold text-[#facc15] px-3 py-1.5 rounded-none focus:border-[#facc15] outline-none cursor-pointer w-full sm:w-auto"
              >
                {PAY_GRADE_PRESETS.map(preset => (
                  <option key={preset.grade} value={preset.grade}>
                    {preset.grade} ({formatRupiah(preset.baseSalary)})
                  </option>
                ))}
              </select>
              <button
                type="button"
                onClick={() => handleApplyPreset(salarySettings.payGrade)}
                className="bg-[#111] hover:bg-[#222] text-slate-300 text-xs font-bold uppercase tracking-wider px-3 py-1.5 border border-[#333] transition-colors cursor-pointer"
                title="Terapkan ulang nilai standar preset"
              >
                Terapkan Preset
              </button>
            </div>
          </div>

          {/* Main Config Form & Generator Layout */}
          <form onSubmit={handleSaveSalarySettings} className="space-y-6">
            
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              
              {/* Left Column: Form Settings (Gaji Pokok, Tunjangan, Tax) */}
              <div className="space-y-6">
                
                {/* Card 1: Golongan & Gaji Pokok */}
                <div className="bg-[#0a0a0a] border border-[#222] p-5 space-y-4">
                  <h5 className="text-xs font-black text-[#facc15] uppercase tracking-wider border-b border-[#222] pb-2 flex items-center justify-between">
                    <span>1. Gaji Pokok & Pembayaran Lembur</span>
                    <Wallet className="w-4 h-4 text-[#facc15]" />
                  </h5>

                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs font-mono">
                    <div className="sm:col-span-2">
                      <label className="block text-slate-400 font-bold uppercase mb-1">
                        Level / Golongan Gaji (Pay Grade)
                      </label>
                      <input
                        type="text"
                        required
                        value={salarySettings.payGrade}
                        onChange={e => setSalarySettings({ ...salarySettings, payGrade: e.target.value })}
                        className="w-full bg-[#111] border border-[#222] text-white px-3 py-2 focus:border-[#facc15] outline-none font-bold"
                        placeholder="Contoh: Grade 7 - Senior Manager"
                      />
                    </div>

                    <div className="sm:col-span-2">
                      <label className="block text-slate-400 font-bold uppercase mb-1">
                        Gaji Pokok (Base Salary)
                      </label>
                      <div className="relative">
                        <span className="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-500 font-bold">Rp</span>
                        <input
                          type="number"
                          required
                          min="0"
                          step="50000"
                          value={salarySettings.baseSalary}
                          onChange={e => setSalarySettings({ ...salarySettings, baseSalary: Number(e.target.value) || 0 })}
                          className="w-full bg-[#111] border border-[#222] text-[#facc15] font-black pl-8 pr-3 py-2 focus:border-[#facc15] outline-none text-sm"
                        />
                      </div>
                    </div>

                    <div>
                      <label className="block text-slate-400 font-bold uppercase mb-1">
                        Jam Lembur Bulan Ini (Jam)
                      </label>
                      <input
                        type="number"
                        min="0"
                        max="200"
                        value={salarySettings.overtimeHours}
                        onChange={e => setSalarySettings({ ...salarySettings, overtimeHours: Number(e.target.value) || 0 })}
                        className="w-full bg-[#111] border border-[#222] text-white font-bold px-3 py-2 focus:border-[#facc15] outline-none"
                      />
                    </div>

                    <div>
                      <label className="block text-slate-400 font-bold uppercase mb-1">
                        Tarif Lembur / Jam (Rate)
                      </label>
                      <div className="relative">
                        <span className="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-500 font-bold">Rp</span>
                        <input
                          type="number"
                          min="0"
                          step="5000"
                          value={salarySettings.overtimeRatePerHour}
                          onChange={e => setSalarySettings({ ...salarySettings, overtimeRatePerHour: Number(e.target.value) || 0 })}
                          className="w-full bg-[#111] border border-[#222] text-white font-bold pl-8 pr-3 py-2 focus:border-[#facc15] outline-none"
                        />
                      </div>
                    </div>

                    <div className="sm:col-span-2">
                      <label className="block text-slate-400 font-bold uppercase mb-1">
                        Nominal Pembayaran Lembur (Custom Override)
                      </label>
                      <div className="relative">
                        <span className="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-500 font-bold">Rp</span>
                        <input
                          type="number"
                          min="0"
                          step="25000"
                          placeholder="Kosongkan untuk kalkulasi otomatis (Jam x Rate)"
                          value={salarySettings.overtimePayOverride || ''}
                          onChange={e => setSalarySettings({ ...salarySettings, overtimePayOverride: Number(e.target.value) || 0 })}
                          className="w-full bg-[#111] border border-[#222] text-emerald-400 font-bold pl-8 pr-3 py-2 focus:border-[#facc15] outline-none"
                        />
                      </div>
                      <span className="text-[10px] text-slate-400 mt-1 block">
                        Total Pembayaran Lembur Terhitung: <strong className="text-emerald-400">{formatRupiah(salaryTotals.overtimePay)}</strong>
                      </span>
                    </div>
                  </div>
                </div>

                {/* Card 2: Tunjangan Rutin, TKU & Transportasi */}
                <div className="bg-[#0a0a0a] border border-[#222] p-5 space-y-4">
                  <h5 className="text-xs font-black text-[#facc15] uppercase tracking-wider border-b border-[#222] pb-2 flex items-center justify-between">
                    <span>2. Tunjangan TKU, Transportasi & Kinerja</span>
                    <Coins className="w-4 h-4 text-[#facc15]" />
                  </h5>

                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs font-mono">
                    
                    {/* Tunjangan TKU (Tunjangan Keahlian Utama / Khusus) */}
                    <div className="sm:col-span-2 bg-[#120f1a] border border-[#2a223d] p-3.5 space-y-3">
                      <div className="flex items-center justify-between border-b border-[#2a223d] pb-1.5">
                        <span className="font-bold text-purple-300 uppercase tracking-wider text-[11px] flex items-center gap-1.5">
                          <Sparkles className="w-4 h-4 text-purple-400" />
                          Tunjangan TKU (Tunjangan Keahlian Utama / Khusus)
                        </span>
                        <span className="bg-purple-500/20 text-purple-300 text-[10px] font-bold px-2 py-0.5 border border-purple-500/30">
                          {salaryTotals.tkuPercent}% dari Gaji Pokok
                        </span>
                      </div>

                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <div>
                          <label className="block text-slate-400 font-bold uppercase mb-1">
                            Persentase TKU (%)
                          </label>
                          <div className="relative">
                            <input
                              type="number"
                              min="0"
                              max="100"
                              step="1"
                              value={salarySettings.tunjanganTKUPercent ?? 35}
                              onChange={e => {
                                const pct = Number(e.target.value) || 0;
                                setSalarySettings({
                                  ...salarySettings,
                                  tunjanganTKUPercent: pct,
                                  tunjanganTKUAmount: Math.round(((salarySettings.baseSalary || 0) * pct) / 100)
                                });
                              }}
                              className="w-full bg-[#111] border border-[#222] text-purple-300 font-black px-3 py-2 focus:border-purple-400 outline-none"
                            />
                            <span className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-500 font-bold">%</span>
                          </div>
                        </div>

                        <div>
                          <label className="block text-slate-400 font-bold uppercase mb-1">
                            Nominal Tunjangan TKU (IDR)
                          </label>
                          <div className="relative">
                            <span className="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-500 font-bold">Rp</span>
                            <input
                              type="number"
                              min="0"
                              step="50000"
                              value={salarySettings.tunjanganTKUAmount ?? salaryTotals.tunjanganTKU}
                              onChange={e => setSalarySettings({ ...salarySettings, tunjanganTKUAmount: Number(e.target.value) || 0 })}
                              className="w-full bg-[#111] border border-[#222] text-purple-300 font-black pl-8 pr-3 py-2 focus:border-purple-400 outline-none"
                            />
                          </div>
                        </div>
                      </div>
                    </div>

                    {/* Tunjangan Transportasi */}
                    <div>
                      <label className="block text-slate-400 font-bold uppercase mb-1">Tunjangan Transportasi</label>
                      <div className="relative">
                        <span className="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-500 font-bold">Rp</span>
                        <input
                          type="number"
                          min="0"
                          step="25000"
                          value={salarySettings.transportAllowance}
                          onChange={e => setSalarySettings({ ...salarySettings, transportAllowance: Number(e.target.value) || 0 })}
                          className="w-full bg-[#111] border border-[#222] text-white font-bold pl-8 pr-3 py-2 focus:border-[#facc15] outline-none"
                        />
                      </div>
                    </div>

                    <div>
                      <label className="block text-slate-400 font-bold uppercase mb-1">Tunjangan Jabatan</label>
                      <div className="relative">
                        <span className="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-500 font-bold">Rp</span>
                        <input
                          type="number"
                          min="0"
                          step="25000"
                          value={salarySettings.positionAllowance}
                          onChange={e => setSalarySettings({ ...salarySettings, positionAllowance: Number(e.target.value) || 0 })}
                          className="w-full bg-[#111] border border-[#222] text-white font-bold pl-8 pr-3 py-2 focus:border-[#facc15] outline-none"
                        />
                      </div>
                    </div>

                    <div>
                      <label className="block text-slate-400 font-bold uppercase mb-1">Tunjangan Uang Makan</label>
                      <div className="relative">
                        <span className="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-500 font-bold">Rp</span>
                        <input
                          type="number"
                          min="0"
                          step="25000"
                          value={salarySettings.mealAllowance}
                          onChange={e => setSalarySettings({ ...salarySettings, mealAllowance: Number(e.target.value) || 0 })}
                          className="w-full bg-[#111] border border-[#222] text-white font-bold pl-8 pr-3 py-2 focus:border-[#facc15] outline-none"
                        />
                      </div>
                    </div>

                    <div>
                      <label className="block text-slate-400 font-bold uppercase mb-1">Tunjangan Komunikasi</label>
                      <div className="relative">
                        <span className="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-500 font-bold">Rp</span>
                        <input
                          type="number"
                          min="0"
                          step="25000"
                          value={salarySettings.communicationAllowance}
                          onChange={e => setSalarySettings({ ...salarySettings, communicationAllowance: Number(e.target.value) || 0 })}
                          className="w-full bg-[#111] border border-[#222] text-white font-bold pl-8 pr-3 py-2 focus:border-[#facc15] outline-none"
                        />
                      </div>
                    </div>

                    <div className="sm:col-span-2">
                      <label className="block text-slate-400 font-bold uppercase mb-1">Insentif / Tunjangan Kinerja Variable</label>
                      <div className="relative">
                        <span className="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-500 font-bold">Rp</span>
                        <input
                          type="number"
                          min="0"
                          step="50000"
                          value={salarySettings.performanceBonus}
                          onChange={e => setSalarySettings({ ...salarySettings, performanceBonus: Number(e.target.value) || 0 })}
                          className="w-full bg-[#111] border border-[#222] text-white font-bold pl-8 pr-3 py-2 focus:border-[#facc15] outline-none"
                        />
                      </div>
                    </div>
                  </div>

                  {/* Custom Allowances dynamic list */}
                  <div className="border-t border-[#1a1a1a] pt-3 space-y-2">
                    <span className="text-[10px] font-black uppercase text-slate-400 tracking-wider block">
                      Tunjangan Tambahan / Komponen Khusus:
                    </span>
                    
                    {(salarySettings.customAllowances || []).map((item) => (
                      <div key={item.id} className="flex items-center justify-between bg-[#111] border border-[#222] px-3 py-1.5 text-xs font-mono">
                        <span className="text-slate-300 font-bold">{item.name}</span>
                        <div className="flex items-center gap-3">
                          <span className="text-[#facc15] font-black">{formatRupiah(item.amount)}</span>
                          <button
                            type="button"
                            onClick={() => handleRemoveCustomAllowance(item.id)}
                            className="text-rose-400 hover:text-rose-300 font-bold text-xs cursor-pointer"
                          >
                            ✕
                          </button>
                        </div>
                      </div>
                    ))}

                    <div className="flex items-center gap-2 pt-1">
                      <input
                        type="text"
                        placeholder="Nama Tunjangan (Contoh: Tunjangan Shift)"
                        value={newAllowanceName}
                        onChange={e => setNewAllowanceName(e.target.value)}
                        className="flex-1 bg-[#111] border border-[#222] text-xs text-white px-2.5 py-1.5 focus:border-[#facc15] outline-none font-mono"
                      />
                      <input
                        type="number"
                        placeholder="Jumlah (Rp)"
                        value={newAllowanceAmount}
                        onChange={e => setNewAllowanceAmount(e.target.value)}
                        className="w-28 bg-[#111] border border-[#222] text-xs text-white px-2.5 py-1.5 focus:border-[#facc15] outline-none font-mono"
                      />
                      <button
                        type="button"
                        onClick={handleAddCustomAllowance}
                        className="bg-[#facc15] hover:bg-yellow-500 text-black text-xs font-black uppercase px-3 py-1.5 shrink-0 cursor-pointer"
                      >
                        + Tambah
                      </button>
                    </div>
                  </div>
                </div>

                {/* Card 3: Pajak PPh 21, BPJS & Potongan */}
                <div className="bg-[#0a0a0a] border border-[#222] p-5 space-y-4">
                  <h5 className="text-xs font-black text-[#facc15] uppercase tracking-wider border-b border-[#222] pb-2 flex items-center justify-between">
                    <span>3. Tarif Pajak PPh 21 & Potongan BPJS</span>
                    <Percent className="w-4 h-4 text-[#facc15]" />
                  </h5>

                  {/* Automated Tax Calculation Mode Banner */}
                  <div className="bg-[#121520] border border-[#2e364f] p-3 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 text-xs font-mono">
                    <div>
                      <div className="flex items-center gap-2">
                        <span className="bg-[#facc15] text-black text-[9px] font-black px-1.5 py-0.5 uppercase">
                          AUTOMATED TAX ENGINE
                        </span>
                        <span className="text-slate-400 text-[10px]">
                          Mode: <strong className="text-white">{salarySettings.taxCalculationMode === 'fixed' ? 'Tarif Flat (%)' : 'Progresif UU HPP'}</strong>
                        </span>
                      </div>
                      <div className="text-white font-bold mt-1 text-xs flex items-baseline gap-2">
                        <span>Potongan Pajak PPh 21:</span>
                        <span className="text-rose-400 font-black text-sm">{formatRupiah(salaryTotals.pph21Tax)} / bln</span>
                        <span className="text-[10px] text-slate-400">(Tarif Efektif: {salaryTotals.effectiveTaxRate}%)</span>
                      </div>
                    </div>

                    <button
                      type="button"
                      onClick={() => setShowTaxCalculatorModal(true)}
                      className="bg-[#facc15] hover:bg-yellow-500 text-black font-black uppercase text-[11px] px-3 py-2 flex items-center gap-1.5 shadow-md cursor-pointer shrink-0"
                    >
                      <Calculator className="w-4 h-4" />
                      Buka Kalkulator Progresif
                    </button>
                  </div>

                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs font-mono">
                    <div>
                      <label className="block text-slate-400 font-bold uppercase mb-1">Status PTKP / Pajak</label>
                      <select
                        value={salarySettings.taxStatus}
                        onChange={e => setSalarySettings({ ...salarySettings, taxStatus: e.target.value as any })}
                        className="w-full bg-[#111] border border-[#222] text-white font-bold px-3 py-2 focus:border-[#facc15] outline-none cursor-pointer"
                      >
                        <option value="TK/0">TK/0 (Tidak Kawin - 0 Tanggungan)</option>
                        <option value="TK/1">TK/1 (Tidak Kawin - 1 Tanggungan)</option>
                        <option value="TK/2">TK/2 (Tidak Kawin - 2 Tanggungan)</option>
                        <option value="TK/3">TK/3 (Tidak Kawin - 3 Tanggungan)</option>
                        <option value="K/0">K/0 (Kawin - 0 Tanggungan)</option>
                        <option value="K/1">K/1 (Kawin - 1 Tanggungan)</option>
                        <option value="K/2">K/2 (Kawin - 2 Tanggungan)</option>
                        <option value="K/3">K/3 (Kawin - 3 Tanggungan)</option>
                      </select>
                    </div>

                    <div>
                      <label className="block text-slate-400 font-bold uppercase mb-1">Tarif Efektif PPh 21 (%)</label>
                      <div className="relative">
                        <input
                          type="number"
                          step="0.1"
                          min="0"
                          max="35"
                          value={salarySettings.taxRatePercent}
                          onChange={e => setSalarySettings({ ...salarySettings, taxRatePercent: Number(e.target.value) || 0, taxCalculationMode: 'fixed' })}
                          className="w-full bg-[#111] border border-[#222] text-rose-400 font-black px-3 py-2 focus:border-[#facc15] outline-none"
                        />
                        <span className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-500 font-bold">%</span>
                      </div>
                    </div>

                    <div>
                      <label className="block text-slate-400 font-bold uppercase mb-1">Potongan BPJS Kesehatan (%)</label>
                      <div className="relative">
                        <input
                          type="number"
                          step="0.1"
                          min="0"
                          max="5"
                          value={salarySettings.bpjsKesehatanPercent}
                          onChange={e => setSalarySettings({ ...salarySettings, bpjsKesehatanPercent: Number(e.target.value) || 0 })}
                          className="w-full bg-[#111] border border-[#222] text-white font-bold px-3 py-2 focus:border-[#facc15] outline-none"
                        />
                        <span className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-500 font-bold">%</span>
                      </div>
                    </div>

                    <div>
                      <label className="block text-slate-400 font-bold uppercase mb-1">BPJS Ketenagakerjaan JHT/JP (%)</label>
                      <div className="relative">
                        <input
                          type="number"
                          step="0.1"
                          min="0"
                          max="10"
                          value={salarySettings.bpjsKetenagakerjaanPercent}
                          onChange={e => setSalarySettings({ ...salarySettings, bpjsKetenagakerjaanPercent: Number(e.target.value) || 0 })}
                          className="w-full bg-[#111] border border-[#222] text-white font-bold px-3 py-2 focus:border-[#facc15] outline-none"
                        />
                        <span className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-500 font-bold">%</span>
                      </div>
                    </div>

                    {/* Section Potongan Absen & Terlambat */}
                    <div className="sm:col-span-2 bg-rose-950/20 border border-rose-900/40 p-3.5 space-y-3">
                      <div className="flex items-center justify-between border-b border-rose-900/40 pb-1.5">
                        <span className="font-bold text-rose-300 uppercase tracking-wider text-[11px] flex items-center gap-1.5">
                          <AlertCircle className="w-4 h-4 text-rose-400" />
                          Potongan Absensi (Alpa, Tidak Hadir & Terlambat)
                        </span>
                        <span className="text-[10px] text-rose-400 font-bold">
                          Total Deductions Absen: {formatRupiah(salaryTotals.totalAttendanceDeductions)}
                        </span>
                      </div>

                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <div>
                          <label className="block text-slate-400 font-bold uppercase mb-1">
                            Alpa / Tidak Hadir (Jumlah Hari)
                          </label>
                          <input
                            type="number"
                            min="0"
                            max="31"
                            value={salarySettings.absenceDeductionDays || 0}
                            onChange={e => {
                              const days = Number(e.target.value) || 0;
                              const ratePerDay = Math.round((salarySettings.baseSalary || 0) / 25);
                              setSalarySettings({
                                ...salarySettings,
                                absenceDeductionDays: days,
                                absenceDeductionAmount: days * ratePerDay
                              });
                            }}
                            className="w-full bg-[#111] border border-[#222] text-rose-300 font-bold px-3 py-2 focus:border-rose-400 outline-none"
                          />
                        </div>

                        <div>
                          <label className="block text-slate-400 font-bold uppercase mb-1">
                            Nominal Potongan Alpa (IDR)
                          </label>
                          <div className="relative">
                            <span className="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-500 font-bold">Rp</span>
                            <input
                              type="number"
                              min="0"
                              step="25000"
                              value={salarySettings.absenceDeductionAmount || 0}
                              onChange={e => setSalarySettings({ ...salarySettings, absenceDeductionAmount: Number(e.target.value) || 0 })}
                              className="w-full bg-[#111] border border-[#222] text-rose-400 font-black pl-8 pr-3 py-2 focus:border-rose-400 outline-none"
                            />
                          </div>
                        </div>

                        <div>
                          <label className="block text-slate-400 font-bold uppercase mb-1">
                            Terlambat Masuk Kerja (Jumlah Kali)
                          </label>
                          <input
                            type="number"
                            min="0"
                            max="31"
                            value={salarySettings.lateDeductionTimes || 0}
                            onChange={e => {
                              const times = Number(e.target.value) || 0;
                              setSalarySettings({
                                ...salarySettings,
                                lateDeductionTimes: times,
                                lateDeductionAmount: times * 50000 // Rp 50.000 / late
                              });
                            }}
                            className="w-full bg-[#111] border border-[#222] text-amber-300 font-bold px-3 py-2 focus:border-amber-400 outline-none"
                          />
                        </div>

                        <div>
                          <label className="block text-slate-400 font-bold uppercase mb-1">
                            Nominal Potongan Terlambat (IDR)
                          </label>
                          <div className="relative">
                            <span className="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-500 font-bold">Rp</span>
                            <input
                              type="number"
                              min="0"
                              step="10000"
                              value={salarySettings.lateDeductionAmount || 0}
                              onChange={e => setSalarySettings({ ...salarySettings, lateDeductionAmount: Number(e.target.value) || 0 })}
                              className="w-full bg-[#111] border border-[#222] text-amber-400 font-black pl-8 pr-3 py-2 focus:border-amber-400 outline-none"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Custom Deductions dynamic list */}
                  <div className="border-t border-[#1a1a1a] pt-3 space-y-2">
                    <span className="text-[10px] font-black uppercase text-slate-400 tracking-wider block">
                      Potongan Tambahan / Pinjaman Karyawan:
                    </span>
                    
                    {(salarySettings.customDeductions || []).map((item) => (
                      <div key={item.id} className="flex items-center justify-between bg-[#111] border border-[#222] px-3 py-1.5 text-xs font-mono">
                        <span className="text-slate-300 font-bold">{item.name}</span>
                        <div className="flex items-center gap-3">
                          <span className="text-rose-400 font-black">-{formatRupiah(item.amount)}</span>
                          <button
                            type="button"
                            onClick={() => handleRemoveCustomDeduction(item.id)}
                            className="text-rose-400 hover:text-rose-300 font-bold text-xs cursor-pointer"
                          >
                            ✕
                          </button>
                        </div>
                      </div>
                    ))}

                    <div className="flex items-center gap-2 pt-1">
                      <input
                        type="text"
                        placeholder="Nama Potongan (Contoh: Pinjaman Koperasi)"
                        value={newDeductionName}
                        onChange={e => setNewDeductionName(e.target.value)}
                        className="flex-1 bg-[#111] border border-[#222] text-xs text-white px-2.5 py-1.5 focus:border-[#facc15] outline-none font-mono"
                      />
                      <input
                        type="number"
                        placeholder="Jumlah (Rp)"
                        value={newDeductionAmount}
                        onChange={e => setNewDeductionAmount(e.target.value)}
                        className="w-28 bg-[#111] border border-[#222] text-xs text-white px-2.5 py-1.5 focus:border-[#facc15] outline-none font-mono"
                      />
                      <button
                        type="button"
                        onClick={handleAddCustomDeduction}
                        className="bg-rose-600 hover:bg-rose-500 text-white text-xs font-black uppercase px-3 py-1.5 shrink-0 cursor-pointer"
                      >
                        + Tambah
                      </button>
                    </div>
                  </div>
                </div>

                {/* Card 4: Bank Account Details */}
                <div className="bg-[#0a0a0a] border border-[#222] p-5 space-y-4">
                  <h5 className="text-xs font-black text-[#facc15] uppercase tracking-wider border-b border-[#222] pb-2 flex items-center justify-between">
                    <span>4. Data Rekening Bank Transfer Payroll</span>
                    <CreditCard className="w-4 h-4 text-[#facc15]" />
                  </h5>

                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs font-mono">
                    <div>
                      <label className="block text-slate-400 font-bold uppercase mb-1">Nama Bank</label>
                      <input
                        type="text"
                        value={salarySettings.bankName}
                        onChange={e => setSalarySettings({ ...salarySettings, bankName: e.target.value })}
                        placeholder="Contoh: Bank BCA, Bank Mandiri"
                        className="w-full bg-[#111] border border-[#222] text-white font-bold px-3 py-2 focus:border-[#facc15] outline-none"
                      />
                    </div>

                    <div>
                      <label className="block text-slate-400 font-bold uppercase mb-1">Nomor Rekening Bank</label>
                      <input
                        type="text"
                        value={salarySettings.bankAccountNumber}
                        onChange={e => setSalarySettings({ ...salarySettings, bankAccountNumber: e.target.value })}
                        placeholder="Contoh: 5270123890"
                        className="w-full bg-[#111] border border-[#222] text-white font-bold px-3 py-2 focus:border-[#facc15] outline-none"
                      />
                    </div>

                    <div className="sm:col-span-2">
                      <label className="block text-slate-400 font-bold uppercase mb-1">Nama Pemilik Rekening</label>
                      <input
                        type="text"
                        value={salarySettings.bankAccountHolder}
                        onChange={e => setSalarySettings({ ...salarySettings, bankAccountHolder: e.target.value })}
                        placeholder="Contoh: AGUS SETIAWAN"
                        className="w-full bg-[#111] border border-[#222] text-white font-bold px-3 py-2 focus:border-[#facc15] outline-none uppercase"
                      />
                    </div>
                  </div>
                </div>

                {/* Save Submit Button */}
                <div className="flex items-center gap-3">
                  <button
                    type="submit"
                    className="flex-1 bg-[#facc15] hover:bg-yellow-500 text-black font-black uppercase tracking-wider text-xs py-3 px-5 flex items-center justify-center gap-2 shadow-lg transition-all cursor-pointer"
                  >
                    <Save className="w-4 h-4" />
                    Simpan Pengaturan Gaji Pegawai
                  </button>
                </div>

              </div>

              {/* Right Column: Live Salary Slip Card Generator Preview */}
              <div className="space-y-6">
                
                <div className="bg-[#0a0a0a] border-2 border-[#facc15]/60 p-6 space-y-5 sticky top-6 shadow-2xl">
                  
                  {/* Card Title Bar */}
                  <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 border-b border-[#222] pb-4">
                    <div>
                      <h4 className="text-sm font-black text-white uppercase tracking-wider flex items-center gap-2">
                        <Receipt className="w-4 h-4 text-[#facc15]" />
                        Generator & Struk Slip Gaji Bulanan
                      </h4>
                      <p className="text-[11px] text-slate-400 font-mono mt-0.5">
                        Preview otomatis dokumen resmi Slip Gaji berdasarkan struktur saat ini.
                      </p>
                    </div>

                    <select
                      value={selectedSlipMonth}
                      onChange={e => setSelectedSlipMonth(e.target.value)}
                      className="bg-[#111] border border-[#333] text-xs font-mono font-bold text-[#facc15] px-3 py-1.5 focus:border-[#facc15] outline-none cursor-pointer"
                    >
                      <option value="Agustus 2026">Agustus 2026</option>
                      <option value="Juli 2026">Juli 2026</option>
                      <option value="Juni 2026">Juni 2026</option>
                      <option value="Mei 2026">Mei 2026</option>
                      <option value="THR 2026">THR / Bonus 2026</option>
                    </select>
                  </div>

                  {/* Payslip Mock Card */}
                  <div className="bg-[#050505] border border-[#222] p-5 space-y-4 font-mono text-xs">
                    
                    {/* Header Kop */}
                    <div className="border-b border-[#222] pb-3 flex justify-between items-start">
                      <div>
                        <h5 className="font-black text-white text-xs uppercase tracking-tight">PT MEDIAN MULTI DAYA</h5>
                        <p className="text-[10px] text-[#facc15] font-bold">SLIP GAJI PEGAWAI (CONFIDENTIAL)</p>
                      </div>
                      <div className="text-right text-[10px] text-slate-400">
                        <span>PERIODE: <strong className="text-white">{selectedSlipMonth.toUpperCase()}</strong></span>
                      </div>
                    </div>

                    {/* Employee Quick Info */}
                    <div className="grid grid-cols-2 gap-2 text-[11px] bg-[#111] p-3 border border-[#222]">
                      <div>
                        <span className="text-slate-500 block text-[9px] uppercase">Pegawai</span>
                        <span className="font-bold text-white uppercase truncate block">{employee.name}</span>
                        <span className="text-slate-400 text-[10px] block">NIP: {employee.nip}</span>
                      </div>
                      <div>
                        <span className="text-slate-500 block text-[9px] uppercase">Golongan & Bank</span>
                        <span className="font-bold text-[#facc15] block truncate">{salarySettings.payGrade}</span>
                        <span className="text-slate-400 text-[10px] block truncate">{salarySettings.bankName} - {salarySettings.bankAccountNumber}</span>
                      </div>
                    </div>

                    {/* Itemized Summary Breakdown */}
                    <div className="space-y-3">
                      
                      {/* Section A: Earnings */}
                      <div>
                        <span className="text-[10px] font-black uppercase text-emerald-400 tracking-wider block mb-1">
                          A. PENERIMAAN / GAJI KOTOR
                        </span>
                        <div className="space-y-1 text-slate-300">
                          <div className="flex justify-between">
                            <span>Gaji Pokok</span>
                            <span>{formatRupiah(salarySettings.baseSalary)}</span>
                          </div>
                          <div className="flex justify-between text-slate-400">
                            <span>Tunjangan Jabatan</span>
                            <span>{formatRupiah(salarySettings.positionAllowance)}</span>
                          </div>
                          <div className="flex justify-between text-slate-400">
                            <span>Tunjangan Transport & Makan</span>
                            <span>{formatRupiah(salarySettings.transportAllowance + salarySettings.mealAllowance)}</span>
                          </div>
                          <div className="flex justify-between text-slate-400">
                            <span>Tunjangan Komunikasi & Insentif</span>
                            <span>{formatRupiah(salarySettings.communicationAllowance + salarySettings.performanceBonus)}</span>
                          </div>
                          {salaryTotals.overtimePay > 0 && (
                            <div className="flex justify-between text-emerald-400">
                              <span>Uang Lembur ({salarySettings.overtimeHours} Jam)</span>
                              <span>{formatRupiah(salaryTotals.overtimePay)}</span>
                            </div>
                          )}
                          {salaryTotals.customAllowancesTotal > 0 && (
                            <div className="flex justify-between text-emerald-400">
                              <span>Tunjangan Tambahan</span>
                              <span>{formatRupiah(salaryTotals.customAllowancesTotal)}</span>
                            </div>
                          )}
                          <div className="flex justify-between font-black text-white pt-1 border-t border-[#222]">
                            <span>TOTAL GAJI KOTOR</span>
                            <span className="text-emerald-400">{formatRupiah(salaryTotals.grossIncome)}</span>
                          </div>
                        </div>
                      </div>

                      {/* Section B: Deductions */}
                      <div className="space-y-2">
                        <span className="text-[10px] font-black uppercase text-rose-400 tracking-wider block">
                          B. POTONGAN GAJI
                        </span>
                        <div className="space-y-1 text-slate-300">
                          <div className="flex justify-between items-center text-slate-400">
                            <span className="flex items-center gap-1.5">
                              <span>Pajak PPh 21 ({salarySettings.taxCalculationMode === 'fixed' ? `${salarySettings.taxRatePercent}%` : `Progresif ${salaryTotals.effectiveTaxRate}%`})</span>
                              {salarySettings.taxCalculationMode !== 'fixed' && (
                                <span className="bg-[#facc15]/20 text-[#facc15] text-[9px] px-1 font-bold border border-[#facc15]/30">
                                  UU HPP
                                </span>
                              )}
                            </span>
                            <span className="text-rose-400 font-bold">-{formatRupiah(salaryTotals.pph21Tax)}</span>
                          </div>

                          <div className="flex justify-between text-slate-400">
                            <span>BPJS Kesehatan ({salarySettings.bpjsKesehatanPercent}%)</span>
                            <span className="text-rose-400">-{formatRupiah(salaryTotals.bpjsKesehatan)}</span>
                          </div>
                          <div className="flex justify-between text-slate-400">
                            <span>BPJS Ketenagakerjaan ({salarySettings.bpjsKetenagakerjaanPercent}%)</span>
                            <span className="text-rose-400">-{formatRupiah(salaryTotals.bpjsKetenagakerjaan)}</span>
                          </div>
                          {salaryTotals.customDeductionsTotal > 0 && (
                            <div className="flex justify-between text-slate-400">
                              <span>Potongan Pinjaman / Lainnya</span>
                              <span className="text-rose-400">-{formatRupiah(salaryTotals.customDeductionsTotal)}</span>
                            </div>
                          )}
                          <div className="flex justify-between font-black text-white pt-1 border-t border-[#222]">
                            <span>TOTAL POTONGAN</span>
                            <span className="text-rose-400">-{formatRupiah(salaryTotals.totalDeductions)}</span>
                          </div>
                        </div>

                        {/* Interactive Progressive Tax Simulation Box */}
                        {salaryTotals.progressiveTaxDetails && (
                          <div className="bg-[#121520] border border-[#2e364f] p-2.5 space-y-1.5 text-[11px] font-mono mt-2">
                            <div className="flex items-center justify-between text-[#facc15] font-black border-b border-[#222] pb-1">
                              <span className="flex items-center gap-1 text-[10px]">
                                <Calculator className="w-3 h-3 text-[#facc15]" />
                                AROMA & SIMULASI PPh 21 PROGRESIF
                              </span>
                              <button
                                type="button"
                                onClick={() => setShowTaxCalculatorModal(true)}
                                className="text-[9px] text-[#facc15] hover:underline cursor-pointer"
                              >
                                Konfigurasi &rarr;
                              </button>
                            </div>

                            <div className="grid grid-cols-2 gap-1 text-[10px] text-slate-300">
                              <div>Gaji Setahun: <strong className="text-white">{formatRupiah(salaryTotals.progressiveTaxDetails.annualGrossIncome)}</strong></div>
                              <div>PKP Setahun: <strong className="text-emerald-400">{formatRupiah(salaryTotals.progressiveTaxDetails.annualTaxableIncome)}</strong></div>
                            </div>

                            {salaryTotals.progressiveTaxDetails.bracketBreakdowns.filter(b => b.taxableAmountInBracket > 0).length > 0 ? (
                              <div className="space-y-0.5 pt-1 border-t border-[#1e2333] text-[10px]">
                                {salaryTotals.progressiveTaxDetails.bracketBreakdowns
                                  .filter(b => b.taxableAmountInBracket > 0)
                                  .map(b => (
                                    <div key={b.bracketId} className="flex justify-between text-slate-400">
                                      <span>{b.label}:</span>
                                      <span className="text-slate-200 font-bold">{formatRupiah(b.monthlyTaxInBracket)} / bln</span>
                                    </div>
                                  ))}
                              </div>
                            ) : (
                              <div className="text-[10px] text-emerald-400 italic pt-1 border-t border-[#1e2333]">
                                * Bebas Pajak (Penghasilan di bawah PTKP {salarySettings.taxStatus})
                              </div>
                            )}
                          </div>
                        )}
                      </div>

                      {/* Take Home Pay Box */}
                      <div className="bg-[#111] border-2 border-[#facc15] p-3 text-center space-y-1">
                        <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest block">
                          TAKE HOME PAY (GAJI BERSIH)
                        </span>
                        <span className="text-xl font-black text-[#facc15] block">
                          {formatRupiah(salaryTotals.takeHomePay)}
                        </span>
                      </div>

                    </div>

                  </div>

                  {/* Print & Preview Action Buttons */}
                  <div className="space-y-2">
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                      <button
                        type="button"
                        onClick={() => setShowSalarySlipDrawer(true)}
                        className="bg-[#1e2333] hover:bg-[#272e42] text-[#facc15] font-black uppercase tracking-wider text-xs py-3 px-3 flex items-center justify-center gap-2 border border-[#facc15]/40 shadow-lg transition-all cursor-pointer"
                      >
                        <Eye className="w-4 h-4 text-[#facc15]" />
                        Preview Slip (Drawer)
                      </button>
                      <button
                        type="button"
                        onClick={handlePrintSalarySlip}
                        className="bg-emerald-600 hover:bg-emerald-500 text-white font-black uppercase tracking-wider text-xs py-3 px-3 flex items-center justify-center gap-2 border border-emerald-400/40 shadow-lg transition-all cursor-pointer"
                      >
                        <Printer className="w-4 h-4 text-emerald-200" />
                        Cetak Slip (PDF)
                      </button>
                    </div>
                    <p className="text-[10px] text-slate-500 font-mono text-center">
                      Mencetak Slip Gaji resmi dengan nomor verifikasi dan stempel digital HR.
                    </p>
                  </div>

                </div>

              </div>

            </div>

          </form>

        </div>
      )}

      {/* Content Tab Panel: Delegasi & Sub-Tugas */}
      {activeTab === "delegation" && (
        <EmployeeDelegationTab
          employee={employee}
          employees={employees}
          currentUser={currentUser}
          onUpdateDelegatedTasks={(newTasks) => {
            if (onUpdateDelegatedTasks) {
              onUpdateDelegatedTasks(employee.id, newTasks);
            } else {
              employee.delegatedTasks = newTasks;
            }
          }}
          onAddAuditLog={onAddAuditLog}
        />
      )}

      {/* Manual Addition Modals (Rendering Inline for Iframe Cleanliness) */}
      {showAddHistoryModal && (
        <div className="fixed inset-0 bg-black/85 flex items-center justify-center p-4 z-50 animate-fadeIn">
          <div className="bg-[#0a0a0a] border-2 border-[#facc15] rounded-none max-w-md w-full p-6 space-y-4">
            <h5 className="text-sm font-black text-[#facc15] border-b border-[#222] pb-3 uppercase tracking-widest">Tambah {showAddHistoryModal}</h5>

            {showAddHistoryModal === "Pendidikan" && (
              <div className="space-y-3">
                <div>
                  <label className="block text-xs font-black text-slate-400 uppercase tracking-wider mb-1">Tingkat</label>
                  <select value={newLevel} onChange={e => setNewLevel(e.target.value as any)} className="w-full bg-[#111] border border-[#222] text-white rounded-none px-2.5 py-1.5 text-sm focus:border-[#facc15] outline-none font-mono">
                    <option value="SMA">SMA/SMK</option>
                    <option value="D3">Diploma D3</option>
                    <option value="S1">Sarjana S1</option>
                    <option value="S2">Magister S2</option>
                    <option value="S3">Doktor S3</option>
                  </select>
                </div>
                <div>
                  <label className="block text-xs font-black text-slate-400 uppercase tracking-wider mb-1">Sekolah / Universitas</label>
                  <input type="text" value={newSchool} onChange={e => setNewSchool(e.target.value)} placeholder="e.g., Universitas Indonesia" className="w-full bg-[#111] border border-[#222] text-white rounded-none px-2.5 py-1.5 text-sm placeholder-slate-600 focus:border-[#facc15] outline-none font-mono" />
                </div>
                <div>
                  <label className="block text-xs font-black text-slate-400 uppercase tracking-wider mb-1">Jurusan</label>
                  <input type="text" value={newMajor} onChange={e => setNewMajor(e.target.value)} placeholder="e.g., Akuntansi" className="w-full bg-[#111] border border-[#222] text-white rounded-none px-2.5 py-1.5 text-sm placeholder-slate-600 focus:border-[#facc15] outline-none font-mono" />
                </div>
                <div>
                  <label className="block text-xs font-black text-slate-400 uppercase tracking-wider mb-1">Tahun Lulus</label>
                  <input type="text" value={newYearGrad} onChange={e => setNewYearGrad(e.target.value)} placeholder="e.g., 2021" className="w-full bg-[#111] border border-[#222] text-white rounded-none px-2.5 py-1.5 text-sm placeholder-slate-600 focus:border-[#facc15] outline-none font-mono" />
                </div>
              </div>
            )}

            {showAddHistoryModal === "Pelatihan" && (
              <div className="space-y-3">
                <div>
                  <label className="block text-xs font-black text-slate-400 uppercase tracking-wider mb-1">Nama Kursus / Pelatihan</label>
                  <input type="text" value={newCourse} onChange={e => setNewCourse(e.target.value)} placeholder="e.g., Pelatihan ISO 9001" className="w-full bg-[#111] border border-[#222] text-white rounded-none px-2.5 py-1.5 text-sm placeholder-slate-600 focus:border-[#facc15] outline-none font-mono" />
                </div>
                <div>
                  <label className="block text-xs font-black text-slate-400 uppercase tracking-wider mb-1">Penyelenggara</label>
                  <input type="text" value={newProvider} onChange={e => setNewProvider(e.target.value)} placeholder="e.g., GAN Academy" className="w-full bg-[#111] border border-[#222] text-white rounded-none px-2.5 py-1.5 text-sm placeholder-slate-600 focus:border-[#facc15] outline-none font-mono" />
                </div>
                <div>
                  <label className="block text-xs font-black text-slate-400 uppercase tracking-wider mb-1">Kategori</label>
                  <select value={newCourseCat} onChange={e => setNewCourseCat(e.target.value as any)} className="w-full bg-[#111] border border-[#222] text-white rounded-none px-2.5 py-1.5 text-sm focus:border-[#facc15] outline-none font-mono">
                    <option value="Technical">Teknis (Technical)</option>
                    <option value="Leadership">Kepemimpinan (Leadership)</option>
                    <option value="Soft Skills">Soft Skills</option>
                    <option value="Compliance">Kepatuhan (Compliance)</option>
                  </select>
                </div>
              </div>
            )}

            {showAddHistoryModal === "SK" && (
              <div className="space-y-3">
                <div>
                  <label className="block text-xs font-black text-slate-400 uppercase tracking-wider mb-1">Tipe SK</label>
                  <select value={newSKType} onChange={e => setNewSKType(e.target.value as any)} className="w-full bg-[#111] border border-[#222] text-white rounded-none px-2.5 py-1.5 text-sm focus:border-[#facc15] outline-none font-mono">
                    <option value="SK Pengangkatan">SK Pengangkatan</option>
                    <option value="SK Mutasi">SK Mutasi</option>
                    <option value="SK Promosi">SK Promosi</option>
                    <option value="SK Pensiun">SK Pensiun</option>
                    <option value="SK PHK">SK PHK</option>
                  </select>
                </div>
                <div>
                  <label className="block text-xs font-black text-slate-400 uppercase tracking-wider mb-1">Nomor SK Resmi</label>
                  <input type="text" value={newSKNum} onChange={e => setNewSKNum(e.target.value)} placeholder="e.g., 044/SK/GAN/2026" className="w-full bg-[#111] border border-[#222] text-white rounded-none px-2.5 py-1.5 text-sm placeholder-slate-600 focus:border-[#facc15] outline-none font-mono" />
                </div>
                <div>
                  <label className="block text-xs font-black text-slate-400 uppercase tracking-wider mb-1">Tanggal Berlaku Efektif</label>
                  <input type="date" value={newSKDate} onChange={e => setNewSKDate(e.target.value)} className="w-full bg-[#111] border border-[#222] text-white rounded-none px-2.5 py-1.5 text-sm focus:border-[#facc15] outline-none font-mono" />
                </div>
              </div>
            )}

            {showAddHistoryModal === "KPI" && (
              <div className="space-y-3">
                <div>
                  <label className="block text-xs font-black text-slate-400 uppercase tracking-wider mb-1">Periode Kuartal</label>
                  <input type="text" value={newKPIPeriod} onChange={e => setNewKPIPeriod(e.target.value)} placeholder="e.g., 2026 Q2" className="w-full bg-[#111] border border-[#222] text-white rounded-none px-2.5 py-1.5 text-sm placeholder-slate-600 focus:border-[#facc15] outline-none font-mono" />
                </div>
                <div>
                  <label className="block text-xs font-black text-slate-400 uppercase tracking-wider mb-1">Nilai Kinerja (0 - 100)</label>
                  <input type="number" min={0} max={100} value={newKPIScore} onChange={e => setNewKPIScore(e.target.value)} className="w-full bg-[#111] border border-[#222] text-white rounded-none px-2.5 py-1.5 text-sm placeholder-slate-600 focus:border-[#facc15] outline-none font-mono" />
                </div>
              </div>
            )}

            {showAddHistoryModal === "Reward" && (
              <div className="space-y-3">
                <div>
                  <label className="block text-xs font-black text-slate-400 uppercase tracking-wider mb-1">Nama Penghargaan</label>
                  <input type="text" value={newRewardTitle} onChange={e => setNewRewardTitle(e.target.value)} placeholder="e.g., Inovator Terbaik" className="w-full bg-[#111] border border-[#222] text-white rounded-none px-2.5 py-1.5 text-sm placeholder-slate-600 focus:border-[#facc15] outline-none font-mono" />
                </div>
                <div>
                  <label className="block text-xs font-black text-slate-400 uppercase tracking-wider mb-1">Pemberi</label>
                  <input type="text" value={newRewardGiver} onChange={e => setNewRewardGiver(e.target.value)} placeholder="e.g., Direktur Utama" className="w-full bg-[#111] border border-[#222] text-white rounded-none px-2.5 py-1.5 text-sm placeholder-slate-600 focus:border-[#facc15] outline-none font-mono" />
                </div>
                <div>
                  <label className="block text-xs font-black text-slate-400 uppercase tracking-wider mb-1">Deskripsi</label>
                  <textarea rows={2} value={newRewardDesc} onChange={e => setNewRewardDesc(e.target.value)} placeholder="Deskripsi ringkas..." className="w-full bg-[#111] border border-[#222] text-white rounded-none px-2.5 py-1.5 text-sm placeholder-slate-600 focus:border-[#facc15] outline-none font-mono" />
                </div>
              </div>
            )}

            {showAddHistoryModal === "Punishment" && (
              <div className="space-y-3">
                <div>
                  <label className="block text-xs font-black text-slate-400 uppercase tracking-wider mb-1">Jenis Sanksi</label>
                  <select value={newPunishType} onChange={e => setNewPunishType(e.target.value as any)} className="w-full bg-[#111] border border-[#222] text-white rounded-none px-2.5 py-1.5 text-sm focus:border-[#facc15] outline-none font-mono">
                    <option value="Teguran Lisan">Teguran Lisan</option>
                    <option value="SP 1">Surat Peringatan 1 (SP 1)</option>
                    <option value="SP 2">Surat Peringatan 2 (SP 2)</option>
                    <option value="SP 3">SP 3 / Skorsing</option>
                  </select>
                </div>
                <div>
                  <label className="block text-xs font-black text-slate-400 uppercase tracking-wider mb-1">Alasan Pelanggaran</label>
                  <input type="text" value={newPunishReason} onChange={e => setNewPunishReason(e.target.value)} placeholder="Sebutkan pelanggaran..." className="w-full bg-[#111] border border-[#222] text-white rounded-none px-2.5 py-1.5 text-sm placeholder-slate-600 focus:border-[#facc15] outline-none font-mono" />
                </div>
                <div>
                  <label className="block text-xs font-black text-slate-400 uppercase tracking-wider mb-1">Oleh Supervisor/Manager</label>
                  <input type="text" value={newPunishGiver} onChange={e => setNewPunishGiver(e.target.value)} placeholder="e.g., Adi Wijaya" className="w-full bg-[#111] border border-[#222] text-white rounded-none px-2.5 py-1.5 text-sm placeholder-slate-600 focus:border-[#facc15] outline-none font-mono" />
                </div>
              </div>
            )}

            <div className="flex justify-end gap-2.5 pt-4 border-t border-[#222]">
              <button 
                onClick={() => setShowAddHistoryModal(null)}
                className="px-4 py-1.5 text-xs font-black border border-[#222] rounded-none text-slate-300 hover:bg-[#111] uppercase tracking-wider transition-colors"
              >
                Batal
              </button>
              <button 
                onClick={() => handleAddHistorySubmit(showAddHistoryModal)}
                className="px-4 py-1.5 text-xs font-black bg-[#facc15] hover:bg-yellow-500 text-black rounded-none uppercase tracking-wider transition-colors"
              >
                Tambahkan
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Manual Audit Log Note Modal */}
      {showAddAuditModal && (
        <div className="fixed inset-0 bg-black/85 flex items-center justify-center p-4 z-50 animate-fadeIn">
          <form onSubmit={handleManualAuditSubmit} className="bg-[#0a0a0a] border-2 border-[#facc15] rounded-none max-w-md w-full p-6 space-y-4">
            <h5 className="text-sm font-black text-[#facc15] border-b border-[#222] pb-3 uppercase tracking-widest flex items-center gap-2">
              <History className="w-4 h-4 text-[#facc15]" />
              Tambah Catatan Audit Trail Manual
            </h5>

            <div className="space-y-3">
              <div>
                <label className="block text-xs font-black text-slate-400 uppercase tracking-wider mb-1">Aksi Perubahan</label>
                <select 
                  value={manualAction} 
                  onChange={e => setManualAction(e.target.value as any)} 
                  className="w-full bg-[#111] border border-[#222] text-white rounded-none px-2.5 py-1.5 text-sm focus:border-[#facc15] outline-none font-mono"
                >
                  <option value="UPDATE">UPDATE (~ Pembaruan)</option>
                  <option value="CREATE">CREATE (+ Penambahan)</option>
                  <option value="DELETE">DELETE (- Penghapusan)</option>
                </select>
              </div>

              <div>
                <label className="block text-xs font-black text-slate-400 uppercase tracking-wider mb-1">Kategori Histori</label>
                <select 
                  value={manualCategory} 
                  onChange={e => setManualCategory(e.target.value as any)} 
                  className="w-full bg-[#111] border border-[#222] text-white rounded-none px-2.5 py-1.5 text-sm focus:border-[#facc15] outline-none font-mono"
                >
                  <option value="Biodata">Biodata & Profil</option>
                  <option value="Jabatan">Jabatan & Mutasi</option>
                  <option value="Pendidikan">Pendidikan</option>
                  <option value="Pelatihan">Pelatihan</option>
                  <option value="SK">Surat Keputusan (SK)</option>
                  <option value="KPI">KPI / Evaluasi</option>
                  <option value="Reward">Reward</option>
                  <option value="Punishment">Sanksi</option>
                  <option value="Dokumen">Dokumen Digital</option>
                </select>
              </div>

              <div>
                <label className="block text-xs font-black text-slate-400 uppercase tracking-wider mb-1">Rincian Perubahan & Latar Belakang</label>
                <textarea 
                  rows={3}
                  required
                  value={manualDetails}
                  onChange={e => setManualDetails(e.target.value)}
                  placeholder="Contoh: Pengkinian nomor sertifikat ISO dan pencatatan audit tahunan..."
                  className="w-full bg-[#111] border border-[#222] text-white rounded-none px-2.5 py-1.5 text-sm placeholder-slate-600 focus:border-[#facc15] outline-none font-mono"
                />
              </div>
            </div>

            <div className="flex justify-end gap-2.5 pt-4 border-t border-[#222]">
              <button 
                type="button"
                onClick={() => setShowAddAuditModal(false)}
                className="px-4 py-1.5 text-xs font-black border border-[#222] rounded-none text-slate-300 hover:bg-[#111] uppercase tracking-wider transition-colors"
              >
                Batal
              </button>
              <button 
                type="submit"
                className="px-4 py-1.5 text-xs font-black bg-[#facc15] hover:bg-yellow-500 text-black rounded-none uppercase tracking-wider transition-colors"
              >
                Simpan Audit Log
              </button>
            </div>
          </form>
        </div>
      )}

      {/* Automated Progressive Tax Calculator Modal */}
      {showTaxCalculatorModal && (
        <AutomatedTaxCalculator
          employee={employee}
          salarySettings={salarySettings}
          onUpdateSettings={updated => {
            setSalarySettings(updated);
            setShowTaxCalculatorModal(false);
          }}
          onClose={() => setShowTaxCalculatorModal(false)}
          isModal={true}
        />
      )}

      {/* Salary Slip Real-Time Preview Drawer */}
      <SalarySlipPreviewDrawer
        isOpen={showSalarySlipDrawer}
        onClose={() => setShowSalarySlipDrawer(false)}
        employee={employee}
        salarySettings={salarySettings}
        selectedSlipMonth={selectedSlipMonth}
        onSelectSlipMonth={setSelectedSlipMonth}
        onDownloadPdf={handlePrintSalarySlip}
      />

      {/* Quick Status Update & Automatic Timeline Modal */}
      {isStatusModalOpen && (
        <div className="fixed inset-0 bg-black/80 backdrop-blur-xs flex items-center justify-center p-4 z-50">
          <div className="bg-[#0a0a0a] border border-[#222] max-w-md w-full p-6 space-y-5 animate-fadeIn shadow-2xl">
            <div className="flex items-center justify-between border-b border-[#222] pb-3">
              <h4 className="text-sm font-black text-[#facc15] uppercase tracking-wider flex items-center gap-2">
                <UserX className="w-4 h-4 text-[#facc15]" />
                Ubah Status Pegawai & Log Timeline
              </h4>
              <button
                type="button"
                onClick={() => setIsStatusModalOpen(false)}
                className="text-slate-500 hover:text-white text-xs font-mono font-bold cursor-pointer"
              >
                ✕
              </button>
            </div>

            <form onSubmit={handleUpdateStatusQuick} className="space-y-4">
              <div>
                <label className="block text-xs font-mono text-slate-400 uppercase font-bold mb-1.5">
                  Status Baru untuk Pegawai: <strong className="text-white">{employee.name}</strong>
                </label>
                <select
                  value={selectedNewStatus}
                  onChange={(e) => setSelectedNewStatus(e.target.value as Employee["status"])}
                  className="w-full bg-[#111] border border-[#222] text-white font-mono text-xs p-3 focus:outline-none focus:border-[#facc15]"
                >
                  <option value="Aktif">Aktif (Karyawan Tetap)</option>
                  <option value="Kontrak">Kontrak (PKWT)</option>
                  <option value="Probation">Probation / Masa Percobaan</option>
                  <option value="Magang">Magang / Internship</option>
                  <option value="Resigned">Resign / Pengunduran Diri</option>
                  <option value="Pensiun">Pensiun / Purna Bakti</option>
                </select>
              </div>

              <div className="p-3.5 bg-[#111] border border-[#222] text-[11px] font-mono text-slate-300 space-y-1.5">
                <p className="text-[#facc15] font-bold uppercase flex items-center gap-1.5">
                  <Activity className="w-3.5 h-3.5 text-[#facc15]" />
                  Log Otomatis Timeline System:
                </p>
                <p className="text-slate-400 leading-relaxed">
                  Saat memilih status <strong className="text-rose-400">Resign</strong> atau <strong className="text-purple-400">Pensiun</strong>, sistem akan secara instan membuat entri riwayat baru di <strong className="text-yellow-400 font-bold">Timeline Perjalanan Karir Pegawai</strong> dan memperbarui <strong className="text-yellow-400 font-bold">Audit Log Kepegawaian</strong>.
                </p>
              </div>

              <div className="flex items-center justify-end gap-2 pt-3 border-t border-[#222]">
                <button
                  type="button"
                  onClick={() => setIsStatusModalOpen(false)}
                  className="px-4 py-2 text-xs font-mono text-slate-400 hover:text-white uppercase transition-colors"
                >
                  Batal
                </button>
                <button
                  type="submit"
                  className="px-4 py-2 text-xs font-black bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-500 hover:to-teal-500 text-white uppercase tracking-wider cursor-pointer border border-emerald-400/40 shadow-md transition-all"
                >
                  Simpan Perubahan Status
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Digital ID Card Generator & Print Modal */}
      <DigitalIdCardModal 
        employee={employee}
        isOpen={isIdCardModalOpen}
        onClose={() => setIsIdCardModalOpen(false)}
      />

    </div>
  );
}