/* global React, TREATMENTS, CATEGORIES, IconArrow, IconClose, IconCheck */

function Treatments({ onOpenTreatment, onBook }) {
  const [cat, setCat] = React.useState("all");
  const filtered = TREATMENTS.filter(t => cat === "all" || t.cat === cat);

  // Build display list — featured cards bubble up
  const display = [...filtered].sort((a, b) => (b.featured ? 1 : 0) - (a.featured ? 1 : 0));

  return (
    <section id="treatments" className="section" style={{ background: 'var(--pearl)' }}>
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">02 · Treatments</div>
            <h2 className="h2" style={{ marginTop: 14 }}>
              A complete dental practice<br/>with a <em style={{ fontStyle: 'italic', color: 'var(--primary)' }}>cosmetic heart</em>.
            </h2>
          </div>
          <p className="lead">
            Empire is a full general dental practice — preventive, restorative, surgical — with a clear specialism in cosmetic dentistry and orthodontics. Browse the menu, or jump straight to a consultation.
          </p>
        </div>

        <div className="tx-tabs" role="tablist">
          {CATEGORIES.map(c => {
            const count = c.id === "all" ? TREATMENTS.length : TREATMENTS.filter(t => t.cat === c.id).length;
            return (
              <button
                key={c.id}
                role="tab"
                className={cat === c.id ? "is-active" : ""}
                onClick={() => setCat(c.id)}
              >{c.label} <span className="ct">{count}</span></button>
            );
          })}
        </div>

        <div className="tx-grid">
          {display.map(t => {
            const Icon = t.icon;
            return (
              <button
                key={t.id}
                className={"tx-card" + (t.featured ? " is-featured" : "")}
                onClick={() => onOpenTreatment(t)}
              >
                <div className="tx-card__cat" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <Icon size={16} />
                  <span>{t.cat}</span>
                </div>
                <h3 className="tx-card__title">{t.title}</h3>
                <p className="tx-card__sub">{t.short}</p>
                <div className="tx-card__meta">
                  <span>{t.duration}</span>
                  <span>·</span>
                  <span>{t.price}</span>
                </div>
                <span className="tx-card__arrow"><IconArrow size={16} /></span>
              </button>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function TreatmentDrawer({ treatment, onClose, onBook }) {
  const [openFaq, setOpenFaq] = React.useState(0);
  React.useEffect(() => { setOpenFaq(0); }, [treatment?.id]);

  React.useEffect(() => {
    if (!treatment) return;
    document.body.style.overflow = "hidden";
    return () => { document.body.style.overflow = ""; };
  }, [treatment]);

  return (
    <React.Fragment>
      <div className={"drawer-overlay" + (treatment ? " is-open" : "")} onClick={onClose} />
      <aside className={"drawer" + (treatment ? " is-open" : "")} aria-hidden={!treatment}>
        {treatment && (
          <React.Fragment>
            <div className="drawer__head">
              <span className="cat">{treatment.cat}</span>
              <button className="drawer__close" onClick={onClose} aria-label="Close"><IconClose /></button>
            </div>
            <div className="drawer__body">
              <h3 className="drawer__title">{treatment.title}</h3>
              <p className="drawer__lead">{treatment.body}</p>

              <div className="drawer__stats">
                <div>
                  <div className="l">Visit length</div>
                  <div className="v">{treatment.duration}</div>
                </div>
                <div>
                  <div className="l">Plan</div>
                  <div className="v">{treatment.appointments}</div>
                </div>
                <div>
                  <div className="l">Pricing</div>
                  <div className="v" style={{ fontSize: 18 }}>{treatment.price}</div>
                </div>
              </div>

              <h4 className="drawer__h3">The Empire process</h4>
              <ol className="process">
                {treatment.process.map((p, i) => (
                  <li key={i}>
                    <span className="n">0{i + 1}</span>
                    <div>
                      <div className="t">{p.t}</div>
                      <div className="d">{p.d}</div>
                    </div>
                  </li>
                ))}
              </ol>

              <h4 className="drawer__h3">Frequently asked</h4>
              <div className="faq">
                {treatment.faqs.map((f, i) => {
                  const open = openFaq === i;
                  return (
                    <div key={i} className="faq__item">
                      <button className="faq__q" onClick={() => setOpenFaq(open ? -1 : i)}>
                        {f.q}
                        <span className="sign">{open ? "–" : "+"}</span>
                      </button>
                      {open && <div className="faq__a">{f.a}</div>}
                    </div>
                  );
                })}
              </div>
            </div>
            <div className="drawer__foot">
              <button className="btn btn--primary" style={{ flex: 1 }} onClick={() => { onBook(treatment.id); onClose(); }}>
                Book a Consultation <IconArrow size={14} />
              </button>
              <a className="btn btn--ghost" href={CLINIC.phoneHref}>Call clinic</a>
            </div>
          </React.Fragment>
        )}
      </aside>
    </React.Fragment>
  );
}

window.Treatments = Treatments;
window.TreatmentDrawer = TreatmentDrawer;