import React, { useState, useMemo } from "react";
import { 
  Employee, 
  DmsLetter, 
  DmsCategory, 
  InternalLetterType, 
  DmsLetterStatus,
  RecipientReadStatus,
  DmsComment,
  DmsReaction
} from "../types";
import { 
  FileText, 
  Plus, 
  Search, 
  Filter, 
  Send, 
  CheckCircle2, 
  XCircle, 
  Clock, 
  Eye, 
  Building2, 
  ShieldCheck, 
  Download, 
  Forward, 
  Users, 
  FileCheck, 
  Calendar, 
  Printer, 
  Layers, 
  Folder, 
  FolderOpen, 
  MessageSquare, 
  Smile, 
  ThumbsUp, 
  X, 
  UserCheck, 
  Sparkles,
  ChevronRight,
  ChevronDown,
  FolderTree,
  Grid,
  ListTree,
  Bookmark,
  Tag
} from "lucide-react";

interface DmsModuleProps {
  currentUser: Employee;
  letters: DmsLetter[];
  onUpdateLetters: React.Dispatch<React.SetStateAction<DmsLetter[]>>;
}

interface FolderTreeNode {
  name: string;
  fullPath: string;
  children: FolderTreeNode[];
  docCount: number;
}

function FolderTreeNodeItem({
  node,
  depth = 0,
  selectedFolder,
  onSelectFolder,
  expandedPaths,
  toggleExpandFolder
}: {
  key?: React.Key;
  node: FolderTreeNode;
  depth?: number;
  selectedFolder: string | null;
  onSelectFolder: (path: string) => void;
  expandedPaths: Record<string, boolean>;
  toggleExpandFolder: (path: string) => void;
}) {
  const hasChildren = node.children && node.children.length > 0;
  const isExpanded = expandedPaths[node.fullPath] ?? (depth < 2);
  const isSelected = selectedFolder === node.fullPath;

  return (
    <div className="select-none font-mono">
      <div
        className={`flex items-center justify-between py-1.5 px-2 rounded-lg text-xs transition-all ${
          isSelected
            ? "bg-indigo-600 text-white font-bold shadow-md shadow-indigo-500/30 border border-indigo-400"
            : "hover:bg-[#1e293b] text-slate-300 border border-transparent"
        }`}
        style={{ paddingLeft: `${depth * 16 + 8}px` }}
      >
        <div className="flex items-center gap-1.5 min-w-0 flex-1">
          {hasChildren ? (
            <button
              type="button"
              onClick={(e) => {
                e.stopPropagation();
                toggleExpandFolder(node.fullPath);
              }}
              className="p-0.5 hover:bg-white/10 rounded text-slate-400 hover:text-white shrink-0 cursor-pointer"
            >
              {isExpanded ? (
                <ChevronDown className="w-4 h-4 text-indigo-400" />
              ) : (
                <ChevronRight className="w-4 h-4 text-slate-400" />
              )}
            </button>
          ) : (
            <span className="w-4 shrink-0 inline-block" />
          )}

          <div
            onClick={() => onSelectFolder(isSelected ? "" : node.fullPath)}
            className="flex items-center gap-2 min-w-0 flex-1 py-0.5 cursor-pointer"
          >
            {isExpanded || isSelected ? (
              <FolderOpen className={`w-4 h-4 shrink-0 ${isSelected ? "text-yellow-300" : "text-amber-400"}`} />
            ) : (
              <Folder className="w-4 h-4 shrink-0 text-amber-500/80" />
            )}
            <span className="truncate text-xs tracking-tight">{node.name}</span>
          </div>
        </div>

        <span
          onClick={() => onSelectFolder(isSelected ? "" : node.fullPath)}
          className={`px-1.5 py-0.5 text-[10px] font-bold rounded shrink-0 ml-2 cursor-pointer ${
            isSelected
              ? "bg-black/40 text-yellow-300"
              : "bg-[#081026] text-slate-400 border border-[#1e293b]"
          }`}
        >
          {node.docCount} Dok
        </span>
      </div>

      {hasChildren && isExpanded && (
        <div className="mt-0.5 space-y-0.5 border-l border-[#1e293b]/60 ml-3">
          {node.children.map((child) => (
            <FolderTreeNodeItem
              key={child.fullPath}
              node={child}
              depth={depth + 1}
              selectedFolder={selectedFolder}
              onSelectFolder={onSelectFolder}
              expandedPaths={expandedPaths}
              toggleExpandFolder={toggleExpandFolder}
            />
          ))}
        </div>
      )}
    </div>
  );
}

export default function DmsModule({
  currentUser,
  letters,
  onUpdateLetters
}: DmsModuleProps) {
  // Tab States: 'all' | 'inbound' | 'outbound' | 'internal' | 'disposition' | 'jobdesc' | 'sop'
  const [activeTab, setActiveTab] = useState<"all" | "inbound" | "outbound" | "internal" | "disposition" | "jobdesc" | "sop">("all");

  // Selected Folder Filter & View Modes
  const [selectedFolder, setSelectedFolder] = useState<string | null>(null);
  const [folderExplorerMode, setFolderExplorerMode] = useState<"tree" | "grid">("tree");
  const [expandedPaths, setExpandedPaths] = useState<Record<string, boolean>>({});

  // Search & Filter States
  const [searchQuery, setSearchQuery] = useState("");
  const [searchFieldMode, setSearchFieldMode] = useState<"ALL" | "NAME" | "TYPE" | "TAGS">("ALL");
  const [selectedTagFilter, setSelectedTagFilter] = useState<string | null>(null);
  const [subtypeFilter, setSubtypeFilter] = useState<string>("ALL");
  const [statusFilter, setStatusFilter] = useState<string>("ALL");
  const [tagsInput, setTagsInput] = useState<string>("");

  // Create Modal State
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
  const [category, setCategory] = useState<DmsCategory>("Surat Internal");
  const [internalSubtype, setInternalSubtype] = useState<InternalLetterType>("Surat Perintah Tugas");
  
  // Division Code & Name Mapping
  const [divisionCode, setDivisionCode] = useState<string>("DEV");
  const [divisionName, setDivisionName] = useState<string>("Developer / IT");

  // Common Header State
  const [senderName, setSenderName] = useState<string>(currentUser.name);
  const [senderPosition, setSenderPosition] = useState<string>(currentUser.position);
  const [senderExternalOrg, setSenderExternalOrg] = useState<string>("");
  const [targetRecipient, setTargetRecipient] = useState<string>("Seluruh Jajaran Direksi");
  const [subject, setSubject] = useState<string>("");
  const [letterDate, setLetterDate] = useState<string>(new Date().toISOString().split("T")[0]);
  const [urgency, setUrgency] = useState<"Biasa" | "Penting" | "Sangat Rahasia/Urgent">("Penting");
  const [conceptContent, setConceptContent] = useState<string>("");
  const [attachmentName, setAttachmentName] = useState<string>("");
  const [customFolderInput, setCustomFolderInput] = useState<string>("");

  // Specific Form States for Subtypes
  const [sptLocation, setSptLocation] = useState("");
  const [sptDuration, setSptDuration] = useState("");
  const [sptObjective, setSptObjective] = useState("");
  const [sptPersonnel, setSptPersonnel] = useState("");

  const [exitReason, setExitReason] = useState("");
  const [exitTime, setExitTime] = useState("10:00 WIB");
  const [exitReturnTime, setExitReturnTime] = useState("13:00 WIB");

  const [overtimeType, setOvertimeType] = useState<"Pribadi" | "Kelompok">("Kelompok");
  const [overtimeDate, setOvertimeDate] = useState(new Date().toISOString().split("T")[0]);
  const [overtimeStart, setOvertimeStart] = useState("17:00");
  const [overtimeEnd, setOvertimeEnd] = useState("21:00");
  const [overtimeTask, setOvertimeTask] = useState("");
  const [overtimePersonnel, setOvertimePersonnel] = useState("");

  const [skNumber, setSkNumber] = useState(`SK-DIR-MEDIAN-${new Date().getFullYear()}/001`);
  const [skMenimbang, setSkMenimbang] = useState("Bahwa untuk meningkatkan efisiensi operasional dan ketaatan regulasi...");
  const [skMengingat, setSkMengingat] = useState("1. UU No. 40 Tahun 2007 tentang Perseroan Terbatas\n2. Anggaran Dasar Perusahaan");
  const [skMemutuskan, setSkMemutuskan] = useState("PERTAMA: Menetapkan penyesuaian struktur wewenang...\nKEDUA: Keputusan ini berlaku sejak tanggal ditetapkan.");

  const [spdDestination, setSpdDestination] = useState("");
  const [spdStartDate, setSpdStartDate] = useState(new Date().toISOString().split("T")[0]);
  const [spdEndDate, setSpdEndDate] = useState(new Date().toISOString().split("T")[0]);
  const [spdTransport, setSpdTransport] = useState("Pesawat Terbang & Sewa Mobil");
  const [spdPersonnel, setSpdPersonnel] = useState("");
  const [spdCostTransport, setSpdCostTransport] = useState("0");
  const [spdCostAccom, setSpdCostAccom] = useState("0");
  const [spdCostAllowance, setSpdCostAllowance] = useState("0");
  const [spdCostOther, setSpdCostOther] = useState("0");

  // Viewing / Detail Modal State
  const [viewingLetter, setViewingLetter] = useState<DmsLetter | null>(null);

  // Comment & Emoji Reaction Input State
  const [newCommentText, setNewCommentText] = useState("");
  const [selectedEmoji, setSelectedEmoji] = useState("👍");

  // Disposition Modal State (for CEO / Executive)
  const [isDispositionModalOpen, setIsDispositionModalOpen] = useState(false);
  const [dispositionLetter, setDispositionLetter] = useState<DmsLetter | null>(null);
  const [dispositionNotes, setDispositionNotes] = useState("");
  const [instructionType, setInstructionType] = useState<"Untuk Ditindaklanjuti" | "Untuk Diketahui" | "Mohon Pertimbangan" | "Selesaikan Segera">("Untuk Ditindaklanjuti");
  const [forwardedDivisions, setForwardedDivisions] = useState<string[]>(["Developer", "Operasional"]);
  const [isCcAllDirectors, setIsCcAllDirectors] = useState(true);

  // Satpam Sign-off Modal
  const [isSatpamModalOpen, setIsSatpamModalOpen] = useState(false);
  const [satpamLetter, setSatpamLetter] = useState<DmsLetter | null>(null);
  const [satpamName, setSatpamName] = useState(currentUser.name);

  // Toast Notification
  const [toastMsg, setToastMsg] = useState<string | null>(null);

  const showToast = (msg: string) => {
    setToastMsg(msg);
    setTimeout(() => setToastMsg(null), 4000);
  };

  const formatIDR = (val: number) => {
    return new Intl.NumberFormat("id-ID", {
      style: "currency",
      currency: "IDR",
      maximumFractionDigits: 0
    }).format(val);
  };

  // Helper: Division Code auto generator
  const generateLetterNumber = (cat: DmsCategory, sub: InternalLetterType, divCode: string) => {
    const month = String(new Date().getMonth() + 1).padStart(2, "0");
    const year = new Date().getFullYear();
    const count = letters.length + 1;
    const seq = String(count).padStart(3, "0");

    if (cat === "Job Description (Jobdesc)") {
      return `JOBDESC/${divCode}-${seq}/${year}`;
    }
    if (cat === "Standar Operasional Prosedur (SOP)") {
      return `SOP-${divCode}-MEDIAN/${year}/${seq}`;
    }
    if (cat === "Surat Masuk") {
      return `${seq}/IN/${senderExternalOrg ? senderExternalOrg.substring(0, 10).toUpperCase().replace(/[^A-Z]/g, "") : "EXT"}/${month}/${year}`;
    }
    if (cat === "Surat Keluar") {
      return `${seq}/OUT/${divCode}-MEDIAN/${month}/${year}`;
    }

    let subCode = "INT";
    if (sub === "Surat Perintah Tugas") subCode = "SPT";
    if (sub === "Surat Izin Keluar Kantor") subCode = "SIK";
    if (sub === "Surat Perintah Lembur") subCode = "SPL";
    if (sub === "Surat Keputusan Direksi") subCode = "SKD";
    if (sub === "Surat Perjalanan Dinas") subCode = "SPD";

    return `${seq}/${subCode}/${divCode}-MEDIAN/${month}/${year}`;
  };

  // Submission handler for new letter / document
  const handleCreateLetter = (e: React.FormEvent) => {
    e.preventDefault();
    if (!subject.trim()) {
      alert("Masukkan Perihal / Subjek Surat!");
      return;
    }

    const generatedNo = generateLetterNumber(category, internalSubtype, divisionCode);

    const initialReadLogs: RecipientReadStatus[] = [
      { userId: "emp-ceo-01", userName: "Prof. Dr. Ir. H. Bambang Soemantri", position: "Direktur Utama", status: "Belum Dibaca" },
      { userId: "emp-cto-01", userName: "Ir. Rahmat Hidayat, M.T.", position: "CTO", status: "Belum Dibaca" },
      { userId: "emp-cfo-01", userName: "Hendra Wijaya, S.E., Ak., M.M.", position: "CFO", status: "Belum Dibaca" },
      { userId: "emp-coo-01", userName: "Dr. Eng. Agus Setiawan, M.Sc.", position: "COO", status: "Belum Dibaca" },
      { userId: "emp-chr-01", userName: "Siti Rahmawati, S.Psi., M.M.", position: "CHR", status: "Belum Dibaca" }
    ];

    const transportVal = parseInt(spdCostTransport.replace(/[^0-9]/g, "")) || 0;
    const accomVal = parseInt(spdCostAccom.replace(/[^0-9]/g, "")) || 0;
    const allowanceVal = parseInt(spdCostAllowance.replace(/[^0-9]/g, "")) || 0;
    const otherVal = parseInt(spdCostOther.replace(/[^0-9]/g, "")) || 0;
    const totalTravelVal = transportVal + accomVal + allowanceVal + otherVal;

    let defaultFolder = "";
    if (category === "Job Description (Jobdesc)") {
      defaultFolder = customFolderInput.trim() || `/Folder Job Description (Jobdesc) Karyawan/${divisionName}`;
    } else if (category === "Standar Operasional Prosedur (SOP)") {
      defaultFolder = customFolderInput.trim() || `/Folder SOP Perusahaan/${divisionName}`;
    } else if (customFolderInput.trim()) {
      defaultFolder = customFolderInput.trim();
    }

    const parsedTags = tagsInput.trim()
      ? tagsInput.split(",").map(t => t.trim().replace(/^#/, "")).filter(Boolean)
      : (category === "Job Description (Jobdesc)" ? ["Jobdesc", divisionCode] : category === "Standar Operasional Prosedur (SOP)" ? ["SOP", divisionCode] : [divisionCode]);

    const newLetter: DmsLetter = {
      id: `dms-${Date.now()}`,
      letterNumber: generatedNo,
      category,
      internalSubtype: category === "Surat Internal" ? internalSubtype : undefined,
      divisionCode,
      divisionName,
      tags: parsedTags,
      senderName,
      senderPosition,
      senderExternalOrg: category === "Surat Masuk" ? senderExternalOrg : undefined,
      targetRecipient,
      subject,
      letterDate,
      urgency,
      conceptContent: conceptContent || `Dokumen ${category} ${subject} dibuat oleh ${senderName}`,
      attachmentName: attachmentName.trim() || undefined,
      folderPath: defaultFolder || undefined,
      status: category === "Surat Masuk" ? "Diteruskan/Disposisi" : "Disetujui",
      readLogs: initialReadLogs,
      comments: [],
      reactions: [],
      createdAt: new Date().toISOString()
    };

    if (category === "Surat Internal") {
      if (internalSubtype === "Surat Perintah Tugas") {
        newLetter.sptDetails = {
          taskLocation: sptLocation || "Kantor HQ & Field Site",
          taskDuration: sptDuration || "1 Hari",
          taskObjective: sptObjective || subject,
          assignedPersonnel: sptPersonnel ? sptPersonnel.split(",").map(p => p.trim()) : [currentUser.name]
        };
      } else if (internalSubtype === "Surat Izin Keluar Kantor") {
        newLetter.exitPermitDetails = {
          reason: exitReason || subject,
          exitTime,
          estimatedReturnTime: exitReturnTime,
          satpamStatus: "Belum Verifikasi"
        };
      } else if (internalSubtype === "Surat Perintah Lembur") {
        newLetter.overtimeDetails = {
          overtimeType,
          overtimeDate,
          startHour: overtimeStart,
          endHour: overtimeEnd,
          overtimeTask: overtimeTask || subject,
          overtimePersonnel: overtimePersonnel ? overtimePersonnel.split(",").map(p => p.trim()) : [currentUser.name]
        };
      } else if (internalSubtype === "Surat Keputusan Direksi") {
        newLetter.skDireksiDetails = {
          skNumber,
          menimbang: skMenimbang.split("\n").filter(Boolean),
          mengingat: skMengingat.split("\n").filter(Boolean),
          memutuskan: skMemutuskan.split("\n").filter(Boolean)
        };
      } else if (internalSubtype === "Surat Perjalanan Dinas") {
        newLetter.spdDetails = {
          destinationCity: spdDestination || "Surabaya",
          startDate: spdStartDate,
          endDate: spdEndDate,
          transportMode: spdTransport,
          personnelNames: spdPersonnel ? spdPersonnel.split(",").map(p => p.trim()) : [currentUser.name],
          costBreakdown: {
            transportCost: transportVal,
            accommodationCost: accomVal,
            dailyAllowance: allowanceVal,
            otherCost: otherVal,
            totalCost: totalTravelVal
          }
        };
      }
    }

    onUpdateLetters(prev => [newLetter, ...prev]);
    setIsCreateModalOpen(false);
    showToast(`Dokumen ${generatedNo} berhasil dibuat & tersimpan di DMS!`);
  };

  // Approval Handler
  const handleApproveLetter = (letter: DmsLetter) => {
    onUpdateLetters(prev => prev.map(l => {
      if (l.id !== letter.id) return l;
      return {
        ...l,
        status: "Disetujui",
        approvalFlow: {
          approverName: currentUser.name,
          approverPosition: currentUser.position,
          approvedAt: new Date().toISOString().replace("T", " ").substring(0, 16),
          notes: "Disetujui. Siapkan dokumen dan teruskan ke unit kerja terkait."
        }
      };
    }));
    showToast(`Dokumen ${letter.letterNumber} berhasil DISETUJUI!`);
  };

  // Disposition / Forwarding by Direktur Utama
  const handleSaveDisposition = (e: React.FormEvent) => {
    e.preventDefault();
    if (!dispositionLetter) return;

    onUpdateLetters(prev => prev.map(l => {
      if (l.id !== dispositionLetter.id) return l;

      const updatedReadLogs = l.readLogs.map(rl => {
        if (rl.userId === currentUser.id || rl.userName.includes("Bambang")) {
          return {
            ...rl,
            status: "Sudah Dibaca" as const,
            readAt: new Date().toISOString().replace("T", " ").substring(0, 16),
            notes: `Disposisi dikirim ke: ${forwardedDivisions.join(", ")}`
          };
        }
        return rl;
      });

      return {
        ...l,
        status: "Diteruskan/Disposisi",
        dispositionInfo: {
          disposedBy: `${currentUser.name} (${currentUser.position})`,
          dispositionDate: new Date().toISOString().replace("T", " ").substring(0, 16),
          dispositionNotes,
          instructionType,
          forwardedToDivisions: forwardedDivisions,
          isCcAllDirectors
        },
        readLogs: updatedReadLogs
      };
    }));

    setIsDispositionModalOpen(false);
    showToast(`Surat ${dispositionLetter.letterNumber} berhasil DISPOSISI ke Direktur & Divisi!`);
  };

  // Satpam Verification for Exit Permit
  const handleVerifySatpam = (e: React.FormEvent) => {
    e.preventDefault();
    if (!satpamLetter) return;

    onUpdateLetters(prev => prev.map(l => {
      if (l.id !== satpamLetter.id) return l;
      if (!l.exitPermitDetails) return l;

      return {
        ...l,
        exitPermitDetails: {
          ...l.exitPermitDetails,
          satpamStatus: "Disetujui Satpam",
          satpamName: satpamName.trim() || "Sertu (Purn) Bambang Heroe (Danru Satpam)",
          satpamVerifiedAt: new Date().toISOString().replace("T", " ").substring(0, 16)
        }
      };
    }));

    setIsSatpamModalOpen(false);
    showToast(`Paraf Pos Satpam berhasil dicatat untuk ${satpamLetter.letterNumber}!`);
  };

  // Add Comment Handler
  const handleAddComment = (e: React.FormEvent) => {
    e.preventDefault();
    if (!viewingLetter || !newCommentText.trim()) return;

    const commentObj: DmsComment = {
      id: `comm-${Date.now()}`,
      userId: currentUser.id,
      userName: currentUser.name,
      userPosition: currentUser.position,
      text: newCommentText.trim(),
      emojiReaction: selectedEmoji,
      createdAt: new Date().toISOString().replace("T", " ").substring(0, 16)
    };

    onUpdateLetters(prev => prev.map(l => {
      if (l.id !== viewingLetter.id) return l;
      return {
        ...l,
        comments: [...(l.comments || []), commentObj]
      };
    }));

    setViewingLetter(prev => prev ? {
      ...prev,
      comments: [...(prev.comments || []), commentObj]
    } : null);

    setNewCommentText("");
    showToast("Komentar / masukan Anda berhasil ditambahkan!");
  };

  // Toggle Emoji Reaction Handler
  const handleToggleReaction = (emoji: string) => {
    if (!viewingLetter) return;

    onUpdateLetters(prev => prev.map(l => {
      if (l.id !== viewingLetter.id) return l;

      const existingReactions = l.reactions || [];
      const already = existingReactions.find(
        r => (r.userId === currentUser.id || r.userName === currentUser.name) && r.emoji === emoji
      );

      let updatedReactions: DmsReaction[];
      if (already) {
        updatedReactions = existingReactions.filter(r => r.id !== already.id);
      } else {
        updatedReactions = [
          ...existingReactions,
          {
            id: `react-${Date.now()}`,
            userId: currentUser.id,
            userName: currentUser.name,
            userPosition: currentUser.position,
            emoji,
            createdAt: new Date().toISOString().replace("T", " ").substring(0, 16)
          }
        ];
      }

      return { ...l, reactions: updatedReactions };
    }));

    setViewingLetter(prev => {
      if (!prev) return null;
      const existing = prev.reactions || [];
      const already = existing.find(
        r => (r.userId === currentUser.id || r.userName === currentUser.name) && r.emoji === emoji
      );
      let updated: DmsReaction[];
      if (already) {
        updated = existing.filter(r => r.id !== already.id);
      } else {
        updated = [
          ...existing,
          {
            id: `react-${Date.now()}`,
            userId: currentUser.id,
            userName: currentUser.name,
            userPosition: currentUser.position,
            emoji,
            createdAt: new Date().toISOString().replace("T", " ").substring(0, 16)
          }
        ];
      }
      return { ...prev, reactions: updated };
    });

    showToast(`Reaksi ${emoji} diperbarui!`);
  };

  // Mark Letter as Read by Current User
  const handleMarkAsRead = (letter: DmsLetter) => {
    onUpdateLetters(prev => prev.map(l => {
      if (l.id !== letter.id) return l;
      const updatedLogs = l.readLogs.map(rl => {
        if (rl.userId === currentUser.id || rl.userName.includes(currentUser.name.split(" ")[0])) {
          return {
            ...rl,
            status: "Sudah Dibaca" as const,
            readAt: new Date().toISOString().replace("T", " ").substring(0, 16)
          };
        }
        return rl;
      });
      return { ...l, readLogs: updatedLogs };
    }));
  };

  // Extract all unique tags with count
  const allAvailableTags = useMemo(() => {
    const tagMap = new Map<string, number>();
    letters.forEach(l => {
      l.tags?.forEach(t => {
        const norm = t.trim();
        if (norm) {
          tagMap.set(norm, (tagMap.get(norm) || 0) + 1);
        }
      });
    });
    return Array.from(tagMap.entries())
      .map(([tag, count]) => ({ tag, count }))
      .sort((a, b) => b.count - a.count || a.tag.localeCompare(b.tag));
  }, [letters]);

  // Distinct Folders grouped for Jobdesc & SOP
  const jobdescFolders = useMemo(() => {
    const setF = new Set<string>();
    letters.filter(l => l.category === "Job Description (Jobdesc)").forEach(l => {
      if (l.folderPath) setF.add(l.folderPath);
    });
    return Array.from(setF);
  }, [letters]);

  const sopFolders = useMemo(() => {
    const setF = new Set<string>();
    letters.filter(l => l.category === "Standar Operasional Prosedur (SOP)").forEach(l => {
      if (l.folderPath) setF.add(l.folderPath);
    });
    return Array.from(setF);
  }, [letters]);

  // Build Folder Tree Hierarchy from all available letters or active tab category
  const folderTreeNodes = useMemo(() => {
    const rootMap: { [key: string]: any } = {};

    letters.forEach(l => {
      if (!l.folderPath) return;
      const cleanPath = l.folderPath.replace(/^\/+|\/+$/g, "");
      if (!cleanPath) return;
      const parts = cleanPath.split("/");

      let currentLevel = rootMap;
      let accumulatedPath = "";

      parts.forEach(part => {
        accumulatedPath += "/" + part;
        if (!currentLevel[part]) {
          currentLevel[part] = {
            __name: part,
            __fullPath: accumulatedPath,
            __count: 0,
            __children: {}
          };
        }
        currentLevel[part].__count += 1;
        currentLevel = currentLevel[part].__children;
      });
    });

    const convertToNodes = (obj: any): FolderTreeNode[] => {
      return Object.keys(obj).map(key => {
        const item = obj[key];
        const children = convertToNodes(item.__children);
        return {
          name: item.__name,
          fullPath: item.__fullPath,
          docCount: item.__count,
          children: children.sort((a, b) => a.name.localeCompare(b.name))
        };
      }).sort((a, b) => a.name.localeCompare(b.name));
    };

    return convertToNodes(rootMap);
  }, [letters]);

  const toggleExpandFolder = (path: string) => {
    setExpandedPaths(prev => ({ ...prev, [path]: !prev[path] }));
  };

  const expandAllFolders = () => {
    const map: Record<string, boolean> = {};
    const traverse = (nodes: FolderTreeNode[]) => {
      nodes.forEach(n => {
        map[n.fullPath] = true;
        if (n.children && n.children.length > 0) traverse(n.children);
      });
    };
    traverse(folderTreeNodes);
    setExpandedPaths(map);
  };

  const collapseAllFolders = () => {
    setExpandedPaths({});
  };

  // Filtered Letters (Name, Type, Tags, Tabs, Folders)
  const filteredLetters = useMemo(() => {
    return letters.filter(l => {
      const q = searchQuery.trim().toLowerCase();

      // Search Match logic
      const matchName = 
        l.letterNumber.toLowerCase().includes(q) ||
        l.subject.toLowerCase().includes(q) ||
        l.senderName.toLowerCase().includes(q) ||
        (l.targetRecipient && l.targetRecipient.toLowerCase().includes(q)) ||
        (l.attachmentName && l.attachmentName.toLowerCase().includes(q)) ||
        (l.folderPath && l.folderPath.toLowerCase().includes(q)) ||
        (l.senderExternalOrg && l.senderExternalOrg.toLowerCase().includes(q)) ||
        (l.conceptContent && l.conceptContent.toLowerCase().includes(q));

      const matchType = 
        l.category.toLowerCase().includes(q) ||
        (l.internalSubtype && l.internalSubtype.toLowerCase().includes(q)) ||
        l.divisionName.toLowerCase().includes(q) ||
        l.divisionCode.toLowerCase().includes(q);

      const matchTags = l.tags?.some(tag => tag.toLowerCase().includes(q)) || false;

      let matchQuery = true;
      if (q) {
        if (searchFieldMode === "NAME") {
          matchQuery = matchName;
        } else if (searchFieldMode === "TYPE") {
          matchQuery = matchType;
        } else if (searchFieldMode === "TAGS") {
          matchQuery = matchTags;
        } else {
          // "ALL"
          matchQuery = matchName || matchType || matchTags;
        }
      }

      // Filter by Selected Tag Chip
      const matchSelectedTag = selectedTagFilter
        ? l.tags?.some(t => t.toLowerCase() === selectedTagFilter.toLowerCase())
        : true;

      // Filter by Active Tab
      const matchTab = 
        activeTab === "all" ? true :
        activeTab === "inbound" ? l.category === "Surat Masuk" :
        activeTab === "outbound" ? l.category === "Surat Keluar" :
        activeTab === "internal" ? l.category === "Surat Internal" :
        activeTab === "disposition" ? l.status === "Diteruskan/Disposisi" || !!l.dispositionInfo :
        activeTab === "jobdesc" ? l.category === "Job Description (Jobdesc)" :
        activeTab === "sop" ? l.category === "Standar Operasional Prosedur (SOP)" : true;

      const matchFolder = selectedFolder 
        ? (l.folderPath === selectedFolder || (l.folderPath && l.folderPath.startsWith(selectedFolder + "/")))
        : true;
      const matchSubtype = subtypeFilter === "ALL" || l.internalSubtype === subtypeFilter;
      const matchStatus = statusFilter === "ALL" || l.status === statusFilter;

      return matchQuery && matchSelectedTag && matchTab && matchFolder && matchSubtype && matchStatus;
    });
  }, [letters, searchQuery, searchFieldMode, selectedTagFilter, activeTab, selectedFolder, subtypeFilter, statusFilter]);

  return (
    <div className="space-y-6 animate-in fade-in duration-300">
      
      {/* Toast Alert */}
      {toastMsg && (
        <div className="fixed bottom-5 right-5 z-50 bg-[#0f172a] border-2 border-indigo-400 text-indigo-100 px-5 py-3 rounded-lg shadow-2xl flex items-center gap-3 font-mono text-xs animate-bounce">
          <CheckCircle2 className="w-5 h-5 text-indigo-400 shrink-0" />
          <span>{toastMsg}</span>
        </div>
      )}

      {/* Executive Header Banner */}
      <div className="bg-gradient-to-r from-slate-900 via-[#0d1527] to-slate-900 border-2 border-indigo-500/40 p-5 sm:p-6 rounded-xl shadow-2xl relative overflow-hidden">
        <div className="absolute top-0 right-0 w-96 h-96 bg-indigo-500/10 rounded-full blur-3xl pointer-events-none"></div>
        <div className="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4 relative z-10">
          <div>
            <div className="flex flex-wrap items-center gap-2 mb-1">
              <span className="px-2.5 py-0.5 bg-indigo-500/20 text-indigo-300 border border-indigo-400/40 text-[10px] font-mono font-bold rounded uppercase tracking-wider">
                DOCUMENT MANAGEMENT SYSTEM (DMS)
              </span>
              <span className="px-2.5 py-0.5 bg-emerald-500/20 text-emerald-300 border border-emerald-400/40 text-[10px] font-mono font-bold rounded uppercase tracking-wider flex items-center gap-1">
                <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-ping"></span>
                KODE PENOMORAN DIVISI AKTIF
              </span>
            </div>
            <h2 className="text-xl sm:text-2xl font-black uppercase tracking-tight text-white flex items-center gap-2.5">
              <FileText className="w-6 h-6 text-indigo-400 shrink-0" />
              Sistem Dokumen, Jobdesc, SOP & Disposisi Direksi
            </h2>
            <p className="text-xs text-slate-300 max-w-3xl mt-1 leading-relaxed">
              Pengelolaan Arsip Surat Masuk, Surat Keluar, Surat Internal (SPT, SIK, SPL, SK, SPD), <strong>Folder Job Description (Jobdesc) Karyawan</strong>, serta <strong>Folder Standar Operasional Prosedur (SOP) Perusahaan tiap Divisi</strong>. Lengkap dengan Fitur Reaksi Emoticon & Komentar Pembaca.
            </p>
          </div>

          <button
            onClick={() => setIsCreateModalOpen(true)}
            className="w-full lg:w-auto px-5 py-2.5 bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-400 hover:to-purple-500 text-white font-black text-xs uppercase tracking-wider rounded-lg shadow-lg shadow-indigo-500/30 flex items-center justify-center gap-2 transition-all active:scale-95 shrink-0"
          >
            <Plus className="w-4 h-4" />
            Buat Dokumen / Jobdesc / SOP
          </button>
        </div>

        {/* Realtime Document Stats Bar */}
        <div className="grid grid-cols-2 sm:grid-cols-6 gap-3 mt-5 pt-4 border-t border-indigo-500/20 font-mono text-xs">
          <div className="bg-[#081026]/80 p-2.5 rounded-lg border border-indigo-500/30">
            <span className="text-[10px] uppercase text-slate-400 font-bold block">Total Arsip Dokumen:</span>
            <span className="text-base font-black text-indigo-300 block mt-0.5">{letters.length} Dokumen</span>
          </div>
          <div className="bg-[#081026]/80 p-2.5 rounded-lg border border-purple-500/30">
            <span className="text-[10px] uppercase text-slate-400 font-bold block">Jobdesc Karyawan:</span>
            <span className="text-base font-black text-purple-300 block mt-0.5">
              {letters.filter(l => l.category === "Job Description (Jobdesc)").length} Jobdesc
            </span>
          </div>
          <div className="bg-[#081026]/80 p-2.5 rounded-lg border border-amber-500/30">
            <span className="text-[10px] uppercase text-slate-400 font-bold block">SOP Perusahaan:</span>
            <span className="text-base font-black text-amber-300 block mt-0.5">
              {letters.filter(l => l.category === "Standar Operasional Prosedur (SOP)").length} SOP Divisi
            </span>
          </div>
          <div className="bg-[#081026]/80 p-2.5 rounded-lg border border-blue-500/30">
            <span className="text-[10px] uppercase text-slate-400 font-bold block">Surat Masuk & Keluar:</span>
            <span className="text-base font-black text-blue-400 block mt-0.5">
              {letters.filter(l => l.category === "Surat Masuk" || l.category === "Surat Keluar").length} Surat
            </span>
          </div>
          <div className="bg-[#081026]/80 p-2.5 rounded-lg border border-sky-500/30">
            <span className="text-[10px] uppercase text-slate-400 font-bold block">Surat Internal:</span>
            <span className="text-base font-black text-sky-400 block mt-0.5">
              {letters.filter(l => l.category === "Surat Internal").length} Dokumen
            </span>
          </div>
          <div className="bg-[#081026]/80 p-2.5 rounded-lg border border-emerald-500/30 col-span-2 sm:col-span-1">
            <span className="text-[10px] uppercase text-slate-400 font-bold block">Didisposisi Dirut:</span>
            <span className="text-base font-black text-emerald-400 block mt-0.5">
              {letters.filter(l => l.status === "Diteruskan/Disposisi").length} Disposisi
            </span>
          </div>
        </div>
      </div>

      {/* Main Navigation Tabs */}
      <div className="flex items-center gap-1.5 overflow-x-auto no-scrollbar border-b border-[#1e293b] pb-2">
        <button
          onClick={() => { setActiveTab("all"); setSelectedFolder(null); }}
          className={`px-3.5 py-2 rounded-lg text-xs font-bold uppercase tracking-wide transition-all whitespace-nowrap flex items-center gap-2 ${
            activeTab === "all"
              ? "bg-indigo-500 text-white shadow-md shadow-indigo-500/30"
              : "bg-[#0f172a] text-slate-300 hover:bg-[#1e293b] border border-[#1e293b]"
          }`}
        >
          <Layers className="w-4 h-4" />
          Semua Dokumen ({letters.length})
        </button>

        <button
          onClick={() => { setActiveTab("jobdesc"); setSelectedFolder(null); }}
          className={`px-3.5 py-2 rounded-lg text-xs font-bold uppercase tracking-wide transition-all whitespace-nowrap flex items-center gap-2 ${
            activeTab === "jobdesc"
              ? "bg-purple-600 text-white shadow-md shadow-purple-500/30"
              : "bg-[#0f172a] text-slate-300 hover:bg-[#1e293b] border border-[#1e293b]"
          }`}
        >
          <FolderOpen className="w-4 h-4 text-purple-300" />
          📁 Folder Jobdesc Karyawan ({letters.filter(l => l.category === "Job Description (Jobdesc)").length})
        </button>

        <button
          onClick={() => { setActiveTab("sop"); setSelectedFolder(null); }}
          className={`px-3.5 py-2 rounded-lg text-xs font-bold uppercase tracking-wide transition-all whitespace-nowrap flex items-center gap-2 ${
            activeTab === "sop"
              ? "bg-amber-600 text-white shadow-md shadow-amber-500/30"
              : "bg-[#0f172a] text-slate-300 hover:bg-[#1e293b] border border-[#1e293b]"
          }`}
        >
          <FolderOpen className="w-4 h-4 text-amber-300" />
          📁 Folder SOP Perusahaan ({letters.filter(l => l.category === "Standar Operasional Prosedur (SOP)").length})
        </button>

        <button
          onClick={() => { setActiveTab("internal"); setSelectedFolder(null); }}
          className={`px-3.5 py-2 rounded-lg text-xs font-bold uppercase tracking-wide transition-all whitespace-nowrap flex items-center gap-2 ${
            activeTab === "internal"
              ? "bg-indigo-500 text-white shadow-md shadow-indigo-500/30"
              : "bg-[#0f172a] text-slate-300 hover:bg-[#1e293b] border border-[#1e293b]"
          }`}
        >
          <FileCheck className="w-4 h-4 text-sky-400" />
          Surat Internal (SPT/SIK/SPL/SK/SPD)
        </button>

        <button
          onClick={() => { setActiveTab("inbound"); setSelectedFolder(null); }}
          className={`px-3.5 py-2 rounded-lg text-xs font-bold uppercase tracking-wide transition-all whitespace-nowrap flex items-center gap-2 ${
            activeTab === "inbound"
              ? "bg-indigo-500 text-white shadow-md shadow-indigo-500/30"
              : "bg-[#0f172a] text-slate-300 hover:bg-[#1e293b] border border-[#1e293b]"
          }`}
        >
          <Forward className="w-4 h-4 rotate-180 text-blue-400" />
          Surat Masuk
        </button>

        <button
          onClick={() => { setActiveTab("outbound"); setSelectedFolder(null); }}
          className={`px-3.5 py-2 rounded-lg text-xs font-bold uppercase tracking-wide transition-all whitespace-nowrap flex items-center gap-2 ${
            activeTab === "outbound"
              ? "bg-indigo-500 text-white shadow-md shadow-indigo-500/30"
              : "bg-[#0f172a] text-slate-300 hover:bg-[#1e293b] border border-[#1e293b]"
          }`}
        >
          <Send className="w-4 h-4 text-sky-400" />
          Surat Keluar
        </button>

        <button
          onClick={() => { setActiveTab("disposition"); setSelectedFolder(null); }}
          className={`px-3.5 py-2 rounded-lg text-xs font-bold uppercase tracking-wide transition-all whitespace-nowrap flex items-center gap-2 ${
            activeTab === "disposition"
              ? "bg-indigo-500 text-white shadow-md shadow-indigo-500/30"
              : "bg-[#0f172a] text-slate-300 hover:bg-[#1e293b] border border-[#1e293b]"
          }`}
        >
          <Users className="w-4 h-4 text-emerald-400" />
          Disposisi Dirut
        </button>
      </div>

      {/* Interactive Folder Explorer Section with Hierarchy Tree View */}
      {folderTreeNodes.length > 0 && (
        <div className="bg-[#0f172a] border-2 border-indigo-500/30 p-4 rounded-xl space-y-3 font-mono">
          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-[#1e293b] pb-3">
            <div className="flex items-center gap-2">
              <FolderTree className="w-4 h-4 text-indigo-400 shrink-0" />
              <h3 className="text-xs font-bold uppercase text-indigo-300">
                Penjelajah Direktori Folder (Hierarki Tree View):
              </h3>
            </div>

            <div className="flex flex-wrap items-center gap-2">
              {/* Toggle Tree vs Grid View */}
              <div className="flex items-center bg-[#081026] border border-[#1e293b] rounded-lg p-0.5">
                <button
                  type="button"
                  onClick={() => setFolderExplorerMode("tree")}
                  className={`px-2.5 py-1 text-[10px] font-bold rounded flex items-center gap-1.5 transition-all cursor-pointer ${
                    folderExplorerMode === "tree"
                      ? "bg-indigo-600 text-white shadow"
                      : "text-slate-400 hover:text-white"
                  }`}
                >
                  <ListTree className="w-3.5 h-3.5" />
                  Tree View 🌲
                </button>
                <button
                  type="button"
                  onClick={() => setFolderExplorerMode("grid")}
                  className={`px-2.5 py-1 text-[10px] font-bold rounded flex items-center gap-1.5 transition-all cursor-pointer ${
                    folderExplorerMode === "grid"
                      ? "bg-indigo-600 text-white shadow"
                      : "text-slate-400 hover:text-white"
                  }`}
                >
                  <Grid className="w-3.5 h-3.5" />
                  Grid View 🗂️
                </button>
              </div>

              {/* Expand/Collapse All buttons in Tree Mode */}
              {folderExplorerMode === "tree" && (
                <div className="flex items-center gap-1">
                  <button
                    type="button"
                    onClick={expandAllFolders}
                    className="text-[10px] bg-[#081026] hover:bg-[#1a2542] text-indigo-300 border border-[#1e293b] px-2 py-1 rounded font-bold cursor-pointer"
                  >
                    Buka Semua
                  </button>
                  <button
                    type="button"
                    onClick={collapseAllFolders}
                    className="text-[10px] bg-[#081026] hover:bg-[#1a2542] text-slate-400 hover:text-white border border-[#1e293b] px-2 py-1 rounded font-bold cursor-pointer"
                  >
                    Tutup Semua
                  </button>
                </div>
              )}

              {selectedFolder && (
                <button
                  type="button"
                  onClick={() => setSelectedFolder(null)}
                  className="text-[10px] text-rose-300 hover:bg-rose-500/30 bg-rose-500/20 px-2.5 py-1 rounded border border-rose-500/40 font-bold flex items-center gap-1 cursor-pointer"
                >
                  <X className="w-3 h-3" />
                  Reset Filter Folder
                </button>
              )}
            </div>
          </div>

          {/* Active Folder Breadcrumbs */}
          {selectedFolder && (
            <div className="bg-[#081026] border border-indigo-500/40 px-3 py-2 rounded-lg flex items-center justify-between gap-2 text-xs text-indigo-200">
              <div className="flex items-center gap-1.5 flex-wrap">
                <span className="text-slate-400 font-bold uppercase text-[10px]">Lokasi Folder Terpilih:</span>
                <span className="bg-indigo-950 text-indigo-300 font-bold px-2 py-0.5 rounded border border-indigo-800">
                  {selectedFolder}
                </span>
              </div>
              <button
                type="button"
                onClick={() => setSelectedFolder(null)}
                className="text-[10px] text-slate-400 hover:text-white underline shrink-0 cursor-pointer"
              >
                Tampilkan Semua
              </button>
            </div>
          )}

          {/* TREE VIEW DISPLAY */}
          {folderExplorerMode === "tree" && (
            <div className="bg-[#081026] border border-[#1e293b] p-3 rounded-xl max-h-80 overflow-y-auto space-y-1">
              {folderTreeNodes.map((node) => (
                <FolderTreeNodeItem
                  key={node.fullPath}
                  node={node}
                  depth={0}
                  selectedFolder={selectedFolder}
                  onSelectFolder={(path) => setSelectedFolder(path || null)}
                  expandedPaths={expandedPaths}
                  toggleExpandFolder={toggleExpandFolder}
                />
              ))}
            </div>
          )}

          {/* GRID VIEW DISPLAY */}
          {folderExplorerMode === "grid" && (
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2.5">
              {(activeTab === "jobdesc" ? jobdescFolders : activeTab === "sop" ? sopFolders : Array.from(new Set(letters.map(l => l.folderPath).filter(Boolean)))).map((fPath, idx) => {
                const countInFolder = letters.filter(l => l.folderPath === fPath || (l.folderPath && l.folderPath.startsWith(fPath + "/"))).length;
                const isSelected = selectedFolder === fPath;

                return (
                  <button
                    key={idx}
                    type="button"
                    onClick={() => setSelectedFolder(isSelected ? null : fPath)}
                    className={`p-3 rounded-lg border text-left flex items-start justify-between gap-2 transition-all cursor-pointer ${
                      isSelected
                        ? "bg-indigo-600 text-white border-indigo-400 shadow-lg shadow-indigo-500/30"
                        : "bg-[#081026] text-slate-300 border-[#1e293b] hover:border-indigo-500/50 hover:bg-[#0d1733]"
                    }`}
                  >
                    <div className="flex items-start gap-2.5 min-w-0">
                      <FolderOpen className={`w-5 h-5 shrink-0 mt-0.5 ${isSelected ? "text-yellow-300" : "text-amber-400"}`} />
                      <div className="truncate">
                        <span className="text-xs font-bold block truncate">
                          {fPath.split("/").pop() || fPath}
                        </span>
                        <span className="text-[9px] text-slate-400 block truncate mt-0.5">
                          {fPath}
                        </span>
                      </div>
                    </div>
                    <span className="px-2 py-0.5 bg-black/40 text-slate-200 text-[10px] font-bold rounded shrink-0">
                      {countInFolder} Dok
                    </span>
                  </button>
                );
              })}
            </div>
          )}
        </div>
      )}

      {/* Filter Options Bar */}
      <div className="bg-[#0f172a] border border-[#1e293b] p-4 rounded-xl space-y-3 font-mono">
        <div className="flex flex-col lg:flex-row items-stretch lg:items-center justify-between gap-3">
          
          {/* Main Search Input & Scope Selector */}
          <div className="flex flex-col sm:flex-row items-center gap-2 flex-1">
            <div className="relative w-full sm:w-auto sm:flex-1">
              <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
              <input
                type="text"
                value={searchQuery}
                onChange={e => setSearchQuery(e.target.value)}
                placeholder={
                  searchFieldMode === "NAME" ? "Cari nama, nomor, perihal, pengirim dokumen..." :
                  searchFieldMode === "TYPE" ? "Cari tipe dokumen (Surat Masuk, SOP, Jobdesc, SPT, SK)..." :
                  searchFieldMode === "TAGS" ? "Cari tag hash (mis. #Cloud, #SOP, #Audit, #HRD)..." :
                  "Cari dokumen berdasarkan Nama, Jenis/Tipe, atau Tags..."
                }
                className="w-full bg-[#081026] border border-[#1e293b] pl-9 pr-8 py-2 text-xs text-white placeholder-slate-500 rounded-lg focus:outline-none focus:border-indigo-400"
              />
              {searchQuery && (
                <button
                  onClick={() => setSearchQuery("")}
                  className="absolute right-2.5 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white p-0.5"
                  title="Bersihkan Pencarian"
                >
                  <X className="w-3.5 h-3.5" />
                </button>
              )}
            </div>

            {/* Scope / Field Selector */}
            <select
              value={searchFieldMode}
              onChange={e => setSearchFieldMode(e.target.value as any)}
              className="w-full sm:w-auto bg-[#081026] border border-[#1e293b] px-3 py-2 text-xs text-indigo-300 font-bold rounded-lg focus:outline-none focus:border-indigo-400 shrink-0"
            >
              <option value="ALL">🔍 Semua Bidang (Nama, Tipe, Tag)</option>
              <option value="NAME">📄 Nama / Judul Dokumen</option>
              <option value="TYPE">🏷️ Jenis / Tipe Dokumen</option>
              <option value="TAGS">🔖 Tags / Tag Label</option>
            </select>
          </div>

          {/* Subtype & Status Filter Dropdowns */}
          <div className="flex flex-wrap items-center gap-2 shrink-0">
            <select
              value={subtypeFilter}
              onChange={e => setSubtypeFilter(e.target.value)}
              className="bg-[#081026] border border-[#1e293b] px-3 py-2 text-xs text-slate-300 rounded-lg focus:outline-none focus:border-indigo-400"
            >
              <option value="ALL">Semua Jenis Sub-Dokumen</option>
              <option value="Surat Perintah Tugas">Surat Perintah Tugas (SPT)</option>
              <option value="Surat Izin Keluar Kantor">Surat Izin Keluar Kantor (Satpam)</option>
              <option value="Surat Perintah Lembur">Surat Perintah Lembur (SPL)</option>
              <option value="Surat Keputusan Direksi">Surat Keputusan Direksi (SK)</option>
              <option value="Surat Perjalanan Dinas">Surat Perjalanan Dinas (SPD)</option>
            </select>

            <select
              value={statusFilter}
              onChange={e => setStatusFilter(e.target.value)}
              className="bg-[#081026] border border-[#1e293b] px-3 py-2 text-xs text-slate-300 rounded-lg focus:outline-none focus:border-indigo-400"
            >
              <option value="ALL">Semua Status Dokumen</option>
              <option value="Menunggu Approval">Menunggu Approval</option>
              <option value="Disetujui">Disetujui (Approved)</option>
              <option value="Diteruskan/Disposisi">Diteruskan/Disposisi Dirut</option>
              <option value="Draft/Konsep">Draft / Konsep</option>
            </select>
          </div>
        </div>

        {/* Quick Tag Filter Cloud */}
        {allAvailableTags.length > 0 && (
          <div className="pt-2 border-t border-[#1e293b]/60 flex flex-wrap items-center gap-1.5 text-xs">
            <span className="text-[10px] uppercase font-bold text-slate-400 flex items-center gap-1 mr-1">
              <Tag className="w-3.5 h-3.5 text-indigo-400" /> Filter Tag Quick-Chip:
            </span>

            {selectedTagFilter && (
              <button
                onClick={() => setSelectedTagFilter(null)}
                className="px-2 py-0.5 bg-rose-500/20 text-rose-300 border border-rose-500/40 text-[10px] font-bold rounded-md flex items-center gap-1 hover:bg-rose-500/30 transition-all mr-1"
              >
                <X className="w-3 h-3" />
                Reset Tag (#{selectedTagFilter})
              </button>
            )}

            {allAvailableTags.map(({ tag, count }) => {
              const isSelected = selectedTagFilter?.toLowerCase() === tag.toLowerCase();
              return (
                <button
                  key={tag}
                  onClick={() => setSelectedTagFilter(isSelected ? null : tag)}
                  className={`px-2 py-0.5 text-[11px] font-mono rounded-md border transition-all flex items-center gap-1 ${
                    isSelected
                      ? "bg-indigo-600 text-white border-indigo-400 shadow-md shadow-indigo-500/30 font-bold"
                      : "bg-[#081026] text-indigo-300 border-[#1e293b] hover:border-indigo-500/50 hover:bg-[#131f3d]"
                  }`}
                >
                  <span>#{tag}</span>
                  <span className={`px-1 py-0.2 rounded text-[9px] ${isSelected ? "bg-white/20 text-white" : "bg-black/40 text-slate-400"}`}>
                    {count}
                  </span>
                </button>
              );
            })}
          </div>
        )}

        {/* Active Filter Results Counter Banner */}
        <div className="flex items-center justify-between text-[11px] text-slate-400 pt-1">
          <div className="flex items-center gap-2">
            <span>Menampilkan <strong className="text-indigo-300 font-bold">{filteredLetters.length}</strong> dari <strong className="text-slate-300">{letters.length}</strong> Dokumen</span>
            {(searchQuery || selectedTagFilter || subtypeFilter !== "ALL" || statusFilter !== "ALL" || selectedFolder) && (
              <span className="px-2 py-0.5 bg-indigo-500/20 text-indigo-300 border border-indigo-500/30 rounded text-[10px] font-bold">
                Filter Aktif
              </span>
            )}
          </div>

          {(searchQuery || selectedTagFilter || subtypeFilter !== "ALL" || statusFilter !== "ALL" || selectedFolder) && (
            <button
              onClick={() => {
                setSearchQuery("");
                setSelectedTagFilter(null);
                setSubtypeFilter("ALL");
                setStatusFilter("ALL");
                setSelectedFolder(null);
              }}
              className="text-[10px] text-slate-400 hover:text-rose-300 underline font-bold"
            >
              Reset Semua Filter
            </button>
          )}
        </div>
      </div>

      {/* Main Letters Grid List */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 font-sans">
        {filteredLetters.length === 0 ? (
          <div className="col-span-full bg-[#0f172a] border border-[#1e293b] p-12 rounded-xl text-center text-slate-400 font-mono text-xs">
            Tidak ada dokumen surat atau Jobdesc/SOP yang sesuai dengan kriteria pencarian.
          </div>
        ) : (
          filteredLetters.map(letter => {
            const reactionCount = letter.reactions?.length || 0;
            const commentCount = letter.comments?.length || 0;

            return (
              <div
                key={letter.id}
                className="bg-[#0f172a] border border-[#1e293b] hover:border-indigo-500/50 p-5 rounded-xl shadow-xl flex flex-col justify-between space-y-4 relative group transition-all"
              >
                <div>
                  {/* Header Badge */}
                  <div className="flex items-center justify-between gap-2 mb-2">
                    <span className={`px-2 py-0.5 rounded text-[10px] font-mono font-bold uppercase border ${
                      letter.category === "Job Description (Jobdesc)"
                        ? "bg-purple-500/20 text-purple-300 border-purple-500/40"
                        : letter.category === "Standar Operasional Prosedur (SOP)"
                        ? "bg-amber-500/20 text-amber-300 border-amber-500/40"
                        : letter.category === "Surat Masuk"
                        ? "bg-blue-500/20 text-blue-300 border-blue-500/40"
                        : letter.category === "Surat Keluar"
                        ? "bg-sky-500/20 text-sky-300 border-sky-500/40"
                        : "bg-indigo-500/20 text-indigo-300 border-indigo-500/40"
                    }`}>
                      {letter.category} {letter.internalSubtype ? `• ${letter.internalSubtype}` : ""}
                    </span>

                    <span className={`px-2 py-0.5 rounded text-[10px] font-mono font-bold ${
                      letter.urgency === "Sangat Rahasia/Urgent"
                        ? "bg-rose-500/20 text-rose-300 border border-rose-500/40 animate-pulse"
                        : letter.urgency === "Penting"
                        ? "bg-amber-500/20 text-amber-300 border border-amber-500/40"
                        : "bg-slate-800 text-slate-300"
                    }`}>
                      {letter.urgency}
                    </span>
                  </div>

                  {/* Letter Number & Subject */}
                  <h3 className="text-xs font-mono font-bold text-indigo-300 tracking-wide select-all">
                    {letter.letterNumber}
                  </h3>
                  <h4 className="text-sm font-bold text-white mt-1 line-clamp-2 leading-snug">
                    {letter.subject}
                  </h4>

                  {/* Tags List */}
                  {letter.tags && letter.tags.length > 0 && (
                    <div className="mt-2.5 flex flex-wrap items-center gap-1 font-mono">
                      {letter.tags.map((t, idx) => {
                        const isSelected = selectedTagFilter?.toLowerCase() === t.toLowerCase();
                        return (
                          <button
                            key={idx}
                            onClick={(e) => {
                              e.stopPropagation();
                              setSelectedTagFilter(isSelected ? null : t);
                            }}
                            className={`px-1.5 py-0.5 rounded text-[10px] border transition-all flex items-center gap-1 ${
                              isSelected
                                ? "bg-indigo-600 text-white border-indigo-400 font-bold"
                                : "bg-indigo-950/40 text-indigo-300 border-indigo-500/30 hover:bg-indigo-900/60"
                            }`}
                            title={`Filter dokumen dengan tag #${t}`}
                          >
                            <Tag className="w-2.5 h-2.5 text-indigo-400" />
                            <span>#{t}</span>
                          </button>
                        );
                      })}
                    </div>
                  )}

                  {/* Folder Path Banner */}
                  {letter.folderPath && (
                    <div className="mt-2 text-[10px] font-mono text-purple-300 bg-purple-950/40 border border-purple-500/30 px-2 py-1 rounded flex items-center gap-1 truncate">
                      <Folder className="w-3 h-3 text-purple-400 shrink-0" />
                      <span className="truncate">{letter.folderPath}</span>
                    </div>
                  )}

                  {/* Sender & Target info */}
                  <div className="mt-3 pt-3 border-t border-[#1e293b] space-y-1.5 font-mono text-[11px] text-slate-300">
                    <div className="flex items-center gap-1.5 text-slate-400">
                      <Building2 className="w-3.5 h-3.5 text-indigo-400 shrink-0" />
                      <span>Divisi: <strong className="text-slate-200">{letter.divisionName} ({letter.divisionCode})</strong></span>
                    </div>
                    <div className="flex items-center gap-1.5 text-slate-400">
                      <UserCheck className="w-3.5 h-3.5 text-sky-400 shrink-0" />
                      <span>Penyusun: <strong className="text-slate-200">{letter.senderName}</strong></span>
                    </div>
                    <div className="flex items-center gap-1.5 text-slate-400">
                      <Calendar className="w-3.5 h-3.5 text-purple-400 shrink-0" />
                      <span>Tanggal: {letter.letterDate}</span>
                    </div>
                  </div>

                  {/* Reactions & Comments Count Pills */}
                  <div className="mt-3 pt-2 flex items-center gap-2 font-mono text-[10px]">
                    <span className="px-2 py-0.5 bg-indigo-500/10 text-indigo-300 border border-indigo-500/30 rounded flex items-center gap-1">
                      <Smile className="w-3 h-3 text-amber-400" />
                      {reactionCount} Reaksi
                    </span>
                    <span className="px-2 py-0.5 bg-sky-500/10 text-sky-300 border border-sky-500/30 rounded flex items-center gap-1">
                      <MessageSquare className="w-3 h-3 text-sky-400" />
                      {commentCount} Komentar
                    </span>
                  </div>
                </div>

                {/* Card Footer Actions */}
                <div className="pt-3 border-t border-[#1e293b] flex items-center justify-between gap-2 font-mono">
                  <span className={`px-2 py-0.5 rounded text-[10px] font-bold ${
                    letter.status === "Disetujui" || letter.status === "Diteruskan/Disposisi"
                      ? "bg-emerald-500/20 text-emerald-300 border border-emerald-500/40"
                      : "bg-amber-500/20 text-amber-300 border border-amber-500/40"
                  }`}>
                    {letter.status}
                  </span>

                  <div className="flex items-center gap-1">
                    <button
                      onClick={() => {
                        setViewingLetter(letter);
                        handleMarkAsRead(letter);
                      }}
                      className="px-3 py-1.5 bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-400 hover:to-purple-500 text-white font-bold text-[10px] uppercase rounded transition-colors flex items-center gap-1 shadow-md shadow-indigo-500/20"
                    >
                      <Eye className="w-3 h-3" />
                      Buka Dokumen
                    </button>

                    {/* CEO Disposition Trigger */}
                    {(currentUser.position.toUpperCase().includes("CEO") || currentUser.position.toUpperCase().includes("DIREKTUR UTAMA") || currentUser.id === "emp-ceo-01") && (
                      <button
                        onClick={() => {
                          setDispositionLetter(letter);
                          setIsDispositionModalOpen(true);
                        }}
                        className="p-1.5 bg-emerald-600 hover:bg-emerald-500 text-white rounded transition-colors"
                        title="Disposisi / Teruskan Dokumen"
                      >
                        <Users className="w-3.5 h-3.5" />
                      </button>
                    )}
                  </div>
                </div>

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

      {/* ========================================================================= */}
      {/* MODAL 1: BUAT DOKUMEN / SURAT / JOBDESC / SOP                             */}
      {/* ========================================================================= */}
      {isCreateModalOpen && (
        <div className="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4 overflow-y-auto animate-in fade-in">
          <div className="bg-[#0f172a] border-2 border-indigo-500/40 rounded-xl max-w-4xl w-full p-6 space-y-5 text-slate-100 shadow-2xl my-8">
            <div className="flex items-center justify-between border-b border-[#1e293b] pb-3">
              <h3 className="text-lg font-black uppercase tracking-tight text-white flex items-center gap-2">
                <FileText className="w-5 h-5 text-indigo-400" />
                Buat Dokumen / Jobdesc / SOP Baru
              </h3>
              <button
                onClick={() => setIsCreateModalOpen(false)}
                className="px-2.5 py-1 bg-[#1e293b] hover:bg-rose-500 text-slate-300 hover:text-white font-mono text-xs rounded transition-all"
              >
                ✕ Tutup
              </button>
            </div>

            <form onSubmit={handleCreateLetter} className="space-y-4 font-mono text-xs">
              
              {/* Category Selection */}
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                <div>
                  <label className="text-[10px] uppercase font-bold text-slate-400 block mb-1">
                    Kategori Utama Dokumen:
                  </label>
                  <select
                    value={category}
                    onChange={e => setCategory(e.target.value as DmsCategory)}
                    className="w-full bg-[#081026] border border-[#1e293b] p-2 text-xs text-indigo-300 font-bold rounded-lg focus:outline-none focus:border-indigo-400"
                  >
                    <option value="Surat Internal">Surat Internal (SPT, SIK, SPL, SK, SPD)</option>
                    <option value="Job Description (Jobdesc)">Job Description (Jobdesc) Karyawan</option>
                    <option value="Standar Operasional Prosedur (SOP)">Standar Operasional Prosedur (SOP)</option>
                    <option value="Surat Masuk">Surat Masuk (Eksternal)</option>
                    <option value="Surat Keluar">Surat Keluar (Eksternal)</option>
                  </select>
                </div>

                {category === "Surat Internal" && (
                  <div>
                    <label className="text-[10px] uppercase font-bold text-slate-400 block mb-1">
                      Jenis Surat Internal (Subtype):
                    </label>
                    <select
                      value={internalSubtype}
                      onChange={e => setInternalSubtype(e.target.value as InternalLetterType)}
                      className="w-full bg-[#081026] border border-[#1e293b] p-2 text-xs text-purple-300 font-bold rounded-lg focus:outline-none focus:border-indigo-400"
                    >
                      <option value="Surat Perintah Tugas">Surat Perintah Tugas (SPT)</option>
                      <option value="Surat Izin Keluar Kantor">Surat Izin Keluar Kantor (Satpam)</option>
                      <option value="Surat Perintah Lembur">Surat Perintah Lembur (SPL)</option>
                      <option value="Surat Keputusan Direksi">Surat Keputusan Direksi (SK)</option>
                      <option value="Surat Perjalanan Dinas">Surat Perjalanan Dinas (SPD)</option>
                    </select>
                  </div>
                )}

                <div>
                  <label className="text-[10px] uppercase font-bold text-slate-400 block mb-1">
                    Divisi Pembuat / Pemilik:
                  </label>
                  <select
                    value={divisionCode}
                    onChange={e => {
                      const code = e.target.value;
                      setDivisionCode(code);
                      if (code === "DEV") setDivisionName("Developer / IT");
                      if (code === "GA") setDivisionName("General Affairs");
                      if (code === "FIN") setDivisionName("Keuangan & Accounting");
                      if (code === "HR") setDivisionName("Pengembangan SDM");
                      if (code === "OPS") setDivisionName("Operasional");
                      if (code === "DIR") setDivisionName("Direksi / Executive");
                    }}
                    className="w-full bg-[#081026] border border-[#1e293b] p-2 text-xs text-slate-200 rounded-lg"
                  >
                    <option value="DEV">DEV - Developer / IT</option>
                    <option value="GA">GA - General Affairs & Assets</option>
                    <option value="FIN">FIN - Keuangan & Accounting</option>
                    <option value="HR">HR - HR & Human Capital</option>
                    <option value="OPS">OPS - Operasional & Supply Chain</option>
                    <option value="DIR">DIR - Direksi / Governance</option>
                  </select>
                </div>
              </div>

              {/* Folder Path & Tags Input */}
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <div>
                  <label className="text-[10px] uppercase font-bold text-slate-400 block mb-1">
                    Folder Direktori Dokumen (Opsional Custom Folder):
                  </label>
                  <input
                    type="text"
                    value={customFolderInput}
                    onChange={e => setCustomFolderInput(e.target.value)}
                    placeholder={
                      category === "Job Description (Jobdesc)"
                        ? `/Folder Job Description (Jobdesc) Karyawan/${divisionName}`
                        : category === "Standar Operasional Prosedur (SOP)"
                        ? `/Folder SOP Perusahaan/${divisionName}`
                        : `/Folder Dokumen/${divisionName}`
                    }
                    className="w-full bg-[#081026] border border-[#1e293b] p-2 text-xs text-purple-300 rounded-lg"
                  />
                </div>

                <div>
                  <label className="text-[10px] uppercase font-bold text-slate-400 block mb-1">
                    Tag / Label Dokumen (Pisahkan dengan Koma):
                  </label>
                  <input
                    type="text"
                    value={tagsInput}
                    onChange={e => setTagsInput(e.target.value)}
                    placeholder="e.g. SOP, IT, Cloud, Security, Audit"
                    className="w-full bg-[#081026] border border-[#1e293b] p-2 text-xs text-indigo-300 rounded-lg placeholder-slate-500"
                  />
                </div>
              </div>

              {/* Subject & Recipient */}
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <div>
                  <label className="text-[10px] uppercase font-bold text-slate-400 block mb-1">
                    Judul Dokumen / Perihal Surat:
                  </label>
                  <input
                    type="text"
                    value={subject}
                    onChange={e => setSubject(e.target.value)}
                    placeholder="e.g. Job Description & Matriks Tugas Lead Developer / SOP Cloud Security"
                    className="w-full bg-[#081026] border border-[#1e293b] p-2 text-xs text-white rounded-lg"
                    required
                  />
                </div>
                <div>
                  <label className="text-[10px] uppercase font-bold text-slate-400 block mb-1">
                    Target Penerima / Ditujukan Kepada:
                  </label>
                  <input
                    type="text"
                    value={targetRecipient}
                    onChange={e => setTargetRecipient(e.target.value)}
                    placeholder="e.g. Seluruh Karyawan Divisi IT / Anggota Direksi"
                    className="w-full bg-[#081026] border border-[#1e293b] p-2 text-xs text-white rounded-lg"
                  />
                </div>
              </div>

              {/* Concept Content Editor / Body */}
              <div>
                <label className="text-[10px] uppercase font-bold text-slate-400 block mb-1">
                  Naskah Lengkap / Uraian Tugas & Prosedur (Rich Document Text):
                </label>
                <textarea
                  rows={6}
                  value={conceptContent}
                  onChange={e => setConceptContent(e.target.value)}
                  placeholder="Tuliskan draf teks uraian tugas jobdesc atau instruksi SOP secara detail disini..."
                  className="w-full bg-[#081026] border border-[#1e293b] p-3 text-xs text-slate-200 rounded-lg focus:outline-none focus:border-indigo-400 leading-relaxed font-sans"
                />
              </div>

              {/* Submit Buttons */}
              <div className="flex items-center justify-end gap-3 pt-3 border-t border-[#1e293b]">
                <button
                  type="button"
                  onClick={() => setIsCreateModalOpen(false)}
                  className="px-4 py-2 bg-[#1e293b] hover:bg-slate-700 text-slate-300 font-bold rounded-lg"
                >
                  Batal
                </button>
                <button
                  type="submit"
                  className="px-5 py-2 bg-indigo-500 hover:bg-indigo-400 text-white font-black uppercase rounded-lg shadow-lg shadow-indigo-500/30 flex items-center gap-1.5"
                >
                  <Send className="w-4 h-4" />
                  Simpan & Terbitkan Dokumen
                </button>
              </div>

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

      {/* ========================================================================= */}
      {/* MODAL 2: DETAIL VIEW DOKUMEN + TOMBOL TUTUP + REAKSI EMOJI & KOMENTAR     */}
      {/* ========================================================================= */}
      {viewingLetter && (
        <div className="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4 overflow-y-auto animate-in fade-in">
          <div className="bg-[#0f172a] border-2 border-indigo-500/40 rounded-xl max-w-4xl w-full p-6 space-y-6 text-slate-100 shadow-2xl my-8">
            
            {/* Top Header Toolbar with Prominent Close Button */}
            <div className="flex items-center justify-between border-b border-[#1e293b] pb-3">
              <div className="flex items-center gap-2">
                <span className="px-2.5 py-0.5 bg-indigo-500/20 text-indigo-300 border border-indigo-400/40 text-[10px] font-mono font-bold rounded">
                  {viewingLetter.category}
                </span>
                <span className="text-sm font-mono font-bold text-white">
                  {viewingLetter.letterNumber}
                </span>
              </div>
              
              <div className="flex items-center gap-2">
                <button
                  onClick={() => window.print()}
                  className="px-3 py-1.5 bg-[#1e293b] hover:bg-slate-700 text-slate-300 font-mono text-xs rounded-lg flex items-center gap-1.5"
                >
                  <Printer className="w-3.5 h-3.5" />
                  Cetak Dokumen
                </button>

                {/* REQUIREMENT 1: TOMBOL TUTUP DOKUMEN */}
                <button
                  onClick={() => setViewingLetter(null)}
                  className="px-3.5 py-1.5 bg-rose-500/20 text-rose-300 border border-rose-500/40 hover:bg-rose-500 hover:text-white font-mono text-xs font-bold rounded-lg flex items-center gap-1.5 transition-all active:scale-95"
                  title="Tutup Dokumen"
                >
                  <X className="w-4 h-4" />
                  Tutup Dokumen
                </button>
              </div>
            </div>

            {/* Official Document Viewer Content */}
            <div className="bg-white text-slate-900 p-8 rounded-lg shadow-2xl font-serif space-y-4">
              <div className="border-b-4 border-double border-slate-900 pb-3 text-center">
                <h1 className="text-xl font-bold uppercase tracking-wider text-slate-900">
                  PT MEDIAN NUSANTARA TECHNOLOGY
                </h1>
                <p className="text-xs font-sans text-slate-600">
                  Gedung Cyber Executive HQ Lt. 12, Jl. HR Rasuna Said, Jakarta Selatan | Telp: (021) 5599-8800
                </p>
              </div>

              {/* Title, Folder & Tags Info */}
              <div className="text-center space-y-1">
                <h2 className="text-base font-bold uppercase underline tracking-wide">
                  {viewingLetter.subject}
                </h2>
                <p className="text-xs font-mono text-slate-600">
                  Nomor: {viewingLetter.letterNumber}
                </p>
                {viewingLetter.folderPath && (
                  <p className="text-[10px] font-mono text-purple-700 font-bold">
                    Direktori Folder: {viewingLetter.folderPath}
                  </p>
                )}
                {viewingLetter.tags && viewingLetter.tags.length > 0 && (
                  <div className="flex flex-wrap items-center justify-center gap-1.5 pt-1">
                    {viewingLetter.tags.map((t, idx) => (
                      <span key={idx} className="px-2 py-0.5 bg-slate-100 text-indigo-700 border border-indigo-200 text-[10px] font-mono font-bold rounded">
                        #{t}
                      </span>
                    ))}
                  </div>
                )}
              </div>

              {/* Body Content */}
              <div className="text-sm leading-relaxed whitespace-pre-line space-y-3 font-sans pt-2 text-slate-800">
                <p>{viewingLetter.conceptContent}</p>

                {viewingLetter.sptDetails && (
                  <div className="my-4 p-4 bg-slate-50 border border-slate-300 rounded font-mono text-xs space-y-1">
                    <div><strong>LOKASI TUGAS:</strong> {viewingLetter.sptDetails.taskLocation}</div>
                    <div><strong>DURASI TUGAS:</strong> {viewingLetter.sptDetails.taskDuration}</div>
                    <div><strong>PERSONEL DITUGASKAN:</strong> {viewingLetter.sptDetails.assignedPersonnel.join(", ")}</div>
                  </div>
                )}

                {viewingLetter.spdDetails && (
                  <div className="my-4 p-4 bg-emerald-50 border border-emerald-300 rounded font-mono text-xs space-y-2 text-slate-800">
                    <div className="font-bold border-b pb-1">RINCIAN BIAYA PERJALANAN DINAS:</div>
                    <div className="grid grid-cols-2 gap-2 text-xs">
                      <div>Tiket & Transport: {formatIDR(viewingLetter.spdDetails.costBreakdown.transportCost)}</div>
                      <div>Akomodasi Hotel: {formatIDR(viewingLetter.spdDetails.costBreakdown.accommodationCost)}</div>
                      <div>Uang Saku & Makan: {formatIDR(viewingLetter.spdDetails.costBreakdown.dailyAllowance)}</div>
                      <div className="font-bold text-emerald-800">Total Biaya SPD: {formatIDR(viewingLetter.spdDetails.costBreakdown.totalCost)}</div>
                    </div>
                  </div>
                )}
              </div>

              {/* Signatures Footer */}
              <div className="pt-8 grid grid-cols-2 text-center text-xs font-sans border-t border-slate-200">
                <div>
                  <p className="text-slate-500">Pemohon / Penyusun,</p>
                  <div className="h-16 flex items-center justify-center font-bold text-slate-800">
                    {viewingLetter.senderName}
                  </div>
                  <p className="font-bold">{viewingLetter.senderPosition}</p>
                </div>
                <div>
                  <p className="text-slate-500">Mengetahui / Disetujui,</p>
                  <div className="h-16 flex items-center justify-center font-bold text-indigo-800 italic">
                    [Tanda Tangan Digital Approved]
                  </div>
                  <p className="font-bold">{viewingLetter.approvalFlow?.approverName || "Direktur Utama"}</p>
                </div>
              </div>
            </div>

            {/* Read Status Log Tracker */}
            <div className="bg-[#081026] p-4 rounded-xl border border-[#1e293b] space-y-3 font-mono">
              <h4 className="text-xs font-bold uppercase text-indigo-300 flex items-center gap-2">
                <Users className="w-4 h-4 text-emerald-400" />
                Matriks Pelacakan Status Dibaca Jajaran Direksi:
              </h4>

              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
                {viewingLetter.readLogs.map((rl, idx) => (
                  <div
                    key={idx}
                    className="bg-[#0f172a] p-2.5 rounded border border-[#1e293b] flex items-center justify-between text-[11px]"
                  >
                    <div>
                      <span className="font-bold text-white block">{rl.userName}</span>
                      <span className="text-[9px] text-slate-400 block">{rl.position}</span>
                      {rl.readAt && <span className="text-[9px] text-sky-400 block mt-0.5">Dibaca: {rl.readAt}</span>}
                    </div>

                    <span className={`px-2 py-0.5 rounded text-[9px] font-bold ${
                      rl.status === "Sudah Dibaca" || rl.status === "Ditindaklanjuti"
                        ? "bg-emerald-500/20 text-emerald-300 border border-emerald-500/40"
                        : "bg-slate-800 text-slate-400"
                    }`}>
                      {rl.status}
                    </span>
                  </div>
                ))}
              </div>
            </div>

            {/* REQUIREMENT 4: FIELD REAKSI EMOJI & KOMENTAR PEMBACA */}
            <div className="bg-[#081026] p-4 rounded-xl border border-purple-500/30 space-y-4 font-mono">
              
              {/* Emoji Reactions Section */}
              <div>
                <h4 className="text-xs font-bold uppercase text-purple-300 flex items-center gap-2 mb-2.5">
                  <Smile className="w-4 h-4 text-amber-400" />
                  Reaksi Emoticon Pembaca Dokumen:
                </h4>

                <div className="flex flex-wrap items-center gap-2">
                  {[
                    { emoji: "👍", label: "Setuju" },
                    { emoji: "✅", label: "Well Noted" },
                    { emoji: "💡", label: "Ide Bagus" },
                    { emoji: "🔥", label: "Prioritas" },
                    { emoji: "👏", label: "Apresiasi" },
                    { emoji: "❤️", label: "Support" }
                  ].map(item => {
                    const count = (viewingLetter.reactions || []).filter(r => r.emoji === item.emoji).length;
                    const hasUserReacted = (viewingLetter.reactions || []).some(
                      r => (r.userId === currentUser.id || r.userName === currentUser.name) && r.emoji === item.emoji
                    );

                    return (
                      <button
                        key={item.emoji}
                        onClick={() => handleToggleReaction(item.emoji)}
                        className={`px-3 py-1.5 rounded-lg border text-xs flex items-center gap-1.5 transition-all ${
                          hasUserReacted
                            ? "bg-amber-500/20 text-amber-300 border-amber-400 shadow-md font-bold"
                            : "bg-[#0f172a] text-slate-300 border-[#1e293b] hover:border-slate-500"
                        }`}
                      >
                        <span className="text-sm">{item.emoji}</span>
                        <span>{item.label}</span>
                        <span className="px-1.5 py-0.2 bg-black/40 text-[10px] rounded font-bold">{count}</span>
                      </button>
                    );
                  })}
                </div>
              </div>

              {/* Reader Comments Section */}
              <div className="pt-3 border-t border-[#1e293b] space-y-3">
                <h4 className="text-xs font-bold uppercase text-sky-300 flex items-center gap-2">
                  <MessageSquare className="w-4 h-4 text-sky-400" />
                  Komentar & Catatan Pembaca Dokumen ({viewingLetter.comments?.length || 0}):
                </h4>

                {/* Comment Input Box */}
                <form onSubmit={handleAddComment} className="space-y-2">
                  <div className="flex items-center gap-2">
                    <span className="text-[10px] text-slate-400">Pilih Emoticon:</span>
                    {["👍", "✅", "💡", "🔥", "👏", "❤️", "📝"].map(e => (
                      <button
                        type="button"
                        key={e}
                        onClick={() => setSelectedEmoji(e)}
                        className={`px-2 py-0.5 rounded text-xs border ${
                          selectedEmoji === e ? "bg-purple-600 border-purple-400 text-white font-bold" : "bg-[#0f172a] border-[#1e293b] text-slate-300"
                        }`}
                      >
                        {e}
                      </button>
                    ))}
                  </div>

                  <div className="flex gap-2">
                    <input
                      type="text"
                      value={newCommentText}
                      onChange={e => setNewCommentText(e.target.value)}
                      placeholder="Tuliskan masukan atau komentar Anda sebagai pembaca dokumen ini..."
                      className="flex-1 bg-[#0f172a] border border-[#1e293b] p-2.5 text-xs text-white rounded-lg focus:outline-none focus:border-indigo-400"
                      required
                    />
                    <button
                      type="submit"
                      className="px-4 py-2 bg-sky-500 hover:bg-sky-400 text-slate-950 font-black uppercase text-xs rounded-lg flex items-center gap-1 shadow-md shadow-sky-500/20"
                    >
                      <Send className="w-3.5 h-3.5" />
                      Kirim
                    </button>
                  </div>
                </form>

                {/* Existing Comments List */}
                <div className="space-y-2 max-h-48 overflow-y-auto pt-2">
                  {(!viewingLetter.comments || viewingLetter.comments.length === 0) ? (
                    <p className="text-[10px] text-slate-500 italic">Belum ada komentar pembaca pada dokumen ini. Jadilah yang pertama memberikan catatan!</p>
                  ) : (
                    viewingLetter.comments.map(c => (
                      <div key={c.id} className="bg-[#0f172a] p-3 rounded-lg border border-[#1e293b] space-y-1">
                        <div className="flex items-center justify-between text-[10px]">
                          <span className="font-bold text-sky-300 flex items-center gap-1.5">
                            {c.emojiReaction && <span>{c.emojiReaction}</span>}
                            {c.userName} ({c.userPosition})
                          </span>
                          <span className="text-[9px] text-slate-500">{c.createdAt}</span>
                        </div>
                        <p className="text-xs text-slate-200 font-sans leading-relaxed">{c.text}</p>
                      </div>
                    ))
                  )}
                </div>

              </div>

            </div>

            {/* Action Buttons & Bottom Close Button */}
            <div className="flex items-center justify-between gap-3 pt-3 border-t border-[#1e293b] font-mono">
              <div>
                {viewingLetter.status === "Menunggu Approval" && (
                  <button
                    onClick={() => {
                      handleApproveLetter(viewingLetter);
                      setViewingLetter(null);
                    }}
                    className="px-5 py-2 bg-emerald-500 hover:bg-emerald-400 text-black font-black text-xs uppercase rounded-lg flex items-center gap-1.5 shadow-lg shadow-emerald-500/20"
                  >
                    <CheckCircle2 className="w-4 h-4" />
                    Setujui Dokumen Ini
                  </button>
                )}
              </div>

              {/* REQUIREMENT 1: TOMBOL TUTUP DOKUMEN AT BOTTOM */}
              <button
                onClick={() => setViewingLetter(null)}
                className="px-5 py-2 bg-[#1e293b] hover:bg-slate-700 text-slate-300 font-bold rounded-lg text-xs font-mono flex items-center gap-1.5 transition-all"
              >
                <X className="w-4 h-4 text-slate-400" />
                Tutup Dokumen
              </button>
            </div>

          </div>
        </div>
      )}

      {/* ========================================================================= */}
      {/* MODAL 3: DISPOSISI DIREKTUR UTAMA                                         */}
      {/* ========================================================================= */}
      {isDispositionModalOpen && dispositionLetter && (
        <div className="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4 overflow-y-auto animate-in fade-in">
          <div className="bg-[#0f172a] border-2 border-emerald-500/40 rounded-xl max-w-2xl w-full p-6 space-y-5 text-slate-100 shadow-2xl">
            
            <div className="flex items-center justify-between border-b border-[#1e293b] pb-3 font-mono">
              <h3 className="text-base font-black uppercase text-white tracking-wide flex items-center gap-2">
                <Users className="w-5 h-5 text-emerald-400" />
                Lembar Disposisi Direktur Utama
              </h3>
              <button
                onClick={() => setIsDispositionModalOpen(false)}
                className="text-slate-400 hover:text-white font-mono font-bold text-sm"
              >
                ✕
              </button>
            </div>

            <form onSubmit={handleSaveDisposition} className="space-y-4 font-mono text-xs">
              <div className="bg-[#081026] p-3 rounded border border-emerald-500/20 text-[11px] space-y-1">
                <div>No. Dokumen: <strong className="text-sky-300">{dispositionLetter.letterNumber}</strong></div>
                <div>Perihal: <strong className="text-white">{dispositionLetter.subject}</strong></div>
              </div>

              <div>
                <label className="text-[10px] uppercase font-bold text-slate-400 block mb-1">
                  Sifat Instruksi Disposisi:
                </label>
                <select
                  value={instructionType}
                  onChange={e => setInstructionType(e.target.value as any)}
                  className="w-full bg-[#081026] border border-[#1e293b] p-2 text-xs text-emerald-300 font-bold rounded"
                >
                  <option value="Untuk Ditindaklanjuti">Untuk Ditindaklanjuti Segera</option>
                  <option value="Untuk Diketahui">Untuk Diketahui (Informasi)</option>
                  <option value="Mohon Pertimbangan">Mohon Pertimbangan & Masukan</option>
                  <option value="Selesaikan Segera">Selesaikan Segera Hari Ini</option>
                </select>
              </div>

              <div>
                <label className="text-[10px] uppercase font-bold text-slate-400 block mb-1">
                  Catatan Instruksi Direktur Utama:
                </label>
                <textarea
                  rows={3}
                  value={dispositionNotes}
                  onChange={e => setDispositionNotes(e.target.value)}
                  placeholder="e.g. Kepada CTO dan CHR, tolong persiapkan tim teknis audit dan koordinasi jadwal dengan Kominfo."
                  className="w-full bg-[#081026] border border-[#1e293b] p-2.5 text-xs text-white rounded focus:border-emerald-400"
                  required
                />
              </div>

              <div className="flex items-center justify-end gap-3 pt-3 border-t border-[#1e293b]">
                <button
                  type="button"
                  onClick={() => setIsDispositionModalOpen(false)}
                  className="px-4 py-2 bg-[#1e293b] text-slate-300 font-bold rounded"
                >
                  Batal
                </button>
                <button
                  type="submit"
                  className="px-5 py-2 bg-emerald-500 hover:bg-emerald-400 text-black font-black uppercase rounded shadow-lg shadow-emerald-500/20 flex items-center gap-1.5"
                >
                  <Send className="w-4 h-4" />
                  Kirim Disposisi Dirut
                </button>
              </div>
            </form>

          </div>
        </div>
      )}

    </div>
  );
}