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

import React, { useState, useMemo, useEffect } from "react";
import { motion, AnimatePresence } from "motion/react";
import { INITIAL_EMPLOYEES, INITIAL_WORKFLOWS, INITIAL_CASH_BANK_ACCOUNTS, INITIAL_BUDGET_ITEMS, INITIAL_FINANCIAL_TRANSACTIONS, INITIAL_JOURNAL_ENTRIES, INITIAL_DMS_LETTERS, INITIAL_PROCUREMENT_REQUESTS } from "./data";
import { INITIAL_SAAS_TENANTS } from "./data/saasTenants";
import { Employee, WorkflowRequest, DigitalDocument, AuditLog, detectDocumentType, FinancialTransaction, CashBankAccount, BudgetItem, JournalEntry, DmsLetter, ProcurementRequest, SalarySettings, DelegatedTask, SaaSTenant } from "./types";
import { googleDriveService } from "./services/googleDriveService";
import Dashboard from "./components/Dashboard";
import EmployeeForm from "./components/EmployeeForm";
import EmployeeProfile360 from "./components/EmployeeProfile360";
import WorkflowConsole from "./components/WorkflowConsole";
import OrgChart from "./components/OrgChart";
import RkapModule from "./components/RkapModule";
import GovernancePolicyModule from "./components/GovernancePolicyModule";
import CtoDataReplicationModule from "./components/CtoDataReplicationModule";
import FinanceSapModule from "./components/FinanceSapModule";
import DmsModule from "./components/DmsModule";
import ProcurementGaModule from "./components/ProcurementGaModule";
import EmployeeAttendanceModule from "./components/EmployeeAttendanceModule";
import { OfficialTravelModule } from "./components/travel/OfficialTravelModule";
import { UmkModule } from "./components/umk/UmkModule";
import { SaasTenantModule } from "./components/SaasTenantModule";
import { PortalMarketingHub } from "./components/PortalMarketingHub";
import { TenantSelectorModal } from "./components/TenantSelectorModal";
import SupabaseModal from "./components/SupabaseModal";
import TvProjectorCastModal from "./components/TvProjectorCastModal";
import TvPresentationDisplay from "./components/TvPresentationDisplay";
import MobileAppDownloadModal from "./components/MobileAppDownloadModal";
import { BulkEmployeeUploadModal } from "./components/BulkEmployeeUploadModal";
import FirstLoginPasswordChangeModal from "./components/FirstLoginPasswordChangeModal";
import LoginModal, { getAllowedTabsForUser, getDirectorateName } from "./components/LoginModal";
import NotificationBell from "./components/NotificationBell";
import { ChangeCompanyLogoModal } from "./components/ChangeCompanyLogoModal";
import { AutoBackupSchedulerModal, getStoredBackupConfig, executeEmployeeBackup } from "./components/AutoBackupSchedulerModal";
import { useSsoAuthCallback } from "./hooks/useSsoAuthCallback";
import { ssoService } from "./services/ssoService";
import { sendWorkflowNotificationEmail } from "./services/emailGatewayService";
import { EmailGatewayDrawerModal } from "./components/EmailGatewayDrawerModal";
import { EmailDispatchToast } from "./components/EmailDispatchToast";
import ptMedianLogo from "./assets/images/pt_median_logo_1785758831669.jpg";
import { 
  Users, 
  LayoutDashboard, 
  Network, 
  GitPullRequest, 
  UserPlus, 
  Search, 
  Filter, 
  MapPin, 
  Phone, 
  Mail, 
  ArrowRight,
  Sparkles,
  Eye,
  Edit2,
  Database,
  Settings,
  AlertCircle,
  CheckCircle2,
  Info,
  RefreshCw,
  HelpCircle,
  Key,
  UserCheck,
  ShieldCheck,
  LogOut,
  BadgeCheck,
  Building2,
  Lock,
  CheckSquare,
  Square,
  Briefcase,
  Download,
  X,
  Layers,
  FileText,
  ShoppingBag,
  AlertTriangle,
  Clock,
  FileSpreadsheet,
  QrCode,
  Tv,
  Globe,
  Smartphone,
  Camera,
  Image as ImageIcon,
  HardDriveUpload,
  Plane,
  Wallet
} from "lucide-react";

export default function App() {
  // Master Core State loaded from seed
  const [employees, setEmployees] = useState<Employee[]>(() => {
    const cached = localStorage.getItem("simulated_employees");
    if (cached) {
      try {
        return JSON.parse(cached);
      } catch (e) {
        return INITIAL_EMPLOYEES;
      }
    }
    return INITIAL_EMPLOYEES;
  });
  const [workflows, setWorkflows] = useState<WorkflowRequest[]>(INITIAL_WORKFLOWS);

  // SAP Financial Module Master State
  const [financialTransactions, setFinancialTransactions] = useState<FinancialTransaction[]>(INITIAL_FINANCIAL_TRANSACTIONS);
  const [cashAccounts, setCashAccounts] = useState<CashBankAccount[]>(INITIAL_CASH_BANK_ACCOUNTS);
  const [budgetItems, setBudgetItems] = useState<BudgetItem[]>(INITIAL_BUDGET_ITEMS);
  const [journals, setJournals] = useState<JournalEntry[]>(INITIAL_JOURNAL_ENTRIES);

  // DMS & Procurement Module States
  const [dmsLetters, setDmsLetters] = useState<DmsLetter[]>(INITIAL_DMS_LETTERS);
  const [procurementRequests, setProcurementRequests] = useState<ProcurementRequest[]>(INITIAL_PROCUREMENT_REQUESTS);

  // Active view router
  const [activeTab, setActiveTab] = useState<"dashboard" | "umk" | "travel" | "employees" | "attendance" | "org" | "workflows" | "rkap" | "finance" | "dms" | "procurement" | "cto" | "governance" | "saas" | "portal">("dashboard");

  // Multi-Tenant SaaS States
  const [tenants, setTenants] = useState<SaaSTenant[]>(() => {
    const cached = localStorage.getItem("saas_tenants");
    if (cached) {
      try { return JSON.parse(cached); } catch (e) { return INITIAL_SAAS_TENANTS; }
    }
    return INITIAL_SAAS_TENANTS;
  });

  const [activeTenantId, setActiveTenantId] = useState<string>(() => {
    return localStorage.getItem("active_tenant_id") || "tenant-median-01";
  });

  const [isTenantModalOpen, setIsTenantModalOpen] = useState(false);

  useEffect(() => {
    localStorage.setItem("saas_tenants", JSON.stringify(tenants));
  }, [tenants]);

  useEffect(() => {
    localStorage.setItem("active_tenant_id", activeTenantId);
  }, [activeTenantId]);

  // Authentication & Current Logged-In User State
  const [currentUser, setCurrentUser] = useState<Employee>(() => {
    const savedUserId = localStorage.getItem("current_user_id");
    if (savedUserId) {
      const found = employees.find(e => e.id === savedUserId || e.nip === savedUserId);
      if (found) return found;
    }
    // Default to CEO Bambang Hartono (Super Admin)
    return employees.find(e => e.id === "emp-ceo-01") || employees[0];
  });

  // SSO Auth Callback Effect & Component State Synchronizer
  // Automatically parses URL search params (token/code) from auth.median-cloud.web.id, validates JWT, and updates currentUser
  const { ssoNotification, currentSsoUser, isProcessingRedirect, isServerSessionReady, dismissNotification } = useSsoAuthCallback({
    employees,
    currentUser,
    onUserAuthenticated: (authenticatedUser, ssoPayload) => {
      setCurrentUser(authenticatedUser);
      localStorage.setItem("current_user_id", authenticatedUser.id);
    }
  });

  useEffect(() => {
    if (currentSsoUser?.tenantId) {
      setActiveTenantId(currentSsoUser.tenantId);
      localStorage.removeItem("saas_tenants");
      localStorage.setItem("active_tenant_id", currentSsoUser.tenantId);
    }
  }, [currentSsoUser?.tenantId]);

  const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
  const [isSupabaseModalOpen, setIsSupabaseModalOpen] = useState(false);
  const [isTvCastModalOpen, setIsTvCastModalOpen] = useState(false);
  const [isMobileAppModalOpen, setIsMobileAppModalOpen] = useState(false);
  const [isEmailGatewayModalOpen, setIsEmailGatewayModalOpen] = useState(false);
  const [selectedEmailGatewayId, setSelectedEmailGatewayId] = useState<string | undefined>(undefined);
  
  // Custom Company Brand Logo State
  const [companyLogo, setCompanyLogo] = useState<string>(() => {
    return localStorage.getItem("custom_company_logo") || ptMedianLogo;
  });
  const [isChangeLogoModalOpen, setIsChangeLogoModalOpen] = useState(false);

  // Automated Google Drive Employee Backup Scheduler State & Runner
  const [isBackupSchedulerModalOpen, setIsBackupSchedulerModalOpen] = useState(false);
  const [autoBackupToast, setAutoBackupToast] = useState<string | null>(null);

  useEffect(() => {
    const checkAndRunNightlyBackup = async () => {
      const config = getStoredBackupConfig();
      if (!config.enabled) return;

      const now = new Date();
      const currentHoursMinutes = `${String(now.getHours()).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}`;
      const currentDateStr = now.toISOString().split("T")[0];

      // Execute if current time matches target schedule (or if nightly and date has changed past target time)
      if (currentHoursMinutes === config.scheduleTime && config.lastBackupDate !== currentDateStr) {
        console.log(`[SCHEDULER] Automatic nightly backup executing at ${currentHoursMinutes} to Google Drive 'Backup'...`);
        const res = await executeEmployeeBackup(employees, "AUTO_NIGHTLY");
        if (res.success) {
          setAutoBackupToast(`✅ Auto-Backup Malam Data Pegawai (${employees.length} record) berhasil diunggah ke Google Drive Folder 'Backup'!`);
          setTimeout(() => setAutoBackupToast(null), 8000);
        }
      }
    };

    // Check schedule every 45 seconds
    const interval = setInterval(checkAndRunNightlyBackup, 45000);
    checkAndRunNightlyBackup();

    return () => clearInterval(interval);
  }, [employees]);

  const isTvPresentationWindow = typeof window !== "undefined" && window.location.search.includes("display=tv");

  if (isTvPresentationWindow) {
    return <TvPresentationDisplay onCloseWindow={() => window.close()} />;
  }

  // Compute allowed navigation tabs for current user role
  const allowedTabs = useMemo(() => {
    return getAllowedTabsForUser(currentUser);
  }, [currentUser]);

  // Enforce access control guard when switching roles
  useEffect(() => {
    if (!allowedTabs.includes(activeTab)) {
      setActiveTab("dashboard");
    }
  }, [currentUser, allowedTabs, activeTab]);

  // 30-minute inactivity timer (30 mins = 1,800,000 ms) to trigger login modal and reset sensitive state
  useEffect(() => {
    let timer: NodeJS.Timeout;
    const INACTIVITY_LIMIT = 30 * 60 * 1000;

    const resetTimer = () => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        setIsEditingEmployee(false);
        setIsCreatingEmployee(false);
        setSelectedEmployeeId(null);
        setIsLoginModalOpen(true);
      }, INACTIVITY_LIMIT);
    };

    const events = ["mousemove", "keydown", "click", "scroll", "touchstart"];
    events.forEach(evt => window.addEventListener(evt, resetTimer));

    resetTimer();

    return () => {
      clearTimeout(timer);
      events.forEach(evt => window.removeEventListener(evt, resetTimer));
    };
  }, []);

  const handleSelectUser = (user: Employee) => {
    setCurrentUser(user);
    localStorage.setItem("current_user_id", user.id);
  };

  // Save employees list changes to localStorage
  useEffect(() => {
    localStorage.setItem("simulated_employees", JSON.stringify(employees));
  }, [employees]);

  // Selection states
  const [selectedEmployeeId, setSelectedEmployeeId] = useState<string | null>(null);
  const [isCreatingEmployee, setIsCreatingEmployee] = useState<boolean>(false);
  const [isEditingEmployee, setIsEditingEmployee] = useState<boolean>(false);

  // Search & Filter state for Employee List
  const [searchQuery, setSearchQuery] = useState("");
  const [filterDivision, setFilterDivision] = useState("All");
  const [filterStatus, setFilterStatus] = useState("All");

  // Get active selected employee
  const activeEmployee = useMemo(() => {
    if (!selectedEmployeeId) return null;
    return employees.find(e => e.id === selectedEmployeeId) || null;
  }, [employees, selectedEmployeeId]);

  // Handle Select employee and redirect to list profile
  const handleSelectEmployee = (empId: string) => {
    setSelectedEmployeeId(empId);
    setActiveTab("employees");
    setIsCreatingEmployee(false);
    setIsEditingEmployee(false);
  };

  // Create or Update employee
  // Production SaaS: database save WAJIB berhasil terlebih dahulu.
  // tenant_id, employee.id baru, dan NIP canonical ditentukan server/database.
  const handleSaveEmployee = async (savedEmp: Employee) => {
    const existingEmployee = employees.find(e => e.id === savedEmp.id);
    const isUpdate = !!existingEmployee;

    const todayStr = new Date().toISOString().split("T")[0];

    let currentTimeline = savedEmp.timeline
      ? [...savedEmp.timeline]
      : [];

    const isResignOrRetire =
      savedEmp.status === "Resign" ||
      savedEmp.status === "Resigned" ||
      savedEmp.status === "Pensiun";

    const statusChanged =
      !existingEmployee ||
      existingEmployee.status !== savedEmp.status;

    if (isResignOrRetire && statusChanged) {
      const isResign =
        savedEmp.status === "Resign" ||
        savedEmp.status === "Resigned";

      const autoTitle = isResign
        ? "Pemberhentian / Resign Pegawai"
        : "Masa Purna Bakti / Pensiun";

      const autoDesc = isResign
        ? `Log Otomatis: Status pegawai diperbarui menjadi ${savedEmp.status}. Pengunduran diri resmi dari posisi ${savedEmp.position} (${savedEmp.division}).`
        : `Log Otomatis: Status pegawai diperbarui menjadi Pensiun. Masa purna bakti dari posisi ${savedEmp.position} (${savedEmp.division}).`;

      const alreadyLogged = currentTimeline.some(
        t => t.title === autoTitle && t.date === todayStr
      );

      if (!alreadyLogged) {
        currentTimeline.unshift({
          id: `tl-auto-${Date.now()}`,
          date: todayStr,
          title: autoTitle,
          description: autoDesc,
          type: isResign ? "disciplinary" : "career"
        });
      }
    }

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

    // Pada CREATE NIP lokal hanya placeholder UI.
    // Audit CREATE final akan memakai NIP canonical dari response database.
    const auditLogItem: AuditLog = {
      id: `audit-${Date.now()}-${Math.random().toString(36).substring(2, 6)}`,
      timestamp: nowStr,
      action: isUpdate ? "UPDATE" : "CREATE",
      category: "Biodata",
      actorName: currentUser?.name || "System / HR Admin",
      actorPosition: currentUser?.position || "HR Administrator",
      details: isUpdate
        ? `Memperbarui data profil & status (${savedEmp.status}) pegawai (${savedEmp.position} - ${savedEmp.division})`
        : `Pendaftaran pegawai baru (NIK: ${savedEmp.nik})`
    };

    const requestEmployee: Employee = {
      ...savedEmp,
      timeline: currentTimeline,
      auditLogs: [
        auditLogItem,
        ...(savedEmp.auditLogs || [])
      ]
    };

    try {
      const url = isUpdate
        ? `/api/erp/employees/${encodeURIComponent(savedEmp.id)}`
        : "/api/erp/employees";

      const response = await fetch(url, {
        method: isUpdate ? "PUT" : "POST",
        headers: {
          "Content-Type": "application/json"
        },
        credentials: "same-origin",
        body: JSON.stringify({
          employee: requestEmployee
        })
      });

      const result = await response.json().catch(() => ({}));

      if (!response.ok) {
        throw new Error(
          result?.message ||
          result?.error ||
          `Gagal menyimpan pegawai (HTTP ${response.status})`
        );
      }

      if (!result?.employee) {
        throw new Error(
          "Server tidak mengembalikan employee canonical."
        );
      }

      let canonicalEmployee: Employee = result.employee;

      // Untuk pegawai baru, benahi nomor SK awal yang sebelumnya
      // dibuat memakai NIP simulasi frontend.
      if (
        !isUpdate &&
        Array.isArray(canonicalEmployee.riwayatSK)
      ) {
        canonicalEmployee = {
          ...canonicalEmployee,
          riwayatSK: canonicalEmployee.riwayatSK.map(
            (item: any, index: number) => {
              if (
                index === 0 &&
                item?.type === "SK Pengangkatan"
              ) {
                return {
                  ...item,
                  skNumber: `SK-${canonicalEmployee.nip}-INIT`
                };
              }

              return item;
            }
          )
        };

        // Persist kembali detail JSON dengan NIP canonical pada nomor SK.
        const normalizeResponse = await fetch(
          `/api/erp/employees/${encodeURIComponent(canonicalEmployee.id)}`,
          {
            method: "PUT",
            headers: {
              "Content-Type": "application/json"
            },
            credentials: "same-origin",
            body: JSON.stringify({
              employee: canonicalEmployee
            })
          }
        );

        if (normalizeResponse.ok) {
          const normalized = await normalizeResponse
            .json()
            .catch(() => null);

          if (normalized?.employee) {
            canonicalEmployee = normalized.employee;
          }
        }
      }

      setEmployees(prev => {
        const existsInPrev = prev.some(
          e => e.id === canonicalEmployee.id
        );

        if (existsInPrev) {
          return prev.map(e =>
            e.id === canonicalEmployee.id
              ? canonicalEmployee
              : e
          );
        }

        // CREATE: buang placeholder form dengan id lokal bila ada,
        // lalu masukkan record canonical dari DB.
        const withoutLocalPlaceholder = prev.filter(
          e => e.id !== savedEmp.id
        );

        return [
          ...withoutLocalPlaceholder,
          canonicalEmployee
        ];
      });

      setIsCreatingEmployee(false);
      setIsEditingEmployee(false);
      setSelectedEmployeeId(canonicalEmployee.id);

      console.log(
        "[ERP][EMPLOYEE] Database save success:",
        canonicalEmployee.id,
        canonicalEmployee.nip
      );

    } catch (err: any) {
      console.error(
        "[ERP][EMPLOYEE] Database save failed:",
        err
      );

      window.alert(
        `Data pegawai BELUM tersimpan.\n\n${err?.message || "Terjadi kesalahan database."}`
      );
    }
  };

  // Add a history item to employee
  const handleAddHistory = (empId: string, category: string, item: any) => {
    setEmployees(prev => {
      return prev.map(emp => {
        if (emp.id !== empId) return emp;
        
        // Dynamic array update
        const arr = (emp as any)[category] || [];
        const updatedArr = [...arr, item];

        // Also append to career timeline for seamless 360° visibility
        let timelineDesc = "";
        let timelineTitle = "";
        let auditCategory: AuditLog['category'] = "Biodata";

        if (category === "riwayatPendidikan") {
          timelineTitle = `Pendidikan Baru: ${item.level}`;
          timelineDesc = `Lulus dari ${item.school}, Jurusan ${item.major}`;
          auditCategory = "Pendidikan";
        } else if (category === "riwayatPelatihan") {
          timelineTitle = `Sertifikasi Pelatihan`;
          timelineDesc = `Menyelesaikan kursus ${item.course} oleh ${item.provider}`;
          auditCategory = "Pelatihan";
        } else if (category === "riwayatSK") {
          timelineTitle = `Surat Keputusan Terbit`;
          timelineDesc = `Penerbitan ${item.type} resmi dengan Nomor ${item.skNumber}`;
          auditCategory = "SK";
        } else if (category === "riwayatKPI") {
          timelineTitle = `Evaluasi Kinerja`;
          timelineDesc = `Nilai KPI Terbit untuk periode ${item.period}: Skor ${item.score} (${item.grade})`;
          auditCategory = "KPI";
        } else if (category === "riwayatReward") {
          timelineTitle = `Apresiasi Penghargaan`;
          timelineDesc = `Diberikan reward "${item.title}" oleh ${item.giver}`;
          auditCategory = "Reward";
        } else if (category === "riwayatPunishment") {
          timelineTitle = `Pemberian Sanksi`;
          timelineDesc = `Tindakan disipliner: ${item.type} karena ${item.reason}`;
          auditCategory = "Punishment";
        } else if (category === "riwayatJabatan") {
          timelineTitle = `Pengangkatan / Mutasi`;
          timelineDesc = `Jabatan: ${item.position} (${item.division})`;
          auditCategory = "Jabatan";
        }

        const newTimelineItem = {
          id: `tl-add-${Date.now()}`,
          date: new Date().toISOString().split("T")[0],
          title: timelineTitle,
          description: timelineDesc,
          type: category === "riwayatPunishment" ? "disciplinary" : category === "riwayatPelatihan" ? "training" : "career" as any
        };

        const nowStr = new Date().toISOString().replace("T", " ").substring(0, 19);
        const newAuditLog: AuditLog = {
          id: `audit-${Date.now()}-${Math.random().toString(36).substring(2, 6)}`,
          timestamp: nowStr,
          action: 'CREATE',
          category: auditCategory,
          actorName: currentUser ? currentUser.name : "System / HR Admin",
          actorPosition: currentUser ? currentUser.position : "HR Administrator",
          details: `Penambahan riwayat ${auditCategory}: ${timelineDesc}`
        };

        return {
          ...emp,
          [category]: updatedArr,
          timeline: [...(emp.timeline || []), newTimelineItem],
          auditLogs: [newAuditLog, ...(emp.auditLogs || [])]
        };
      });
    });
  };

  // Delete a sub-history item from employee
  const handleDeleteHistory = (empId: string, category: string, itemId: string) => {
    setEmployees(prev => {
      return prev.map(emp => {
        if (emp.id !== empId) return emp;

        const arr = (emp as any)[category] || [];
        const updatedArr = arr.filter((x: any) => x.id !== itemId);

        let auditCategory: AuditLog['category'] = "Biodata";
        if (category === "riwayatPendidikan") auditCategory = "Pendidikan";
        if (category === "riwayatPelatihan") auditCategory = "Pelatihan";
        if (category === "riwayatSK") auditCategory = "SK";
        if (category === "riwayatKPI") auditCategory = "KPI";
        if (category === "riwayatReward") auditCategory = "Reward";
        if (category === "riwayatPunishment") auditCategory = "Punishment";
        if (category === "riwayatJabatan") auditCategory = "Jabatan";

        const nowStr = new Date().toISOString().replace("T", " ").substring(0, 19);
        const newAuditLog: AuditLog = {
          id: `audit-${Date.now()}-${Math.random().toString(36).substring(2, 6)}`,
          timestamp: nowStr,
          action: 'DELETE',
          category: auditCategory,
          actorName: currentUser ? currentUser.name : "System / HR Admin",
          actorPosition: currentUser ? currentUser.position : "HR Administrator",
          details: `Penghapusan data riwayat ${auditCategory} (ID: ${itemId})`
        };

        return {
          ...emp,
          [category]: updatedArr,
          auditLogs: [newAuditLog, ...(emp.auditLogs || [])]
        };
      });
    });
  };

  // Upload document to DMS with automatic document type detection, Google Drive sync, and validation check
  const handleUploadDocument = async (empId: string, doc: DigitalDocument) => {
    // Auto-detect type based on filename if not already explicit
    const detectedType = detectDocumentType(doc.name, doc.type);
    
    // Find target employee name for Google Drive metadata tag
    const targetEmp = employees.find(e => e.id === empId);
    const employeeName = targetEmp ? targetEmp.name : undefined;

    let finalDoc: DigitalDocument = {
      ...doc,
      type: detectedType
    };

    // Initialize Google Drive service client using configured OAuth2 client ID
    googleDriveService.initializeClient();

    // Perform a file upload request to Google Drive if doc hasn't been uploaded yet or has raw base64 URL
    if (!finalDoc.gdriveLink && finalDoc.fileUrl && finalDoc.fileUrl.startsWith("data:")) {
      try {
        const driveResult = await googleDriveService.uploadFile({
          fileName: finalDoc.name,
          base64Data: finalDoc.fileUrl,
          employeeName,
          documentCategory: detectedType
        });

        if (driveResult.success) {
          finalDoc = {
            ...finalDoc,
            gdriveFileId: driveResult.fileId || finalDoc.gdriveFileId,
            gdriveLink: driveResult.webViewLink || finalDoc.gdriveLink,
            fileUrl: driveResult.webViewLink || driveResult.fileUrl || finalDoc.fileUrl
          };
        }
      } catch (err) {
        console.warn("[App] Google Drive upload sync skipped/failed:", err);
      }
    }

    setEmployees(prev => {
      return prev.map(emp => {
        if (emp.id !== empId) return emp;

        const existingDocs = emp.documents || [];
        const existingDuplicate = existingDocs.find(d => d.type === detectedType);

        const nowStr = new Date().toISOString().replace("T", " ").substring(0, 19);
        const warningDetails = existingDuplicate
          ? ` [PERINGATAN DUPLIKAT: Berkas bertipe "${detectedType}" sudah ada sebelumnya ("${existingDuplicate.name}"). Berkas baru berhasil ditambahkan/diperbarui]`
          : "";

        const driveSyncText = finalDoc.gdriveLink ? " (Synced to Google Drive)" : "";

        const newAuditLog: AuditLog = {
          id: `audit-${Date.now()}-${Math.random().toString(36).substring(2, 6)}`,
          timestamp: nowStr,
          action: 'CREATE',
          category: 'Dokumen',
          actorName: currentUser ? currentUser.name : "System / HR Admin",
          actorPosition: currentUser ? currentUser.position : "HR Administrator",
          details: `Pengunggahan dokumen DMS [Auto-Tipe: ${detectedType}]: "${finalDoc.name}" (${finalDoc.fileSize})${driveSyncText}${warningDetails}`
        };

        return {
          ...emp,
          documents: [...existingDocs, finalDoc],
          auditLogs: [newAuditLog, ...(emp.auditLogs || [])]
        };
      });
    });
  };

  // Delete document from DMS
  const handleDeleteDocument = (empId: string, docId: string) => {
    setEmployees(prev => {
      return prev.map(emp => {
        if (emp.id !== empId) return emp;
        const deletedDoc = (emp.documents || []).find(d => d.id === docId);
        const docName = deletedDoc ? deletedDoc.name : docId;

        const nowStr = new Date().toISOString().replace("T", " ").substring(0, 19);
        const newAuditLog: AuditLog = {
          id: `audit-${Date.now()}-${Math.random().toString(36).substring(2, 6)}`,
          timestamp: nowStr,
          action: 'DELETE',
          category: 'Dokumen',
          actorName: currentUser ? currentUser.name : "System / HR Admin",
          actorPosition: currentUser ? currentUser.position : "HR Administrator",
          details: `Penghapusan berkas dokumen DMS: "${docName}"`
        };

        return {
          ...emp,
          documents: (emp.documents || []).filter(d => d.id !== docId),
          auditLogs: [newAuditLog, ...(emp.auditLogs || [])]
        };
      });
    });
  };

  // Add custom manual audit log entry
  const handleAddAuditLog = (empId: string, logData: Omit<AuditLog, "id" | "timestamp">) => {
    setEmployees(prev => {
      return prev.map(emp => {
        if (emp.id !== empId) return emp;
        const nowStr = new Date().toISOString().replace("T", " ").substring(0, 19);
        const newAuditLog: AuditLog = {
          ...logData,
          id: `audit-${Date.now()}-${Math.random().toString(36).substring(2, 6)}`,
          timestamp: nowStr,
        };
        return {
          ...emp,
          auditLogs: [newAuditLog, ...(emp.auditLogs || [])]
        };
      });
    });
  };

  // Update employee salary settings
  const handleUpdateSalarySettings = (empId: string, settings: SalarySettings) => {
    setEmployees(prev => {
      return prev.map(emp => {
        if (emp.id !== empId) return emp;
        return {
          ...emp,
          salarySettings: settings
        };
      });
    });
  };

  // Update employee delegated tasks
  const handleUpdateDelegatedTasks = (empId: string, tasks: DelegatedTask[]) => {
    setEmployees(prev => {
      return prev.map(emp => {
        if (emp.id !== empId) return emp;
        return {
          ...emp,
          delegatedTasks: tasks
        };
      });
    });
  };

  // Create new workflow
  const handleCreateWorkflow = (newWf: WorkflowRequest) => {
    setWorkflows(prev => [newWf, ...prev]);
    // Dispatch automated simulated email gateway API call to superior/director
    sendWorkflowNotificationEmail(newWf, employees).catch(err => {
      console.warn("[App] Email gateway notification warning:", err);
    });
  };

  // Sequential workflow approval step advance
  const handleApproveWorkflow = (wfId: string, approverName: string, notes: string) => {
    setWorkflows(prev => {
      return prev.map(wf => {
        if (wf.id !== wfId) return wf;

        const currentStage = wf.currentStage;
        let nextStage: WorkflowRequest["currentStage"] = "Supervisor";
        let finalStatus: WorkflowRequest["status"] = "Pending";

        // Logic for sequential multi-level hierarchy: Staff -> Supervisor -> Manager -> Direktur -> CEO
        if (currentStage === "Staff") {
          nextStage = "Supervisor";
        } else if (currentStage === "Supervisor") {
          nextStage = "Manager";
        } else if (currentStage === "Manager") {
          nextStage = "Direktur";
        } else if (currentStage === "Direktur") {
          nextStage = "CEO";
        } else if (currentStage === "CEO") {
          nextStage = "CEO"; // End
          finalStatus = "Approved";
        }

        const stepLog = {
          id: `step-${Date.now()}`,
          stage: currentStage,
          approverName,
          status: "Approved" as const,
          date: new Date().toISOString().replace("T", " ").substring(0, 16),
          notes
        };

        const updatedWf = {
          ...wf,
          currentStage: nextStage,
          status: finalStatus,
          history: [...wf.history, stepLog]
        };

        // Notify next stage superior via email gateway
        if (finalStatus === "Pending") {
          sendWorkflowNotificationEmail(updatedWf, employees).catch(err => {
            console.warn("[App] Next stage email gateway notification warning:", err);
          });
        }

        // If completely approved by Komisaris, let's automatically synchronize careers and SKs!
        if (finalStatus === "Approved") {
          // Trigger automatic updates on employee based on request type
          setTimeout(() => {
            setEmployees(empPrev => {
              return empPrev.map(emp => {
                if (emp.id !== wf.requesterId) return emp;

                // Create a timeline log for final approval
                const careerTimeline = {
                  id: `tl-wf-${Date.now()}`,
                  date: new Date().toISOString().split("T")[0],
                  title: `Workflow Selesai: ${wf.title}`,
                  description: `Disetujui secara resmi oleh seluruh jajaran direksi berjenjang.`,
                  type: "career" as const
                };

                // Let's issue an automatic official SK Document in their DMS folders
                const autoSk: DigitalDocument = {
                  id: `doc-sk-auto-${Date.now()}`,
                  name: `SK_${wf.type.toUpperCase()}_OFFICIAL_${emp.nip}.pdf`,
                  type: "SK",
                  fileSize: "185 KB",
                  uploadedAt: new Date().toISOString().replace("T", " ").substring(0, 16),
                  fileUrl: "#" // Sim download link
                };

                return {
                  ...emp,
                  documents: [...(emp.documents || []), autoSk],
                  timeline: [...(emp.timeline || []), careerTimeline]
                };
              });
            });
          }, 100);
        }

        return updatedWf;
      });
    });
  };

  const handleRejectWorkflow = (wfId: string, approverName: string, notes: string) => {
    setWorkflows(prev => {
      return prev.map(wf => {
        if (wf.id !== wfId) return wf;

        const stepLog = {
          id: `step-rej-${Date.now()}`,
          stage: wf.currentStage,
          approverName,
          status: "Rejected" as const,
          date: new Date().toISOString().replace("T", " ").substring(0, 16),
          notes
        };

        return {
          ...wf,
          status: "Rejected" as const,
          history: [...wf.history, stepLog]
        };
      });
    });
  };

  // Filter employees list
  const filteredEmployees = useMemo(() => {
    return employees.filter(emp => {
      const matchQuery = 
        emp.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
        emp.nip.includes(searchQuery) ||
        emp.nik.includes(searchQuery) ||
        emp.division.toLowerCase().includes(searchQuery.toLowerCase()) ||
        emp.position.toLowerCase().includes(searchQuery.toLowerCase());

      const matchDivision = filterDivision === "All" || emp.division === filterDivision;
      const matchStatus = filterStatus === "All" || emp.status === filterStatus;

      return matchQuery && matchDivision && matchStatus;
    });
  }, [employees, searchQuery, filterDivision, filterStatus]);

  // Unique division list for filters
  const divisions = useMemo(() => {
    const list = new Set(employees.map(e => e.division));
    return ["All", ...Array.from(list)];
  }, [employees]);

  // Bulk Selection and Actions State
  const [selectedEmployeeIds, setSelectedEmployeeIds] = useState<string[]>([]);
  const [isBulkStatusModalOpen, setIsBulkStatusModalOpen] = useState<boolean>(false);
  const [isBulkProjectModalOpen, setIsBulkProjectModalOpen] = useState<boolean>(false);
  const [isBulkUploadModalOpen, setIsBulkUploadModalOpen] = useState<boolean>(false);
  const [bulkStatusPreviewEmpId, setBulkStatusPreviewEmpId] = useState<string | null>(null);

  // Handle bulk save employees from Excel/CSV upload modal
  // Production bulk employee import.
  // UUID, tenant_id dan NIP hanya berasal dari server/database.
  const handleBulkSaveEmployees = async (
    newEmployees: Record<string, any>[]
  ): Promise<void> => {
    const canonicalEmployees: Employee[] = [];
    const failures: string[] = [];

    for (let index = 0; index < newEmployees.length; index++) {
      const employee = newEmployees[index];

      try {
        const response = await fetch("/api/erp/employees", {
          method: "POST",
          headers: {
            "Content-Type": "application/json"
          },
          credentials: "same-origin",
          body: JSON.stringify({
            employee
          })
        });

        const body = await response
          .json()
          .catch(() => ({}));

        if (!response.ok) {
          throw new Error(
            body?.message ||
            body?.error ||
            `Gagal menyimpan pegawai (HTTP ${response.status})`
          );
        }

        if (!body?.employee) {
          throw new Error(
            "Server tidak mengembalikan employee canonical."
          );
        }

        canonicalEmployees.push(
          body.employee as Employee
        );

        console.log(
          "[ERP][BULK EMPLOYEE] Database save success:",
          index + 1,
          body.employee.id,
          body.employee.nip
        );

      } catch (error: any) {
        const identity =
          String(employee?.name || "").trim() ||
          String(employee?.nik || "").trim() ||
          `Baris ${index + 1}`;

        const message =
          error?.message ||
          "Gagal menyimpan pegawai.";

        failures.push(
          `${identity}: ${message}`
        );

        console.error(
          "[ERP][BULK EMPLOYEE] Database save failed:",
          index + 1,
          identity,
          error
        );
      }
    }

    // Hanya employee canonical dari database
    // yang boleh masuk ke state aplikasi.
    if (canonicalEmployees.length > 0) {
      setEmployees(prev => {
        const byId = new Map<string, Employee>();

        prev.forEach(emp => {
          byId.set(emp.id, emp);
        });

        canonicalEmployees.forEach(emp => {
          byId.set(emp.id, emp);
        });

        return Array.from(byId.values());
      });
    }

    const successCount = canonicalEmployees.length;
    const failedCount = failures.length;

    if (successCount === 0 && failedCount > 0) {
      throw new Error(
        failures.slice(0, 10).join("\n")
      );
    }

    if (failedCount > 0) {
      setBulkToastMessage(
        `Import selesai: ${successCount} berhasil, ${failedCount} gagal.`
      );

      window.alert(
        `Import massal selesai sebagian.\n\n` +
        `Berhasil: ${successCount}\n` +
        `Gagal: ${failedCount}\n\n` +
        failures.slice(0, 10).join("\n")
      );
    } else {
      setBulkToastMessage(
        `Berhasil mengimpor ${successCount} pegawai ke database tenant.`
      );
    }

    setTimeout(
      () => setBulkToastMessage(null),
      7000
    );
  };

  // Active employee being previewed in Bulk Status Update modal timeline
  const activePreviewEmp = useMemo(() => {
    if (selectedEmployeeIds.length === 0) return null;
    if (bulkStatusPreviewEmpId && selectedEmployeeIds.includes(bulkStatusPreviewEmpId)) {
      return employees.find(e => e.id === bulkStatusPreviewEmpId) || null;
    }
    return employees.find(e => e.id === selectedEmployeeIds[0]) || null;
  }, [employees, selectedEmployeeIds, bulkStatusPreviewEmpId]);

  // Status and career change timeline for selected preview employee
  const previewEmpStatusTimeline = useMemo(() => {
    if (!activePreviewEmp) return [];

    const items: Array<{
      id: string;
      date: string;
      title: string;
      description: string;
      type: 'joining' | 'career' | 'sk' | 'audit';
      badgeLabel: string;
      badgeStyle: string;
    }> = [];

    // TMT Kerja (Initial Joining)
    items.push({
      id: `joining-${activePreviewEmp.id}`,
      date: activePreviewEmp.tmtKerja || '2020-01-01',
      title: 'Mulai Bekerja (TMT Kerja)',
      description: `Diangkat pertama kali dengan Status Awal: ${activePreviewEmp.status} (${activePreviewEmp.position} - ${activePreviewEmp.division})`,
      type: 'joining',
      badgeLabel: 'Mulai Kerja',
      badgeStyle: 'bg-emerald-950/80 text-emerald-400 border-emerald-700/60'
    });

    // Timeline events
    (activePreviewEmp.timeline || []).forEach(tl => {
      items.push({
        id: tl.id,
        date: tl.date,
        title: tl.title,
        description: tl.description,
        type: 'career',
        badgeLabel: (tl.type || 'KARIR').toUpperCase(),
        badgeStyle: 'bg-sky-950/80 text-sky-300 border-sky-700/60'
      });
    });

    // Riwayat SK
    (activePreviewEmp.riwayatSK || []).forEach(sk => {
      items.push({
        id: sk.id,
        date: sk.effectiveDate || sk.date,
        title: `Surat Keputusan (${sk.type})`,
        description: `Nomor SK: ${sk.skNumber} (TMT: ${sk.effectiveDate || sk.date})`,
        type: 'sk',
        badgeLabel: 'Surat SK',
        badgeStyle: 'bg-amber-950/80 text-amber-300 border-amber-700/60'
      });
    });

    // Riwayat Jabatan / Mutasi / Promosi
    (activePreviewEmp.riwayatJabatan || []).forEach(j => {
      items.push({
        id: j.id,
        date: j.date,
        title: `Mutasi / Promosi (${j.type})`,
        description: `Jabatan: ${j.position} - ${j.division}. ${j.note || ''}`,
        type: 'career',
        badgeLabel: 'Perubahan Jabatan',
        badgeStyle: 'bg-indigo-950/80 text-indigo-300 border-indigo-700/60'
      });
    });

    // Audit logs with status change or biodata update
    (activePreviewEmp.auditLogs || []).forEach(al => {
      if (al.details.toLowerCase().includes("status") || al.category === "Biodata" || al.category === "Jabatan") {
        items.push({
          id: al.id,
          date: al.timestamp.split(" ")[0],
          title: `Audit Log (${al.category}): ${al.action}`,
          description: `${al.details} — Oleh: ${al.actorName}`,
          type: 'audit',
          badgeLabel: 'System Audit',
          badgeStyle: 'bg-slate-800 text-slate-300 border-slate-600'
        });
      }
    });

    // Deduplicate by ID
    const map = new Map<string, typeof items[0]>();
    items.forEach(it => map.set(it.id, it));
    
    // Sort reverse chronological
    return Array.from(map.values()).sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
  }, [activePreviewEmp]);

  // Bulk Confirmation Modal State
  const [confirmBulkModal, setConfirmBulkModal] = useState<{
    type: 'STATUS' | 'PROJECT';
    title: string;
    targetCount: number;
    summaryList: { label: string; value: string }[];
  } | null>(null);

  // Bulk Form Fields
  const [bulkStatusValue, setBulkStatusValue] = useState<string>("Aktif");
  const [bulkStatusNote, setBulkStatusNote] = useState<string>("");
  const [bulkProjectName, setBulkProjectName] = useState<string>("");
  const [bulkProjectRole, setBulkProjectRole] = useState<string>("");
  const [bulkProjectNote, setBulkProjectNote] = useState<string>("");
  const [bulkToastMessage, setBulkToastMessage] = useState<string | null>(null);

  // Toggle single employee selection
  const handleToggleSelectEmployee = (empId: string, e?: React.MouseEvent) => {
    if (e) e.stopPropagation();
    setSelectedEmployeeIds(prev => 
      prev.includes(empId) ? prev.filter(id => id !== empId) : [...prev, empId]
    );
  };

  // Toggle select all visible filtered employees
  const handleSelectAllFiltered = () => {
    const visibleIds = filteredEmployees.map(e => e.id);
    const allSelected = visibleIds.length > 0 && visibleIds.every(id => selectedEmployeeIds.includes(id));
    if (allSelected) {
      setSelectedEmployeeIds(prev => prev.filter(id => !visibleIds.includes(id)));
    } else {
      const merged = new Set([...selectedEmployeeIds, ...visibleIds]);
      setSelectedEmployeeIds(Array.from(merged));
    }
  };

  // Trigger Confirmation for Bulk Status Update
  const handleTriggerBulkStatusConfirm = (e: React.FormEvent) => {
    e.preventDefault();
    if (selectedEmployeeIds.length === 0) return;

    setConfirmBulkModal({
      type: 'STATUS',
      title: 'Konfirmasi Massal: Pembaruan Status Pegawai',
      targetCount: selectedEmployeeIds.length,
      summaryList: [
        { label: 'Status Baru', value: bulkStatusValue },
        { label: 'Catatan Perubahan', value: bulkStatusNote || '(Tidak ada catatan)' }
      ]
    });
  };

  // Trigger Confirmation for Bulk Project Assignment
  const handleTriggerBulkProjectConfirm = (e: React.FormEvent) => {
    e.preventDefault();
    if (selectedEmployeeIds.length === 0 || !bulkProjectName.trim()) return;

    setConfirmBulkModal({
      type: 'PROJECT',
      title: 'Konfirmasi Massal: Penugasan Proyek Tim',
      targetCount: selectedEmployeeIds.length,
      summaryList: [
        { label: 'Nama Proyek', value: bulkProjectName.trim() },
        { label: 'Peran / Tanggung Jawab', value: bulkProjectRole || 'Anggota Tim' },
        { label: 'Catatan / Target', value: bulkProjectNote || '(Tidak ada catatan)' }
      ]
    });
  };

  // Execute Confirmed Bulk Action
  const handleExecuteConfirmedBulkAction = () => {
    if (!confirmBulkModal || selectedEmployeeIds.length === 0) return;

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

    if (confirmBulkModal.type === 'STATUS') {
      setEmployees(prev => prev.map(emp => {
        if (!selectedEmployeeIds.includes(emp.id)) return emp;

        const newAuditLog: AuditLog = {
          id: `audit-${Date.now()}-${Math.random().toString(36).substring(2, 6)}`,
          timestamp: nowStr,
          action: 'UPDATE',
          category: 'Biodata',
          actorName: currentUser ? currentUser.name : "HR Administrator",
          actorPosition: currentUser ? currentUser.position : "HR Admin",
          details: `Bulk Update Status menjadi "${bulkStatusValue}". ${bulkStatusNote ? `Catatan: ${bulkStatusNote}` : ''}`
        };

        const timelineItem = {
          id: `tl-status-${Date.now()}-${Math.random().toString(36).substring(2, 4)}`,
          date: new Date().toISOString().split("T")[0],
          title: `Pembaruan Status (Bulk Action)`,
          description: `Status pegawai diperbarui menjadi ${bulkStatusValue}. ${bulkStatusNote ? `Catatan: ${bulkStatusNote}` : ''}`,
          type: 'career' as const
        };

        return {
          ...emp,
          status: bulkStatusValue as any,
          auditLogs: [newAuditLog, ...(emp.auditLogs || [])],
          timeline: [...(emp.timeline || []), timelineItem]
        };
      }));

      setBulkToastMessage(`Berhasil meng-update status ${count} pegawai menjadi "${bulkStatusValue}"!`);
      setIsBulkStatusModalOpen(false);
      setBulkStatusNote("");
    } else if (confirmBulkModal.type === 'PROJECT') {
      const today = new Date().toISOString().split("T")[0];

      setEmployees(prev => prev.map(emp => {
        if (!selectedEmployeeIds.includes(emp.id)) return emp;

        const newProjectRecord = {
          id: `proj-${Date.now()}-${Math.random().toString(36).substring(2, 4)}`,
          position: `Penugasan Proyek: ${bulkProjectName.trim()}`,
          division: emp.division,
          startDate: today,
          endDate: "-",
          skNumber: `SK-PROJ-${Date.now().toString().substring(6)}`,
          notes: `Peran: ${bulkProjectRole || 'Anggota Tim'}. ${bulkProjectNote ? `Catatan: ${bulkProjectNote}` : ''}`
        };

        const newAuditLog: AuditLog = {
          id: `audit-${Date.now()}-${Math.random().toString(36).substring(2, 6)}`,
          timestamp: nowStr,
          action: 'CREATE',
          category: 'Jabatan',
          actorName: currentUser ? currentUser.name : "HR Administrator",
          actorPosition: currentUser ? currentUser.position : "HR Admin",
          details: `Penugasan Proyek: "${bulkProjectName.trim()}" (${bulkProjectRole || 'Anggota Tim'})`
        };

        const timelineItem = {
          id: `tl-proj-${Date.now()}-${Math.random().toString(36).substring(2, 4)}`,
          date: today,
          title: `Penugasan Proyek: ${bulkProjectName.trim()}`,
          description: `Ditugaskan sebagai ${bulkProjectRole || 'Anggota Tim'}. ${bulkProjectNote || ''}`,
          type: 'career' as const
        };

        return {
          ...emp,
          riwayatJabatan: [...(emp.riwayatJabatan || []), newProjectRecord],
          auditLogs: [newAuditLog, ...(emp.auditLogs || [])],
          timeline: [...(emp.timeline || []), timelineItem]
        };
      }));

      setBulkToastMessage(`Berhasil menugaskan ${count} pegawai ke proyek "${bulkProjectName.trim()}"!`);
      setIsBulkProjectModalOpen(false);
      setBulkProjectName("");
      setBulkProjectRole("");
      setBulkProjectNote("");
    }

    setConfirmBulkModal(null);
    setSelectedEmployeeIds([]);
  };

  // Bulk Export CSV Handler
  const handleExportSelectedCsv = () => {
    const selectedEmps = employees.filter(e => selectedEmployeeIds.includes(e.id));
    if (selectedEmps.length === 0) return;

    const headers = ["ID", "NIP", "NIK", "Nama", "Divisi", "Jabatan", "Status", "Email", "No HP"];
    const rows = selectedEmps.map(e => [
      e.id, e.nip, e.nik, `"${e.name}"`, `"${e.division}"`, `"${e.position}"`, e.status, e.email || "", e.phone || ""
    ]);

    const csvContent = "data:text/csv;charset=utf-8," + [headers.join(","), ...rows.map(r => r.join(","))].join("\n");
    const encodedUri = encodeURI(csvContent);
    const link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", `Selected_Employees_${selectedEmps.length}_Items.csv`);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

    setBulkToastMessage(`Berhasil mengeksport CSV data ${selectedEmps.length} pegawai.`);
  };

  if (!isServerSessionReady) {
    return (
      <div className="min-h-screen bg-slate-950 text-slate-100 flex items-center justify-center p-6">
        <div className="max-w-md w-full border border-sky-500/40 bg-slate-900/90 rounded-xl p-6 text-center shadow-2xl">
          <div className="w-10 h-10 border-4 border-sky-500/20 border-t-sky-400 rounded-full animate-spin mx-auto mb-4" />
          <h2 className="font-black text-sky-200">Memvalidasi Tenant SaaS</h2>
          <p className="text-xs text-slate-400 mt-2">Memeriksa session SSO, membership, subscription, dan host tenant melalui Median Cloud Django.</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-[#0b132b] text-[#f8fafc] flex flex-col font-sans selection:bg-sky-500 selection:text-white border-2 sm:border-4 border-[#1e293b]" id="ems-gan-master-layout">
      {/* Global Executive Top Header bar */}
      <header className="bg-[#0f172a] text-white sticky top-0 z-40 px-3 py-2 sm:px-6 sm:py-3 border-b border-[#1e3a8a]/60 shadow-lg shadow-blue-950/40">
        <div className="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-2.5 sm:gap-4">
          
          {/* Logo Brand & Active User Profile Summary */}
          <div className="flex items-center justify-between w-full md:w-auto gap-3">
            <div className="flex items-center gap-3">
              <button
                type="button"
                onClick={() => setIsChangeLogoModalOpen(true)}
                className="relative w-10 h-10 sm:w-11 sm:h-11 rounded-xl bg-[#081026] border border-sky-400/40 p-1 flex items-center justify-center shadow-lg shadow-sky-500/30 overflow-hidden shrink-0 group cursor-pointer"
                title="Klik untuk Merubah Logo Perusahaan secara Langsung (Akses Wewenang)"
              >
                <img 
                  src={companyLogo} 
                  alt="PT Median Logo" 
                  referrerPolicy="no-referrer"
                  className="w-full h-full object-contain rounded-lg drop-shadow-[0_0_10px_rgba(56,189,248,0.7)] group-hover:scale-105 transition-transform duration-300"
                />
                <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center text-amber-400">
                  <Camera className="w-4 h-4 animate-bounce" />
                </div>
              </button>

              <div>
                <div className="flex items-center gap-1.5">
                  <h1 className="text-sm sm:text-base md:text-lg font-black uppercase tracking-tight bg-gradient-to-r from-sky-300 via-blue-100 to-white bg-clip-text text-transparent">
                    ERP CORPORATE
                  </h1>
                  <span className="text-[9px] font-mono font-black bg-sky-500/20 text-sky-300 border border-sky-400/40 px-1.5 py-0.2 rounded uppercase tracking-wider">
                    SAAS
                  </span>
                  <button
                    type="button"
                    onClick={() => setIsChangeLogoModalOpen(true)}
                    className="p-1 text-amber-300 hover:text-white bg-amber-500/10 hover:bg-amber-500/20 border border-amber-500/30 rounded text-[9px] font-bold uppercase transition-colors cursor-pointer flex items-center gap-1"
                    title="Ubah Logo Perusahaan"
                  >
                    <Camera className="w-3 h-3 text-amber-400" />
                    <span className="hidden sm:inline">Ubah Logo</span>
                  </button>
                </div>
                <p className="text-[9px] sm:text-[10px] uppercase tracking-wider text-sky-300/90 font-bold -mt-0.5">
                  {currentSsoUser?.tenantCompanyName || "MEDIAN CLOUD TENANT"}
                </p>
              </div>
            </div>

            {/* Active Tenant Selector Badge (SaaS) */}
            {(() => {
              const activeTenantObj = tenants.find(t => t.id === activeTenantId) || tenants[0];
              return (
                <div
                  className="flex items-center gap-2 bg-gradient-to-r from-slate-900 to-slate-800 border border-sky-500/40 px-2.5 py-1 rounded-md text-[11px] font-mono text-white shadow-md group shrink-0"
                  title="Tenant dikunci oleh host dan membership Django; tidak dapat diganti dari browser."
                >
                  <div 
                    className="w-5 h-5 rounded font-black text-white text-[10px] flex items-center justify-center shrink-0 shadow"
                    style={{ backgroundColor: activeTenantObj?.primaryColor || "#0284c7" }}
                  >
                    {(currentSsoUser?.tenantSubdomain || activeTenantObj?.code || "TENANT").slice(0, 8).toUpperCase()}
                  </div>
                  <div className="hidden md:block text-left">
                    <div className="flex items-center gap-1">
                      <span className="font-bold text-sky-200 text-[10px] truncate max-w-[120px]">{currentSsoUser?.tenantSubdomain ? `${currentSsoUser.tenantSubdomain}.median-cloud.web.id` : activeTenantObj?.name}</span>
                      <span className="text-[8px] bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 px-1 font-bold rounded uppercase">
                        {currentSsoUser?.tenantPlan || activeTenantObj?.plan}
                      </span>
                    </div>
                    <span className="text-[8px] text-slate-400 block -mt-0.5">SaaS Tenant</span>
                  </div>
                  <Building2 className="w-3.5 h-3.5 text-sky-400 group-hover:scale-110 transition-transform" />
                </div>
              );
            })()}

            {/* User Profile & Median ID SSO Badge */}
            {currentUser && (
              <div className="flex items-center gap-2 bg-[#1e293b]/90 border border-sky-500/30 pl-2 pr-2.5 py-1 rounded-md text-[11px] font-mono shrink-0">
                <div className="w-5 h-5 sm:w-6 sm:h-6 rounded bg-gradient-to-r from-sky-500 to-blue-600 text-white font-bold flex items-center justify-center text-[10px] sm:text-xs shrink-0">
                  {currentUser.name.charAt(0)}
                </div>
                <div className="hidden sm:block">
                  <div className="flex items-center gap-1.5">
                    <span className="font-semibold text-slate-100 text-[10px] sm:text-[11px] truncate max-w-[120px]">{currentUser.name}</span>
                    <span className="text-[8px] sm:text-[9px] bg-sky-500/20 text-sky-300 border border-sky-500/30 px-1 font-bold rounded uppercase">
                      {currentUser.position}
                    </span>
                  </div>
                  <span className="text-[8px] sm:text-[9px] text-slate-400 block -mt-0.5">
                    {getDirectorateName(currentUser.position, currentUser.division)}
                  </span>
                </div>
                <button
                  onClick={() => setIsLoginModalOpen(true)}
                  className="px-2 py-1 bg-gradient-to-r from-sky-400 via-sky-500 to-blue-600 hover:from-sky-300 hover:to-blue-500 text-slate-950 font-black transition-all rounded shadow-md border border-sky-300 ml-1 flex items-center gap-1 cursor-pointer text-[10px] uppercase tracking-wider"
                  title="Login dengan Median Cloud Django SSO (https://auth.median-cloud.web.id)"
                >
                  <Key className="w-3.5 h-3.5 text-slate-950" />
                  <span className="hidden sm:inline">Django SSO</span>
                </button>
              </div>
            )}
          </div>

          {/* Role-Filtered Navigation Controls - Mobile Horizontal Scroll */}
          <div className="flex items-center justify-between md:justify-end gap-1.5 w-full md:w-auto overflow-x-auto no-scrollbar py-0.5">
            <nav className="flex items-center gap-1 overflow-x-auto no-scrollbar shrink-0">
              {allowedTabs.includes("dashboard") && (
                <button
                  onClick={() => { setActiveTab("dashboard"); setSelectedEmployeeId(null); setIsCreatingEmployee(false); }}
                  className={`px-2.5 py-1 sm:px-3 sm:py-1.5 rounded-md text-[11px] sm:text-xs font-bold uppercase tracking-wide transition-all whitespace-nowrap ${
                    activeTab === "dashboard" ? "bg-gradient-to-r from-blue-600 to-sky-500 text-white shadow-md shadow-blue-500/25" : "text-slate-300 hover:text-sky-300 hover:bg-slate-800/60"
                  }`}
                >
                  Dashboard
                </button>
              )}

              {allowedTabs.includes("umk") && (
                <button
                  onClick={() => { setActiveTab("umk"); setSelectedEmployeeId(null); setIsCreatingEmployee(false); }}
                  className={`px-2.5 py-1 sm:px-3 sm:py-1.5 rounded-md text-[11px] sm:text-xs font-bold uppercase tracking-wide transition-all flex items-center gap-1.5 whitespace-nowrap ${
                    activeTab === "umk" ? "bg-gradient-to-r from-emerald-500 to-teal-600 text-slate-950 shadow-md shadow-emerald-500/25 font-black" : "text-emerald-300 hover:text-emerald-200 hover:bg-slate-800/60"
                  }`}
                >
                  <Wallet className="w-3.5 h-3.5" />
                  UMK Kas Kecil GA
                </button>
              )}

              {allowedTabs.includes("travel") && (
                <button
                  onClick={() => { setActiveTab("travel"); setSelectedEmployeeId(null); setIsCreatingEmployee(false); }}
                  className={`px-2.5 py-1 sm:px-3 sm:py-1.5 rounded-md text-[11px] sm:text-xs font-bold uppercase tracking-wide transition-all flex items-center gap-1.5 whitespace-nowrap ${
                    activeTab === "travel" ? "bg-gradient-to-r from-sky-500 to-blue-600 text-slate-950 shadow-md shadow-sky-500/25 font-black" : "text-sky-300 hover:text-sky-200 hover:bg-slate-800/60"
                  }`}
                >
                  <Plane className="w-3.5 h-3.5" />
                  Perjalanan Dinas (SPPD)
                </button>
              )}

              {allowedTabs.includes("employees") && (
                <button
                  onClick={() => { setActiveTab("employees"); setSelectedEmployeeId(null); setIsCreatingEmployee(false); }}
                  className={`px-2.5 py-1 sm:px-3 sm:py-1.5 rounded-md text-[11px] sm:text-xs font-bold uppercase tracking-wide transition-all whitespace-nowrap ${
                    activeTab === "employees" ? "bg-gradient-to-r from-blue-600 to-sky-500 text-white shadow-md shadow-blue-500/25" : "text-slate-300 hover:text-sky-300 hover:bg-slate-800/60"
                  }`}
                >
                  Pegawai & 360°
                </button>
              )}

              {allowedTabs.includes("attendance") && (
                <button
                  onClick={() => { setActiveTab("attendance"); setSelectedEmployeeId(null); setIsCreatingEmployee(false); }}
                  className={`px-2.5 py-1 sm:px-3 sm:py-1.5 rounded-md text-[11px] sm:text-xs font-bold uppercase tracking-wide transition-all flex items-center gap-1.5 whitespace-nowrap ${
                    activeTab === "attendance" ? "bg-gradient-to-r from-amber-500 to-yellow-500 text-slate-950 shadow-md shadow-amber-500/25 font-black" : "text-amber-300 hover:text-amber-200 hover:bg-slate-800/60"
                  }`}
                >
                  <QrCode className="w-3.5 h-3.5 text-amber-400" />
                  Absensi QR HRD
                </button>
              )}

              {allowedTabs.includes("org") && (
                <button
                  onClick={() => { setActiveTab("org"); setSelectedEmployeeId(null); setIsCreatingEmployee(false); }}
                  className={`px-2.5 py-1 sm:px-3 sm:py-1.5 rounded-md text-[11px] sm:text-xs font-bold uppercase tracking-wide transition-all whitespace-nowrap ${
                    activeTab === "org" ? "bg-gradient-to-r from-blue-600 to-sky-500 text-white shadow-md shadow-blue-500/25" : "text-slate-300 hover:text-sky-300 hover:bg-slate-800/60"
                  }`}
                >
                  Struktur Org
                </button>
              )}

              {allowedTabs.includes("workflows") && (
                <button
                  onClick={() => { setActiveTab("workflows"); setSelectedEmployeeId(null); setIsCreatingEmployee(false); }}
                  className={`px-2.5 py-1 sm:px-3 sm:py-1.5 rounded-md text-[11px] sm:text-xs font-bold uppercase tracking-wide transition-all relative whitespace-nowrap ${
                    activeTab === "workflows" ? "bg-gradient-to-r from-blue-600 to-sky-500 text-white shadow-md shadow-blue-500/25" : "text-slate-300 hover:text-sky-300 hover:bg-slate-800/60"
                  }`}
                >
                  Workflow
                  {workflows.filter(w => w.status === 'Pending').length > 0 && (
                    <span className="absolute top-0.5 right-0.5 w-2 h-2 rounded-full bg-sky-400 animate-pulse"></span>
                  )}
                </button>
              )}

              {allowedTabs.includes("rkap") && (
                <button
                  onClick={() => { setActiveTab("rkap"); setSelectedEmployeeId(null); setIsCreatingEmployee(false); }}
                  className={`px-2.5 py-1 sm:px-3 sm:py-1.5 rounded-md text-[11px] sm:text-xs font-bold uppercase tracking-wide transition-all whitespace-nowrap ${
                    activeTab === "rkap" ? "bg-gradient-to-r from-blue-600 to-sky-500 text-white shadow-md shadow-blue-500/25" : "text-slate-300 hover:text-sky-300 hover:bg-slate-800/60"
                  }`}
                >
                  RKAP & Cash Flow
                </button>
              )}

              {allowedTabs.includes("finance") && (
                <button
                  onClick={() => { setActiveTab("finance"); setSelectedEmployeeId(null); setIsCreatingEmployee(false); }}
                  className={`px-2.5 py-1 sm:px-3 sm:py-1.5 rounded-md text-[11px] sm:text-xs font-bold uppercase tracking-wide transition-all flex items-center gap-1.5 whitespace-nowrap ${
                    activeTab === "finance" ? "bg-gradient-to-r from-blue-600 to-sky-500 text-white shadow-md shadow-blue-500/25" : "text-slate-300 hover:text-sky-300 hover:bg-slate-800/60"
                  }`}
                >
                  <Building2 className="w-3.5 h-3.5 text-sky-300" />
                  Keuangan SAP
                  {financialTransactions.filter(t => t.status.startsWith("Menunggu")).length > 0 && (
                    <span className="w-2 h-2 rounded-full bg-amber-400 animate-pulse"></span>
                  )}
                </button>
              )}

              {allowedTabs.includes("dms") && (
                <button
                  onClick={() => { setActiveTab("dms"); setSelectedEmployeeId(null); setIsCreatingEmployee(false); }}
                  className={`px-2.5 py-1 sm:px-3 sm:py-1.5 rounded-md text-[11px] sm:text-xs font-bold uppercase tracking-wide transition-all flex items-center gap-1.5 whitespace-nowrap ${
                    activeTab === "dms" ? "bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-md shadow-indigo-500/25" : "text-slate-300 hover:text-indigo-300 hover:bg-slate-800/60"
                  }`}
                >
                  <FileText className="w-3.5 h-3.5 text-indigo-300" />
                  Arsip & Surat DMS
                  {dmsLetters.filter(l => l.status === "Menunggu Approval").length > 0 && (
                    <span className="w-2 h-2 rounded-full bg-indigo-400 animate-ping"></span>
                  )}
                </button>
              )}

              {allowedTabs.includes("procurement") && (
                <button
                  onClick={() => { setActiveTab("procurement"); setSelectedEmployeeId(null); setIsCreatingEmployee(false); }}
                  className={`px-2.5 py-1 sm:px-3 sm:py-1.5 rounded-md text-[11px] sm:text-xs font-bold uppercase tracking-wide transition-all flex items-center gap-1.5 whitespace-nowrap ${
                    activeTab === "procurement" ? "bg-gradient-to-r from-emerald-600 to-teal-600 text-white shadow-md shadow-emerald-500/25" : "text-slate-300 hover:text-emerald-300 hover:bg-slate-800/60"
                  }`}
                >
                  <ShoppingBag className="w-3.5 h-3.5 text-emerald-300" />
                  Pengadaan GA
                  {procurementRequests.filter(r => r.status.includes("Menunggu")).length > 0 && (
                    <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
                  )}
                </button>
              )}

              {allowedTabs.includes("governance") && (
                <button
                  onClick={() => { setActiveTab("governance"); setSelectedEmployeeId(null); setIsCreatingEmployee(false); }}
                  className={`px-2.5 py-1 sm:px-3 sm:py-1.5 rounded-md text-[11px] sm:text-xs font-bold uppercase tracking-wide transition-all flex items-center gap-1 whitespace-nowrap ${
                    activeTab === "governance" ? "bg-gradient-to-r from-blue-600 to-sky-500 text-white shadow-md shadow-blue-500/25" : "text-slate-300 hover:text-sky-300 hover:bg-slate-800/60"
                  }`}
                >
                  <ShieldCheck className="w-3.5 h-3.5 text-sky-300" />
                  Wewenang & SOP
                </button>
              )}

              {allowedTabs.includes("cto") && (
                <button
                  onClick={() => { setActiveTab("cto"); setSelectedEmployeeId(null); setIsCreatingEmployee(false); }}
                  className={`px-2.5 py-1 sm:px-3 sm:py-1.5 rounded-md text-[11px] sm:text-xs font-bold uppercase tracking-wide transition-all flex items-center gap-1 whitespace-nowrap ${
                    activeTab === "cto" ? "bg-gradient-to-r from-blue-600 to-sky-500 text-white shadow-md shadow-blue-500/25" : "text-slate-300 hover:text-sky-300 hover:bg-slate-800/60"
                  }`}
                >
                  <Database className="w-3.5 h-3.5 text-sky-300" />
                  Direktorat CTO
                </button>
              )}

              {allowedTabs.includes("portal") && (
                <button
                  onClick={() => { setActiveTab("portal"); setSelectedEmployeeId(null); setIsCreatingEmployee(false); }}
                  className={`px-2.5 py-1 sm:px-3 sm:py-1.5 rounded-md text-[11px] sm:text-xs font-bold uppercase tracking-wide transition-all flex items-center gap-1.5 whitespace-nowrap ${
                    activeTab === "portal" ? "bg-gradient-to-r from-sky-500 to-blue-600 text-slate-950 font-black shadow-lg shadow-sky-500/30 border border-sky-300" : "text-sky-300 hover:text-white hover:bg-slate-800/60"
                  }`}
                  title="Integrasi Portal SSO, Profil Perusahaan & Katalog Modul Sewa median-cloud.web.id"
                >
                  <Globe className="w-3.5 h-3.5 text-sky-300" />
                  Portal median-cloud.web.id
                </button>
              )}

              {allowedTabs.includes("saas") && (
                <button
                  onClick={() => { setActiveTab("saas"); setSelectedEmployeeId(null); setIsCreatingEmployee(false); }}
                  className={`px-2.5 py-1 sm:px-3 sm:py-1.5 rounded-md text-[11px] sm:text-xs font-bold uppercase tracking-wide transition-all flex items-center gap-1.5 whitespace-nowrap ${
                    activeTab === "saas" ? "bg-gradient-to-r from-sky-600 to-indigo-600 text-white shadow-md shadow-sky-500/25 font-black" : "text-sky-300 hover:text-white hover:bg-slate-800/60"
                  }`}
                >
                  <Layers className="w-3.5 h-3.5 text-sky-300" />
                  Portal SaaS (Tenant)
                </button>
              )}
            </nav>

            <div className="flex items-center gap-1.5 shrink-0 ml-1">
              <NotificationBell
                currentUser={currentUser}
                workflows={workflows}
                employees={employees}
                onSelectEmployee={(empId) => { setActiveTab("employees"); setSelectedEmployeeId(empId); }}
                onNavigateToWorkflows={() => { setActiveTab("workflows"); setSelectedEmployeeId(null); setIsCreatingEmployee(false); }}
                onApproveWorkflow={handleApproveWorkflow}
                onOpenEmailLogs={() => {
                  setSelectedEmailGatewayId(undefined);
                  setIsEmailGatewayModalOpen(true);
                }}
              />

              <button
                onClick={() => {
                  setSelectedEmailGatewayId(undefined);
                  setIsEmailGatewayModalOpen(true);
                }}
                className="px-2 py-1 sm:px-2.5 sm:py-1.5 bg-indigo-600/90 hover:bg-indigo-500 text-white font-bold uppercase text-[10px] sm:text-xs tracking-wider transition-all flex items-center gap-1 rounded shadow-sm border border-indigo-400/40 whitespace-nowrap cursor-pointer"
                title="Log Pengiriman Email Gateway Otomatis ke Direksi & Manager"
              >
                <Mail className="w-3.5 h-3.5 text-indigo-200" />
                <span className="hidden md:inline">Email Logs</span>
              </button>

              <button
                onClick={() => setIsBackupSchedulerModalOpen(true)}
                className="px-2 py-1 sm:px-2.5 sm:py-1.5 bg-gradient-to-r from-amber-500 to-yellow-500 hover:from-amber-400 hover:to-yellow-400 text-slate-950 font-black uppercase text-[10px] sm:text-xs tracking-wider transition-all flex items-center gap-1 rounded shadow-md shadow-amber-500/20 border border-amber-300 whitespace-nowrap cursor-pointer"
                title="Scheduler Backup Otomatis Data Pegawai ke Google Drive Folder 'Backup'"
              >
                <HardDriveUpload className="w-3.5 h-3.5 text-slate-950" />
                <span className="hidden sm:inline">Backup Drive</span>
              </button>

              <button
                onClick={() => setIsTvCastModalOpen(true)}
                className="px-2 py-1 sm:px-2.5 sm:py-1.5 bg-sky-600/90 hover:bg-sky-500 text-white font-bold uppercase text-[10px] sm:text-xs tracking-wider transition-all flex items-center gap-1 rounded shadow-sm border border-sky-400/40 whitespace-nowrap cursor-pointer"
                title="Koneksi Layar ke Smart TV / Proyektor Rapat (Wi-Fi & Bluetooth)"
              >
                <Tv className="w-3.5 h-3.5 text-sky-200" />
                <span className="hidden lg:inline">Cast TV</span>
              </button>

              <button
                onClick={() => setIsMobileAppModalOpen(true)}
                className="px-2 py-1 sm:px-2.5 sm:py-1.5 bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-500 hover:to-teal-500 text-white font-bold uppercase text-[10px] sm:text-xs tracking-wider transition-all flex items-center gap-1 rounded shadow-md shadow-emerald-600/30 whitespace-nowrap cursor-pointer"
                title="Download Aplikasi Mobile APK & iOS Client Pegawai"
              >
                <Smartphone className="w-3.5 h-3.5 text-emerald-200" />
                <span className="hidden sm:inline">App Mobile</span>
              </button>

              <button
                onClick={() => setIsSupabaseModalOpen(true)}
                className="px-2.5 py-1 sm:px-3 sm:py-1.5 bg-emerald-600/90 hover:bg-emerald-500 text-white font-bold uppercase text-[10px] sm:text-xs tracking-wider transition-all flex items-center gap-1 rounded shadow-sm border border-emerald-400/30 whitespace-nowrap"
                title="Integrasi Supabase Database PostgreSQL Cloud"
              >
                <Database className="w-3 h-3 text-emerald-200" />
                <span className="hidden xl:inline">Supabase DB</span>
              </button>

              <button
                onClick={() => setIsLoginModalOpen(true)}
                className="px-2.5 py-1 sm:px-3 sm:py-1.5 bg-gradient-to-r from-blue-600 to-sky-500 hover:from-blue-500 hover:to-sky-400 text-white font-bold uppercase text-[10px] sm:text-xs tracking-wider transition-all flex items-center gap-1 rounded shadow-md shadow-blue-600/30 whitespace-nowrap"
              >
                <Key className="w-3 h-3 text-sky-200" />
                <span>Role</span>
              </button>
            </div>
          </div>
        </div>
      </header>

      {/* SSO Auth Redirect Processing Indicator */}
      {isProcessingRedirect && (
        <div className="bg-sky-950/90 border-b border-sky-500/50 px-4 py-2 text-sky-200 text-xs font-mono flex items-center justify-between gap-3 animate-pulse">
          <div className="flex items-center gap-2">
            <RefreshCw className="w-3.5 h-3.5 animate-spin text-sky-400" />
            <span>Memvalidasi Token JWT dari SSO Server <strong>https://auth.median-cloud.web.id</strong>...</span>
          </div>
          <span className="text-[10px] bg-sky-500/20 border border-sky-500/40 text-sky-300 px-2 py-0.5 rounded font-bold uppercase">
            OAuth 2.0 / OIDC Handshake
          </span>
        </div>
      )}

      {/* SSO Notification Banner */}
      {ssoNotification && (
        <div
          className={`border-b px-4 py-2.5 font-mono text-xs flex flex-col sm:flex-row items-center justify-between gap-2.5 transition-all shadow-md ${
            ssoNotification.type === "success"
              ? "bg-emerald-950/90 border-emerald-500/40 text-emerald-200"
              : ssoNotification.type === "error"
              ? "bg-rose-950/90 border-rose-500/40 text-rose-200"
              : "bg-sky-950/90 border-sky-500/40 text-sky-200"
          }`}
        >
          <div className="flex items-center gap-2.5">
            {ssoNotification.type === "success" ? (
              <CheckCircle2 className="w-4 h-4 text-emerald-400 shrink-0" />
            ) : ssoNotification.type === "error" ? (
              <AlertTriangle className="w-4 h-4 text-rose-400 shrink-0" />
            ) : (
              <Info className="w-4 h-4 text-sky-400 shrink-0" />
            )}
            <span className="font-semibold">{ssoNotification.message}</span>
            {ssoNotification.user && (
              <span className="hidden md:inline-block text-[10px] bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 px-1.5 py-0.5 rounded font-mono font-bold">
                NIP: {ssoNotification.user.nip}
              </span>
            )}
          </div>
          <div className="flex items-center gap-2 shrink-0">
            <span className="text-[10px] opacity-70">
              auth.median-cloud.web.id
            </span>
            <button
              onClick={dismissNotification}
              className="p-1 hover:bg-white/10 rounded transition-colors text-slate-300 hover:text-white"
              title="Tutup Notifikasi"
            >
              <X className="w-3.5 h-3.5" />
            </button>
          </div>
        </div>
      )}

      {/* Real-time Director/Manager Workflow Notification Banner */}
      {(() => {
        const pos = (currentUser.position || "").toLowerCase();
        const isDirectorOrExecOrManager = 
          pos.includes("direktur") || pos.includes("ceo") || pos.includes("coo") || 
          pos.includes("cfo") || pos.includes("cto") || pos.includes("chr") || 
          pos.includes("manager") || pos.includes("supervisor") || pos.includes("komisaris");

        if (!isDirectorOrExecOrManager) return null;

        const pendingTargetCount = workflows.filter(w => {
          if (w.status !== "Pending") return false;
          const stage = (w.currentStage || "").toLowerCase();
          if (pos.includes("ceo") || pos.includes("komisaris")) return true;
          if (pos.includes("direktur") || pos.includes("coo") || pos.includes("cfo") || pos.includes("cto") || pos.includes("chr")) {
            return stage.includes("direktur") || stage.includes("ceo") || stage.includes("manager");
          }
          if (pos.includes("manager")) return stage.includes("manager") || stage.includes("supervisor");
          if (pos.includes("supervisor")) return stage.includes("supervisor");
          return false;
        }).length;

        if (pendingTargetCount === 0) return null;

        return (
          <div className="bg-[#0a192f] border-b border-sky-500/40 px-3 py-2 sm:px-6 font-mono text-[11px] sm:text-xs flex flex-col sm:flex-row items-center justify-between gap-2 text-sky-300">
            <div className="flex items-center gap-2">
              <span className="flex h-2 w-2 relative">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
                <span className="relative inline-flex rounded-full h-2 w-2 bg-sky-500"></span>
              </span>
              <span className="font-bold uppercase tracking-wider text-white">
                Pemberitahuan Direksi ({currentUser.position}):
              </span>
              <span className="text-slate-300">
                Terdapat <strong className="text-sky-300 font-bold">{pendingTargetCount} pengajuan Workflow</strong> yang memerlukan persetujuan Anda.
              </span>
            </div>

            <button
              onClick={() => { setActiveTab("workflows"); setSelectedEmployeeId(null); setIsCreatingEmployee(false); }}
              className="bg-sky-500 hover:bg-sky-400 text-slate-950 font-bold uppercase text-[10px] sm:text-[11px] px-2.5 py-1 rounded flex items-center gap-1 transition-colors shrink-0 shadow-sm"
            >
              <GitPullRequest className="w-3 h-3" />
              <span>Tinjau Workflow</span>
            </button>
          </div>
        );
      })()}

      {/* Main Container Content */}
      <main className="flex-1 max-w-7xl w-full mx-auto p-4 md:p-6 space-y-6 overflow-hidden">
        <AnimatePresence mode="wait">
          <motion.div
            key={activeTab}
            initial={{ opacity: 0, y: 14, scale: 0.99 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: -10, scale: 0.99 }}
            transition={{ duration: 0.22, ease: [0.16, 1, 0.3, 1] }}
          >
            {/* Router Render Logic */}

        {/* 1. DASHBOARD VIEW */}
        {activeTab === "dashboard" && (
          <Dashboard 
            employees={employees} 
            workflows={workflows} 
            onSelectEmployee={handleSelectEmployee}
            currentUser={currentUser}
            onOpenLoginModal={() => setIsLoginModalOpen(true)}
            onNavigateTab={(tab: any) => setActiveTab(tab)}
          />
        )}

        {/* 1A. MODUL PERJALANAN DINAS (SPPD & FINANCIAL VOUCHER LPJ) */}
        {activeTab === "travel" && (
          <OfficialTravelModule
            employees={employees}
            currentUser={currentUser}
            onNavigateTab={(tab: any) => setActiveTab(tab)}
          />
        )}

        {/* 1A-2. MODUL UANG MUKA KERJA (UMK) KAS KECIL SEKSI UMUM (GA) */}
        {activeTab === "umk" && (
          <UmkModule
            onBackToDashboard={() => setActiveTab("dashboard")}
          />
        )}

        {/* 1B. ABSENSI & SCAN QR NAME TAG PEGAWAI */}
        {activeTab === "attendance" && (
          <EmployeeAttendanceModule 
            employees={employees}
            currentUser={currentUser}
            onUpdateSalarySettings={handleUpdateSalarySettings}
            onSelectEmployee={handleSelectEmployee}
          />
        )}

        {/* 2. ORG CHART VIEW */}
        {activeTab === "org" && (
          <OrgChart 
            employees={employees} 
            onSelectEmployee={handleSelectEmployee}
          />
        )}

        {/* 3. WORKFLOW ENGINE VIEW */}
        {activeTab === "workflows" && (
          <WorkflowConsole 
            workflows={workflows}
            employees={employees}
            onCreateWorkflow={handleCreateWorkflow}
            onApproveWorkflow={handleApproveWorkflow}
            onRejectWorkflow={handleRejectWorkflow}
          />
        )}

        {/* 4. RKAP & CASH FLOW DRAFT ENGINE VIEW */}
        {activeTab === "rkap" && (
          <RkapModule 
            onCreateWorkflow={handleCreateWorkflow}
          />
        )}

        {/* 5. SAP FINANCIAL TRANSACTIONS & WORKFLOW MODULE VIEW */}
        {activeTab === "finance" && (
          <FinanceSapModule 
            currentUser={currentUser}
            transactions={financialTransactions}
            onUpdateTransactions={setFinancialTransactions}
            cashAccounts={cashAccounts}
            onUpdateCashAccounts={setCashAccounts}
            budgetItems={budgetItems}
            onUpdateBudgetItems={setBudgetItems}
            journals={journals}
            onUpdateJournals={setJournals}
          />
        )}

        {/* 6. DOCUMENT MANAGEMENT SYSTEM (DMS) MODULE VIEW */}
        {activeTab === "dms" && (
          <DmsModule 
            currentUser={currentUser}
            letters={dmsLetters}
            onUpdateLetters={setDmsLetters}
          />
        )}

        {/* 7. GENERAL AFFAIRS (GA) PROCUREMENT MODULE VIEW */}
        {activeTab === "procurement" && (
          <ProcurementGaModule 
            currentUser={currentUser}
            requests={procurementRequests}
            onUpdateRequests={setProcurementRequests}
          />
        )}

        {/* 5. TATA KELOLA, MATRIKS WEWENANG & SOP PERUSAHAAN VIEW */}
        {activeTab === "governance" && (
          <GovernancePolicyModule 
            currentUser={currentUser}
          />
        )}

        {/* 6. DIREKTORAT CTO - MIDDLEWARE REPLIKASI DATA VIEW */}
        {activeTab === "cto" && (
          <CtoDataReplicationModule 
            currentUser={currentUser}
            employees={employees}
          />
        )}

        {/* 7. PORTAL SSO & MARKETING HUB (https://median-cloud.web.id) VIEW */}
        {activeTab === "portal" && (
          <PortalMarketingHub
            currentUser={currentUser}
          />
        )}

        {/* 7B. PORTAL SAAS MULTI-TENANT & BILLING HUB VIEW */}
        {activeTab === "saas" && (
          <SaasTenantModule
            tenants={tenants}
            activeTenantId={activeTenantId}
            onSelectTenant={(tId) => setActiveTenantId(tId)}
            onUpdateTenants={setTenants}
            currentUser={currentUser}
          />
        )}

        {/* 6. MASTER EMPLOYEES ARCHIVE VIEW */}
        {activeTab === "employees" && (
          <div className="space-y-6">
            
            {/* If creating employee */}
            {isCreatingEmployee && (
              <EmployeeForm 
                employees={employees}
                onSave={handleSaveEmployee}
                onCancel={() => setIsCreatingEmployee(false)}
              />
            )}

            {/* If editing employee */}
            {isEditingEmployee && activeEmployee && (
              <EmployeeForm 
                employee={activeEmployee}
                employees={employees}
                onSave={handleSaveEmployee}
                onCancel={() => setIsEditingEmployee(false)}
              />
            )}

            {/* If displaying specific employee 360 profile */}
            {!isCreatingEmployee && !isEditingEmployee && activeEmployee && (
              <div className="space-y-4">
                {/* Back Link Row */}
                <div className="flex items-center justify-between">
                  <button 
                    onClick={() => setSelectedEmployeeId(null)}
                    className="text-xs font-black uppercase tracking-wider text-[#facc15] hover:text-white flex items-center gap-1.5 bg-[#111] border border-[#222] px-4 py-2 rounded-none transition-colors"
                  >
                    ← Kembali ke Seluruh Pegawai
                  </button>
                  <span className="text-xs font-mono text-slate-500">UUID: {activeEmployee.id}</span>
                </div>

                <EmployeeProfile360 
                  employee={activeEmployee}
                  employees={employees}
                  onAddHistory={handleAddHistory}
                  onDeleteHistory={handleDeleteHistory}
                  onUploadDocument={handleUploadDocument}
                  onDeleteDocument={handleDeleteDocument}
                  onAddAuditLog={handleAddAuditLog}
                  onEdit={() => setIsEditingEmployee(true)}
                  currentUser={currentUser}
                  onUpdateSalarySettings={handleUpdateSalarySettings}
                  onUpdateDelegatedTasks={handleUpdateDelegatedTasks}
                  onSaveEmployee={handleSaveEmployee}
                />
              </div>
            )}

            {/* Main listing of all employees (Default list) */}
            {!isCreatingEmployee && !isEditingEmployee && !activeEmployee && (
              <div className="space-y-6">
                
                {/* Search, Filter and Actions Toolbar */}
                <div className="bg-[#0a0a0a] border border-[#222] rounded-none p-5 flex flex-col lg:flex-row items-center justify-between gap-4">
                  
                  {/* Search Bar */}
                  <div className="relative w-full lg:max-w-md">
                    <Search className="w-4.5 h-4.5 text-slate-500 absolute left-3 top-1/2 -translate-y-1/2" />
                    <input 
                      type="text" 
                      placeholder="Cari Pegawai (Nama, NIP, Jabatan, Divisi)..."
                      value={searchQuery}
                      onChange={(e) => setSearchQuery(e.target.value)}
                      className="w-full bg-[#050505] border border-[#222] text-[#e5e5e5] placeholder-slate-600 focus:border-[#facc15] focus:outline-hidden rounded-none pl-10 pr-4 py-2.5 text-xs font-mono"
                    />
                  </div>

                  {/* Filter Selects & Select All */}
                  <div className="flex flex-col sm:flex-row items-center gap-3 w-full lg:w-auto">
                    {/* Select All Toggle Button */}
                    <button
                      type="button"
                      onClick={handleSelectAllFiltered}
                      className={`w-full sm:w-auto px-3.5 py-2 border text-xs font-bold uppercase tracking-wider transition-all flex items-center justify-center gap-1.5 ${
                        filteredEmployees.length > 0 && filteredEmployees.every(e => selectedEmployeeIds.includes(e.id))
                          ? "bg-[#facc15] text-black border-[#facc15] font-black"
                          : selectedEmployeeIds.length > 0
                          ? "bg-[#181507] text-[#facc15] border-[#facc15]"
                          : "bg-[#050505] text-slate-300 border-[#222] hover:border-[#facc15]"
                      }`}
                    >
                      <CheckSquare className="w-4 h-4 text-[#facc15]" />
                      <span>
                        {filteredEmployees.length > 0 && filteredEmployees.every(e => selectedEmployeeIds.includes(e.id))
                          ? "Batal Pilih Semua"
                          : selectedEmployeeIds.length > 0
                          ? `Pilih Semua (${selectedEmployeeIds.length}/${filteredEmployees.length})`
                          : `Pilih Semua (${filteredEmployees.length})`}
                      </span>
                    </button>

                    <div className="flex items-center gap-1.5 w-full sm:w-auto">
                      <Filter className="w-4 h-4 text-[#facc15]" />
                      <span className="text-xs uppercase font-bold text-slate-400">Divisi:</span>
                      <select
                        value={filterDivision}
                        onChange={(e) => setFilterDivision(e.target.value)}
                        className="bg-[#050505] border border-[#222] text-[#e5e5e5] text-xs rounded-none px-3 py-1.5 focus:outline-hidden focus:border-[#facc15]"
                      >
                        {divisions.map((div, i) => (
                          <option key={i} value={div}>{div === "All" ? "Semua Divisi" : div}</option>
                        ))}
                      </select>
                    </div>

                    <div className="flex items-center gap-1.5 w-full sm:w-auto">
                      <span className="text-xs uppercase font-bold text-slate-400">Status:</span>
                      <select
                        value={filterStatus}
                        onChange={(e) => setFilterStatus(e.target.value)}
                        className="bg-[#050505] border border-[#222] text-[#e5e5e5] text-xs rounded-none px-3 py-1.5 focus:outline-hidden focus:border-[#facc15]"
                      >
                        <option value="All">Semua Status</option>
                        <option value="Aktif">Karyawan Tetap</option>
                        <option value="Kontrak">Kontrak (PKWT)</option>
                        <option value="Pensiun">Pensiun</option>
                        <option value="Resigned">Resigned</option>
                      </select>
                    </div>

                    {/* Upload Massal Data Pegawai Baru (Excel / Text) */}
                    <button
                      onClick={() => setIsBulkUploadModalOpen(true)}
                      className="w-full sm:w-auto bg-emerald-600 hover:bg-emerald-500 text-white font-black uppercase tracking-wider text-xs px-4 py-2.5 rounded-none flex items-center justify-center gap-1.5 transition-colors shrink-0 border border-emerald-400/40 shadow-sm cursor-pointer"
                      title="Upload Data Utama Pegawai Baru dari Berkas Excel (.xlsx, .xls) atau Text/CSV"
                    >
                      <FileSpreadsheet className="w-4 h-4 text-emerald-200" />
                      <span>Upload Massal (Excel)</span>
                    </button>

                    {/* Registrasi Trigger */}
                    <button
                      onClick={() => setIsCreatingEmployee(true)}
                      className="w-full sm:w-auto bg-[#facc15] hover:bg-yellow-500 text-black font-black uppercase tracking-wider text-xs px-5 py-2.5 rounded-none flex items-center justify-center gap-1.5 transition-colors shrink-0 cursor-pointer"
                    >
                      <UserPlus className="w-4 h-4" />
                      Registrasi Pegawai
                    </button>
                  </div>

                </div>

                {/* Employees Cards Grid - Masonry style for mobile and multi-column desktop */}
                {filteredEmployees.length > 0 ? (
                  <div className="columns-1 sm:columns-2 lg:columns-3 gap-6 space-y-6" id="employees-grid">
                    {filteredEmployees.map((emp) => {
                      const isSelected = selectedEmployeeIds.includes(emp.id);

                      return (
                        <div 
                          key={emp.id} 
                          className={`break-inside-avoid rounded-none p-5 flex flex-col justify-between transition-all group shadow-sm relative ${
                            isSelected 
                              ? "bg-[#141208] border-2 border-[#facc15] shadow-lg shadow-[#facc15]/5" 
                              : "bg-[#0a0a0a] border border-[#222] hover:border-[#facc15]"
                          }`}
                        >
                          {/* Top Card Header with Checkbox and Info */}
                          <div className="flex gap-3.5 items-start">
                            {/* Checkbox Trigger */}
                            <button
                              type="button"
                              onClick={(e) => handleToggleSelectEmployee(emp.id, e)}
                              className="shrink-0 p-1 hover:bg-[#1a1a1a] transition-colors rounded-none mt-0.5"
                              title={isSelected ? "Batal Pilih Pegawai" : "Pilih Pegawai"}
                            >
                              {isSelected ? (
                                <CheckSquare className="w-5 h-5 text-[#facc15]" />
                              ) : (
                                <Square className="w-5 h-5 text-slate-600 group-hover:text-slate-400" />
                              )}
                            </button>

                            <div className="w-12 h-12 shrink-0 rounded-none bg-[#111] border border-[#222] flex items-center justify-center overflow-hidden">
                              {emp.photoUrl ? (
                                <img src={emp.photoUrl} alt={emp.name} className="w-full h-full object-cover" />
                              ) : (
                                <span className="text-sm font-black text-[#facc15]">
                                  {emp.name.split(" ").map(n => n[0]).join("").substring(0,2).toUpperCase()}
                                </span>
                              )}
                            </div>

                            <div className="flex-1 min-w-0">
                              <h4 className="text-sm font-black text-white uppercase tracking-tight group-hover:text-[#facc15] transition-colors leading-snug break-words">
                                {emp.name}
                              </h4>
                              <p className="text-xs text-slate-300 uppercase font-bold mt-0.5 leading-snug break-words">
                                {emp.position}
                              </p>
                              <p className="text-[10px] text-[#facc15] font-black uppercase tracking-wider mt-1 leading-snug break-words">
                                {emp.division}
                              </p>
                              <span className="text-[10px] font-mono text-slate-500 block mt-1">
                                NIP: {emp.nip}
                              </span>
                            </div>
                          </div>

                          {/* Meta rows */}
                          <div className="mt-4 pt-3 border-t border-[#111] grid grid-cols-1 sm:grid-cols-2 gap-2 text-xs text-slate-400 font-mono">
                            <div className="flex items-center gap-1.5 truncate">
                              <Phone className="w-3 h-3 text-[#facc15] shrink-0" />
                              <span className="truncate">{emp.phone || "No HP"}</span>
                            </div>
                            <div className="flex items-center gap-1.5 truncate">
                              <Mail className="w-3 h-3 text-[#facc15] shrink-0" />
                              <span className="truncate" title={emp.email}>{emp.email || "No Email"}</span>
                            </div>
                          </div>

                          {/* Card Action footer */}
                          <div className="mt-4 pt-3 border-t border-[#111] flex justify-between items-center gap-2 flex-wrap">
                            <span className={`text-[10px] font-black uppercase tracking-wider px-2.5 py-1 rounded-none border ${
                              emp.status === 'Aktif' || emp.status === 'Tetap'
                                ? 'bg-green-500/10 text-green-400 border-green-500/20' 
                                : emp.status === 'Kontrak' || emp.status === 'Probation'
                                ? 'bg-amber-500/10 text-amber-400 border-amber-500/20'
                                : emp.status === 'Outsource' || emp.status === 'Magang'
                                ? 'bg-blue-500/10 text-blue-400 border-blue-500/20'
                                : 'bg-slate-500/10 text-slate-400 border-slate-500/20'
                            }`}>
                              {emp.status}
                            </span>

                            <div className="flex gap-2">
                              <button 
                                onClick={() => setIsEditingEmployee(true) || setSelectedEmployeeId(emp.id)}
                                className="p-1.5 text-slate-400 hover:text-white hover:bg-[#111] rounded-none border border-transparent hover:border-[#222] transition-colors"
                                title="Edit"
                              >
                                <Edit2 className="w-4 h-4" />
                              </button>
                              <button 
                                onClick={() => handleSelectEmployee(emp.id)}
                                className="bg-white hover:bg-[#facc15] text-black font-black uppercase tracking-wider text-[10px] px-3.5 py-2 rounded-none transition-all flex items-center gap-1"
                              >
                                <Eye className="w-3.5 h-3.5" />
                                Detail 360°
                              </button>
                            </div>
                          </div>

                        </div>
                      );
                    })}
                  </div>
                ) : (
                  <div className="w-full text-center py-16 text-slate-500 bg-[#0a0a0a] border border-[#222] italic text-xs">
                    Tidak ada data pegawai yang sesuai dengan kata kunci pencarian atau filter divisi/status.
                  </div>
                )}

              </div>
            )}

          </div>
        )}

          </motion.div>
        </AnimatePresence>
      </main>

      {/* Persistent global footer */}
      <footer className="bg-[#080808] border-t border-[#222] text-slate-500 py-6 px-6 text-center text-[10px] uppercase tracking-widest font-bold">
        <div className="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
          <p>© 2026 EMS MEDIAN DEV. All rights reserved.</p>
          <div className="flex gap-4">
            <span className="text-[#facc15]">● Live ERP Node Connected</span>
            <span>Ref: HR-360-INTEGRITY</span>
          </div>
        </div>
      </footer>

      {/* Login & Role Switcher Modal */}
      <LoginModal 
        isOpen={isLoginModalOpen}
        onClose={() => setIsLoginModalOpen(false)}
        employees={employees}
        currentUser={currentUser}
        onSelectUser={handleSelectUser}
      />

      {/* FLOATING BULK ACTION BAR */}
      {selectedEmployeeIds.length > 0 && !isCreatingEmployee && !isEditingEmployee && !activeEmployee && activeTab === "employees" && (
        <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 w-full max-w-3xl px-4 animate-in fade-in slide-in-from-bottom-5 duration-200">
          <div className="bg-[#0f0f0f] border-2 border-[#facc15] shadow-2xl rounded-none p-3.5 sm:p-4 flex flex-col sm:flex-row items-center justify-between gap-3 text-white">
            
            {/* Selection Info */}
            <div className="flex items-center gap-3">
              <div className="w-9 h-9 bg-[#facc15] text-black font-black flex items-center justify-center font-mono text-sm shrink-0">
                {selectedEmployeeIds.length}
              </div>
              <div>
                <h4 className="text-xs font-black uppercase tracking-wider text-white flex items-center gap-1.5">
                  <CheckSquare className="w-4 h-4 text-[#facc15]" />
                  Pegawai Terpilih
                </h4>
                <p className="text-[10px] text-slate-400 font-mono">
                  {selectedEmployeeIds.length} dari {filteredEmployees.length} pegawai terpilih
                </p>
              </div>
            </div>

            {/* Bulk Action Buttons */}
            <div className="flex flex-wrap items-center justify-end gap-2 w-full sm:w-auto">
              <button
                onClick={() => setIsBulkStatusModalOpen(true)}
                className="px-3.5 py-2 bg-[#181818] hover:bg-[#222] border border-[#333] hover:border-[#facc15] text-slate-200 hover:text-white font-bold uppercase text-[10px] tracking-wider transition-colors flex items-center gap-1.5"
              >
                <RefreshCw className="w-3.5 h-3.5 text-[#facc15]" />
                <span>Update Status</span>
              </button>

              <button
                onClick={() => setIsBulkProjectModalOpen(true)}
                className="px-3.5 py-2 bg-[#181818] hover:bg-[#222] border border-[#333] hover:border-[#facc15] text-slate-200 hover:text-white font-bold uppercase text-[10px] tracking-wider transition-colors flex items-center gap-1.5"
              >
                <Briefcase className="w-3.5 h-3.5 text-sky-400" />
                <span>Assign Proyek</span>
              </button>

              <button
                onClick={handleExportSelectedCsv}
                className="px-3.5 py-2 bg-[#181818] hover:bg-[#222] border border-[#333] hover:border-emerald-500 text-slate-200 hover:text-white font-bold uppercase text-[10px] tracking-wider transition-colors flex items-center gap-1.5"
                title="Export Selected CSV"
              >
                <Download className="w-3.5 h-3.5 text-emerald-400" />
                <span className="hidden md:inline">Export CSV</span>
              </button>

              <button
                onClick={() => setSelectedEmployeeIds([])}
                className="p-2 text-slate-400 hover:text-rose-400 hover:bg-rose-950/30 border border-[#333] transition-colors"
                title="Batal Pilih Semua"
              >
                <X className="w-4 h-4" />
              </button>
            </div>

          </div>
        </div>
      )}

      {/* BULK STATUS UPDATE MODAL */}
      {isBulkStatusModalOpen && (
        <div className="fixed inset-0 bg-black/85 backdrop-blur-xs z-50 flex items-center justify-center p-4">
          <div className="bg-[#0a0a0a] border-2 border-[#facc15] max-w-3xl w-full p-5 sm:p-6 text-white space-y-5 shadow-2xl relative max-h-[90vh] overflow-y-auto">
            <div className="flex items-center justify-between border-b border-[#222] pb-3">
              <div className="flex items-center gap-2.5">
                <div className="p-2 bg-yellow-500/10 border border-yellow-500/30 rounded-none">
                  <RefreshCw className="w-5 h-5 text-[#facc15]" />
                </div>
                <div>
                  <h3 className="text-sm font-black uppercase tracking-wider flex items-center gap-2">
                    Bulk Update Status Pegawai
                    <span className="text-[10px] bg-[#facc15] text-black px-2 py-0.5 font-bold">
                      {selectedEmployeeIds.length} Terpilih
                    </span>
                  </h3>
                  <p className="text-[11px] text-slate-400">
                    Pilih pegawai di bawah untuk meninjau riwayat status sebelum menerapkan perubahan massal.
                  </p>
                </div>
              </div>
              <button 
                onClick={() => setIsBulkStatusModalOpen(false)}
                className="text-slate-500 hover:text-white p-1"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            {/* Selected items chip list with preview selector */}
            <div className="space-y-1.5">
              <div className="flex items-center justify-between text-[10px] uppercase font-bold text-slate-400">
                <span>Klik Pegawai Untuk Melihat Histori Status:</span>
                <span className="text-yellow-400/80">
                  {activePreviewEmp ? `Menampilkan: ${activePreviewEmp.name}` : ''}
                </span>
              </div>
              <div className="max-h-24 overflow-y-auto bg-[#050505] border border-[#222] p-2 flex flex-wrap gap-1.5 text-[11px] font-mono">
                {employees.filter(e => selectedEmployeeIds.includes(e.id)).map(e => {
                  const isInspected = activePreviewEmp?.id === e.id;
                  return (
                    <button
                      key={e.id}
                      type="button"
                      onClick={() => setBulkStatusPreviewEmpId(e.id)}
                      className={`px-2 py-1 transition-all flex items-center gap-1.5 border text-left ${
                        isInspected 
                          ? "bg-yellow-500/20 border-[#facc15] text-yellow-300 shadow-sm" 
                          : "bg-[#181818] border-[#333] text-slate-300 hover:border-slate-500 hover:bg-[#222]"
                      }`}
                    >
                      <Eye className={`w-3 h-3 ${isInspected ? "text-[#facc15]" : "text-slate-500"}`} />
                      <span className="font-bold">{e.name}</span>
                      <span className="text-slate-500 text-[10px]">({e.nip})</span>
                    </button>
                  );
                })}
              </div>
            </div>

            {/* Main Content Grid: Visual Timeline & Context (Left) + Status Update Form (Right) */}
            <div className="grid grid-cols-1 md:grid-cols-12 gap-5">
              
              {/* Left Column: Context Card & Visual Timeline */}
              <div className="md:col-span-7 space-y-3 bg-[#050505] border border-[#222] p-3.5">
                {activePreviewEmp ? (
                  <>
                    {/* Active Employee Info Card */}
                    <div className="flex items-center justify-between pb-2.5 border-b border-[#222]">
                      <div>
                        <div className="text-xs font-bold text-white flex items-center gap-2">
                          {activePreviewEmp.name}
                          <span className="text-[10px] font-mono text-slate-400">({activePreviewEmp.nip})</span>
                        </div>
                        <div className="text-[11px] text-slate-400">
                          {activePreviewEmp.position} — <span className="text-slate-300">{activePreviewEmp.division}</span>
                        </div>
                      </div>
                      <div className="text-right">
                        <div className="text-[9px] uppercase tracking-wider text-slate-500 font-bold">Status Saat Ini</div>
                        <span className={`inline-block text-[10px] font-black uppercase px-2 py-0.5 border mt-0.5 ${
                          activePreviewEmp.status === 'Aktif' || activePreviewEmp.status === 'Tetap' ? 'bg-emerald-950 text-emerald-300 border-emerald-700/60' :
                          activePreviewEmp.status === 'Kontrak' || activePreviewEmp.status === 'Probation' ? 'bg-amber-950 text-amber-300 border-amber-700/60' :
                          activePreviewEmp.status === 'Outsource' || activePreviewEmp.status === 'Magang' ? 'bg-sky-950 text-sky-300 border-sky-700/60' :
                          'bg-rose-950 text-rose-300 border-rose-700/60'
                        }`}>
                          {activePreviewEmp.status}
                        </span>
                      </div>
                    </div>

                    {/* Timeline Header */}
                    <div className="flex items-center justify-between">
                      <div className="text-[10px] uppercase font-bold text-slate-300 flex items-center gap-1.5">
                        <Clock className="w-3.5 h-3.5 text-[#facc15]" />
                        Histori & Timeline Perubahan Status:
                      </div>
                      <span className="text-[10px] text-slate-500 font-mono">TMT Kerja: {activePreviewEmp.tmtKerja}</span>
                    </div>

                    {/* Timeline Container */}
                    <div className="max-h-64 overflow-y-auto pr-1.5 space-y-3 font-sans relative">
                      {/* Projection Node: Preview of New Status Update */}
                      <div className="p-2.5 bg-yellow-500/10 border-2 border-dashed border-[#facc15] relative pl-4">
                        <div className="absolute -left-1.5 top-3 w-3 h-3 bg-[#facc15] rounded-full border-2 border-black animate-pulse" />
                        <div className="flex items-center justify-between text-[10px] font-mono mb-1">
                          <span className="text-[#facc15] font-black uppercase tracking-wider flex items-center gap-1">
                            <Sparkles className="w-3 h-3" /> Proyeksi Perubahan
                          </span>
                          <span className="text-yellow-200/80 font-bold">TMT: Hari Ini</span>
                        </div>
                        <div className="text-xs font-bold text-white">
                          Status akan di-update menjadi &quot;{bulkStatusValue}&quot;
                        </div>
                        {bulkStatusNote ? (
                          <div className="text-[11px] text-yellow-200/70 italic mt-0.5">
                            Catatan: {bulkStatusNote}
                          </div>
                        ) : (
                          <div className="text-[10px] text-slate-500 italic mt-0.5">
                            (Belum ada catatan ditambahkan)
                          </div>
                        )}
                      </div>

                      {/* Historical Timeline List */}
                      <div className="border-l border-slate-800 ml-2.5 pl-3.5 space-y-3 pt-1">
                        {previewEmpStatusTimeline.map((item) => (
                          <div key={item.id} className="relative group">
                            <div className="absolute -left-[19px] top-1 w-2.5 h-2.5 bg-slate-700 rounded-full border border-slate-900 group-hover:bg-[#facc15] transition-colors" />
                            <div className="flex items-center justify-between text-[10px] font-mono text-slate-400 mb-0.5">
                              <span className="text-slate-300 font-semibold">{item.date}</span>
                              <span className={`text-[9px] px-1.5 py-0.2 border uppercase font-mono ${item.badgeStyle}`}>
                                {item.badgeLabel}
                              </span>
                            </div>
                            <div className="text-xs font-bold text-slate-200">{item.title}</div>
                            <div className="text-[11px] text-slate-400 mt-0.5 leading-snug">{item.description}</div>
                          </div>
                        ))}
                      </div>
                    </div>
                  </>
                ) : (
                  <div className="text-center py-8 text-xs text-slate-500">
                    Pilih pegawai dari daftar di atas untuk melihat riwayat timeline.
                  </div>
                )}
              </div>

              {/* Right Column: Bulk Update Form Controls */}
              <div className="md:col-span-5 flex flex-col justify-between space-y-4">
                <form onSubmit={handleTriggerBulkStatusConfirm} className="space-y-4">
                  <div className="p-3 bg-yellow-500/5 border border-yellow-500/20 text-yellow-200/90 text-[11px] leading-relaxed">
                    <span className="font-bold text-yellow-400 block mb-0.5 uppercase tracking-wide text-[10px]">Perhatian:</span>
                    Perubahan status akan diterapkan sekaligus ke seluruh <strong className="text-white">{selectedEmployeeIds.length} pegawai</strong> yang terpilih.
                  </div>

                  <div>
                    <label className="block text-xs uppercase font-bold text-slate-300 mb-1.5">Pilih Status Baru: *</label>
                    <select
                      value={bulkStatusValue}
                      onChange={(e) => setBulkStatusValue(e.target.value)}
                      className="w-full bg-[#050505] border border-[#333] text-white p-2.5 text-xs font-mono focus:border-[#facc15] focus:outline-hidden"
                    >
                      <option value="Aktif">Aktif / Tetap</option>
                      <option value="Kontrak">Kontrak (PKWT)</option>
                      <option value="Probation">Probation / Percobaan</option>
                      <option value="Outsource">Outsource</option>
                      <option value="Magang">Magang / Internship</option>
                      <option value="Pensiun">Pensiun</option>
                      <option value="Resigned">Resigned / Keluar</option>
                    </select>
                  </div>

                  <div>
                    <label className="block text-xs uppercase font-bold text-slate-300 mb-1.5">Catatan Perubahan (Opsional):</label>
                    <textarea
                      rows={3}
                      placeholder="Contoh: Perpanjangan Kontrak PKWT 2026 atau Evaluasi Tahunan Direksi"
                      value={bulkStatusNote}
                      onChange={(e) => setBulkStatusNote(e.target.value)}
                      className="w-full bg-[#050505] border border-[#333] text-white p-2.5 text-xs font-mono focus:border-[#facc15] focus:outline-hidden placeholder-slate-600 resize-none"
                    />
                  </div>

                  <div className="flex flex-col gap-2 pt-2 border-t border-[#222]">
                    <button
                      type="submit"
                      className="w-full py-2.5 bg-[#facc15] hover:bg-yellow-500 text-black font-black uppercase text-xs tracking-wider flex items-center justify-center gap-1.5 shadow-md shadow-yellow-500/10 cursor-pointer"
                    >
                      <CheckCircle2 className="w-4 h-4" />
                      Lanjut ke Konfirmasi ({selectedEmployeeIds.length})
                    </button>
                    <button
                      type="button"
                      onClick={() => setIsBulkStatusModalOpen(false)}
                      className="w-full py-2 bg-[#151515] hover:bg-[#222] border border-[#333] text-xs font-bold uppercase tracking-wider text-slate-300 cursor-pointer"
                    >
                      Batal
                    </button>
                  </div>
                </form>
              </div>

            </div>
          </div>
        </div>
      )}

      {/* BULK PROJECT ASSIGNMENT MODAL */}
      {isBulkProjectModalOpen && (
        <div className="fixed inset-0 bg-black/80 backdrop-blur-xs z-50 flex items-center justify-center p-4">
          <div className="bg-[#0a0a0a] border-2 border-sky-400 max-w-lg w-full p-6 text-white space-y-5 shadow-2xl relative">
            <div className="flex items-center justify-between border-b border-[#222] pb-4">
              <div className="flex items-center gap-2">
                <Briefcase className="w-5 h-5 text-sky-400" />
                <h3 className="text-sm font-black uppercase tracking-wider">Penugasan Proyek Tim (Bulk Assign)</h3>
              </div>
              <button 
                onClick={() => setIsBulkProjectModalOpen(false)}
                className="text-slate-500 hover:text-white p-1"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            {/* Selected items chip list */}
            <div className="space-y-1.5">
              <label className="text-[10px] uppercase font-bold text-slate-400">Pegawai Terpilih ({selectedEmployeeIds.length}):</label>
              <div className="max-h-24 overflow-y-auto bg-[#050505] border border-[#222] p-2.5 flex flex-wrap gap-1.5 text-[11px] font-mono">
                {employees.filter(e => selectedEmployeeIds.includes(e.id)).map(e => (
                  <span key={e.id} className="bg-[#181818] border border-[#333] text-slate-300 px-2 py-0.5 rounded-none flex items-center gap-1">
                    <span className="text-sky-400 font-bold">{e.name}</span>
                    <span className="text-slate-500">({e.division})</span>
                  </span>
                ))}
              </div>
            </div>

            <form onSubmit={handleTriggerBulkProjectConfirm} className="space-y-4">
              <div>
                <label className="block text-xs uppercase font-bold text-slate-300 mb-1.5">Nama Proyek / Penugasan: *</label>
                <input
                  type="text"
                  required
                  placeholder="Contoh: Replikasi Data Middleware CTO Phase 2"
                  value={bulkProjectName}
                  onChange={(e) => setBulkProjectName(e.target.value)}
                  className="w-full bg-[#050505] border border-[#333] text-white p-2.5 text-xs font-mono focus:border-sky-400 focus:outline-hidden placeholder-slate-600"
                />
              </div>

              <div>
                <label className="block text-xs uppercase font-bold text-slate-300 mb-1.5">Peran / Tanggung Jawab Tim:</label>
                <input
                  type="text"
                  placeholder="Contoh: Core Backend Engineer / Data Replication Specialist"
                  value={bulkProjectRole}
                  onChange={(e) => setBulkProjectRole(e.target.value)}
                  className="w-full bg-[#050505] border border-[#333] text-white p-2.5 text-xs font-mono focus:border-sky-400 focus:outline-hidden placeholder-slate-600"
                />
              </div>

              <div>
                <label className="block text-xs uppercase font-bold text-slate-300 mb-1.5">Catatan / Target Selesai (Opsional):</label>
                <input
                  type="text"
                  placeholder="Contoh: Target Live Deployment Q3 2026"
                  value={bulkProjectNote}
                  onChange={(e) => setBulkProjectNote(e.target.value)}
                  className="w-full bg-[#050505] border border-[#333] text-white p-2.5 text-xs font-mono focus:border-sky-400 focus:outline-hidden placeholder-slate-600"
                />
              </div>

              <div className="flex justify-end gap-3 pt-2 border-t border-[#222]">
                <button
                  type="button"
                  onClick={() => setIsBulkProjectModalOpen(false)}
                  className="px-4 py-2 bg-[#151515] hover:bg-[#222] border border-[#333] text-xs font-bold uppercase tracking-wider text-slate-300"
                >
                  Batal
                </button>
                <button
                  type="submit"
                  className="px-5 py-2 bg-sky-400 hover:bg-sky-500 text-black font-black uppercase text-xs tracking-wider flex items-center gap-1.5"
                >
                  <Briefcase className="w-4 h-4" />
                  Lanjut ke Konfirmasi ({selectedEmployeeIds.length})
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* GLOBAL BULK ACTION CONFIRMATION MODAL */}
      {confirmBulkModal && (
        <div className="fixed inset-0 bg-black/90 backdrop-blur-md z-50 flex items-center justify-center p-4 animate-in fade-in duration-200">
          <div className="bg-[#0c0a09] border-2 border-amber-500 max-w-xl w-full p-6 text-white space-y-5 shadow-2xl relative">
            
            {/* Header with Alert icon */}
            <div className="flex items-start gap-3 border-b border-[#222] pb-4">
              <div className="p-2.5 bg-amber-500/20 border border-amber-500/40 text-amber-400 shrink-0">
                <AlertTriangle className="w-6 h-6" />
              </div>
              <div>
                <h3 className="text-base font-black uppercase tracking-wider text-amber-400">
                  {confirmBulkModal.title}
                </h3>
                <p className="text-xs text-slate-300 mt-1 leading-relaxed">
                  Periksa dengan teliti ringkasan perubahan di bawah ini sebelum mengeksekusi ke sistem.
                </p>
              </div>
            </div>

            {/* Warning Alert Box */}
            <div className="p-3.5 bg-amber-950/40 border border-amber-500/30 text-amber-200 text-xs flex items-start gap-2.5 font-mono">
              <AlertCircle className="w-4 h-4 text-amber-400 shrink-0 mt-0.5" />
              <span>
                <strong>PERHATIAN:</strong> Tindakan ini akan memodifikasi data <strong>{confirmBulkModal.targetCount} pegawai terpilih</strong> secara otomatis, menambahkan catatan ke riwayat karir/proyek, dan mencatat audit log atas nama <strong>{currentUser ? currentUser.name : "HR Administrator"}</strong>.
              </span>
            </div>

            {/* Summary List */}
            <div className="space-y-3 bg-[#050505] p-4 border border-[#222]">
              <h4 className="text-xs font-bold uppercase tracking-wider text-slate-400 border-b border-[#1f1f1f] pb-2">
                Ringkasan Perubahan Massal:
              </h4>
              <div className="grid grid-cols-1 gap-2 text-xs font-mono">
                {confirmBulkModal.summaryList.map((item, idx) => (
                  <div key={idx} className="flex flex-col sm:flex-row sm:items-center justify-between gap-1 py-1 border-b border-[#151515] last:border-none">
                    <span className="text-slate-400 uppercase font-bold text-[11px]">{item.label}:</span>
                    <span className="text-amber-300 font-bold">{item.value}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Target Employees Preview */}
            <div className="space-y-1.5">
              <label className="text-[10px] uppercase font-bold text-slate-400">Daftar Pegawai Terkena Dampak ({confirmBulkModal.targetCount}):</label>
              <div className="max-h-28 overflow-y-auto bg-[#050505] border border-[#222] p-2.5 flex flex-wrap gap-1.5 text-[11px] font-mono">
                {employees.filter(e => selectedEmployeeIds.includes(e.id)).map(e => (
                  <span key={e.id} className="bg-[#181818] border border-[#333] text-slate-200 px-2 py-1 rounded-none flex items-center gap-1.5">
                    <span className="text-amber-400 font-bold">{e.name}</span>
                    <span className="text-slate-500">| {e.division}</span>
                  </span>
                ))}
              </div>
            </div>

            {/* Action Buttons */}
            <div className="flex flex-col sm:flex-row justify-end gap-3 pt-3 border-t border-[#222]">
              <button
                type="button"
                onClick={() => setConfirmBulkModal(null)}
                className="w-full sm:w-auto px-4 py-2.5 bg-[#151515] hover:bg-[#222] border border-[#333] text-xs font-bold uppercase tracking-wider text-slate-300 transition-colors"
              >
                Batal / Periksa Kembali
              </button>
              <button
                type="button"
                onClick={handleExecuteConfirmedBulkAction}
                className="w-full sm:w-auto px-6 py-2.5 bg-amber-500 hover:bg-amber-400 text-black font-black uppercase text-xs tracking-wider flex items-center justify-center gap-2 transition-all shadow-lg shadow-amber-500/20"
              >
                <CheckCircle2 className="w-4 h-4" />
                Ya, Konfirmasi & Eksekusi ({confirmBulkModal.targetCount} Pegawai)
              </button>
            </div>

          </div>
        </div>
      )}

      {/* SUCCESS TOAST BANNER */}
      {bulkToastMessage && (
        <div className="fixed top-5 right-5 z-50 bg-[#facc15] text-black font-black font-mono text-xs p-4 border-2 border-black shadow-2xl flex items-center gap-3 animate-in fade-in slide-in-from-top-5 duration-200">
          <CheckCircle2 className="w-5 h-5 shrink-0" />
          <span>{bulkToastMessage}</span>
          <button 
            onClick={() => setBulkToastMessage(null)}
            className="ml-3 text-black hover:opacity-75"
          >
            <X className="w-4 h-4" />
          </button>
        </div>
      )}

      {/* Bulk Employee Upload Modal */}
      <BulkEmployeeUploadModal 
        isOpen={isBulkUploadModalOpen}
        onClose={() => setIsBulkUploadModalOpen(false)}
        existingEmployees={employees}
        onBulkSave={handleBulkSaveEmployees}
        currentUser={currentUser}
      />

      {/* Supabase Database Integration Modal */}
      <SupabaseModal 
        isOpen={isSupabaseModalOpen}
        onClose={() => setIsSupabaseModalOpen(false)}
        employees={employees}
      />

      {/* Wireless TV & Projector Cast Screen Modal */}
      <TvProjectorCastModal
        isOpen={isTvCastModalOpen}
        onClose={() => setIsTvCastModalOpen(false)}
      />

      {/* Mobile Client APK Download & iOS App Modal */}
      <MobileAppDownloadModal
        isOpen={isMobileAppModalOpen}
        onClose={() => setIsMobileAppModalOpen(false)}
        currentUser={currentUser}
      />

      {/* Tenant switching is intentionally disabled in SaaS production.
          Tenant identity is resolved from the wildcard host + Django membership. */}

      {/* Direct Company Logo Brand Identity Change Modal */}
      <ChangeCompanyLogoModal
        isOpen={isChangeLogoModalOpen}
        onClose={() => setIsChangeLogoModalOpen(false)}
        currentLogo={companyLogo}
        onSaveLogo={(newLogoUrl) => {
          setCompanyLogo(newLogoUrl);
          localStorage.setItem("custom_company_logo", newLogoUrl);
        }}
        currentUser={currentUser}
      />

      {/* Mandatory First-Time Login Password Reset Modal */}
      {currentUser && (
        <FirstLoginPasswordChangeModal
          isOpen={!!currentUser.mustChangePassword}
          user={currentUser}
          onPasswordChanged={(newPassword) => {
            const updatedUser: Employee = {
              ...currentUser,
              mustChangePassword: false,
              tempPassword: "",
              passwordUpdatedAt: new Date().toISOString()
            };
            setCurrentUser(updatedUser);
            setEmployees(prev => prev.map(e => e.id === updatedUser.id ? updatedUser : e));
            localStorage.setItem("simulated_employees", JSON.stringify(
              employees.map(e => e.id === updatedUser.id ? updatedUser : e)
            ));
          }}
        />
      )}

      {/* Automated Google Drive Backup Scheduler Modal */}
      <AutoBackupSchedulerModal
        isOpen={isBackupSchedulerModalOpen}
        onClose={() => setIsBackupSchedulerModalOpen(false)}
        employees={employees}
      />

      {/* Auto-Backup Notification Toast Banner */}
      {autoBackupToast && (
        <div className="fixed bottom-5 right-5 z-50 bg-[#0a0a0a] border-2 border-emerald-500 text-white px-4 py-3 rounded-xl shadow-2xl flex items-center gap-3 animate-bounce font-mono text-xs max-w-md">
          <HardDriveUpload className="w-5 h-5 text-emerald-400 shrink-0" />
          <div>
            <span className="font-bold text-emerald-400 block uppercase">SCHEDULER AUTO BACKUP</span>
            <p className="text-[11px] text-slate-200">{autoBackupToast}</p>
          </div>
          <button 
            onClick={() => setAutoBackupToast(null)}
            className="p-1 hover:bg-[#222] rounded text-slate-400 hover:text-white ml-auto"
          >
            <X className="w-4 h-4" />
          </button>
        </div>
      )}

      {/* Global Realtime Email Gateway Toast */}
      <EmailDispatchToast
        onOpenModal={(emailId) => {
          setSelectedEmailGatewayId(emailId);
          setIsEmailGatewayModalOpen(true);
        }}
      />

      {/* Global Email Gateway Outbox Modal */}
      {isEmailGatewayModalOpen && (
        <EmailGatewayDrawerModal
          isOpen={isEmailGatewayModalOpen}
          onClose={() => {
            setIsEmailGatewayModalOpen(false);
            setSelectedEmailGatewayId(undefined);
          }}
          selectedEmailId={selectedEmailGatewayId}
        />
      )}
    </div>
  );
}