// ESIGN PLATFORM — platform wrapper (SignDesk) — 7 sub-platforms with pill sub-nav
const { useState: useEsPlat } = React;
const Tesp = window.ArbiterTokens;

function ESignPlatform() {
  const [activeTab, setActiveTab] = useEsPlat('documents');
  const [newEnvOpen, setNewEnvOpen] = useEsPlat(false);
  const es = window.__es;
  const I = window.EsIcons;
  const data = window.useEsStore ? window.useEsStore(['envelope.created','envelope.sent','envelope.completed','envelope.voided','envelope.declined','envelope.extended','payment.captured','redline.proposed','redline.decided']) : window.ESIGN_DATA;
  const k = data.kpis;

  const tabs = [
    { id: 'documents',    label: 'Documents',    icon: I.Inbox      },
    { id: 'create',       label: 'Create',       icon: I.Compose    },
    { id: 'notary',       label: 'Notary',       icon: I.Gavel      },
    { id: 'workflows',    label: 'Workflows',    icon: I.Network    },
    { id: 'intelligence', label: 'Intelligence', icon: I.Brain      },
    { id: 'compliance',   label: 'Compliance',   icon: I.Scale      },
    { id: 'integrations', label: 'Integrations', icon: I.Code       },
    { id: 'analytics',    label: 'Analytics',    icon: I.Analytics  },
  ];

  const renderTab = () => {
    switch (activeTab) {
      case 'documents':    return <EsDocumentsHub />;
      case 'create':       return <EsCreateHub />;
      case 'notary':       return <EsNotaryHub />;
      case 'workflows':    return <EsWorkflowsHub />;
      case 'intelligence': return <EsIntelligenceHub />;
      case 'compliance':   return <EsComplianceHub />;
      case 'integrations': return <EsIntegrationsHub />;
      case 'analytics':    return <EsAnalytics />;
      default:             return <EsDocumentsHub />;
    }
  };

  return (
    <div style={es.container}>
      {/* Header — matches default Arbiter platform style */}
      <div style={es.header}>
        <div style={es.headerTitle}>
          <div style={es.esIcon}><I.Signature size={16} color="#fff" strokeWidth={1.75} /></div>
          <div>
            <div style={es.title}>SignDesk</div>
            <div style={es.subtitle}>eSignature · Notary · Intelligence · Workflows · Compliance · Court-Ready</div>
          </div>
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
          <div style={es.kpiPill}>
            <span style={es.kpiPillLabel}>Pending</span>
            <span style={es.kpiPillValue}>{k.pendingOthers}</span>
          </div>
          <div style={{ ...es.kpiPill, background: es.indigoBg, border: `1px solid ${es.indigoBorder}` }}>
            <span style={{ ...es.kpiPillLabel, color: es.indigo }}>Awaiting Sig</span>
            <span style={{ ...es.kpiPillValue, color: es.indigo }}>{k.awaitingMySig}</span>
          </div>
          <div style={{ ...es.kpiPill, background: es.emeraldBg, border: `1px solid ${es.emerald}20` }}>
            <span style={{ ...es.kpiPillLabel, color: es.emerald }}>Completed</span>
            <span style={{ ...es.kpiPillValue, color: es.emerald }}>{k.completedMonth}</span>
          </div>
          <div style={es.kpiPill}>
            <span style={es.kpiPillLabel}>Turnaround</span>
            <span style={es.kpiPillValue}>{k.avgTurnaround}</span>
          </div>
          <div style={{ ...es.kpiPill, background: es.emeraldBg, border: `1px solid ${es.emerald}20` }}>
            <span style={{ ...es.kpiPillLabel, color: es.emerald }}>Rate</span>
            <span style={{ ...es.kpiPillValue, color: es.emerald }}>{k.completionRate}</span>
          </div>
          <button onClick={() => setNewEnvOpen(true)} style={es.btnPrimary}>
            <I.Plus size={12} color="#fff" strokeWidth={2} /> New Envelope
          </button>
        </div>
      </div>

      {window.EsNewEnvelopeModal && <window.EsNewEnvelopeModal open={newEnvOpen} onClose={() => setNewEnvOpen(false)} />}

      {/* Tabs */}
      <div style={es.tabs}>
        {tabs.map(t => {
          const active = activeTab === t.id;
          const Ic = t.icon;
          return (
            <button key={t.id} onClick={() => setActiveTab(t.id)}
              style={{ ...es.tab, ...(active ? es.tabActive : {}) }}>
              <Ic size={13} color={active ? es.indigo : Tesp.color.text.tertiary} strokeWidth={1.5} />
              {t.label}
            </button>
          );
        })}
      </div>

      {/* Body */}
      <div style={es.body}>
        {renderTab()}
      </div>
    </div>
  );
}

window.ESignPlatform = ESignPlatform;