// DOCUMENTS — Enterprise document & file management platform
const { useState: useDcP } = React;
const Tdcp = window.ArbiterTokens;

function DocPlatform({ onNavigate: onNav }) {
  const [activeTab, setActiveTab] = useDcP('dashboard');
  const [uploadOpen, setUploadOpen] = useDcP(false);
  const s = window.useDocStore ? window.useDocStore(['doc.uploaded','doc.deleted','doc.approvalDecided','doc.starred','doc.holdApplied','doc.holdReleased','doc.bulkAction']) : null;
  const k = (s && s.kpis) || window.DOC_KPIS;
  const trashCount = (s && s.trash && s.trash.length) || (window.DOC_TRASH || []).length;

  const tabs = [
    { id: 'dashboard',   label: 'Dashboard' },
    { id: 'library',     label: 'Library' },
    { id: 'folders',     label: 'Folders' },
    { id: 'workspaces',  label: 'Workspaces' },
    { id: 'search',      label: 'Search' },
    { id: 'versions',    label: 'Versions' },
    { id: 'compliance',  label: 'Compliance' },
    { id: 'templates',   label: 'Templates' },
    { id: 'automation',  label: 'Automation' },
    { id: 'governance',  label: 'Governance' },
    { id: 'analytics',   label: 'Analytics' },
    { id: 'trash',       label: 'Trash', badge: trashCount },
  ];

  const renderTab = () => {
    switch (activeTab) {
      case 'dashboard':   return <window.DcDashboardHub />;
      case 'library':     return <window.DcLibraryHub />;
      case 'folders':     return <window.DcFoldersHub />;
      case 'workspaces':  return <window.DcWorkspacesHub />;
      case 'search':      return <window.DcSearchHub />;
      case 'versions':    return <window.DcVersionsHub />;
      case 'compliance':  return <window.DcComplianceHub />;
      case 'templates':   return <window.DcTemplatesHub />;
      case 'automation':  return <window.DcAutomationHub />;
      case 'governance':  return <window.DcGovernanceHub />;
      case 'analytics':   return <window.DcAnalyticsHub />;
      case 'trash':       return <window.DcTrashHub />;
      default:            return <window.DcDashboardHub />;
    }
  };

  const statPill = (label, value, bg, fg) => (
    <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: bg, border: `1px solid ${Tdcp.color.border.light}` }}>
      <span style={{ fontSize: '10px', fontWeight: 600, color: Tdcp.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{label}</span>
      <span style={{ fontSize: '14px', fontWeight: 700, color: fg, fontFamily: Tdcp.font.mono }}>{value}</span>
    </div>
  );

  return (
    <div style={{ flex: 1, overflow: 'hidden', background: Tdcp.color.bg.primary, display: 'flex', flexDirection: 'column' }}>
      {/* Header */}
      <div style={{ padding: '16px 24px', borderBottom: `1px solid ${Tdcp.color.border.light}`, background: Tdcp.color.bg.card, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
          <div style={{ width: '32px', height: '32px', borderRadius: '6px', background: '#2563EB', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{window.Icons && <window.Icons.Documents size={16} color="#fff" strokeWidth={1.75} />}</div>
          <div>
            <div style={{ fontSize: '18px', fontWeight: 700, color: Tdcp.color.text.primary, letterSpacing: '-0.02em' }}>Document Management</div>
            <div style={{ fontSize: '12px', color: Tdcp.color.text.tertiary, marginTop: '1px' }}>Library · Workspaces · Versions · Compliance · Automation · Governance</div>
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: '10px', flexWrap: 'wrap' }}>
          {statPill('Documents', k.totalDocs.toLocaleString(), Tdcp.color.bg.secondary, Tdcp.color.text.primary)}
          {statPill('Holds', k.activeHolds, 'rgba(185,28,28,0.06)', '#B91C1C')}
          {statPill('Approvals', k.pendingApprovals, Tdcp.color.status.warningBg, Tdcp.color.status.warning)}
          {statPill('Checked Out', k.checkedOut, 'rgba(37,99,235,0.06)', '#2563EB')}
          {statPill('DLP 30d', k.dlpIncidents30d, 'rgba(185,28,28,0.06)', '#B91C1C')}
          <button onClick={() => setUploadOpen(true)} style={{ padding: '6px 14px', borderRadius: '6px', background: '#2563EB', border: 'none', color: '#fff', fontSize: '12px', fontWeight: 700, cursor: 'pointer', fontFamily: Tdcp.font.family }}>+ Upload</button>
        </div>
      </div>

      {/* Tabs */}
      <div style={{ display: 'flex', gap: '0', borderBottom: `1px solid ${Tdcp.color.border.light}`, background: Tdcp.color.bg.card, padding: '0 24px', overflowX: 'auto' }}>
        {tabs.map(t => (
          <button key={t.id} onClick={() => setActiveTab(t.id)} style={{
            padding: '10px 16px', fontSize: '12px', fontWeight: activeTab === t.id ? 600 : 500,
            color: activeTab === t.id ? Tdcp.color.text.primary : Tdcp.color.text.tertiary,
            cursor: 'pointer', border: 'none', background: 'none',
            borderBottom: activeTab === t.id ? `2px solid #2563EB` : '2px solid transparent',
            fontFamily: Tdcp.font.family, transition: 'all 0.15s', marginBottom: '-1px', whiteSpace: 'nowrap',
            display: 'inline-flex', alignItems: 'center', gap: '6px',
          }}>
            {t.label}
            {t.badge != null && t.badge > 0 && (
              <span style={{ fontSize: '10px', fontWeight: 700, padding: '1px 6px', borderRadius: '8px', background: activeTab === t.id ? 'rgba(37,99,235,0.15)' : Tdcp.color.bg.secondary, color: activeTab === t.id ? '#2563EB' : Tdcp.color.text.tertiary, fontFamily: Tdcp.font.mono }}>{t.badge}</span>
            )}
          </button>
        ))}
      </div>

      {/* Body */}
      <div style={{ flex: 1, overflow: 'auto', padding: '20px 24px' }}>
        {renderTab()}
      </div>

      {/* Upload modal */}
      {window.DocUploadModal && <window.DocUploadModal open={uploadOpen} onClose={() => setUploadOpen(false)} />}
    </div>
  );
}

window.DocPlatform = DocPlatform;