/* global React, KitChrome, ReactDOM */
const { useState, useEffect } = React;
const {
  StatusStrip, Nav, Footer, Eyebrow, MasterEquationArtifact,
  CrossLinkStrip, AxisSigil, StatGrid,
} = KitChrome;

/* ── Canonical record categories.  Maps the patient_vault.data_type
   strings the backend uses to a display label + relevant axis tint. ── */
const CATEGORY_META = {
  dream:         { label: 'Dream journals',  axis: 'ER' },
  journal:       { label: 'Reflections',     axis: 'ER' },
  nutrition:     { label: 'Nutrition logs',  axis: 'NM' },
  vitals:        { label: 'Vital signs',     axis: 'PO' },
  goal:          { label: 'Goals & plans',   axis: 'PV' },
  wellness:      { label: 'Wellness notes',  axis: 'SC' },
  lab:           { label: 'Lab results',     axis: 'NM' },
  medication:    { label: 'Medications',     axis: 'TA' },
  ch_score:      { label: 'CH snapshots',    axis: 'TA' },
  imaging:       { label: 'Imaging',         axis: 'PO' },
  encounter:     { label: 'Clinical encounters', axis: 'SC' },
  notes:         { label: 'Clinical notes',  axis: 'SC' },
  genetic:       { label: 'Genomic data',    axis: 'PV' },
  appointment:   { label: 'Appointments',    axis: 'TA' },
  prescription:  { label: 'Prescriptions',   axis: 'TA' },
};
const CATEGORY_ORDER = [];

/* ── Data context (shared with guardian-orb) ──────────────────────── */
const VaultCtx = React.createContext({ phase: 'loading' });
const useVault = () => React.useContext(VaultCtx);

function bytesPretty(n) {
  if (n == null) return null;
  if (n < 1024) return n + ' B';
  if (n < 1024**2) return (n / 1024).toFixed(1) + ' KB';
  if (n < 1024**3) return (n / 1024**2).toFixed(1) + ' MB';
  return (n / 1024**3).toFixed(2) + ' GB';
}

const VaultProvider = ({ children }) => {
  const [state, setState] = useState({ phase: 'loading' });
  useEffect(() => {
    let dead = false;
    (async () => {
      try {
        const me = await window.CHVault.me();
        if (dead) return;
        if (!me) { setState({ phase: 'signedout' }); return; }
        const get = async (p) => {
          try {
            const r = await fetch(window.CHVault.apiRoot + p, { credentials: 'include', headers: { 'Accept': 'application/json' } });
            if (!r.ok) return null;
            return await r.json();
          } catch { return null; }
        };
        const [summary, entries, sharing, audit] = await Promise.all([
          get('/api/v1/vault/summary'),
          get('/api/v1/vault/data?include_deleted=false'),
          get('/api/v1/vault/sharing'),
          get('/api/v1/datavault/access-log'),
        ]);
        setState({ phase: 'ready', me, summary: summary || [], entries: entries || [], sharing: sharing || [], audit: audit || [] });
      } catch (e) {
        if (!dead) setState({ phase: 'error', error: e.message || String(e) });
      }
    })();
    return () => { dead = true; };
  }, []);
  return <VaultCtx.Provider value={state}>{children}</VaultCtx.Provider>;
};

/* ── Sign-in CTA (mirrors guardian-orb pattern) ──────────────────── */
const SignInPanel = () => (
  <div style={{ minHeight: '70vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 32 }}>
    <div style={{ maxWidth: 480, padding: 32, background: 'var(--bg-parchment)', borderRadius: 16, border: '1px solid var(--border-1)', textAlign: 'center' }}>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--accent-clinical)', marginBottom: 10 }}>Data Vault · Locked</div>
      <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 26, margin: '0 0 12px' }}>Sign in to open your vault.</h2>
      <p style={{ fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.55, margin: '0 0 22px' }}>
        Your records are AES-256-GCM encrypted with your key. Conceptual Health stores the
        ciphertext only — we cannot read your records.  Sign in once and the same session
        works across Guardian Orb, Datavault, Wallet, and Clinical.
      </p>
      <a href="https://orb.conceptualhealth.com/" style={{ display: 'inline-block', padding: '12px 22px', borderRadius: 10, background: 'var(--accent-clinical)', color: 'white', textDecoration: 'none', fontWeight: 600, fontSize: 14 }}>Open Guardian Orb to sign in →</a>
      <div style={{ marginTop: 16, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.16em', color: 'var(--fg-3)' }}>HIPAA · AES-256-GCM · Patent Pending 63/921,717</div>
    </div>
  </div>
);

const LoadingPanel = () => (
  <div style={{ minHeight: '60vh', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 14, color: 'var(--fg-3)', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase' }}>
    <div style={{ width: 36, height: 36, borderRadius: '50%', border: '2px solid var(--border-1)', borderTopColor: 'var(--accent-clinical)', animation: 'dv-spin 0.9s linear infinite' }} />
    <div>Reading your vault…</div>
    <style>{`@keyframes dv-spin { to { transform: rotate(360deg); } }`}</style>
  </div>
);

/* ── App ──────────────────────────────────────────────────────────── */
function AppInner() {
  const v = useVault();
  const [tab, setTab] = useState('My Records');
  const [recordFilter, setRecordFilter] = useState('All');

  if (v.phase === 'loading')   return <LoadingPanel />;
  if (v.phase === 'signedout') return <SignInPanel />;
  if (v.phase === 'error')     return <SignInPanel />;

  const summary = v.summary || [];
  const entries = v.entries || [];
  const totalRecords = summary.reduce((s, x) => s + (x.count || 0), 0);
  const totalBytes   = entries.reduce((s, e) => s + (e.payload_size || e.encrypted_payload_size || 0), 0);
  const activeShares = (v.sharing || []).length;
  const lastSealedISO = entries.length ? entries[0].last_modified : null;

  // Group entries by data_type → CATEGORY_META for filters.
  const haveTypes = new Set(entries.map(e => e.data_type));
  const filterTypes = [];

  const shownEntries = entries.filter(e => recordFilter === 'All' || e.data_type === recordFilter);

  const heroStats = [];

  return (
    <div className="k-app">
      <StatusStrip right={<>
        <span>AES-256 · Zero-Knowledge</span><span>·</span>
        <span>HIPAA · GDPR · 21 CFR Part 11</span><span>·</span>
        <span style={{ color: 'var(--accent-guardian)', display: 'inline-flex', alignItems: 'center', gap: 5 }}>
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none"><rect x="5" y="11" width="14" height="9" rx="1.5" stroke="currentColor" strokeWidth="1.6"/><path d="M8 11V8a4 4 0 018 0v3" stroke="currentColor" strokeWidth="1.6"/></svg>
          Unlocked · {v.me && (v.me.display_name || v.me.email)}
        </span>
      </>} />
      <Nav currentId="datavault" brand="Data Vault" sub="datavault.conceptualhealth.com"
           links={['My Records', 'Shared', 'Audit Log', 'Settings']}
           tab={tab} setTab={setTab}
           primary="+ Upload record" secondary="Sign out" />
      <main className="k-main" data-screen-label={`Data Vault · ${tab}`}>

        {tab === 'My Records' && (
          <>
            <section className="k-hero" style={{ borderBottom: '1px solid var(--border-1-dark)' }}>
              <div>
                <Eyebrow axis="TA">Sovereign · Encrypted · Yours</Eyebrow>
                <h1>Your records.<br/><em>Your keys.</em></h1>
                <p>Every clinical document, image, lab, journal entry, and CH snapshot you've ever produced.  AES-256-GCM encrypted with your key — Conceptual Health stores opaque ciphertext only.  The contents are unreadable to the server, to our staff, and to any subpoena that targets us instead of you.</p>
                <div className="k-hero-actions">
                  <button className="k-btn k-btn-primary" disabled style={{ opacity: 0.55, cursor: 'not-allowed' }}>+ Upload record (use iOS app)</button>
                  <a className="k-btn k-btn-ghost" href="https://conceptualhealth.com/ui_kits/master-equation/" style={{ textDecoration: 'none' }}>Open Master Equation →</a>
                </div>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
                {heroStats.map((s, i) => (
                  <div key={i} style={{ padding: 14, border: '1px solid var(--border-1-dark)', borderRadius: 10, background: 'var(--bg-steel)' }}>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 6 }}>{s.label}</div>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 26, color: 'var(--fg-1)', letterSpacing: '-0.02em' }}>{s.value}</div>
                  </div>
                ))}
              </div>
            </section>

            {totalRecords === 0 ? (
              <section style={{ padding: '40px 24px', maxWidth: 760 }}>
                <Eyebrow axis="TA">Vault empty</Eyebrow>
                <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 28, margin: '8px 0 18px' }}>Nothing here yet.</h2>
                <p style={{ fontSize: 15, lineHeight: 1.65, color: 'var(--fg-2)', marginBottom: 22 }}>
                  Your vault populates when one of the following writes an encrypted entry to it:
                </p>
                <ul style={{ fontSize: 14.5, lineHeight: 1.8, color: 'var(--fg-1)', paddingLeft: 22, marginBottom: 24 }}>
                  <li><strong>iOS / Android app</strong> — every dream entry, journal, nutrition log, vital sign, lab result, and prescription you record through the mobile app encrypts locally and syncs here.</li>
                  <li><strong>Clinical encounters</strong> — when a clinician signs an encounter note, it lands here under your scope.</li>
                  <li><strong>Health Connect / HealthKit</strong> — wearable + watch sync push vital signs (HR, HRV, sleep, steps) into encrypted vital-sign entries.</li>
                  <li><strong>Provider imports</strong> — lab results, imaging (DICOM), and discharge summaries from connected providers.</li>
                  <li><strong>Manual upload</strong> — PDFs, images, audio of encounters, anything you want to seal under your key (iOS app for now; browser upload in a future release).</li>
                </ul>
                <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                  <a className="k-btn k-btn-primary" href="https://orb.conceptualhealth.com/" style={{ textDecoration: 'none' }}>Open Guardian Orb →</a>
                  <a className="k-btn k-btn-ghost" href="https://conceptualhealth.com/ui_kits/master-equation/sub-signals.yaml" style={{ textDecoration: 'none' }}>Sub-signal catalog</a>
                </div>
              </section>
            ) : (
              <>
                <section className="k-section-head">
                  <div><Eyebrow axis="TA">Recent records</Eyebrow><h2>What's in your vault.</h2></div>
                  <div className="k-tabs">
                    {filterTypes.map(t => (
                      <button key={t} className={recordFilter === t ? 'active' : ''} onClick={() => setRecordFilter(t)}>
                        {t === 'All' ? 'All' : (CATEGORY_META[t]?.label || t)}
                      </button>
                    ))}
                  </div>
                </section>

                <table className="k-table">
                  <thead><tr>
                    <th>Entry</th><th>Type</th><th>Axis</th><th>Last modified</th><th>Status</th>
                  </tr></thead>
                  <tbody>
                    {shownEntries.map(e => {
                      const meta = CATEGORY_META[e.data_type] || { label: e.data_type, axis: 'TA' };
                      return (
                        <tr key={e.id}>
                          <td>
                            <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                              <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--bg-steel)', display: 'grid', placeItems: 'center' }}>
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><rect x="5" y="11" width="14" height="9" rx="1.5" stroke="currentColor" strokeWidth="1.4"/><path d="M8 11V8a4 4 0 018 0v3" stroke="currentColor" strokeWidth="1.4"/></svg>
                              </div>
                              <div>
                                <div style={{ color: 'var(--fg-1)', fontFamily: 'var(--font-sans)', fontWeight: 500 }}>{meta.label}</div>
                                <div style={{ fontSize: 11, color: 'var(--fg-3)' }}>id {String(e.id).slice(0, 8)}… · v{e.sync_version || 1}</div>
                              </div>
                            </div>
                          </td>
                          <td style={{ color: 'var(--fg-2)', fontFamily: 'var(--font-mono)', fontSize: 12 }}>{e.data_type}</td>
                          <td><AxisSigil axis={meta.axis} size={18} label={meta.axis} /></td>
                          <td style={{ color: 'var(--fg-2)', fontFamily: 'var(--font-mono)', fontSize: 12 }}>{e.last_modified ? new Date(e.last_modified).toLocaleString() : '—'}</td>
                          <td><span className="k-pill green">Encrypted</span></td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
                <div style={{ padding: '14px 24px', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.05em' }}>
                  Contents are AES-256-GCM ciphertext. Decryption happens only on the iOS / Android client that holds your key. The browser shows metadata only — by design.
                </div>
              </>
            )}
          </>
        )}

        {tab === 'Shared' && <SharedTab sharing={v.sharing || []} />}
        {tab === 'Audit Log' && <AuditTab audit={v.audit || []} />}
        {tab === 'Settings' && <SettingsTab me={v.me} />}
      </main>
      <CrossLinkStrip currentId="datavault" ids={['orb','clinical','chain']} />
      <MasterEquationArtifact />
      <Footer name="Data Vault" currentId="datavault" />
    </div>
  );
}

/* ── Tabs ──────────────────────────────────────────────────────── */
const SharedTab = ({ sharing }) => (
  <section style={{ padding: 24 }}>
    <Eyebrow axis="TA">Active grants</Eyebrow>
    <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 600, margin: '8px 0 18px' }}>Who can read what.</h2>
    {sharing.length === 0 ? (
      <div style={{ padding: 22, border: '1px solid var(--border-1-dark)', borderRadius: 10, color: 'var(--fg-2)', fontStyle: 'italic' }}>
        No active provider grants. When you authorize a clinic or clinician to read part of your vault, the grant will appear here with full scope detail. Revocation is one click and immediate.
      </div>
    ) : (
      <table className="k-table">
        <thead><tr><th>Grantee</th><th>Scope</th><th>Granted</th><th>Expires</th><th></th></tr></thead>
        <tbody>
          {sharing.map(s => (
            <tr key={s.id}>
              <td>{s.clinic_name || s.grantee_name || 'Clinic ' + String(s.clinic_id || s.grantee_id || '').slice(0, 8)}</td>
              <td>{(s.shared_categories || s.scope || []).join(', ') || 'none'}</td>
              <td>{s.consent_date ? new Date(s.consent_date).toLocaleDateString() : '—'}</td>
              <td>{s.expires_at ? new Date(s.expires_at).toLocaleDateString() : 'No expiry'}</td>
              <td><button className="k-btn k-btn-ghost" style={{ color: 'var(--accent-coral)', borderColor: 'rgba(229,72,77,0.3)' }} onClick={async () => {
                if (!confirm('Revoke this grant immediately?')) return;
                try {
                  await fetch(window.CHVault.apiRoot + '/api/v1/vault/sharing/' + s.id, {
                    method: 'DELETE',
                    credentials: 'include',
                    headers: { 'X-CSRF-Token': document.cookie.match(/csrf_token=([^;]+)/)?.[1] || '' },
                  });
                  window.location.reload();
                } catch (e) { alert('Revoke failed: ' + e.message); }
              }}>Revoke</button></td>
            </tr>
          ))}
        </tbody>
      </table>
    )}
  </section>
);

const AuditTab = ({ audit }) => (
  <section style={{ padding: 24 }}>
    <Eyebrow axis="TA">Audit log</Eyebrow>
    <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 600, margin: '8px 0 18px' }}>Every read, every write, signed to chain.</h2>
    {audit.length === 0 ? (
      <div style={{ padding: 22, border: '1px solid var(--border-1-dark)', borderRadius: 10, color: 'var(--fg-2)', fontStyle: 'italic' }}>
        No vault-access events recorded yet. Every read of an encrypted entry — by you, by a clinician you've granted access to, or by an automated sync — appears here HMAC-chained so anomalies are detectable.
      </div>
    ) : (
      <table className="k-table">
        <thead><tr><th>When</th><th>Actor</th><th>Action</th><th>Target</th></tr></thead>
        <tbody>
          {audit.map((a, i) => (
            <tr key={a.id || i}>
              <td style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5 }}>{a.at ? new Date(a.at).toLocaleString() : '—'}</td>
              <td>{a.actor || a.actor_name || a.user_id || '—'}</td>
              <td>{a.action || a.event_type || '—'}</td>
              <td style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5 }}>{a.target || a.entity_id || '—'}</td>
            </tr>
          ))}
        </tbody>
      </table>
    )}
  </section>
);

const SettingsTab = ({ me }) => (
  <section style={{ padding: 24, maxWidth: 720 }}>
    <Eyebrow axis="TA">Account</Eyebrow>
    <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 600, margin: '8px 0 18px' }}>Your vault, your keys.</h2>
    <table className="k-table">
      <tbody>
        <tr><td style={{ width: 200, color: 'var(--fg-3)', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase' }}>Member</td><td>{me && (me.display_name || me.email)}</td></tr>
        <tr><td style={{ color: 'var(--fg-3)', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase' }}>Member ID</td><td style={{ fontFamily: 'var(--font-mono)' }}>{me && (me.member_id || me.id)}</td></tr>
        <tr><td style={{ color: 'var(--fg-3)', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase' }}>Email</td><td>{me && me.email}</td></tr>
        <tr><td style={{ color: 'var(--fg-3)', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase' }}>Recovery key</td><td>Configured (or rotate via the iOS app)</td></tr>
      </tbody>
    </table>
    <div style={{ marginTop: 22, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
      <a className="k-btn k-btn-primary" href="https://orb.conceptualhealth.com/" style={{ textDecoration: 'none' }}>Open Guardian Orb →</a>
      <a className="k-btn k-btn-ghost" href="https://conceptualhealth.com/ui_kits/master-equation/" style={{ textDecoration: 'none' }}>Master Equation</a>
      <a className="k-btn k-btn-ghost" href="https://conceptualhealth.com/ui_kits/master-equation/validators/README.md" style={{ textDecoration: 'none' }}>Validator program</a>
    </div>
  </section>
);

/* ── Mount ────────────────────────────────────────────────────── */
ReactDOM.createRoot(document.getElementById('root')).render(
  <VaultProvider><AppInner /></VaultProvider>
);