/* doctors-page.jsx — Find a Doctor list with filters. */

const { PageChrome, I18N, Ico, DEPARTMENTS, DOCTORS, initials } = window;

function App() {
  const t = I18N.en;

  // Read ?dept= from URL on first render
  const initialDept = React.useMemo(() => {
    try {
      const p = new URLSearchParams(window.location.search);
      return p.get('dept') || 'all';
    } catch(e) { return 'all'; }
  }, []);

  const [query, setQuery] = React.useState("");
  const [dept, setDept] = React.useState(initialDept);
  const [lang, setLang] = React.useState("any");
  const [sort, setSort] = React.useState("name");

  const allLangs = React.useMemo(() => {
    const s = new Set();
    DOCTORS.forEach(d => d.langs.forEach(l => s.add(l)));
    return Array.from(s);
  }, []);

  const filtered = React.useMemo(() => {
    let list = DOCTORS.filter(d => {
      if (dept !== "all" && d.dept !== dept) return false;
      if (lang !== "any" && !d.langs.includes(lang)) return false;
      if (query.trim()) {
        const q = query.toLowerCase();
        if (!d.name.toLowerCase().includes(q) &&
            !d.role.toLowerCase().includes(q) &&
            !d.spec.toLowerCase().includes(q)) return false;
      }
      return true;
    });
    if (sort === "name") list.sort((a,b) => a.name.localeCompare(b.name));
    else if (sort === "exp") list.sort((a,b) => b.years - a.years);
    return list;
  }, [query, dept, lang, sort]);

  return (
    <PageChrome activePage="Find a Doctor" t={t}>
      <section className="page-hero">
        <div className="container">
          <div>
            <div className="breadcrumb">
              <a href="index.html">Home</a>
              <span className="sep">/</span>
              <span>Find a Doctor</span>
            </div>
            <span className="eyebrow" style={{ marginTop: 20, display: 'inline-flex' }}>{t.doctors.hero.eyebrow}</span>
            <h1 className="h1">{t.doctors.hero.title}</h1>
          </div>
          <div><p className="lede">{t.doctors.hero.lede}</p></div>
        </div>
      </section>

      <section style={{ paddingBlock: 'clamp(48px, 6vw, 80px)' }}>
        <div className="container">
          <div className="doc-toolbar">
            <div className="doc-search">
              <Ico.Search className="icon" />
              <input
                type="text"
                placeholder={t.doctors.search}
                value={query}
                onChange={(e) => setQuery(e.target.value)}
              />
            </div>
            <div className="doc-filter">
              <Ico.Building className="icon" />
              <select value={dept} onChange={(e) => setDept(e.target.value)}>
                <option value="all">{t.doctors.filterDept}</option>
                {DEPARTMENTS.map(d => <option key={d.slug} value={d.slug}>{d.name}</option>)}
              </select>
              <Ico.Chevron className="icon" />
            </div>
            <div className="doc-filter">
              <Ico.Globe className="icon" />
              <select value={lang} onChange={(e) => setLang(e.target.value)}>
                <option value="any">{t.doctors.filterLang}</option>
                {allLangs.map(l => <option key={l} value={l}>{l}</option>)}
              </select>
              <Ico.Chevron className="icon" />
            </div>
            <div className="doc-filter">
              <select value={sort} onChange={(e) => setSort(e.target.value)} style={{ paddingLeft: 4 }}>
                <option value="name">Sort: A–Z</option>
                <option value="exp">Sort: Experience</option>
              </select>
              <Ico.Chevron className="icon" />
            </div>
          </div>

          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
            <div className="doc-count">{t.doctors.results(filtered.length)}</div>
            {(dept !== "all" || lang !== "any" || query) && (
              <button
                className="btn btn-ghost btn-sm"
                onClick={() => { setDept("all"); setLang("any"); setQuery(""); }}
              >
                Clear filters
              </button>
            )}
          </div>

          {filtered.length === 0 ? (
            <div style={{ padding: '64px 24px', textAlign: 'center', background: 'var(--surface)', borderRadius: 'var(--radius)' }}>
              <p style={{ fontSize: 16, color: 'var(--ink-2)' }}>No doctors match those filters yet.</p>
            </div>
          ) : (
            <div className="docs-grid">
              {filtered.map((d, i) => (
                <a className="doc" href={`#${d.slug}`} key={d.slug} id={d.slug}>
                  <div className="doc-photo">
                    <div className="ph">{initials(d.name)}</div>
                    <div className="specialty">{d.spec}</div>
                  </div>
                  <div className="doc-body">
                    <div className="doc-name">{d.name}</div>
                    <div className="doc-role">{d.role}</div>
                    <div className="doc-meta">
                      <span><Ico.Globe className="icon" style={{ width: 14, height: 14 }} /> {d.langs.join(' · ')}</span>
                      <span><Ico.Clock className="icon" style={{ width: 14, height: 14 }} /> {d.years} yrs</span>
                    </div>
                  </div>
                </a>
              ))}
            </div>
          )}

          <div style={{ marginTop: 48, padding: 24, background: 'var(--surface)', borderRadius: 'var(--radius)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
            <div>
              <div style={{ fontSize: 15, fontWeight: 600 }}>Can't find the right specialist?</div>
              <div style={{ fontSize: 14, color: 'var(--ink-2)', marginTop: 4 }}>Reception can help direct you to the right department.</div>
            </div>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              <a className="btn btn-primary btn-sm" href="book.html"><Ico.Calendar className="icon" /> Book an appointment</a>
              <a className="btn btn-secondary btn-sm" href="tel:+35726961600"><Ico.Phone className="icon" /> +357 26 961 600</a>
            </div>
          </div>
        </div>
      </section>
    </PageChrome>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);