// Providers & sharing — live data from the vault-sharing API.
// Source: GET /api/v1/vault/sharing  (returns active VaultSharing rows).
const Providers = () => {
  const [tab, setTab] = React.useState('providers');
  const [providers, setProviders] = React.useState(null);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    let dead = false;
    (async () => {
      try {
        const r = await fetch(window.CHVault.apiRoot + '/api/v1/vault/sharing', {
          credentials: 'include',
          headers: { 'Accept': 'application/json' },
        });
        if (r.status === 404) { if (!dead) setProviders([]); return; }
        if (!r.ok) throw new Error('sharing-' + r.status);
        const j = await r.json();
        if (!dead) setProviders(Array.isArray(j) ? j : (j.shares || j.providers || []));
      } catch (e) {
        if (!dead) { setError(e.message || String(e)); setProviders([]); }
      }
    })();
    return () => { dead = true; };
  }, []);

  const renderProviders = () => (
    <div className="k-card" style={{ padding: 18 }}>
      {providers === null && (
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)', padding: 16 }}>Loading vault-sharing records…</div>
      )}
      {providers && providers.length === 0 && (
        <div style={{ padding: 24, textAlign: 'center' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 16, color: 'var(--fg-2)', marginBottom: 8 }}>No active provider grants.</div>
          <div style={{ fontSize: 13, color: 'var(--fg-3)', maxWidth: 480, margin: '0 auto' }}>
            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>
        </div>
      )}
      {providers && providers.map((p, i) => (
        <div key={p.id || i} style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 16, padding: '18px 0', borderBottom: i < providers.length - 1 ? '1px solid var(--border-1)' : 'none' }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
              <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--fg-1)' }}>{p.clinic_name || p.provider_name || 'Clinic ' + (p.clinic_id || '').slice(0,8)}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>{p.provider_role || 'provider'}</div>
            </div>
            <div style={{ display: 'flex', gap: 18, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)', marginTop: 8 }}>
              <span>granted {p.consent_date ? new Date(p.consent_date).toLocaleDateString() : '—'}</span>
              {p.last_accessed && <span>last access {new Date(p.last_accessed).toLocaleString()}</span>}
            </div>
            <div style={{ fontSize: 12.5, color: 'var(--fg-1)', marginTop: 8, padding: '8px 12px', background: 'var(--bg-mist)', borderRadius: 6, border: '1px solid var(--border-1)', display: 'inline-block' }}>
              Vault scope: <span style={{ color: 'var(--accent-clinical)', fontWeight: 600 }}>{(p.shared_categories || []).join(', ') || 'none'}</span>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'flex-end' }}>
            <button onClick={() => revokeShare(p.id)} style={{ padding: '8px 14px', borderRadius: 8, background: 'transparent', border: '1px solid rgba(229,72,77,0.3)', color: 'var(--accent-coral)', fontSize: 12.5, cursor: 'pointer' }}>Revoke</button>
          </div>
        </div>
      ))}
    </div>
  );

  async function revokeShare(id) {
    if (!id || !confirm('Revoke this share? The provider will lose vault access immediately.')) return;
    try {
      await fetch(window.CHVault.apiRoot + '/api/v1/vault/sharing/' + id, {
        method: 'DELETE',
        credentials: 'include',
        headers: { 'X-CSRF-Token': document.cookie.match(/csrf_token=([^;]+)/)?.[1] || '' },
      });
      setProviders((cur) => (cur || []).filter(p => p.id !== id));
    } catch (e) { alert('Revoke failed: ' + e.message); }
  }

  return (
    <div data-screen-label="Providers">
      <div style={{ marginBottom: 24 }}>
        <div className="k-eyebrow" style={{ color: 'var(--accent-clinical)' }}>Providers &amp; Sharing</div>
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 40, margin: '8px 0 0', letterSpacing: '-0.02em' }}>Who has read access, and why.</h1>
        <div style={{ fontSize: 14, color: 'var(--fg-2)', marginTop: 6, maxWidth: 640 }}>Every grant is scoped, revocable, and audited live from your vault. Revocation is one click and immediate.</div>
      </div>

      <div style={{ display: 'flex', gap: 4, padding: 4, background: 'var(--bg-mist)', borderRadius: 10, border: '1px solid var(--border-1)', marginBottom: 18, width: 'fit-content' }}>
        {[['providers', 'Active grants']].map(([id, label]) => (
          <button key={id} onClick={() => setTab(id)} style={{ padding: '8px 18px', borderRadius: 8, background: tab === id ? 'var(--bg-parchment)' : 'transparent', border: 'none', fontSize: 12.5, color: tab === id ? 'var(--fg-1)' : 'var(--fg-3)', cursor: 'pointer', fontWeight: tab === id ? 600 : 500 }}>{label}</button>
        ))}
      </div>

      {renderProviders()}
    </div>
  );
};
window.Providers = Providers;