// PERSONA PLATFORM — Entry point (tabs + routing)
const { useState: usePnPlatState } = React;
const Tpnp = window.ArbiterTokens;

// ── PLATFORM ENTRY ─────────────────────────────────────────────────────────
function PersonaPlatform({ onOpenPersona }) {
  const pn = window.__pn;
  const data = window.usePnStore
    ? window.usePnStore(['profile.created', 'profile.updated', 'psych.assessed', 'touchpoint.logged', 'task.created', 'task.updated', 'bulk.tagged', 'conflict.resolved', 'view.saved', 'view.deleted', 'dossier.exported'])
    : window.PERSONA_DATA;

  const [activeTab, setActiveTab] = usePnPlatState('dashboard');
  const [newOpen, setNewOpen] = usePnPlatState(false);

  if (!data) return <div style={{ padding: '24px' }}>Loading Persona data…</div>;

  const k = data.kpis;
  const activeConflicts = (data.conflicts || []).filter(c => c.status === 'Active').length;

  const openEntity = (id) => {
    const person = data.people.find(p => p.id === id);
    if (person && onOpenPersona) onOpenPersona(person);
  };

  const tabs = [
    { id: 'dashboard',  label: 'Dashboard' },
    { id: 'directory',  label: 'Directory' },
    { id: 'psych',      label: 'Psychometrics' },
    { id: 'network',    label: 'Network' },
    { id: 'documents',  label: 'Documents' },
    { id: 'crm',        label: 'CRM' },
    { id: 'compliance', label: 'Compliance', badge: activeConflicts },
  ];

  const renderTab = () => {
    switch (activeTab) {
      case 'dashboard':  return <PersonaDashboardTab data={data} onSelectPerson={openEntity} />;
      case 'directory':  return <window.PnDirectoryHub data={data} onSelectPerson={openEntity} />;
      case 'psych':      return <window.PnPsychHub data={data} onSelectPerson={openEntity} />;
      case 'network':    return <window.PnNetworkHub data={data} onSelectPerson={openEntity} />;
      case 'documents':  return <window.PnDocumentsHub data={data} onSelectPerson={openEntity} />;
      case 'crm':        return <window.PnCrmHub data={data} onSelectPerson={openEntity} />;
      case 'compliance': return window.PnComplianceHub ? <window.PnComplianceHub /> : null;
      default: return null;
    }
  };

  return (
    <div style={pn.container}>
      {/* ── Header ── */}
      <div style={pn.header}>
        <div style={pn.headerTitle}>
          <div style={pn.pnIcon}>{window.Icons && <window.Icons.Persona size={16} color="#fff" strokeWidth={1.75} />}</div>
          <div>
            <div style={pn.title}>Persona</div>
            <div style={pn.subtitle}>Behavioral Intelligence · Psychometric Profiling · Network Analysis · CRM · Compliance</div>
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
          {[
            { l: 'Profiles',  v: k.total.toLocaleString(),  bg: Tpnp.color.bg.secondary, c: Tpnp.color.text.primary },
            { l: 'Assessed',  v: k.psychAssessed,           bg: pn.indigoBg,              c: pn.indigo },
            { l: 'High Risk', v: k.highRisk,                bg: pn.crimsonBg,             c: pn.crimson },
            { l: 'Conflicts', v: activeConflicts,           bg: activeConflicts ? pn.crimsonBg : pn.emeraldBg, c: activeConflicts ? pn.crimson : pn.emerald },
          ].map(s => (
            <div key={s.l} style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: s.bg, border: `1px solid ${Tpnp.color.border.light}` }}>
              <span style={{ fontSize: '10px', fontWeight: 600, color: Tpnp.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{s.l}</span>
              <span style={{ fontSize: '14px', fontWeight: 700, color: s.c, fontFamily: Tpnp.font.mono }}>{s.v}</span>
            </div>
          ))}
          <button style={pn.btnPrimary} onClick={() => setNewOpen(true)}>+ New profile</button>
        </div>
      </div>

      {window.PnNewProfileModal && (
        <window.PnNewProfileModal
          open={newOpen}
          onClose={() => setNewOpen(false)}
          onCreated={(p) => { setActiveTab('directory'); }}
        />
      )}

      {/* ── Tabs ── */}
      <div style={pn.tabs}>
        {tabs.map(t => (
          <button key={t.id} onClick={() => setActiveTab(t.id)}
            style={{ ...pn.tab, ...(activeTab === t.id ? pn.tabActive : {}) }}>
            {t.label}
            {t.badge > 0 && (
              <span style={{ marginLeft: '6px', padding: '1px 6px', borderRadius: '8px', background: pn.crimsonBg, color: pn.crimson, fontSize: '9px', fontWeight: 800, fontFamily: Tpnp.font.mono }}>{t.badge}</span>
            )}
          </button>
        ))}
      </div>

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

window.PersonaPlatform = PersonaPlatform;