// Documents tab — folders with counts/size/last-activity, file list, Send Access Link modal

const FOLDERS = [
  {
    id: "status", name: "Status Reports", icon: "activity", color: "#22863A",
    description: "Daily field reports and progress photos",
    size: "284 MB", lastActivity: "2h ago", lastBy: "Emma Connor",
    files: [
      { name: "Daily Report — Apr 30, 2026.pdf", type: "pdf", size: "2.1 MB", modified: "2h ago", by: "EC" },
      { name: "Daily Report — Apr 29, 2026.pdf", type: "pdf", size: "1.8 MB", modified: "1d ago", by: "EC" },
      { name: "Daily Report — Apr 28, 2026.pdf", type: "pdf", size: "1.9 MB", modified: "2d ago", by: "RF" },
      { name: "Site Photos — Week 17.zip", type: "zip", size: "184 MB", modified: "5d ago", by: "EC" },
      { name: "Drone Survey — Apr 22.mp4", type: "video", size: "92 MB", modified: "8d ago", by: "JL" },
    ]
  },
  {
    id: "submittals", name: "Submittals", icon: "file", color: "#534AFF",
    description: "Equipment specs, shop drawings, and material data",
    size: "412 MB", lastActivity: "1d ago", lastBy: "Robert Fox",
    files: [
      { name: "Module Spec Sheet — JinkoSolar Tiger Neo 580W.pdf", type: "pdf", size: "8.4 MB", modified: "1d ago", by: "RF" },
      { name: "Inverter Submittal — SMA Sunny Highpower 250kW.pdf", type: "pdf", size: "12 MB", modified: "3d ago", by: "RF" },
      { name: "Tracker Shop Drawings — Nextracker NX Horizon.pdf", type: "pdf", size: "44 MB", modified: "6d ago", by: "EC" },
      { name: "Combiner Box Datasheet.pdf", type: "pdf", size: "3.2 MB", modified: "9d ago", by: "RF" },
      { name: "MV Switchgear Specs.pdf", type: "pdf", size: "18 MB", modified: "12d ago", by: "JL" },
      { name: "Cable Schedule — Rev 4.xlsx", type: "xlsx", size: "1.4 MB", modified: "14d ago", by: "EC" },
    ]
  },
  {
    id: "coi", name: "COIs", icon: "shield", color: "#76ADFF",
    description: "Certificates of insurance from subs and vendors",
    size: "38 MB", lastActivity: "4d ago", lastBy: "Priya Shah", flags: { warning: 2 },
    files: [
      { name: "Apex Civil — COI 2026.pdf", type: "pdf", size: "1.8 MB", modified: "4d ago", by: "PS", warning: "Expires May 12" },
      { name: "ElectroPro — COI 2026.pdf", type: "pdf", size: "1.6 MB", modified: "9d ago", by: "PS" },
      { name: "Nextracker — COI 2026.pdf", type: "pdf", size: "2.1 MB", modified: "14d ago", by: "PS", warning: "Expires May 28" },
      { name: "PileForce — COI 2026.pdf", type: "pdf", size: "1.9 MB", modified: "21d ago", by: "PS" },
      { name: "Sundance Modules — COI 2026.pdf", type: "pdf", size: "1.7 MB", modified: "28d ago", by: "PS" },
    ]
  },
  {
    id: "co", name: "Change Orders", icon: "fileEdit", color: "#FF9143",
    description: "Owner and subcontractor change orders",
    size: "94 MB", lastActivity: "6h ago", lastBy: "Maya Iyer",
    files: [
      { name: "CO-013 — Predrill in north section.pdf", type: "pdf", size: "4.2 MB", modified: "6h ago", by: "MI", badge: "Pending" },
      { name: "CO-012 — Owner-directed module swap.pdf", type: "pdf", size: "3.8 MB", modified: "5d ago", by: "MI", badge: "Approved" },
      { name: "CO-011 — DC cable upsize.pdf", type: "pdf", size: "2.9 MB", modified: "11d ago", by: "MI", badge: "Approved" },
      { name: "CO-010 — Geotech additional borings.pdf", type: "pdf", size: "5.1 MB", modified: "18d ago", by: "MI", badge: "Approved" },
      { name: "CO Log — Apr 2026.xlsx", type: "xlsx", size: "0.6 MB", modified: "1d ago", by: "MI" },
    ]
  },
  {
    id: "rfi", name: "RFIs", icon: "info", color: "#B279FF",
    description: "Requests for information — open and closed",
    size: "62 MB", lastActivity: "3d ago", lastBy: "Jordan Lin", flags: { open: 4 },
    files: [
      { name: "RFI-024 — Foundation rebar spacing.pdf", type: "pdf", size: "2.4 MB", modified: "3d ago", by: "JL", badge: "Open" },
      { name: "RFI-023 — String inverter clearance.pdf", type: "pdf", size: "1.9 MB", modified: "5d ago", by: "JL", badge: "Open" },
      { name: "RFI-022 — Tracker pile coordinate offset.pdf", type: "pdf", size: "3.1 MB", modified: "8d ago", by: "RF", badge: "Closed" },
      { name: "RFI-021 — POI tap point clarification.pdf", type: "pdf", size: "2.7 MB", modified: "11d ago", by: "JL", badge: "Closed" },
      { name: "RFI Log — Apr 2026.xlsx", type: "xlsx", size: "0.4 MB", modified: "3d ago", by: "JL" },
    ]
  },
  {
    id: "redlines", name: "Redlines", icon: "pen", color: "#E4B644",
    description: "As-built markups and drawing revisions",
    size: "1.2 GB", lastActivity: "2d ago", lastBy: "Emma Connor",
    files: [
      { name: "E-001 — Single-line redline Rev 3.pdf", type: "pdf", size: "82 MB", modified: "2d ago", by: "EC" },
      { name: "C-101 — Civil grading redline.pdf", type: "pdf", size: "124 MB", modified: "7d ago", by: "EC" },
      { name: "S-201 — Tracker layout redline.pdf", type: "pdf", size: "188 MB", modified: "10d ago", by: "RF" },
      { name: "E-201 — Combiner trenching redline.pdf", type: "pdf", size: "96 MB", modified: "15d ago", by: "EC" },
      { name: "Drawing Index — Rev 4.xlsx", type: "xlsx", size: "0.8 MB", modified: "9d ago", by: "EC" },
    ]
  },
  {
    id: "liens", name: "Lien Waivers", icon: "receipt", color: "#22863A",
    description: "Conditional and unconditional waivers from subs",
    size: "28 MB", lastActivity: "5d ago", lastBy: "Maya Iyer", flags: { danger: 2 },
    files: [
      { name: "Apex Civil — Conditional Apr 2026.pdf", type: "pdf", size: "0.9 MB", modified: "5d ago", by: "MI" },
      { name: "ElectroPro — Conditional Apr 2026.pdf", type: "pdf", size: "0.8 MB", modified: "5d ago", by: "MI" },
      { name: "Nextracker — Conditional Apr 2026.pdf", type: "pdf", size: "1.1 MB", modified: "8d ago", by: "MI", warning: "Missing — pay app due" },
      { name: "PileForce — Conditional Apr 2026.pdf", type: "pdf", size: "0.9 MB", modified: "12d ago", by: "MI", warning: "Missing — pay app due" },
      { name: "Apex Civil — Unconditional Mar 2026.pdf", type: "pdf", size: "0.7 MB", modified: "32d ago", by: "MI" },
    ]
  },
  {
    id: "safety", name: "Safety Info", icon: "hardhat", color: "#C02F32",
    description: "JHAs, toolbox talks, incident reports, and safety plans",
    size: "146 MB", lastActivity: "1d ago", lastBy: "Robert Fox",
    files: [
      { name: "Site Safety Plan — Rev 2.pdf", type: "pdf", size: "18 MB", modified: "9d ago", by: "RF" },
      { name: "JHA — Pile Driving.pdf", type: "pdf", size: "2.4 MB", modified: "1d ago", by: "RF" },
      { name: "JHA — Tracker Installation.pdf", type: "pdf", size: "2.8 MB", modified: "4d ago", by: "RF" },
      { name: "Toolbox Talk — Heat Stress (Apr 28).pdf", type: "pdf", size: "1.2 MB", modified: "2d ago", by: "EC" },
      { name: "Toolbox Talk — Hand Safety (Apr 21).pdf", type: "pdf", size: "1.1 MB", modified: "9d ago", by: "EC" },
      { name: "OSHA 300 Log — 2026.pdf", type: "pdf", size: "0.6 MB", modified: "14d ago", by: "RF" },
      { name: "Site Safety Photos — Apr.zip", type: "zip", size: "118 MB", modified: "3d ago", by: "EC" },
    ]
  },
];

const FILE_ICONS = {
  pdf:   { icon: "file",    color: "#C02F32", bg: "#FCE2E2" },
  xlsx:  { icon: "grid",    color: "#22863A", bg: "#D0F3D9" },
  zip:   { icon: "archive", color: "#FF9143", bg: "#FFE6D4" },
  video: { icon: "eye",     color: "#534AFF", bg: "#E8E9F6" },
};

const DocumentsTab = ({ p }) => {
  const [selectedFolder, setSelectedFolder] = React.useState(null);
  const [showAccessModal, setShowAccessModal] = React.useState(false);
  const [search, setSearch] = React.useState("");

  const totalFiles = FOLDERS.reduce((s, f) => s + f.files.length, 0);
  const totalSize = "2.3 GB";

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      {/* Toolbar */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          {selectedFolder ? (
            <button onClick={() => setSelectedFolder(null)} style={{
              display: "inline-flex", alignItems: "center", gap: 6, padding: "6px 10px", borderRadius: 8,
              background: "transparent", border: "none", cursor: "pointer", fontFamily: "inherit",
              fontSize: 13, color: "rgb(106,115,131)"
            }}>
              <Icon name="chevronLeft" size={14} />
              All folders
            </button>
          ) : (
            <span style={{ fontSize: 13, color: "rgb(106,115,131)" }}>
              <strong style={{ color: "rgb(26,27,37)", fontWeight: 600 }}>{FOLDERS.length}</strong> folders ·{" "}
              <strong style={{ color: "rgb(26,27,37)", fontWeight: 600 }}>{totalFiles}</strong> files ·{" "}
              <strong style={{ color: "rgb(26,27,37)", fontWeight: 600 }}>{totalSize}</strong>
            </span>
          )}
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <div style={{ position: "relative", width: 240 }}>
            <span style={{ position: "absolute", left: 10, top: 8, opacity: 0.5 }}>
              <Icon name="search" size={14} color="rgb(106,115,131)" />
            </span>
            <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Search documents…" style={{
              width: "100%", boxSizing: "border-box", paddingLeft: 30, paddingRight: 10, height: 30, borderRadius: 9999,
              border: "1px solid rgb(213,219,225)", fontSize: 13, fontFamily: "inherit", outline: "none", background: "#fff"
            }} />
          </div>
          <Button kind="ghost" size="sm" icon="upload">Upload</Button>
          <Button kind="primary" size="sm" icon="send" onClick={() => setShowAccessModal(true)}>Send Access Link</Button>
        </div>
      </div>

      {/* Folder grid OR file detail */}
      {!selectedFolder ? (
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
          {FOLDERS.map(f => <FolderCard key={f.id} folder={f} onClick={() => setSelectedFolder(f)} />)}
        </div>
      ) : (
        <FolderDetail folder={selectedFolder} search={search} />
      )}

      {showAccessModal && <AccessLinkModal project={p} onClose={() => setShowAccessModal(false)} />}
    </div>
  );
};

const FolderCard = ({ folder, onClick }) => {
  const flag = folder.flags?.danger ? { tone: "danger", text: `${folder.flags.danger} missing` }
             : folder.flags?.warning ? { tone: "warning", text: `${folder.flags.warning} expiring` }
             : folder.flags?.open ? { tone: "info", text: `${folder.flags.open} open` }
             : null;
  return (
    <button onClick={onClick} style={{
      background: "#fff", border: "1px solid rgb(227,229,232)", borderRadius: 12, padding: 16,
      textAlign: "left", cursor: "pointer", fontFamily: "inherit",
      display: "flex", flexDirection: "column", gap: 12, minHeight: 156,
      transition: "all 120ms cubic-bezier(.2,.6,.2,1)"
    }}
    onMouseEnter={e => {
      e.currentTarget.style.borderColor = "rgb(213,219,225)";
      e.currentTarget.style.transform = "translateY(-1px)";
      e.currentTarget.style.boxShadow = "0 4px 12px rgba(15,23,42,.06)";
    }}
    onMouseLeave={e => {
      e.currentTarget.style.borderColor = "rgb(227,229,232)";
      e.currentTarget.style.transform = "translateY(0)";
      e.currentTarget.style.boxShadow = "none";
    }}>
      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 8 }}>
        <div style={{
          width: 40, height: 40, borderRadius: 10,
          background: `${folder.color}22`, color: folder.color,
          display: "flex", alignItems: "center", justifyContent: "center"
        }}>
          <Icon name={folder.icon === "fileEdit" ? "pen" : folder.icon} size={18} color={folder.color} />
        </div>
        {flag && (
          <span style={{
            display: "inline-flex", alignItems: "center", gap: 4, padding: "2px 8px", borderRadius: 9999,
            background: TONES[flag.tone].bg, color: TONES[flag.tone].fg, fontSize: 10, fontWeight: 600
          }}>
            <span style={{ width: 4, height: 4, borderRadius: "50%", background: TONES[flag.tone].fg }} />
            {flag.text}
          </span>
        )}
      </div>
      <div>
        <div style={{ fontSize: 14, fontWeight: 600, color: "rgb(26,27,37)", marginBottom: 4 }}>{folder.name}</div>
        <div style={{ fontSize: 12, color: "rgb(106,115,131)", lineHeight: 1.4, minHeight: 32 }}>{folder.description}</div>
      </div>
      <div style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        paddingTop: 10, borderTop: "1px solid rgb(239,240,242)",
        fontSize: 11, color: "rgb(106,115,131)"
      }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
          <Icon name="file" size={11} />
          <span style={{ fontVariantNumeric: "tabular-nums", color: "rgb(26,27,37)", fontWeight: 600 }}>{folder.files.length}</span>
          <span>files</span>
        </span>
        <span style={{ fontVariantNumeric: "tabular-nums", color: "rgb(65,69,82)", fontWeight: 500 }}>{folder.size}</span>
        <span title={`Last updated by ${folder.lastBy}`}>{folder.lastActivity}</span>
      </div>
    </button>
  );
};

const FolderDetail = ({ folder, search }) => {
  const filtered = folder.files.filter(f => !search || f.name.toLowerCase().includes(search.toLowerCase()));
  return (
    <Card padding={0}>
      <div style={{ padding: "16px 20px", borderBottom: "1px solid rgb(239,240,242)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <div style={{
            width: 36, height: 36, borderRadius: 10,
            background: `${folder.color}22`, color: folder.color,
            display: "flex", alignItems: "center", justifyContent: "center"
          }}>
            <Icon name={folder.icon === "fileEdit" ? "pen" : folder.icon} size={18} color={folder.color} />
          </div>
          <div>
            <div style={{ fontSize: 15, fontWeight: 600 }}>{folder.name}</div>
            <div style={{ fontSize: 12, color: "rgb(106,115,131)", marginTop: 2 }}>
              {folder.files.length} files · {folder.size} · last update {folder.lastActivity} by {folder.lastBy}
            </div>
          </div>
        </div>
        <div style={{ display: "flex", gap: 6 }}>
          <Button kind="ghost" size="sm" icon="upload">Upload</Button>
          <Button kind="ghost" size="sm" icon="folder">New Subfolder</Button>
        </div>
      </div>
      <div style={{
        display: "grid",
        gridTemplateColumns: "minmax(0, 1fr) 100px 120px 80px 60px",
        padding: "10px 20px", fontSize: 11, fontWeight: 600, color: "rgb(106,115,131)",
        background: "rgb(252,252,253)", borderBottom: "1px solid rgb(239,240,242)",
        textTransform: "uppercase", letterSpacing: ".04em", gap: 12, alignItems: "center"
      }}>
        <span>Name</span>
        <span>Size</span>
        <span>Modified</span>
        <span>By</span>
        <span></span>
      </div>
      {filtered.map((file, i) => {
        const fi = FILE_ICONS[file.type] || FILE_ICONS.pdf;
        return (
          <div key={i} style={{
            display: "grid",
            gridTemplateColumns: "minmax(0, 1fr) 100px 120px 80px 60px",
            padding: "12px 20px", gap: 12, alignItems: "center",
            borderBottom: i < filtered.length - 1 ? "1px solid rgb(239,240,242)" : "none",
            fontSize: 13, transition: "background 120ms"
          }}
          onMouseEnter={e => e.currentTarget.style.background = "rgb(248,248,251)"}
          onMouseLeave={e => e.currentTarget.style.background = "#fff"}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, minWidth: 0 }}>
              <div style={{
                width: 28, height: 28, borderRadius: 6, background: fi.bg,
                display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0
              }}>
                <Icon name={fi.icon} size={14} color={fi.color} />
              </div>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontWeight: 500, color: "rgb(26,27,37)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{file.name}</div>
                {(file.warning || file.badge) && (
                  <div style={{ marginTop: 4, display: "flex", gap: 6 }}>
                    {file.badge && <Chip tone={file.badge === "Pending" || file.badge === "Open" ? "warning" : file.badge === "Approved" ? "success" : "neutral"}>{file.badge}</Chip>}
                    {file.warning && (
                      <span style={{ fontSize: 11, color: "rgb(178,121,26)", display: "inline-flex", alignItems: "center", gap: 4 }}>
                        <Icon name="alert" size={11} color="rgb(178,121,26)" />
                        {file.warning}
                      </span>
                    )}
                  </div>
                )}
              </div>
            </div>
            <span style={{ fontSize: 12, color: "rgb(65,69,82)", fontVariantNumeric: "tabular-nums" }}>{file.size}</span>
            <span style={{ fontSize: 12, color: "rgb(106,115,131)" }}>{file.modified}</span>
            <Avatar size={22} initials={file.by} color="#76ADFF" />
            <div style={{ display: "flex", justifyContent: "flex-end", gap: 2 }}>
              <IconBtn icon="download" size={26} tone="ghost" />
              <IconBtn icon="more" size={26} tone="ghost" />
            </div>
          </div>
        );
      })}
    </Card>
  );
};

// =================================================================
// SEND ACCESS LINK MODAL
// =================================================================

const AccessLinkModal = ({ project, onClose }) => {
  const [recipients, setRecipients] = React.useState("");
  const [subject, setSubject] = React.useState(`Project documents access — ${project.name}`);
  const [accessLevel, setAccessLevel] = React.useState("View only");
  const [expires, setExpires] = React.useState("30 days");
  const [body, setBody] = React.useState(
`Hi,

You've been granted access to all project documents and records for ${project.name} (${project.id}) on Mindworks.

Through this secure link you'll be able to view:
  • Daily status reports and field photos
  • Submittals and shop drawings
  • COIs, lien waivers, and compliance records
  • Change orders and RFIs
  • Redlined drawings and as-builts
  • Safety plans and JHAs

Access level: View only
Link expires: 30 days from today

If you have any questions or need a higher access level, just reply to this email.

Thanks,
${project.pm?.name || "Project Team"}
Mindworks`
  );

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  return (
    <div style={{
      position: "fixed", inset: 0, background: "rgba(15,23,42,.45)", backdropFilter: "blur(2px)",
      display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1000, padding: 20
    }}
    onClick={onClose}>
      <div onClick={e => e.stopPropagation()} style={{
        background: "#fff", borderRadius: 14, width: "100%", maxWidth: 680,
        maxHeight: "90vh", overflow: "hidden", display: "flex", flexDirection: "column",
        boxShadow: "0 24px 64px rgba(15,23,42,.24)"
      }}>
        {/* Header */}
        <div style={{
          display: "flex", alignItems: "center", justifyContent: "space-between",
          padding: "16px 20px", borderBottom: "1px solid rgb(239,240,242)"
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <div style={{
              width: 32, height: 32, borderRadius: 8,
              background: "rgba(83,74,255,.1)", color: "rgb(83,74,255)",
              display: "flex", alignItems: "center", justifyContent: "center"
            }}>
              <Icon name="send" size={16} color="rgb(83,74,255)" />
            </div>
            <div>
              <div style={{ fontSize: 15, fontWeight: 600 }}>Send Access Link</div>
              <div style={{ fontSize: 12, color: "rgb(106,115,131)", marginTop: 1 }}>Invite someone to view all project records</div>
            </div>
          </div>
          <IconBtn icon="cross" size={30} tone="outline" onClick={onClose} />
        </div>

        {/* Compose body */}
        <div style={{ overflowY: "auto", padding: 20, display: "flex", flexDirection: "column", gap: 14 }}>
          {/* To */}
          <ComposeRow label="To">
            <input value={recipients} onChange={e => setRecipients(e.target.value)} placeholder="email@company.com, another@company.com" style={composeInputStyle} />
          </ComposeRow>

          {/* Subject */}
          <ComposeRow label="Subject">
            <input value={subject} onChange={e => setSubject(e.target.value)} style={composeInputStyle} />
          </ComposeRow>

          {/* Access settings */}
          <div style={{
            display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10,
            padding: 12, background: "rgb(252,252,253)", border: "1px solid rgb(239,240,242)", borderRadius: 10
          }}>
            <ComposePillSelect label="Access" icon="eye" value={accessLevel} options={["View only", "View + comment", "View + download", "Full access"]} onChange={setAccessLevel} />
            <ComposePillSelect label="Expires in" icon="clock" value={expires} options={["7 days", "30 days", "90 days", "Never"]} onChange={setExpires} />
          </div>

          {/* Link preview */}
          <div style={{
            display: "flex", alignItems: "center", gap: 10,
            padding: "10px 14px", background: "rgb(248,248,251)",
            border: "1px solid rgb(231,233,236)", borderRadius: 10
          }}>
            <Icon name="link" size={14} color="rgb(83,74,255)" />
            <span style={{
              fontFamily: "ui-monospace, SF Mono, Menlo, monospace", fontSize: 12,
              color: "rgb(65,69,82)", flex: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis"
            }}>
              mindworks.com/p/{(project.id || "proj").toLowerCase()}/share/Xk9-2nQ4BvMr
            </span>
            <button style={{
              fontSize: 11, fontWeight: 500, color: "rgb(83,74,255)",
              background: "transparent", border: "none", cursor: "pointer", fontFamily: "inherit"
            }}>Copy</button>
          </div>

          {/* Message body */}
          <ComposeRow label="Message" align="top">
            <textarea value={body} onChange={e => setBody(e.target.value)} rows={14} style={{
              ...composeInputStyle, height: "auto", resize: "vertical", fontFamily: "inherit",
              padding: 12, lineHeight: 1.5
            }} />
          </ComposeRow>

          {/* Attachments hint */}
          <div style={{
            display: "flex", alignItems: "center", gap: 8, fontSize: 12, color: "rgb(106,115,131)"
          }}>
            <Icon name="paperclip" size={12} />
            <span>The recipient will see all 8 folders and {FOLDERS.reduce((s,f)=>s+f.files.length,0)} files. Activity is logged.</span>
          </div>
        </div>

        {/* Footer */}
        <div style={{
          display: "flex", alignItems: "center", justifyContent: "space-between",
          padding: "14px 20px", borderTop: "1px solid rgb(239,240,242)", background: "rgb(252,252,253)"
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 12, color: "rgb(106,115,131)" }}>
            <Icon name="shield" size={12} color="rgb(34,134,58)" />
            Secure link · activity logged
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <Button kind="ghost" size="sm" onClick={onClose}>Cancel</Button>
            <Button kind="primary" size="sm" icon="send" onClick={onClose}>Send</Button>
          </div>
        </div>
      </div>
    </div>
  );
};

const ComposeRow = ({ label, children, align = "center" }) => (
  <div style={{ display: "grid", gridTemplateColumns: "80px 1fr", gap: 12, alignItems: align === "top" ? "flex-start" : "center" }}>
    <span style={{ fontSize: 12, color: "rgb(106,115,131)", fontWeight: 500, paddingTop: align === "top" ? 8 : 0 }}>{label}</span>
    {children}
  </div>
);

const composeInputStyle = {
  width: "100%", boxSizing: "border-box", height: 34, padding: "0 12px",
  borderRadius: 8, border: "1px solid rgb(213,219,225)",
  fontSize: 13, fontFamily: "inherit", outline: "none", background: "#fff",
  color: "rgb(26,27,37)"
};

const ComposePillSelect = ({ label, icon, value, options, onChange }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <div>
      <div style={{ fontSize: 11, color: "rgb(106,115,131)", fontWeight: 600, textTransform: "uppercase", letterSpacing: ".04em", marginBottom: 6 }}>{label}</div>
      <div style={{ position: "relative" }}>
        <button onClick={() => setOpen(!open)} style={{
          width: "100%", display: "inline-flex", alignItems: "center", justifyContent: "space-between",
          padding: "8px 12px", borderRadius: 8, border: "1px solid rgb(213,219,225)",
          background: "#fff", cursor: "pointer", fontFamily: "inherit", fontSize: 13
        }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
            <Icon name={icon} size={13} color="rgb(106,115,131)" />
            {value}
          </span>
          <Icon name="expandDown" size={12} color="rgb(106,115,131)" />
        </button>
        {open && (
          <div style={{
            position: "absolute", top: "calc(100% + 4px)", left: 0, right: 0, zIndex: 10,
            background: "#fff", border: "1px solid rgb(227,229,232)", borderRadius: 8,
            boxShadow: "0 8px 24px rgba(15,23,42,.12)", overflow: "hidden"
          }}>
            {options.map(o => (
              <button key={o} onClick={() => { onChange(o); setOpen(false); }} style={{
                width: "100%", textAlign: "left", padding: "8px 12px", border: "none",
                background: o === value ? "rgb(248,248,251)" : "transparent",
                cursor: "pointer", fontFamily: "inherit", fontSize: 13,
                color: "rgb(26,27,37)"
              }}
              onMouseEnter={e => e.currentTarget.style.background = "rgb(248,248,251)"}
              onMouseLeave={e => e.currentTarget.style.background = o === value ? "rgb(248,248,251)" : "transparent"}>
                {o}
              </button>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

window.DocumentsTab = DocumentsTab;
