// Audit flow + Snapshot screens
const { useState: useS } = React;

function AuditTopBar({ step, total, onBack, lang, setLang }) {
  return (
    <div className="audit-top">
      <a className="brand" href="#" onClick={(e)=>e.preventDefault()}>
        <img src="./assets/logos/monogram-dark.svg" width="28" height="28" alt=""/>
        <span className="wordmark" style={{fontSize:18}}>TheDentist<span style={{color:'var(--seal)'}}>.</span>ai</span>
      </a>
      <div style={{display:'flex',alignItems:'center',gap:'var(--s-4)'}}>
        <ProgressDots step={step} total={total}/>
        <LangToggle lang={lang} setLang={setLang}/>
      </div>
    </div>
  );
}

function Audit1({ go, state, set, lang, setLang }) {
  const sel = state.teeth || [];
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!ref.current) return;
    ref.current.innerHTML = window.TOOTHMAP_PATIENT_SVG || '';
    // attach click handlers to <g> tooth groups by index
    const groups = ref.current.querySelectorAll('g[transform^="translate"]');
    // We rely on the auto-generated structure: each tooth is a <g> followed by a <text> with the tooth number.
    const texts = ref.current.querySelectorAll('text');
    texts.forEach((t) => {
      const num = parseInt(t.textContent, 10);
      if (!num) return;
      const g = t.previousElementSibling;
      if (!g) return;
      g.style.cursor = 'pointer';
      const path = g.querySelector('path');
      const isSel = sel.includes(num);
      if (path) {
        path.setAttribute('fill', isSel ? '#F4E4DD' : '#FAF8F4');
        path.setAttribute('stroke', isSel ? '#B8492C' : '#0A1F33');
        path.setAttribute('stroke-width', isSel ? '2' : '1');
      }
      t.setAttribute('fill', isSel ? '#B8492C' : '#6B7E8C');
      t.setAttribute('font-weight', isSel ? '600' : '400');
      g.onclick = () => set({...state, teeth: sel.includes(num) ? sel.filter(x=>x!==num) : [...sel,num]});
    });
  }, [sel]);
  return (
    <div className="audit">
      <AuditTopBar step={1} total={3} lang={lang} setLang={setLang}/>
      <div className="audit-body">
        <h1 className="audit-h">Where does it hurt?</h1>
        <p className="audit-sub">Tap any teeth that bother you. Skip if nothing hurts.</p>
        <div className="toothmap">
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'0 8px',marginBottom:6,fontFamily:'var(--font-display)',fontSize:13,fontStyle:'italic',color:'var(--ink-2)'}}>
            <span>← your left</span>
            <span style={{fontStyle:'normal',fontFamily:'var(--font-body)',fontSize:10,fontWeight:600,letterSpacing:'0.12em',textTransform:'uppercase',color:'var(--ink-3)'}}>your view · looking down at your mouth</span>
            <span>your right →</span>
          </div>
          <div className="toothmap-label">upper teeth</div>
          <div ref={ref} aria-label="Tooth map — patient view, ADA Universal Numbering"/>
          <div className="toothmap-label" style={{marginTop:-8}}>lower teeth</div>
        </div>
      </div>
      <div className="audit-foot">
        <a href="#" onClick={(e)=>{e.preventDefault();go('audit-2');}}>Skip this step →</a>
        <Button variant="primary" onClick={()=>go('audit-2')}>Continue</Button>
      </div>
    </div>
  );
}

const SYMPTOMS = ['Tooth pain','Gum bleeding','Sensitivity to cold','Sensitivity to hot','Swelling','Bad breath','Jaw pain','Chipped/broken','Lost filling','Looks discolored','Anxious about visits','Want a checkup'];

function Audit2({ go, state, set, lang, setLang }) {
  const sel = state.symptoms || [];
  const sev = state.severity ?? 3;
  const showEm = sev >= 8 && sel.includes('Swelling');
  const toggle = (s) => set({...state, symptoms: sel.includes(s) ? sel.filter(x=>x!==s) : [...sel,s]});
  return (
    <div className="audit">
      <AuditTopBar step={2} total={3} lang={lang} setLang={setLang}/>
      <div className="audit-body">
        <h1 className="audit-h">What are you feeling?</h1>
        <p className="audit-sub">Pick anything that fits. There's no wrong answer.</p>
        <div className="symptoms" style={{marginBottom:'var(--s-8)'}}>
          {SYMPTOMS.map(s => <span key={s} className={`symptom-chip ${sel.includes(s)?'sel':''}`} onClick={()=>toggle(s)}>{s}</span>)}
        </div>
        <div className="card">
          <div className="severity">
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline'}}>
              <h3 style={{margin:0,fontSize:16}}>How severe is it?</h3>
              <span className="severity-readout">{sev}<span style={{fontSize:14,color:'var(--ink-3)',fontFamily:'var(--font-body)',fontWeight:400}}> / 10</span></span>
            </div>
            <input type="range" min={1} max={10} value={sev} onChange={(e)=>set({...state,severity:+e.target.value})}/>
            <div className="severity-anchors"><span>barely notice</span><span>constant pain</span></div>
          </div>
        </div>
      </div>
      <div className="audit-foot">
        <a href="#" onClick={(e)=>{e.preventDefault();go('audit-1');}}>← Back</a>
        <Button variant="primary" onClick={()=> showEm ? go('emergency') : go('audit-3')}>Continue</Button>
      </div>
    </div>
  );
}

function Audit3({ go, state, set, lang, setLang }) {
  const [busy, setBusy] = useS(false);
  const [err, setErr] = useS(null);
  const submit = async () => {
    setBusy(true);
    setErr(null);
    try {
      const triageResp = await fetch("/api/triage", {
        method: "POST",
        headers: {"content-type":"application/json"},
        body: JSON.stringify({ symptoms: state.symptoms || [], severity: state.severity ?? 3 }),
      });
      const triage = await triageResp.json();
      if (triage.gateEmergencyContent) {
        set({...state, _triage: triage});
        go('emergency');
        return;
      }
      const snapResp = await fetch("/api/snapshot", {
        method: "POST",
        headers: {"content-type":"application/json"},
        body: JSON.stringify({
          symptoms: state.symptoms || [],
          severity: state.severity ?? 3,
          teeth: state.teeth || [],
          zip: state.zip || "",
          insurance: state.insurance || "",
        }),
      });
      if (!snapResp.ok) throw new Error(`snapshot_${snapResp.status}`);
      const snap = await snapResp.json();
      const dirResp = await fetch(`/api/directory?zip=${encodeURIComponent(state.zip || "")}&insurance=${encodeURIComponent(state.insurance || "")}&language=${encodeURIComponent(state.language || "English")}&limit=3`);
      const dir = dirResp.ok ? await dirResp.json() : { results: [] };
      set({...state, _snapshot: snap, _directory: dir, _triage: triage});
      go('snapshot');
    } catch (e) {
      setErr("Couldn't reach the audit service. Please try again in a moment.");
      setBusy(false);
    }
  };
  return (
    <div className="audit">
      <AuditTopBar step={3} total={3} lang={lang} setLang={setLang}/>
      <div className="audit-body">
        <h1 className="audit-h">A few last things.</h1>
        <p className="audit-sub">So we can match you with dentists who fit your situation.</p>
        <div style={{display:'grid',gap:'var(--s-4)'}}>
          <div className="field">
            <label>ZIP code</label>
            <input value={state.zip || '94102'} onChange={(e)=>set({...state,zip:e.target.value})}/>
          </div>
          <div className="field">
            <label>Insurance plan</label>
            <select value={state.insurance || 'No insurance'} onChange={(e)=>set({...state,insurance:e.target.value})}>
              <option>No insurance</option>
              <option>Delta Dental PPO</option><option>MetLife</option><option>Cigna</option><option>Aetna</option><option>Medicaid / Denti-Cal</option>
            </select>
            <div className="field-help">Most plans are searchable. Without insurance is the most common selection.</div>
          </div>
          <div className="field">
            <label>Preferred language</label>
            <select value={state.language||'English'} onChange={(e)=>set({...state,language:e.target.value})}>
              <option>English</option><option>Español</option><option>中文</option>
            </select>
          </div>
          <details>
            <summary style={{cursor:'pointer',color:'var(--ink-2)',fontSize:14,padding:'8px 0'}}>Optional: photo · booking for someone else · for a child</summary>
            <div style={{display:'grid',gap:'var(--s-3)',marginTop:'var(--s-3)'}}>
              <div className="card card-paper" style={{padding:'var(--s-4)',display:'flex',gap:12,alignItems:'center'}}>
                <Icon d={ICONS.upload} size={20}/>
                <div style={{fontSize:14,color:'var(--ink-2)'}}>Drag a photo here, or tap to upload</div>
              </div>
              <label style={{display:'flex',gap:8,alignItems:'center',fontSize:14}}><input type="checkbox"/> I'm booking for someone else</label>
              <label style={{display:'flex',gap:8,alignItems:'center',fontSize:14}}><input type="checkbox"/> I'm booking for a child</label>
            </div>
          </details>
        </div>
      </div>
      {err && <div style={{padding:'var(--s-3)',background:'var(--alert-tint)',color:'var(--alert)',borderRadius:'var(--r-3)',marginTop:'var(--s-3)',fontSize:14}}>{err}</div>}
      <div className="audit-foot">
        <a href="#" onClick={(e)=>{e.preventDefault();go('audit-2');}}>← Back</a>
        <Button variant="primary" onClick={submit} disabled={busy}>{busy ? 'Generating snapshot…' : 'Get my Smile Snapshot'}</Button>
      </div>
    </div>
  );
}

function Emergency({ go }) {
  return (
    <div className="emergency-backdrop">
      <div className="emergency-modal" role="alertdialog" aria-labelledby="em-h">
        <h2 id="em-h"><Icon d={ICONS.alert} size={28} stroke={2}/>This may be a dental emergency.</h2>
        <p style={{margin:0,color:'var(--ink-1)'}}>Severe pain combined with swelling can signal a spreading infection. Take one of the actions below.</p>
        <div className="actions">
          <button className="btn btn-md btn-alert">Call 911 now (if breathing affected)</button>
          <button className="btn btn-md btn-alert-out">Find a 24-hour emergency dentist</button>
          <button className="btn btn-sm btn-ghost" onClick={()=>go('audit-3')} style={{justifyContent:'flex-start'}}>Continue to non-emergency triage (only if you're sure)</button>
        </div>
      </div>
    </div>
  );
}

function Snapshot({ go, state, lang, setLang }) {
  const snap = state._snapshot;
  const dir = state._directory;
  const urgencyLabel = snap?.urgency === 'emergency' ? 'Emergency' : snap?.urgency === 'urgent' ? 'Within 24–72 hours' : 'Within 1–2 weeks';
  const urgencyNote = snap?.urgency === 'emergency' ? 'See an emergency dentist now.' : snap?.urgency === 'urgent' ? 'Book promptly — symptoms suggest escalation risk.' : 'Not an emergency. Worth booking soon to prevent escalation.';
  const items = snap?.items || [
    {name:'Reversible pulpitis', description:'Inflamed tooth nerve from a deep cavity. Often resolves with a filling if caught early.'},
    {name:'Cracked tooth syndrome', description:'A small crack lets cold reach the nerve. A crown often resolves it.'},
    {name:'Recession sensitivity', description:'Receding gums expose root surface. A desensitizing treatment may help.'},
  ];
  const cost = snap?.cost || { low: 285, high: 1420, note: 'Typical range for filling, crown, or root canal — practice-published rates.' };
  const matched = (dir?.results || []).slice(0, 3);
  return (
    <div className="app">
      <Masthead lang={lang} setLang={setLang} go={go}/>
      <main className="snap-page">
        <div className="container article">
          <div className="snap-card">
            <div className="snap-eyebrow">Your Smile Snapshot · {new Date().toLocaleDateString('en-US',{month:'long',year:'numeric'})}</div>
            <h1 className="snap-title">Here's what we heard.</h1>
            <p style={{fontSize:18,color:'var(--ink-2)',maxWidth:560,margin:0}}>{snap?.summary || `Based on the symptoms shared (${(state.symptoms||[]).join(', ') || 'none specified'}), here are three plausible categories a licensed dentist would commonly evaluate.`}</p>
            <div className="t-fine" style={{marginTop:'var(--s-4)',padding:'var(--s-3) var(--s-4)',background:'var(--bone)',borderRadius:'var(--r-3)',color:'var(--ink-2)',lineHeight:1.5}}>
              <strong style={{color:'var(--ink-1)'}}>AI-assisted information (CA AB 3030):</strong> {snap?.disclosure || 'This snapshot was generated by an AI model and reviewed against Editorial Council criteria. It is not a diagnosis. Under California SB 1120, clinical determinations require a licensed dentist.'}
              {snap?.source && <div style={{marginTop:6,fontFamily:'var(--font-mono)',fontSize:11,opacity:0.7}}>source: {snap.source}{snap.audit_id ? ` · audit_id: ${snap.audit_id}` : ''}</div>}
            </div>
            <div style={{margin:'var(--s-6) 0',background:'var(--paper)',borderRadius:'var(--r-5)',padding:'var(--s-6)',display:'flex',justifyContent:'center'}}>
              <img src="./assets/illustrations/snapshot.svg" style={{maxWidth:480,width:'100%'}} alt=""/>
            </div>
            <h2 style={{fontFamily:'var(--font-display)',fontSize:24,fontWeight:500,margin:'0 0 var(--s-3)'}}>Three things this commonly is</h2>
            <div className="snap-three">
              {items.map((it)=>(
                <div className="card card-paper" key={it.name}>
                  <h3>{it.name}</h3>
                  <p>{it.description}</p>
                </div>
              ))}
            </div>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'var(--s-4)',margin:'var(--s-8) 0'}}>
              <div>
                <div className="t-eyebrow">In ZIP {state.zip||'94102'} · {state.insurance||'No insurance'}</div>
                <div className="snap-cost">${cost.low.toLocaleString()} – ${cost.high.toLocaleString()}</div>
                <div className="t-meta">{cost.note}</div>
              </div>
              <div>
                <div className="t-eyebrow">Urgency</div>
                <div className="snap-cost" style={{color:'var(--seal)'}}>{urgencyLabel}</div>
                <div className="t-meta">{urgencyNote}</div>
              </div>
            </div>
            <h2 style={{fontFamily:'var(--font-display)',fontSize:24,fontWeight:500,margin:'var(--s-8) 0 var(--s-2)'}}>Three matched dentists near you</h2>
            <p className="t-meta" style={{margin:'0 0 var(--s-4)'}}>Ranked by Verified Performance Score (VPS) — earned algorithmically, never paid placement. <a href="/methodology/">See the methodology →</a></p>
            <div style={{display:'grid',gap:'var(--s-3)'}}>
              {matched.length === 0 && (
                <div className="t-meta" style={{padding:'var(--s-4)',background:'var(--bone)',borderRadius:'var(--r-3)'}}>Loading matched dentists…</div>
              )}
              {matched.map((d)=>(
                <div key={d.npi} className="card card-paper" style={{display:'flex',justifyContent:'space-between',alignItems:'center',gap:'var(--s-4)'}}>
                  <div>
                    <h3 style={{margin:0,fontFamily:'var(--font-display)',fontSize:18,fontWeight:500}}>{d.name}</h3>
                    <div style={{color:'var(--ink-2)',fontSize:14}}>{d.practice} · {d.distance_mi} mi</div>
                    <div className="t-meta" style={{marginTop:4}}>{d.why}</div>
                  </div>
                  <div style={{display:'flex',gap:6}}>
                    {d.badges.map(([axis,tier])=> <Badge key={axis} axis={axis} tier={tier} size={48}/>)}
                  </div>
                  <Button variant="primary" size="sm" onClick={()=>go('profile')}>View</Button>
                </div>
              ))}
            </div>
            <div style={{marginTop:'var(--s-8)',padding:'var(--s-6)',background:'var(--paper)',borderRadius:'var(--r-5)',display:'flex',justifyContent:'space-between',alignItems:'center',gap:'var(--s-4)',flexWrap:'wrap'}}>
              <div>
                <div style={{fontFamily:'var(--font-display)',fontSize:18,fontWeight:500}}>Share your Snapshot</div>
                <div className="t-meta">Privacy-first — no name, no clinical claims. Just one surprising stat.</div>
              </div>
              <Button variant="secondary"><Icon d={ICONS.share} size={16}/> Share card</Button>
            </div>
            <Disclosure/>
          </div>
        </div>
      </main>
      <Footer/>
    </div>
  );
}

Object.assign(window,{ Audit1, Audit2, Audit3, Emergency, Snapshot, AuditTopBar });