import React, { useState, useRef, useMemo } from "react";
import {
  LayoutDashboard, FolderOpen, Folder, FileText, Search, Upload, CheckCircle2,
  XCircle, Clock, PenTool, Users, Settings, Plus, ChevronRight, ChevronDown,
  History, Share2, Trash2, Shield, MoreVertical, X, Download, AlertCircle,
  UserCircle2, LayoutGrid
} from "lucide-react";

// ---------- mock data ----------
let uid = 1000;
const nid = () => `id_${uid++}`;

const ROLES = ["admin", "editor", "viewer"];
const STATUS_META = {
  draft:    { label: "Draft",             color: "#8A8F98", bg: "#8A8F98" },
  pending:  { label: "Pending approval",  color: "#B98900", bg: "#B98900" },
  approved: { label: "Approved",          color: "#1A8754", bg: "#1A8754" },
  rejected: { label: "Rejected",          color: "#C93A3A", bg: "#C93A3A" },
  signed:   { label: "Signed",            color: "#2F5FCC", bg: "#2F5FCC" },
};

const initialFolders = [
  { id: "f_hr", name: "HR" },
  { id: "f_fin", name: "Finance" },
  { id: "f_legal", name: "Legal" },
  { id: "f_ops", name: "Operations" },
];

const initialDocs = [
  { id: nid(), name: "Employee Handbook 2026.pdf", folderId: "f_hr", version: 3, status: "approved", owner: "Riya Sharma", modified: "2026-07-08", size: "1.2 MB",
    history: [{ v: 1, date: "2026-05-01", user: "Riya Sharma", note: "Initial draft" }, { v: 2, date: "2026-06-10", user: "Riya Sharma", note: "Added leave policy" }, { v: 3, date: "2026-07-08", user: "Riya Sharma", note: "Legal review changes" }],
    approvals: [{ by: "Admin", status: "approved", date: "2026-07-08", comment: "Looks good." }], signers: [] },
  { id: nid(), name: "Q2 Budget Report.xlsx", folderId: "f_fin", version: 1, status: "pending", owner: "Karan Mehta", modified: "2026-07-10", size: "480 KB",
    history: [{ v: 1, date: "2026-07-10", user: "Karan Mehta", note: "Initial submission" }], approvals: [], signers: [] },
  { id: nid(), name: "Vendor NDA - Acme Corp.pdf", folderId: "f_legal", version: 2, status: "signed", owner: "Legal Team", modified: "2026-07-05", size: "220 KB",
    history: [{ v: 1, date: "2026-06-20", user: "Legal Team", note: "Draft" }, { v: 2, date: "2026-07-05", user: "Legal Team", note: "Signed copy" }],
    approvals: [{ by: "Admin", status: "approved", date: "2026-07-04", comment: "" }], signers: [{ name: "Amit Verma", date: "2026-07-05" }] },
  { id: nid(), name: "Warehouse SOP Draft.docx", folderId: "f_ops", version: 1, status: "draft", owner: "Sana Iqbal", modified: "2026-07-11", size: "310 KB",
    history: [{ v: 1, date: "2026-07-11", user: "Sana Iqbal", note: "First draft" }], approvals: [], signers: [] },
  { id: nid(), name: "Reimbursement Policy.pdf", folderId: "f_fin", version: 4, status: "rejected", owner: "Karan Mehta", modified: "2026-07-09", size: "150 KB",
    history: [{ v: 4, date: "2026-07-09", user: "Karan Mehta", note: "Revised limits" }],
    approvals: [{ by: "Admin", status: "rejected", date: "2026-07-09", comment: "Limits need finance sign-off first." }], signers: [] },
];

const initialUsers = [
  { id: nid(), name: "You", email: "you@company.com", role: "admin" },
  { id: nid(), name: "Riya Sharma", email: "riya@company.com", role: "editor" },
  { id: nid(), name: "Karan Mehta", email: "karan@company.com", role: "editor" },
  { id: nid(), name: "Sana Iqbal", email: "sana@company.com", role: "viewer" },
];

const NAV = [
  { id: "dashboard", label: "Dashboard", icon: LayoutDashboard },
  { id: "documents", label: "Documents", icon: FolderOpen },
  { id: "approvals", label: "Approvals", icon: CheckCircle2 },
  { id: "signatures", label: "Shared & e-sign", icon: PenTool },
  { id: "users", label: "Users & roles", icon: Users },
];

export default function EDMS() {
  const [role, setRole] = useState("admin");
  const [folders, setFolders] = useState(initialFolders);
  const [docs, setDocs] = useState(initialDocs);
  const [users, setUsers] = useState(initialUsers);
  const [activeNav, setActiveNav] = useState("documents");
  const [activeFolder, setActiveFolder] = useState("all");
  const [search, setSearch] = useState("");
  const [selectedDoc, setSelectedDoc] = useState(null);
  const [showAddFolder, setShowAddFolder] = useState(false);
  const [newFolderName, setNewFolderName] = useState("");
  const [dragOver, setDragOver] = useState(false);
  const [signName, setSignName] = useState("");
  const [rejectComment, setRejectComment] = useState("");

  const canEdit = role === "admin" || role === "editor";
  const canApprove = role === "admin";

  const filteredDocs = useMemo(() => {
    return docs.filter(d => {
      const inFolder = activeFolder === "all" || d.folderId === activeFolder;
      const matches = d.name.toLowerCase().includes(search.toLowerCase()) || d.owner.toLowerCase().includes(search.toLowerCase());
      return inFolder && matches;
    });
  }, [docs, activeFolder, search]);

  const pendingApprovals = docs.filter(d => d.status === "pending");
  const sharedForSign = docs.filter(d => d.status === "signed" || d.status === "approved");

  const addFolder = () => {
    const name = newFolderName.trim() || "Untitled folder";
    setFolders(f => [...f, { id: `f_${nid()}`, name }]);
    setNewFolderName("");
    setShowAddFolder(false);
  };

  const handleDrop = (e) => {
    e.preventDefault();
    setDragOver(false);
    if (!canEdit) return;
    const files = Array.from(e.dataTransfer.files || []);
    const targetFolder = activeFolder === "all" ? (folders[0]?.id || "f_hr") : activeFolder;
    const newDocs = files.length
      ? files.map(f => makeDoc(f.name, targetFolder))
      : [makeDoc(`New Document ${docs.length + 1}.pdf`, targetFolder)];
    setDocs(d => [...newDocs, ...d]);
  };

  const makeDoc = (name, folderId) => ({
    id: nid(), name, folderId, version: 1, status: "draft", owner: "You",
    modified: new Date().toISOString().slice(0, 10), size: "—",
    history: [{ v: 1, date: new Date().toISOString().slice(0, 10), user: "You", note: "Uploaded" }],
    approvals: [], signers: [],
  });

  const updateDoc = (id, patch) => setDocs(prev => prev.map(d => (d.id === id ? { ...d, ...patch } : d)));

  const submitForApproval = (doc) => updateDoc(doc.id, { status: "pending" });

  const decide = (doc, decision, comment) => {
    updateDoc(doc.id, {
      status: decision,
      approvals: [...doc.approvals, { by: "Admin", status: decision, date: new Date().toISOString().slice(0, 10), comment }],
    });
    setRejectComment("");
    setSelectedDoc(prev => prev ? { ...prev, status: decision } : prev);
  };

  const newVersion = (doc) => {
    const v = doc.version + 1;
    updateDoc(doc.id, {
      version: v, status: "draft",
      history: [...doc.history, { v, date: new Date().toISOString().slice(0, 10), user: "You", note: "New version uploaded" }],
      modified: new Date().toISOString().slice(0, 10),
    });
  };

  const signDoc = (doc) => {
    if (!signName.trim()) return;
    updateDoc(doc.id, {
      status: "signed",
      signers: [...doc.signers, { name: signName.trim(), date: new Date().toISOString().slice(0, 10) }],
    });
    setSignName("");
    setSelectedDoc(prev => prev ? { ...prev, status: "signed" } : prev);
  };

  const changeUserRole = (id, newRole) => setUsers(prev => prev.map(u => (u.id === id ? { ...u, role: newRole } : u)));

  return (
    <div className="h-screen w-full flex bg-[#F6F7F9] text-[#1B1F27] font-sans overflow-hidden text-[13px]">
      {/* SIDEBAR */}
      <aside className="w-[228px] shrink-0 border-r border-[#E4E6EB] bg-white flex flex-col">
        <div className="h-14 flex items-center gap-2 px-4 border-b border-[#E4E6EB]">
          <div className="w-7 h-7 rounded-lg bg-[#1E3A8A] flex items-center justify-center shrink-0">
            <FileText size={14} className="text-white" />
          </div>
          <div className="leading-tight">
            <div className="text-[12.5px] font-semibold">DocVault</div>
            <div className="text-[10px] text-[#8A8F98]">Document management</div>
          </div>
        </div>

        <nav className="p-2 space-y-0.5">
          {NAV.map(n => {
            const Icon = n.icon;
            const active = activeNav === n.id;
            const badge = n.id === "approvals" ? pendingApprovals.length : null;
            return (
              <button
                key={n.id}
                onClick={() => { setActiveNav(n.id); setSelectedDoc(null); }}
                className={`w-full flex items-center gap-2.5 px-2.5 py-2 rounded-lg transition-colors ${
                  active ? "bg-[#1E3A8A]/[0.08] text-[#1E3A8A] font-medium" : "text-[#4B5060] hover:bg-[#F1F2F5]"
                }`}
              >
                <Icon size={15} />
                <span className="flex-1 text-left">{n.label}</span>
                {!!badge && (
                  <span className="text-[10px] bg-[#B98900] text-white rounded-full w-4 h-4 flex items-center justify-center">{badge}</span>
                )}
              </button>
            );
          })}
        </nav>

        <div className="px-4 pt-3 pb-1 text-[10.5px] font-semibold text-[#8A8F98] uppercase tracking-wide">Folders</div>
        <div className="px-2 space-y-0.5 flex-1 overflow-y-auto">
          <button
            onClick={() => { setActiveNav("documents"); setActiveFolder("all"); }}
            className={`w-full flex items-center gap-2.5 px-2.5 py-1.5 rounded-lg ${activeFolder === "all" && activeNav === "documents" ? "bg-[#F1F2F5] font-medium" : "hover:bg-[#F1F2F5] text-[#4B5060]"}`}
          >
            <Folder size={14} />
            <span className="flex-1 text-left">All documents</span>
            <span className="text-[10.5px] text-[#8A8F98]">{docs.length}</span>
          </button>
          {folders.map(f => {
            const count = docs.filter(d => d.folderId === f.id).length;
            return (
              <button
                key={f.id}
                onClick={() => { setActiveNav("documents"); setActiveFolder(f.id); }}
                className={`w-full flex items-center gap-2.5 px-2.5 py-1.5 rounded-lg ${activeFolder === f.id && activeNav === "documents" ? "bg-[#F1F2F5] font-medium" : "hover:bg-[#F1F2F5] text-[#4B5060]"}`}
              >
                <Folder size={14} />
                <span className="flex-1 text-left truncate">{f.name}</span>
                <span className="text-[10.5px] text-[#8A8F98]">{count}</span>
              </button>
            );
          })}
          {canEdit && (
            <button
              onClick={() => setShowAddFolder(true)}
              className="w-full flex items-center gap-2.5 px-2.5 py-1.5 rounded-lg text-[#8A8F98] hover:text-[#1E3A8A] border border-dashed border-[#D8DAE0] mt-1"
            >
              <Plus size={14} /> <span>Add folder</span>
            </button>
          )}
        </div>

        <div className="p-3 border-t border-[#E4E6EB]">
          <div className="flex items-center gap-2 px-1">
            <UserCircle2 size={22} className="text-[#8A8F98]" />
            <div className="flex-1 min-w-0">
              <div className="text-[12px] font-medium truncate">You</div>
              <select
                value={role}
                onChange={(e) => setRole(e.target.value)}
                className="text-[10.5px] text-[#8A8F98] bg-transparent outline-none -ml-0.5"
              >
                {ROLES.map(r => <option key={r} value={r}>{r} view</option>)}
              </select>
            </div>
          </div>
        </div>
      </aside>

      {/* MAIN */}
      <main className="flex-1 flex flex-col min-w-0 overflow-hidden">
        {activeNav === "dashboard" && <Dashboard docs={docs} folders={folders} pendingApprovals={pendingApprovals} />}

        {activeNav === "documents" && (
          <DocumentsView
            docs={filteredDocs}
            folders={folders}
            activeFolder={activeFolder}
            search={search}
            setSearch={setSearch}
            dragOver={dragOver}
            setDragOver={setDragOver}
            handleDrop={handleDrop}
            canEdit={canEdit}
            onSelect={setSelectedDoc}
          />
        )}

        {activeNav === "approvals" && (
          <ApprovalsView
            pending={pendingApprovals}
            canApprove={canApprove}
            onSelect={setSelectedDoc}
            decide={decide}
          />
        )}

        {activeNav === "signatures" && (
          <SignaturesView docs={sharedForSign} onSelect={setSelectedDoc} />
        )}

        {activeNav === "users" && (
          <UsersView users={users} role={role} changeUserRole={changeUserRole} />
        )}
      </main>

      {/* DOCUMENT DETAIL DRAWER */}
      {selectedDoc && (
        <DocDrawer
          doc={docs.find(d => d.id === selectedDoc.id) || selectedDoc}
          folders={folders}
          canEdit={canEdit}
          canApprove={canApprove}
          onClose={() => setSelectedDoc(null)}
          submitForApproval={submitForApproval}
          decide={decide}
          newVersion={newVersion}
          signDoc={signDoc}
          signName={signName}
          setSignName={setSignName}
          rejectComment={rejectComment}
          setRejectComment={setRejectComment}
        />
      )}

      {/* ADD FOLDER MODAL */}
      {showAddFolder && (
        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50" onClick={() => setShowAddFolder(false)}>
          <div className="bg-white rounded-xl w-[320px] p-5 border border-[#E4E6EB]" onClick={e => e.stopPropagation()}>
            <h3 className="text-[13.5px] font-semibold mb-3">New folder</h3>
            <input
              autoFocus
              value={newFolderName}
              onChange={e => setNewFolderName(e.target.value)}
              onKeyDown={e => e.key === "Enter" && addFolder()}
              placeholder="Folder name"
              className="w-full border border-[#D8DAE0] rounded-lg px-3 py-2 text-[12.5px] outline-none focus:border-[#1E3A8A] mb-4"
            />
            <div className="flex justify-end gap-2">
              <button onClick={() => setShowAddFolder(false)} className="px-3 py-1.5 text-[12px] text-[#8A8F98]">Cancel</button>
              <button onClick={addFolder} className="px-3 py-1.5 text-[12px] font-medium bg-[#1E3A8A] text-white rounded-lg">Create</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ---------- status pill ----------
function StatusPill({ status }) {
  const m = STATUS_META[status];
  return (
    <span
      className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10.5px] font-medium"
      style={{ color: m.color, backgroundColor: `${m.bg}1A` }}
    >
      <span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: m.color }} />
      {m.label}
    </span>
  );
}

// ---------- dashboard ----------
function Dashboard({ docs, folders, pendingApprovals }) {
  const stats = [
    { label: "Total documents", value: docs.length, icon: FileText },
    { label: "Pending approvals", value: pendingApprovals.length, icon: Clock },
    { label: "Signed", value: docs.filter(d => d.status === "signed").length, icon: PenTool },
    { label: "Folders", value: folders.length, icon: Folder },
  ];
  return (
    <div className="flex-1 overflow-y-auto p-6">
      <h1 className="text-[16px] font-semibold mb-4">Dashboard</h1>
      <div className="grid grid-cols-4 gap-3 mb-6">
        {stats.map(s => {
          const Icon = s.icon;
          return (
            <div key={s.label} className="bg-white border border-[#E4E6EB] rounded-xl p-4">
              <Icon size={16} className="text-[#1E3A8A] mb-2" />
              <div className="text-[20px] font-semibold">{s.value}</div>
              <div className="text-[11px] text-[#8A8F98]">{s.label}</div>
            </div>
          );
        })}
      </div>
      <div className="bg-white border border-[#E4E6EB] rounded-xl p-4">
        <h2 className="text-[12.5px] font-semibold mb-3">Recent activity</h2>
        <div className="space-y-2">
          {docs.slice(0, 5).map(d => (
            <div key={d.id} className="flex items-center justify-between py-1.5 border-b border-[#F1F2F5] last:border-0">
              <div className="flex items-center gap-2 min-w-0">
                <FileText size={13} className="text-[#8A8F98] shrink-0" />
                <span className="truncate text-[12px]">{d.name}</span>
              </div>
              <div className="flex items-center gap-3 shrink-0">
                <span className="text-[11px] text-[#8A8F98]">{d.modified}</span>
                <StatusPill status={d.status} />
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ---------- documents view ----------
function DocumentsView({ docs, folders, activeFolder, search, setSearch, dragOver, setDragOver, handleDrop, canEdit, onSelect }) {
  const folderName = activeFolder === "all" ? "All documents" : folders.find(f => f.id === activeFolder)?.name;
  return (
    <>
      <header className="h-14 border-b border-[#E4E6EB] flex items-center justify-between px-6 shrink-0 bg-white">
        <div>
          <h1 className="text-[14px] font-semibold">{folderName}</h1>
          <p className="text-[11px] text-[#8A8F98]">{docs.length} documents</p>
        </div>
        <div className="flex items-center gap-2 bg-[#F1F2F5] rounded-lg px-3 py-1.5 w-[240px]">
          <Search size={13} className="text-[#8A8F98]" />
          <input
            value={search}
            onChange={e => setSearch(e.target.value)}
            placeholder="Search documents..."
            className="bg-transparent outline-none text-[12px] flex-1"
          />
        </div>
      </header>

      <div className="flex-1 overflow-y-auto p-6">
        {canEdit && (
          <div
            onDragOver={e => { e.preventDefault(); setDragOver(true); }}
            onDragLeave={() => setDragOver(false)}
            onDrop={handleDrop}
            className={`mb-5 border-2 border-dashed rounded-xl py-6 flex flex-col items-center justify-center gap-1.5 transition-colors ${
              dragOver ? "border-[#1E3A8A] bg-[#1E3A8A]/5" : "border-[#D8DAE0] bg-white"
            }`}
          >
            <Upload size={18} className="text-[#8A8F98]" />
            <span className="text-[12px] text-[#4B5060]">Drag & drop files here, or drop anywhere to add a sample document</span>
          </div>
        )}

        <div className="bg-white border border-[#E4E6EB] rounded-xl overflow-hidden">
          <div className="grid grid-cols-[1fr_120px_100px_140px_120px] px-4 py-2 bg-[#FAFAFB] text-[10.5px] font-semibold text-[#8A8F98] uppercase tracking-wide border-b border-[#E4E6EB]">
            <div>Name</div><div>Owner</div><div>Version</div><div>Modified</div><div>Status</div>
          </div>
          {docs.length === 0 && (
            <div className="py-14 text-center text-[12px] text-[#8A8F98]">No documents match here yet.</div>
          )}
          {docs.map(d => (
            <button
              key={d.id}
              onClick={() => onSelect(d)}
              className="w-full grid grid-cols-[1fr_120px_100px_140px_120px] px-4 py-2.5 items-center border-b border-[#F1F2F5] last:border-0 hover:bg-[#FAFAFB] text-left"
            >
              <div className="flex items-center gap-2 min-w-0">
                <FileText size={14} className="text-[#1E3A8A] shrink-0" />
                <span className="truncate text-[12.5px]">{d.name}</span>
              </div>
              <div className="text-[11.5px] text-[#4B5060] truncate">{d.owner}</div>
              <div className="text-[11.5px] text-[#4B5060]">v{d.version}</div>
              <div className="text-[11.5px] text-[#4B5060]">{d.modified}</div>
              <div><StatusPill status={d.status} /></div>
            </button>
          ))}
        </div>
      </div>
    </>
  );
}

// ---------- approvals view ----------
function ApprovalsView({ pending, canApprove, onSelect, decide }) {
  return (
    <>
      <header className="h-14 border-b border-[#E4E6EB] flex items-center px-6 shrink-0 bg-white">
        <div>
          <h1 className="text-[14px] font-semibold">Approvals</h1>
          <p className="text-[11px] text-[#8A8F98]">{pending.length} documents waiting for a decision</p>
        </div>
      </header>
      <div className="flex-1 overflow-y-auto p-6 space-y-3">
        {pending.length === 0 && (
          <div className="text-center text-[12px] text-[#8A8F98] py-16">Nothing pending approval right now.</div>
        )}
        {pending.map(d => (
          <div key={d.id} className="bg-white border border-[#E4E6EB] rounded-xl p-4 flex items-center justify-between">
            <button onClick={() => onSelect(d)} className="flex items-center gap-3 text-left min-w-0">
              <div className="w-9 h-9 rounded-lg bg-[#B98900]/10 flex items-center justify-center shrink-0">
                <Clock size={15} className="text-[#B98900]" />
              </div>
              <div className="min-w-0">
                <div className="text-[12.5px] font-medium truncate">{d.name}</div>
                <div className="text-[11px] text-[#8A8F98]">Submitted by {d.owner} · v{d.version}</div>
              </div>
            </button>
            {canApprove ? (
              <div className="flex items-center gap-2 shrink-0">
                <button onClick={() => decide(d, "rejected", "")} className="px-3 py-1.5 rounded-lg text-[11.5px] font-medium border border-[#E4E6EB] text-[#C93A3A] hover:bg-[#C93A3A]/5">Reject</button>
                <button onClick={() => decide(d, "approved", "")} className="px-3 py-1.5 rounded-lg text-[11.5px] font-medium bg-[#1A8754] text-white hover:bg-[#166B43]">Approve</button>
              </div>
            ) : (
              <span className="text-[11px] text-[#8A8F98]">Needs admin</span>
            )}
          </div>
        ))}
      </div>
    </>
  );
}

// ---------- signatures view ----------
function SignaturesView({ docs, onSelect }) {
  return (
    <>
      <header className="h-14 border-b border-[#E4E6EB] flex items-center px-6 shrink-0 bg-white">
        <div>
          <h1 className="text-[14px] font-semibold">Shared & e-sign</h1>
          <p className="text-[11px] text-[#8A8F98]">Approved documents ready to share or sign</p>
        </div>
      </header>
      <div className="flex-1 overflow-y-auto p-6 grid grid-cols-2 gap-3">
        {docs.map(d => (
          <button key={d.id} onClick={() => onSelect(d)} className="bg-white border border-[#E4E6EB] rounded-xl p-4 text-left hover:border-[#1E3A8A]/40">
            <div className="flex items-center justify-between mb-2">
              <FileText size={16} className="text-[#1E3A8A]" />
              <StatusPill status={d.status} />
            </div>
            <div className="text-[12.5px] font-medium truncate mb-1">{d.name}</div>
            <div className="text-[11px] text-[#8A8F98]">
              {d.signers.length > 0 ? `Signed by ${d.signers.map(s => s.name).join(", ")}` : "Not yet signed"}
            </div>
            <div className="flex items-center gap-1 mt-3 text-[11px] text-[#1E3A8A]">
              <Share2 size={12} /> Share link
            </div>
          </button>
        ))}
      </div>
    </>
  );
}

// ---------- users view ----------
function UsersView({ users, role, changeUserRole }) {
  return (
    <>
      <header className="h-14 border-b border-[#E4E6EB] flex items-center px-6 shrink-0 bg-white">
        <div>
          <h1 className="text-[14px] font-semibold">Users & roles</h1>
          <p className="text-[11px] text-[#8A8F98]">{users.length} people have access</p>
        </div>
      </header>
      <div className="flex-1 overflow-y-auto p-6">
        <div className="bg-white border border-[#E4E6EB] rounded-xl overflow-hidden">
          <div className="grid grid-cols-[1fr_1fr_140px] px-4 py-2 bg-[#FAFAFB] text-[10.5px] font-semibold text-[#8A8F98] uppercase tracking-wide border-b border-[#E4E6EB]">
            <div>Name</div><div>Email</div><div>Role</div>
          </div>
          {users.map(u => (
            <div key={u.id} className="grid grid-cols-[1fr_1fr_140px] px-4 py-2.5 items-center border-b border-[#F1F2F5] last:border-0">
              <div className="flex items-center gap-2 text-[12.5px]"><UserCircle2 size={16} className="text-[#8A8F98]" />{u.name}</div>
              <div className="text-[11.5px] text-[#4B5060]">{u.email}</div>
              <div>
                {role === "admin" ? (
                  <select
                    value={u.role}
                    onChange={e => changeUserRole(u.id, e.target.value)}
                    className="border border-[#D8DAE0] rounded-lg px-2 py-1 text-[11.5px] outline-none"
                  >
                    {ROLES.map(r => <option key={r} value={r}>{r}</option>)}
                  </select>
                ) : (
                  <span className="text-[11.5px] capitalize text-[#4B5060]"><Shield size={11} className="inline mr-1" />{u.role}</span>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

// ---------- document drawer ----------
function DocDrawer({ doc, folders, canEdit, canApprove, onClose, submitForApproval, decide, newVersion, signDoc, signName, setSignName, rejectComment, setRejectComment }) {
  const folder = folders.find(f => f.id === doc.folderId);
  return (
    <div className="fixed inset-0 z-40 flex justify-end">
      <div className="flex-1 bg-black/30" onClick={onClose} />
      <div className="w-[380px] bg-white h-full overflow-y-auto border-l border-[#E4E6EB]">
        <div className="h-14 border-b border-[#E4E6EB] flex items-center justify-between px-4 sticky top-0 bg-white">
          <span className="text-[12.5px] font-semibold">Document details</span>
          <button onClick={onClose} className="text-[#8A8F98] hover:text-[#1B1F27]"><X size={16} /></button>
        </div>

        <div className="p-4 space-y-5">
          <div>
            <div className="flex items-start gap-2 mb-1">
              <FileText size={16} className="text-[#1E3A8A] mt-0.5 shrink-0" />
              <h2 className="text-[13.5px] font-semibold leading-snug">{doc.name}</h2>
            </div>
            <div className="flex items-center gap-2 mt-2">
              <StatusPill status={doc.status} />
              <span className="text-[11px] text-[#8A8F98]">v{doc.version} · {folder?.name}</span>
            </div>
          </div>

          <div className="grid grid-cols-2 gap-2 text-[11.5px]">
            <div><div className="text-[#8A8F98]">Owner</div><div className="font-medium">{doc.owner}</div></div>
            <div><div className="text-[#8A8F98]">Modified</div><div className="font-medium">{doc.modified}</div></div>
            <div><div className="text-[#8A8F98]">Size</div><div className="font-medium">{doc.size}</div></div>
            <div><div className="text-[#8A8F98]">Folder</div><div className="font-medium">{folder?.name}</div></div>
          </div>

          {/* actions */}
          <div className="flex flex-wrap gap-2">
            <button className="px-3 py-1.5 rounded-lg text-[11.5px] font-medium border border-[#E4E6EB] flex items-center gap-1.5"><Download size={12} />Download</button>
            {canEdit && doc.status === "draft" && (
              <button onClick={() => submitForApproval(doc)} className="px-3 py-1.5 rounded-lg text-[11.5px] font-medium bg-[#1E3A8A] text-white flex items-center gap-1.5"><Clock size={12} />Submit for approval</button>
            )}
            {canEdit && (
              <button onClick={() => newVersion(doc)} className="px-3 py-1.5 rounded-lg text-[11.5px] font-medium border border-[#E4E6EB] flex items-center gap-1.5"><Upload size={12} />New version</button>
            )}
          </div>

          {/* approval action */}
          {canApprove && doc.status === "pending" && (
            <div className="border border-[#E4E6EB] rounded-lg p-3 space-y-2">
              <div className="text-[11.5px] font-semibold flex items-center gap-1.5"><AlertCircle size={13} className="text-[#B98900]" />Approval decision</div>
              <input
                value={rejectComment}
                onChange={e => setRejectComment(e.target.value)}
                placeholder="Optional comment"
                className="w-full border border-[#D8DAE0] rounded-lg px-2.5 py-1.5 text-[11.5px] outline-none"
              />
              <div className="flex gap-2">
                <button onClick={() => decide(doc, "rejected", rejectComment)} className="flex-1 px-3 py-1.5 rounded-lg text-[11.5px] font-medium border border-[#E4E6EB] text-[#C93A3A]">Reject</button>
                <button onClick={() => decide(doc, "approved", rejectComment)} className="flex-1 px-3 py-1.5 rounded-lg text-[11.5px] font-medium bg-[#1A8754] text-white">Approve</button>
              </div>
            </div>
          )}

          {/* e-sign */}
          {(doc.status === "approved" || doc.status === "signed") && (
            <div className="border border-[#E4E6EB] rounded-lg p-3 space-y-2">
              <div className="text-[11.5px] font-semibold flex items-center gap-1.5"><PenTool size={13} className="text-[#2F5FCC]" />E-signature</div>
              {doc.signers.length > 0 && (
                <div className="space-y-1">
                  {doc.signers.map((s, i) => (
                    <div key={i} className="text-[11.5px] text-[#4B5060]">✓ Signed by {s.name} on {s.date}</div>
                  ))}
                </div>
              )}
              <div className="flex gap-2">
                <input
                  value={signName}
                  onChange={e => setSignName(e.target.value)}
                  placeholder="Type full name to sign"
                  className="flex-1 border border-[#D8DAE0] rounded-lg px-2.5 py-1.5 text-[11.5px] outline-none"
                />
                <button onClick={() => signDoc(doc)} className="px-3 py-1.5 rounded-lg text-[11.5px] font-medium bg-[#2F5FCC] text-white">Sign</button>
              </div>
            </div>
          )}

          {/* version history */}
          <div>
            <div className="text-[11.5px] font-semibold flex items-center gap-1.5 mb-2"><History size={13} className="text-[#8A8F98]" />Version history</div>
            <div className="space-y-2">
              {[...doc.history].reverse().map((h, i) => (
                <div key={i} className="flex items-start gap-2 text-[11.5px]">
                  <span className="w-5 h-5 rounded-full bg-[#F1F2F5] text-[#4B5060] flex items-center justify-center text-[10px] font-semibold shrink-0">v{h.v}</span>
                  <div>
                    <div className="text-[#1B1F27]">{h.note}</div>
                    <div className="text-[#8A8F98]">{h.user} · {h.date}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* approval history */}
          {doc.approvals.length > 0 && (
            <div>
              <div className="text-[11.5px] font-semibold flex items-center gap-1.5 mb-2"><Shield size={13} className="text-[#8A8F98]" />Approval log</div>
              <div className="space-y-2">
                {doc.approvals.map((a, i) => (
                  <div key={i} className="text-[11.5px]">
                    <div className="flex items-center gap-1.5">
                      {a.status === "approved" ? <CheckCircle2 size={12} className="text-[#1A8754]" /> : <XCircle size={12} className="text-[#C93A3A]" />}
                      <span className="font-medium">{a.by}</span>
                      <span className="text-[#8A8F98]">{a.date}</span>
                    </div>
                    {a.comment && <div className="text-[#8A8F98] ml-[18px]">"{a.comment}"</div>}
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}