// JURISDICTIONS PLATFORM — entry point (tabs + routing)
const { useState: useJxPlatState } = React;
const Tjxp = window.ArbiterTokens;

function JurisdictionsPlatform() {
  const jx = window.__jx;
  const data = window.useJxStore
    ? window.useJxStore(['court.created','court.updated','judge.created','judge.updated','rule.created','admission.created','cle.logged','admission.renewed','phv.filed','phv.statusChanged','form.created','alert.dismissed','standingOrder.created','view.saved','view.deleted','audit.logged'])
    : window.JURISDICTIONS_DATA;

  const [activeTab, setActiveTab] = useJxPlatState('dashboard');
  const [selectedCourt, setSelectedCourt] = useJxPlatState(null);
  const [selectedJudge, setSelectedJudge] = useJxPlatState(null);
  const [newPhvOpen, setNewPhvOpen] = useJxPlatState(false);
  const [logCleOpen, setLogCleOpen] = useJxPlatState(null); // admission object or null

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

  const k = data.kpis;

  const tabs = [
    { id:'dashboard',  label:'Dashboard' },
    { id:'courts',     label:'Courts',      badge: k.courts },
    { id:'judges',     label:'Judges',      badge: k.judges },
    { id:'rules',      label:'Rules',       badge: k.rules },
    { id:'deadlines',  label:'Deadlines' },
    { id:'admissions', label:'Admissions',  badge: k.cleDueSoon || null, alert: k.cleDueSoon > 0 },
    { id:'forms',      label:'Forms',       badge: k.forms },
    { id:'analytics',  label:'Analytics' },
  ];

  const onOpenCourt = (court) => setSelectedCourt(court);
  const onOpenJudge = (judge) => setSelectedJudge(judge);
  const onOpenAdmission = (a) => setLogCleOpen(a);
  const onOpenPhv = (p) => { /* future — phv detail panel */ };
  const onRenew = (a) => {
    const next = new Date();
    next.setFullYear(next.getFullYear() + 1);
    window.JurisdictionsStore.renewAdmission(a.id, next.toISOString().slice(0,10));
  };

  const renderTab = () => {
    switch (activeTab) {
      case 'dashboard':  return <window.JxDashboardHub  data={data} onOpenCourt={onOpenCourt} onOpenJudge={onOpenJudge} onOpenAdmission={(a)=>setLogCleOpen(a)} onOpenPhv={onOpenPhv} />;
      case 'courts':     return <window.JxCourtsHub     data={data} onOpenCourt={onOpenCourt} />;
      case 'judges':     return <window.JxJudgesHub     data={data} onOpenJudge={onOpenJudge} />;
      case 'rules':      return <window.JxRulesHub      data={data} />;
      case 'deadlines':  return <window.JxDeadlineCalculator data={data} />;
      case 'admissions': return <window.JxAdmissionsHub data={data} onOpenAdmission={onOpenAdmission} onOpenPhv={onOpenPhv} onLogCle={(a)=>setLogCleOpen(a)} onRenew={onRenew} onFilePhv={()=>setNewPhvOpen(true)} />;
      case 'forms':      return <window.JxFormsHub      data={data} />;
      case 'analytics':  return <window.JxAnalyticsHub  data={data} />;
      default: return null;
    }
  };

  return (
    <div style={jx.container}>
      {/* Header */}
      <div style={jx.header}>
        <div style={jx.headerTitle}>
          <div style={jx.jxIcon}>
            {window.Icons && window.Icons.Rulebook
              ? <window.Icons.Rulebook size={16} color="#fff" strokeWidth={1.75} />
              : 'J'}
          </div>
          <div>
            <div style={jx.title}>Jurisdictions</div>
            <div style={jx.subtitle}>Courts · Judges · Rules · Admissions · Pro Hac Vice · Forms · Venue Analytics</div>
          </div>
        </div>
        <div style={{ display:'flex', alignItems:'center', gap:'10px' }}>
          {[
            { l:'Courts',      v: k.courts,           bg: jx.forestBg,  c: jx.forestDeep },
            { l:'Judges',      v: k.judges,           bg: jx.indigoBg,  c: jx.indigo },
            { l:'Admissions',  v: k.activeAdmissions, bg: jx.emeraldBg, c: jx.emerald },
            { l:'CLE Due',     v: k.cleDueSoon,       bg: k.cleDueSoon ? jx.amberBg : jx.slateBg, c: k.cleDueSoon ? jx.amber : jx.slate },
            { l:'PHV Pending', v: k.phvPending,       bg: k.phvPending ? jx.amberBg : jx.slateBg, c: k.phvPending ? jx.amber : jx.slate },
            { l:'Alerts',      v: k.criticalAlerts,   bg: k.criticalAlerts ? jx.crimsonBg : jx.emeraldBg, c: k.criticalAlerts ? jx.crimson : jx.emerald },
          ].map(s => (
            <div key={s.l} style={{ ...jx.kpiPill, background: s.bg }}>
              <span style={jx.kpiPillLabel}>{s.l}</span>
              <span style={{ ...jx.kpiPillValue, color: s.c }}>{s.v}</span>
            </div>
          ))}
          <button style={jx.btnPrimary} onClick={() => setNewPhvOpen(true)}>+ File PHV</button>
        </div>
      </div>

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

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

      {/* Panels & Modals */}
      {selectedCourt && <window.JxCourtDetailPanel court={selectedCourt} data={data} onClose={() => setSelectedCourt(null)} onOpenJudge={onOpenJudge} />}
      {selectedJudge && <window.JxJudgeDetailPanel judge={selectedJudge} data={data} onClose={() => setSelectedJudge(null)} />}
      {window.JxNewPhvModal && <window.JxNewPhvModal open={newPhvOpen} onClose={() => setNewPhvOpen(false)} data={data} onCreated={() => setActiveTab('admissions')} />}
      {window.JxLogCleModal && <window.JxLogCleModal open={!!logCleOpen} admission={logCleOpen} onClose={() => setLogCleOpen(null)} />}
    </div>
  );
}

window.JurisdictionsPlatform = JurisdictionsPlatform;