// Directory & Profile screens
const FILTER_AXIS_MAP = {
  'Anxious-Friendly': 'anxious-friendly',
  'Family-Friendly': 'family-friendly',
  'Multilingual': 'multilingual',
  'Budget-Conscious': 'budget-conscious',
  'Caregiver-Friendly': 'caregiver-friendly',
  'Continuity Champion': 'continuity-champion',
};
function Directory({ go, lang, setLang, state }) {
  const [filt, setFilt] = useState(['All']);
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(true);
  const [err, setErr] = useState(null);
  const toggle = (f) => {
    if (f==='All') setFilt(['All']);
    else setFilt(prev => {
      const next = prev.filter(x=>x!=='All');
      return next.includes(f) ? next.filter(x=>x!==f) : [...next, f];
    });
  };
  const FILTERS = ['All','Anxious-Friendly','Family-Friendly','Multilingual','Budget-Conscious','Caregiver-Friendly','Continuity Champion'];
  React.useEffect(() => {
    const axes = filt.filter(f => FILTER_AXIS_MAP[f]).map(f => FILTER_AXIS_MAP[f]).join(',');
    const params = new URLSearchParams({
      zip: (state && state.zip) || '',
      insurance: (state && state.insurance) || '',
      language: (state && state.language) || '',
      ...(axes ? { axes } : {}),
      limit: '10',
    });
    setLoading(true);
    fetch(`/api/directory?${params}`)
      .then(r => r.ok ? r.json() : Promise.reject(r.status))
      .then(d => { setResults(d.results || []); setErr(null); })
      .catch(e => setErr(`Couldn't load directory (${e})`))
      .finally(() => setLoading(false));
  }, [filt.join(','), state && state.zip, state && state.insurance, state && state.language]);
  const zip = (state && state.zip) || '94102';
  return (
    <div className="app">
      <Masthead lang={lang} setLang={setLang} go={go}/>
      <main>
        <div className="container">
          <div style={{padding:'var(--s-8) 0 var(--s-4)'}}>
            <div className="t-eyebrow" style={{marginBottom:6}}>Directory</div>
            <h1 className="section-h" style={{margin:0}}>Recognized dentists near {zip}</h1>
            <p style={{margin:'var(--s-2) 0 0',color:'var(--ink-2)'}}>
              {loading ? 'Loading…' : `${results.length} dentists · sorted by Verified Performance Score`}
              {err && <span style={{color:'var(--alert)'}}> · {err}</span>}
            </p>
          </div>
          <div className="dir-toolbar">
            <div className="dir-filters">
              {FILTERS.map(f => <span key={f} className={`pill ${filt.includes(f)?'pill-active':''}`} onClick={()=>toggle(f)} style={{cursor:'pointer'}}>{f}</span>)}
            </div>
            <Button variant="tertiary" size="sm"><Icon d={ICONS.filter} size={14}/> Sort: Best fit</Button>
          </div>
          <div className="dir-grid" style={{paddingBottom:'var(--s-12)'}}>
            {results.map(r => (
              <div className="card dir-card" key={r.npi}>
                <div className="dir-card-top">
                  <div>
                    <h3>{r.name}</h3>
                    <div className="practice">{r.practice} · {r.distance_mi} mi · {r.address}</div>
                  </div>
                  <div className="badges">
                    {r.badges.map(([a,t])=> <Badge key={a} axis={a} tier={t} size={52}/>)}
                  </div>
                </div>
                <div className="why">
                  <strong>Why we're showing this:</strong> {r.why}
                </div>
                <div className="meta-row">
                  <span style={{fontFamily:'var(--font-display)',fontSize:17,fontWeight:500,color:'var(--ink-1)',fontFeatureSettings:'"tnum"'}}>{r.cost_band}</span>
                  <span>·</span>
                  <span>{r.insurance.slice(0,2).join(' · ')}</span>
                  <span>·</span>
                  <span>{r.languages.join(' · ')}</span>
                  <span>·</span>
                  <Pill tone={r.accepting?'ok':'neutral'}>{r.accepting?'Accepting':'Waitlist'}</Pill>
                </div>
                <div className="actions">
                  <Button variant="tertiary" size="sm" onClick={()=>go('profile')}>View profile</Button>
                  <Button variant="primary" size="sm">Book {r.next_avail}</Button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </main>
      <Footer/>
    </div>
  );
}

function Profile({ go, lang, setLang }) {
  const AXES = [
    ['anxious-friendly','distinguished','Anxious-Friendly'],
    ['multilingual','excellence','Multilingual'],
    ['continuity-champion','recognized','Continuity'],
  ];
  return (
    <div className="app">
      <Masthead lang={lang} setLang={setLang} go={go}/>
      <main>
        <div className="container">
          <div style={{padding:'var(--s-4) 0'}}>
            <a href="#" onClick={(e)=>{e.preventDefault();go('directory');}} style={{color:'var(--ink-2)',fontSize:14,textDecoration:'none'}}>← Back to directory</a>
          </div>
          <div className="profile-grid">
            <div>
              <div className="profile-hero">
                <div className="profile-photo">SC</div>
                <div>
                  <h1 className="profile-name">Dr. Sarah Chen, DDS</h1>
                  <div className="profile-practice">Bay Dental Care · 1402 Mission St, San Francisco</div>
                  <div style={{display:'flex',gap:6,marginTop:8,flexWrap:'wrap'}}>
                    <Pill tone="ok">Accepting new patients</Pill>
                    <Pill>Delta PPO · MetLife · Cigna</Pill>
                    <Pill>English · 中文</Pill>
                  </div>
                </div>
              </div>

              <section className="profile-section">
                <div className="t-eyebrow" style={{marginBottom:6}}>Recognition · 2026</div>
                <h2>Recognized in three areas</h2>
                <div className="profile-axes" style={{marginTop:'var(--s-4)'}}>
                  {AXES.map(([a,t,n])=>(
                    <div className="profile-axis" key={a}>
                      <Badge axis={a} tier={t} size={84}/>
                      <div style={{fontSize:13,fontWeight:600,marginTop:6}}>{n}</div>
                      <div className="t-tier">{t}</div>
                    </div>
                  ))}
                </div>
                <p className="t-fine" style={{marginTop:'var(--s-4)'}}>Recognition is earned algorithmically from verified surveys and structured outcome signals. <a href="#methodology" style={{color:'var(--ink-2)'}}>See methodology</a>.</p>
              </section>

              <section className="profile-section">
                <h2>Verified patient highlights</h2>
                <div style={{display:'grid',gap:'var(--s-3)'}}>
                  {[
                    ['What patients said most often','"Explained things calmly. Didn\'t rush. Walked me through every step before starting." — recurring across 31 verified surveys'],
                    ['Anxious-Friendly signal','78% of first-time patients with self-reported dental anxiety completed a follow-up visit within 12 months. Network median: 41%.'],
                    ['Multilingual signal','Mandarin and Cantonese available without translator request. Verified Apr 2026.'],
                  ].map(([t,d])=>(
                    <div className="card card-paper" key={t}>
                      <div style={{fontWeight:600,fontSize:14,marginBottom:6}}>{t}</div>
                      <div style={{fontSize:14,color:'var(--ink-2)',lineHeight:1.55}}>{d}</div>
                    </div>
                  ))}
                </div>
              </section>

              <section className="profile-section">
                <h2>Practice-published cost ranges</h2>
                <p style={{margin:'0 0 var(--s-3)',color:'var(--ink-2)',fontSize:14}}>Cash-pay rates published Apr 2026. Insurance benefit estimates are approximate.</p>
                <table className="profile-cost-table">
                  <tbody>
                    {[
                      ['New patient exam + cleaning','D0150 · D1110','$185'],
                      ['Filling, single surface','D2330','$220 – $310'],
                      ['Crown, porcelain','D2740','$1,180 – $1,520'],
                      ['Root canal, molar','D3330','$1,420 – $1,820'],
                    ].map(([n,c,p])=>(
                      <tr key={c}><td>{n}</td><td style={{color:'var(--ink-3)',fontFamily:'var(--font-mono)',fontSize:12}}>{c}</td><td style={{fontWeight:600}}>{p}</td></tr>
                    ))}
                  </tbody>
                </table>
              </section>

              <section className="profile-section">
                <h2>About this practice</h2>
                <p style={{color:'var(--ink-2)',lineHeight:1.65,fontSize:15}}>Bay Dental Care has served the Mission District since 2014. The practice emphasizes calm, paced visits and bilingual care. Dr. Chen completed her DDS at UCSF and is a member of the American Dental Association.</p>
              </section>

              <Disclosure/>
            </div>

            <aside className="profile-side">
              <div className="card card-paper">
                <div className="t-eyebrow" style={{marginBottom:6}}>Next available</div>
                <div style={{fontFamily:'var(--font-display)',fontSize:24,fontWeight:500}}>Tue 2:00 PM</div>
                <div style={{color:'var(--ink-2)',fontSize:13,margin:'4px 0 var(--s-4)'}}>tomorrow · 47 minutes from your location</div>
                <Button variant="primary" size="md" style={{width:'100%'}}>Book appointment</Button>
                <Button variant="tertiary" size="sm" style={{width:'100%',marginTop:8}}>See all available times</Button>
              </div>
              <div className="card card-paper">
                <div className="t-eyebrow" style={{marginBottom:6}}>Practice info</div>
                <div style={{display:'grid',gap:8,fontSize:14}}>
                  <div><strong>Hours</strong><br/><span style={{color:'var(--ink-2)'}}>Mon–Fri 8a–6p · Sat 9a–2p</span></div>
                  <div><strong>Phone</strong><br/><span style={{color:'var(--ink-2)'}}>(415) 555-0142</span></div>
                  <div><strong>Languages</strong><br/><span style={{color:'var(--ink-2)'}}>English · 普通话 · 廣東話</span></div>
                </div>
              </div>
            </aside>
          </div>
        </div>
      </main>
      <Footer/>
    </div>
  );
}

Object.assign(window,{ Directory, Profile });