// Integrations.jsx — FuseBase practice portal (Bundle 2A) + Consolto hook (Bundle 2B)

const { useState, useEffect, useCallback } = React;

const PORTAL_SECTIONS = ['Dashboard', 'HITL', 'Insurance', 'Schedule', 'Billing'];

function readProCtx() {
  try {
    return JSON.parse(localStorage.getItem('td_pro_ctx') || '{}');
  } catch {
    return {};
  }
}

function authHeaders() {
  const h = { 'Content-Type': 'application/json' };
  const token = window.TdAuth?.readToken?.();
  if (token) h.Authorization = `Bearer ${token}`;
  return h;
}

function FuseBasePortal({ go }) {
  const [consoltoRoomId, setConsoltoRoomId] = useState(null);
  const [consoltoConfigured, setConsoltoConfigured] = useState(false);

  const role = (() => {
    try {
      return localStorage.getItem('td_role') || 'patient';
    } catch {
      return 'patient';
    }
  })();
  const isClinician = role === 'dentist' || role === 'clinician';

  const [practiceId, setPracticeId] = useState(() => readProCtx().practiceId || '');
  const [status, setStatus] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [provisioning, setProvisioning] = useState(false);
  const [provisionForm, setProvisionForm] = useState({
    practiceName: readProCtx().practiceName || '',
    contactEmail: readProCtx().contactEmail || '',
    tier: 'practice_pass_basic',
    npi: readProCtx().npi || '',
  });

  useEffect(() => {
    let cancelled = false;
    fetch('/api/consolto-config')
      .then((r) => r.json())
      .then((d) => {
        if (cancelled) return;
        setConsoltoConfigured(!!d.configured);
        setConsoltoRoomId(d.roomIdDefault || d.widgetId || null);
      })
      .catch(() => {});
    return () => { cancelled = true; };
  }, []);

  const loadStatus = useCallback(async (pid) => {
    const id = String(pid || practiceId || '').trim();
    if (!id) {
      setStatus(null);
      return;
    }
    setLoading(true);
    setError(null);
    try {
      const r = await fetch(`/api/fusebase/status?practiceId=${encodeURIComponent(id)}`, {
        headers: authHeaders(),
      });
      const data = await r.json().catch(() => ({}));
      if (!r.ok || data.ok === false) {
        setStatus(null);
        setError(data.error || `Status request failed (${r.status})`);
        return;
      }
      setStatus(data);
      if (data.practiceName && !provisionForm.practiceName) {
        setProvisionForm((f) => ({ ...f, practiceName: data.practiceName }));
      }
    } catch (e) {
      setStatus(null);
      setError(e?.message || 'Could not load portal status');
    } finally {
      setLoading(false);
    }
  }, [practiceId, provisionForm.practiceName]);

  useEffect(() => {
    if (practiceId) loadStatus(practiceId);
  }, [practiceId, loadStatus]);

  const handleProvision = async () => {
    const id = String(practiceId || '').trim();
    if (!id) {
      setError('Set a practice ID in professional context (td_pro_ctx) or enter one below.');
      return;
    }
    setProvisioning(true);
    setError(null);
    try {
      const r = await fetch('/api/fusebase/provision', {
        method: 'POST',
        headers: authHeaders(),
        body: JSON.stringify({
          practiceId: id,
          practiceName: provisionForm.practiceName || status?.practiceName || 'Dental Practice',
          contact_email: provisionForm.contactEmail,
          tier: provisionForm.tier,
          ...(provisionForm.npi ? { npi: provisionForm.npi } : {}),
        }),
      });
      const data = await r.json().catch(() => ({}));
      if (!r.ok || data.ok === false) {
        setError(data.error || `Provision failed (${r.status})`);
        return;
      }
      await loadStatus(id);
    } catch (e) {
      setError(e?.message || 'Provision request failed');
    } finally {
      setProvisioning(false);
    }
  };

  const Shell = window.B5PageShell || function FallbackShell({ title, children, go: g }) {
    return (
      <div className="screen-container gap-screen animate-fade-in-up">
        <button
          type="button"
          className="btn btn-ghost btn-sm"
          onClick={() => (g ? g('landing') : window.TDA_go?.('landing'))}
          style={{ marginBottom: 16, paddingLeft: 0 }}
        >
          ← Home
        </button>
        <div className="screen-hero"><h1>{title}</h1></div>
        {children}
      </div>
    );
  };
  const Disclaimer = window.B5DisclaimerBanner || function FallbackDisclaimer({ extra }) {
    return (
      <div className="disclaimer-banner">
        Information only — not a clinical recommendation. Review with your dentist.
        {extra ? ` ${extra}` : ''}
      </div>
    );
  };

  const connected = !!(status?.provisioned && status?.fusebaseUrl);
  const statusLabel = connected ? 'Connected' : status?.configured === false ? 'Setup pending' : 'Not provisioned';
  const statusClass = connected ? 'badge badge-green' : 'badge badge-yellow';
  const showConsolto = window.ConsoltoWidget && (status?.consoltoEnabled || consoltoConfigured);
  const consoltoRoom = status?.consoltoRoomId || consoltoRoomId;

  return (
    <Shell title={isClinician ? 'Apprentice OS Portal' : 'Your practice portal'} go={go}>
      <Disclaimer extra="Practice portals are BAA-backed when provisioned. No PHI on public consumer paths." />

      <p className="section-subtitle" style={{ marginBottom: 16 }}>
        {isClinician
          ? 'FuseBase workspace for Dentist Apprentice OS — Dashboard, HITL, Insurance, Schedule, and Billing.'
          : 'When your dentist provisions a portal, you can access practice-specific resources here.'}
      </p>

      <div className="card" style={{ marginBottom: 16 }}>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center', marginBottom: 12 }}>
          <span className={statusClass}>{statusLabel}</span>
          {loading && <span className="badge badge-gray">Loading…</span>}
          {!loading && status?.tier && <span className="badge badge-gray">{status.tier}</span>}
        </div>

        {!practiceId && isClinician && (
          <div style={{ marginBottom: 12 }}>
            <label className="section-subtitle" htmlFor="fb-practice-id">Practice ID (UUID)</label>
            <input
              id="fb-practice-id"
              className="form-control"
              type="text"
              placeholder="practice_id from Supabase practices"
              value={practiceId}
              onChange={(e) => setPracticeId(e.target.value.trim())}
              style={{ marginTop: 4 }}
            />
          </div>
        )}

        {error && (
          <div className="disclaimer-banner" style={{ marginBottom: 12 }}>
            {error}
          </div>
        )}

        {connected && status.fusebaseUrl && (
          <div style={{ marginBottom: 12 }}>
            {isClinician ? (
              <button
                type="button"
                className="btn btn-primary"
                onClick={() => window.open(status.fusebaseUrl, '_blank', 'noopener,noreferrer')}
              >
                Open portal
              </button>
            ) : (
              <iframe
                title="Practice portal"
                src={status.fusebaseUrl}
                style={{
                  width: '100%',
                  minHeight: 480,
                  border: '1px solid var(--line)',
                  borderRadius: 12,
                  background: 'var(--panel)',
                }}
                sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
              />
            )}
          </div>
        )}

        {isClinician && !connected && (
          <div style={{ display: 'grid', gap: 10, maxWidth: 420 }}>
            <input
              className="form-control"
              type="text"
              placeholder="Practice name"
              value={provisionForm.practiceName}
              onChange={(e) => setProvisionForm((f) => ({ ...f, practiceName: e.target.value }))}
            />
            <input
              className="form-control"
              type="email"
              placeholder="Owner email (contact_email)"
              value={provisionForm.contactEmail}
              onChange={(e) => setProvisionForm((f) => ({ ...f, contactEmail: e.target.value }))}
            />
            <input
              className="form-control"
              type="text"
              placeholder="NPI (optional)"
              value={provisionForm.npi}
              onChange={(e) => setProvisionForm((f) => ({ ...f, npi: e.target.value.replace(/\D/g, '').slice(0, 10) }))}
            />
            <select
              className="form-control"
              value={provisionForm.tier}
              onChange={(e) => setProvisionForm((f) => ({ ...f, tier: e.target.value }))}
            >
              <option value="practice_pass_basic">Practice Pass Basic</option>
              <option value="practice_pass_pro">Practice Pass Pro</option>
              <option value="practice_pass_clinical_os">Practice Pass Clinical OS</option>
            </select>
            <button
              type="button"
              className="btn btn-primary"
              disabled={provisioning || !practiceId || !provisionForm.contactEmail}
              onClick={handleProvision}
            >
              {provisioning ? 'Provisioning…' : 'Provision workspace'}
            </button>
          </div>
        )}

        {!isClinician && !connected && !loading && (
          <p className="section-subtitle" style={{ margin: 0 }}>
            Your practice has not linked a portal yet. Ask your dental team to complete setup from their Apprentice OS dashboard.
          </p>
        )}
      </div>

      <div className="card">
        <p className="section-title" style={{ fontSize: '1rem', marginBottom: 8 }}>Portal sections</p>
        <ul style={{ margin: 0, paddingLeft: 20, color: 'var(--mut)' }}>
          {PORTAL_SECTIONS.map((s) => (
            <li key={s}>{s}</li>
          ))}
        </ul>
        <p className="section-subtitle" style={{ marginTop: 12, marginBottom: 0 }}>
          <a href="/methodology/" style={{ color: 'var(--acc)' }}>Methodology</a>
          {' · '}
          Verified performance is independent of payment.
        </p>
      </div>

      {showConsolto && (
        <div style={{ marginTop: 24 }}>
          <p className="section-title" style={{ fontSize: '1rem', marginBottom: 8 }}>Video consult</p>
          {!consoltoConfigured && !status?.consoltoEnabled && (
            <p className="disclaimer-banner" style={{ fontSize: 13, marginBottom: 8 }}>
              Consolto not configured — operator: set CONSOLTO_WIDGET_ID per DOCS/consolto_setup.md
            </p>
          )}
          <window.ConsoltoWidget roomId={consoltoConfigured || status?.consoltoEnabled ? consoltoRoom : null} />
        </div>
      )}
    </Shell>
  );
}

window.FuseBasePortal = FuseBasePortal;