// pages.jsx — the five page components

const { useState: usePageState, useEffect: usePageEffect, useMemo: usePageMemo, useRef: usePageRef } = React;

// =============================================================================
// 1. WELCOME
// =============================================================================
function WelcomePage({ onNext }) {
  return (
    <div className="welcome">
      <div className="welcome-left">
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 32 }}>
            <div style={{ width: 180, height: 74, borderRadius: 12, background: "#fff", border: "1px solid var(--line-soft)", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", boxShadow: "var(--shadow-sm)", padding: 10 }}>
              <img src="assets/mm-logo.png" alt="Mobile Medical" style={{ width: "100%", height: "100%", objectFit: "contain" }}/>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
              <span style={{ fontFamily: "var(--sans)", fontSize: 13, fontWeight: 700, letterSpacing: "0.06em", color: "var(--ink)" }}>MOBILE MEDICAL</span>
              <span style={{ fontFamily: "var(--sans-tc)", fontSize: 12, color: "var(--ink-mute)", fontWeight: 500, letterSpacing: "0.04em" }}>美邦</span>
            </div>
          </div>
          <div className="welcome-eyebrow">Self Check-In · 自助登記</div>
          <h1 className="welcome-headline">
            Welcome to <em>Mobile Medical</em>
          </h1>
          <div className="welcome-headline-tc">歡迎光臨美邦</div>
          <p className="lede" style={{ marginTop: 28, maxWidth: "32ch" }}>
            Please take a moment to complete your check-in. The whole process takes about three minutes.
            <br/><br/>
            <span style={{ fontFamily: "var(--sans-tc)" }}>請於開始前完成登記，整個流程約需三分鐘。</span>
          </p>
        </div>
        <div className="welcome-foot">
          <div className="welcome-meta">
            <div className="welcome-meta-row">
              <span className="icon"><Icon.Cal/></span>
              <span><strong style={{ color: "var(--ink)" }}>Today, 27 Apr 2026</strong> · 二零二六年四月廿七日</span>
            </div>
            <div className="welcome-meta-row">
              <span className="icon"><Icon.Clock/></span>
              <span>Clinic open <strong style={{ color: "var(--ink)" }}>09:00 – 18:00</strong> · 診所開放時間</span>
            </div>
            <div className="welcome-meta-row">
              <span className="icon"><Icon.Pin/></span>
              <span>Mong Kok Branch · 旺角分店 · Langham Place Office Tower L11</span>
            </div>
            <div className="welcome-meta-row">
              <span className="icon"><Icon.Clock/></span>
              <span>Lunch hour <strong style={{ color: "var(--ink)" }}>13:00 – 14:00</strong> · 午膳時間</span>
            </div>
          </div>
        </div>
      </div>

      <div className="welcome-right">
        <h2>Ready when you are</h2>
        <div className="tc-h">準備好即可開始</div>
        <p className="lede" style={{ marginTop: 18, maxWidth: "28ch", fontSize: 15 }}>
          Please follow the steps on screen. A clinic staff member can help at any time.
          <br/><br/>
          <span style={{ fontFamily: "var(--sans-tc)" }}>請按螢幕指示完成登記。如需協助，職員可隨時提供幫助。</span>
        </p>
        <div className="welcome-cta-block">
          <button className="btn btn-primary btn-lg" onClick={onNext}>
            Begin check-in · 開始登記 <Icon.Arrow/>
          </button>
          <span className="welcome-cta-hint">
            Tap a clinic staff member if you need any assistance · <span className="tc">如需協助，請告知職員</span>
          </span>
        </div>
      </div>
    </div>
  );
}

// =============================================================================
// 1b. DATA & RULES — standalone data showcase (clinical / technical reference)
// =============================================================================
function FrameworkPage({ onBack, onNext, variant }) {
  const F = typeof window !== "undefined" ? window.EXECUTIVE_FRAMEWORK : null;
  const standalone = variant === "standalone";
  if (!F) {
    return (
      <div className={"exec-framework exec-framework--fallback" + (standalone ? " exec-framework--standalone" : "")}>
        <p>Framework data missing.</p>
        <button className="btn btn-primary" type="button" onClick={onNext}>Continue · 繼續</button>
      </div>
    );
  }
  return (
    <div className={"exec-framework" + (standalone ? " exec-framework--standalone" : "")}>
      <div className="exec-framework-inner">
        <div className="exec-framework-hero">
          <div className="exec-framework-eyebrow">{F.eyebrow.en} · {F.eyebrow.tc}</div>
          <h1 className="exec-framework-title">{F.title.en}</h1>
          <div className="exec-framework-title-tc">{F.title.tc}</div>
          <p className="exec-framework-lede">{F.lede.en}</p>
          <p className="exec-framework-lede-tc">{F.lede.tc}</p>
        </div>

        <div className="exec-metrics" aria-label="Key metrics">
          {F.metrics.map((m, i) => (
            <div className="exec-metric" key={i}>
              <div className="exec-metric-n">{m.n != null ? m.n : "—"}</div>
              <div className="exec-metric-label">{m.label.en}</div>
              <div className="exec-metric-label-tc">{m.label.tc}</div>
              <div className="exec-metric-hint">{m.hint.en}</div>
            </div>
          ))}
        </div>

        <div className="exec-pipeline" aria-label="Pipeline">
          {F.pipeline.map((step, i) => (
            <React.Fragment key={step.id}>
              <div className="exec-pipeline-step">
                <div className="exec-pipeline-num">{String(i + 1).padStart(2, "0")}</div>
                <div className="exec-pipeline-title">{step.en}</div>
                <div className="exec-pipeline-title-tc">{step.tc}</div>
                <p className="exec-pipeline-detail">{step.detail.en}</p>
                <p className="exec-pipeline-detail-tc">{step.detail.tc}</p>
              </div>
              {i < F.pipeline.length - 1 ? <div className="exec-pipeline-connector" aria-hidden>→</div> : null}
            </React.Fragment>
          ))}
        </div>

        <h2 className="exec-h2">{F.threeLenses.title.en} · {F.threeLenses.title.tc}</h2>
        <div className="exec-lenses">
          {F.threeLenses.items.map((L, i) => (
            <div className="exec-lens" key={i}>
              <div className="exec-lens-idx">{String(i + 1).padStart(2, "0")}</div>
              <h3 className="exec-lens-h">{L.title.en}</h3>
              <div className="exec-lens-h-tc">{L.title.tc}</div>
              <p className="exec-lens-p">{L.body.en}</p>
              <p className="exec-lens-p-tc">{L.body.tc}</p>
            </div>
          ))}
        </div>

        <h2 className="exec-h2">Why it matters · 為何重要</h2>
        <div className="exec-pillars">
          {F.pillars.map((p, i) => (
            <div className="exec-pillar" key={i}>
              <h3 className="exec-pillar-h">{p.title.en}</h3>
              <div className="exec-pillar-h-tc">{p.title.tc}</div>
              <p>{p.body.en}</p>
              <p className="exec-pillar-tc">{p.body.tc}</p>
            </div>
          ))}
        </div>

        <p className="exec-footnote">{F.footnote.en}</p>
        <p className="exec-footnote-tc">{F.footnote.tc}</p>
      </div>

      <PageFoot
        onBack={standalone ? undefined : onBack}
        onNext={onNext}
        nextLabel={standalone ? "Open patient check-in demo" : "Continue to check-in"}
        nextLabelTc={standalone ? "開啟客人自助登記示範" : "繼續登記"}
        backLabel="Back"
        backLabelTc="返回"
        primaryWide
      />
    </div>
  );
}

// =============================================================================
// 2. CHECK-IN — HKID, mobile, DOB, optional insurance
// =============================================================================
function getDemoPatientProfile(state) {
  const dob = state?.dob || "";
  const year = dob.length === 8 ? Number(dob.slice(4, 8)) : 1978;
  const isChild = state?.demoProfile === "child" || (Number.isFinite(year) && year >= 2008);
  const checkDigit = state?.hkidCheck ? `(${state.hkidCheck})` : "";
  const hkidPrefix = state?.hkid ? `${state.hkid.slice(0, 5)}***${checkDigit}` : "";

  return isChild ? {
    isChild: true,
    shortName: "Ho Yin",
    displayName: "Chan Ho Yin 陳浩然",
    salutation: "Ho Yin",
    salutationTc: "陳浩然",
    hkidMasked: hkidPrefix || "C2345***(3)",
  } : {
    isChild: false,
    shortName: "Ms. Wong",
    displayName: "Wong Mei Ling 王美玲",
    salutation: "Ms. Wong",
    salutationTc: "王女士",
    hkidMasked: hkidPrefix || "A1234***(5)",
  };
}

function CheckInPage({ lang, state, setState, onBack, onNext }) {
  const [ocrStatus, setOcrStatus] = usePageState("idle");

  const setField = (key, value) => {
    const max = { hkid: 8, hkidCheck: 1, mobile: 8, dob: 8 }[key];
    const pattern = key === "hkid" || key === "hkidCheck" ? /[^A-Z0-9]/g : /[^0-9]/g;
    const cleaned = value.toUpperCase().replace(pattern, "").slice(0, max);
    setState(prev => ({ ...prev, [key]: cleaned }));
  };
  const setGender = (gender) => setState(prev => ({ ...prev, answers: { ...prev.answers, gender } }));
  const canNext = state.hkid?.length === 8 && state.hkidCheck?.length === 1 && state.mobile?.length === 8 && state.dob?.length === 8;
  const runDemoOcr = (profile = "adult") => {
    setOcrStatus("scanning");
    const isChild = profile === "child";
    setState(prev => ({
      ...prev,
      demoProfile: profile,
      hkid: isChild ? "C2345678" : "A1234567",
      hkidCheck: isChild ? "3" : "5",
      mobile: isChild ? "91234567" : "98765432",
      dob: isChild ? "15052020" : "14061978",
      cart: [],
      answers: {
        ...prev.answers,
        gender: isChild ? "male" : "female",
        menopause: isChild ? "no" : "no",
        lmp: isChild ? "≤3m" : ">3m",
        irregularCycle: isChild ? "no" : "yes",
        papOverdue: isChild ? "not_applicable" : "never",
        pregnancyPlan: isChild ? "no" : "no",
        abnormalBleeding: isChild ? "no" : "no",
        menopauseSymptoms: isChild ? "no" : "yes",
        pelvicPain: isChild ? "no" : "no",
        breastSymptom: isChild ? "no" : "no",
        family: isChild ? [] : ["famBreast"],
        childAttending: "no",
        childAllergy: isChild ? "yes" : "no",
        childGrowth: isChild ? "yes" : "no",
        childDevelopment: isChild ? "yes" : "no",
      },
    }));
    window.setTimeout(() => {
      setOcrStatus(profile);
    }, 250);
  };
  const scanTitle = ocrStatus === "scanning" ? "Scanning ID card..." : ocrStatus === "child" ? "Child profile auto-filled" : ocrStatus === "adult" ? "Women’s health profile auto-filled" : "Scan ID card with camera";
  const scanHint = ocrStatus === "scanning"
    ? "Demo OCR is reading HKID, date of birth and mobile · 正在示範讀取資料"
    : ocrStatus === "child"
      ? "Demo shortcut: child-health journey · 示範兒童健康流程"
      : ocrStatus === "adult"
        ? "Demo shortcut: women’s-health journey · 示範婦科健康流程"
        : "Choose a demo scan profile below · 請選擇示範掃描情境";

  return (
    <div className="page-inner">
      <div className="page-body checkin-page-body">
        <div style={{ marginBottom: 18 }}>
          <div className="eyebrow">Step 01 · 第一步</div>
          <h1 className="h-display" style={{ marginTop: 8 }}>
            Let's verify <em style={{ fontStyle: "italic", color: "var(--gold-deep)" }}>who you are</em>
          </h1>
          <div className="h-display" style={{ fontFamily: "var(--serif-tc)", fontSize: 30, color: "var(--ink-soft)", marginTop: 8 }}>請核對個人資料</div>
        </div>

        <div className="checkin">
          <div className="checkin-form">
            <div
              className="upload-card"
              style={{ width: "100%", textAlign: "left", borderColor: ocrStatus === "adult" || ocrStatus === "child" ? "rgba(60,130,85,.32)" : undefined }}
            >
              <div className="upload-icon">
                {ocrStatus === "adult" || ocrStatus === "child" ? <Icon.Check/> : <Icon.Camera/>}
              </div>
              <div className="upload-text">
                <span className="t1">{scanTitle}</span>
                <span className="t2">{scanHint}</span>
                <div className="demo-scan-actions">
                  <button type="button" onClick={() => runDemoOcr("adult")}>Adult women’s health <span>成人婦科</span></button>
                  <button type="button" onClick={() => runDemoOcr("child")}>Child health <span>兒童健康</span></button>
                </div>
              </div>
            </div>

            <div className="field">
              <label className="field-label">
                HKID Number <span className="tc">香港身份證號碼</span> <span className="req">*</span>
              </label>
              <div className="hkid-row">
                <input className="field-input" value={state.hkid || ""} onChange={(e) => setField("hkid", e.target.value)} placeholder="A1234567" maxLength="8"/>
                <span className="hkid-paren">(</span>
                <input className="field-input check-digit" value={state.hkidCheck || ""} onChange={(e) => setField("hkidCheck", e.target.value)} placeholder="0" maxLength="1"/>
                <span className="hkid-paren">)</span>
              </div>
              <span className="field-hint">Letter prefix + 6 digits + check digit · <span className="tc">字母 + 6 個數字 + 檢查碼</span></span>
            </div>

            <div className="field">
              <label className="field-label">
                Gender <span className="tc">性別</span> <span className="req">*</span>
              </label>
              <div className="segmented">
                <button type="button" className={state.answers.gender === "female" ? "active" : ""} onClick={() => setGender("female")}>Female <span>女性</span></button>
                <button type="button" className={state.answers.gender === "male" ? "active" : ""} onClick={() => setGender("male")}>Male <span>男性</span></button>
              </div>
            </div>

            <div className="field">
              <label className="field-label">
                Mobile Number <span className="tc">流動電話</span> <span className="req">*</span>
              </label>
              <input className="field-input" inputMode="numeric" value={state.mobile || ""} onChange={(e) => setField("mobile", e.target.value)} placeholder="98765432" maxLength="8"/>
              <span className="field-hint">For appointment reminders & test results · <span className="tc">用作預約提示及報告通知</span></span>
            </div>

            <div className="field">
              <label className="field-label">
                Date of Birth <span className="tc">出生日期</span> <span className="req">*</span>
              </label>
              <input className="field-input" inputMode="numeric" value={state.dob || ""} onFocus={() => state.dob === "14061978" && setState(prev => ({ ...prev, dob: "" }))} onChange={(e) => setField("dob", e.target.value)} placeholder="DDMMYYYY" maxLength="8"/>
              <span className="field-hint">For age-appropriate health screening · <span className="tc">用以建議合適檢查項目</span></span>
            </div>

            <div className="field">
              <label className="field-label">
                Insurance Card <span className="tc">保險卡</span> <span className="opt">Optional · 選填</span>
              </label>
              <div className="upload-card" onClick={() => setState(p => ({...p, insuranceUploaded: !p.insuranceUploaded}))}>
                <div className="upload-icon">
                  {state.insuranceUploaded ? <Icon.Check/> : <Icon.Upload/>}
                </div>
                <div className="upload-text">
                  <span className="t1">{state.insuranceUploaded ? "Insurance card captured" : "Tap to take a photo of your card"}</span>
                  <span className="t2">{state.insuranceUploaded ? "Bupa · Policy ending 4521" : "We'll auto-fill your policy number · 自動讀取保單編號"}</span>
                </div>
              </div>
            </div>
          </div>

          <div className="checkin-aside">
            <div style={{ fontFamily: "var(--sans)", fontSize: 11, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-mute)" }}>
              Why we ask · 收集原因
            </div>
            <div style={{ padding: "18px 20px", background: "var(--bg-soft)", border: "1px solid var(--line-soft)", borderRadius: 14, fontSize: 13, color: "var(--ink-soft)", lineHeight: 1.65 }}>
              Your basic details help us match your booking and show only relevant health questions.
              <br/>
              <span style={{ fontFamily: "var(--sans-tc)" }}>基本資料用作核對預約，並只顯示相關健康問題。</span>
            </div>
            <div style={{ padding: "16px 18px", background: "var(--gold-soft)", borderRadius: 12, fontSize: 12, color: "var(--ink-soft)", lineHeight: 1.5 }}>
              <Icon.Spark style={{ marginRight: 6, color: "var(--gold-deep)", verticalAlign: "middle" }}/>
              Your information is encrypted and complies with the PDPO. <br/>
              <span style={{ fontFamily: "var(--sans-tc)" }}>所有資料均加密處理，符合《私隱條例》。</span>
            </div>
          </div>
        </div>
      </div>
      <PageFoot onBack={onBack} onNext={canNext ? onNext : undefined} canNext={canNext}
        nextLabel="Confirm itinerary" nextLabelTc="確認行程" />
    </div>
  );
}

// =============================================================================
// 3. ITINERARY — booked items
// =============================================================================
function ItineraryPage({ lang, state, onBack, onNext }) {
  const patient = getDemoPatientProfile(state);
  const bookedPackage = patient.isChild ? CHILD_BOOKED_PACKAGE : BOOKED_PACKAGE;
  const bookedItems = patient.isChild ? CHILD_BOOKED_ITEMS : BOOKED_ITEMS;
  return (
    <div className="page-inner">
      <div className="page-body">
        <div style={{ marginBottom: 24 }}>
          <div className="eyebrow">Step 02 · 第二步</div>
          <h1 className="h-display" style={{ marginTop: 8 }}>
            Your itinerary <em style={{ fontStyle: "italic", color: "var(--gold-deep)" }}>for today</em>
          </h1>
          <div className="h-display" style={{ fontFamily: "var(--serif-tc)", fontSize: 30, color: "var(--ink-soft)", marginTop: 8 }}>今日檢查項目</div>
        </div>

        <div className="package-banner">
          <div className="package-banner-text">
            <div className="pkg-eyebrow">Booked Programme · 預約套餐</div>
            <h2 className="pkg-name">
              {bookedPackage.name.en}
              <span className="tc">{bookedPackage.name.tc}</span>
            </h2>
            <div style={{ fontSize: 12, color: "rgba(247,243,236,0.6)", marginTop: 8, letterSpacing: "0.1em" }}>
              Reference {bookedPackage.code} · Approx. {bookedPackage.duration} · {bookedPackage.fasting ? "Fasting required" : "No fasting required"}
            </div>
          </div>
          <div className="pkg-count">
            <div className="num">{bookedItems.length}</div>
            <div className="lbl">Items · 項目</div>
          </div>
        </div>

        <div className="booking-summary">
          <div className="booking-summary-item">
            <span className="k">Patient · 病人</span>
            <span className="v">{patient.displayName}</span>
            <span style={{ fontFamily: "var(--sans)", fontSize: 11, color: "var(--ink-mute)" }}>HKID {patient.hkidMasked}</span>
          </div>
          <div className="booking-summary-item">
            <span className="k">Arrival · 到達</span>
            <span className="v">09:15 AM</span>
            <span style={{ fontFamily: "var(--sans)", fontSize: 11, color: "var(--ink-mute)" }}>10 min ago · 十分鐘前</span>
          </div>
          <div className="booking-summary-item">
            <span className="k">Fasting since · 空腹由</span>
            <span className="v">10h 22m</span>
            <span style={{ fontFamily: "var(--sans)", fontSize: 11, color: "var(--sage-deep)", fontWeight: 600 }}>Within window · 符合要求</span>
          </div>
          <div className="booking-summary-item">
            <span className="k">Doctor · 主診醫生</span>
            <span className="v-sm" style={{ fontFamily: "var(--serif)", fontSize: 18 }}>{patient.isChild ? "Dr. H. Chan · 陳醫生" : "Dr. C. Lam · 林醫生"}</span>
            <span style={{ fontFamily: "var(--sans)", fontSize: 11, color: "var(--ink-mute)" }}>{patient.isChild ? "Paediatrics" : "Internal Medicine"}</span>
          </div>
        </div>

        <h3 className="h-section">Today's checks · 今日檢查 ({bookedItems.length})</h3>
        <div className="items-grid">
          {bookedItems.map((it, i) => (
            <div key={i} className={"item-card" + (it.done ? " completed" : "")}>
              <div className="item-check">
                {it.done ? <Icon.Check/> : <span style={{ fontFamily: "var(--serif)", fontSize: 14, color: "var(--ink-mute)" }}>{(i+1).toString().padStart(2,"0")}</span>}
              </div>
              <div className="item-body">
                <div className="item-cat">{it.cat.en} · {it.cat.tc}</div>
                <div className="item-name">{it.name.en}</div>
                <div className="item-name-tc">{it.name.tc}</div>
                <div className="item-meta">
                  <Icon.Clock/> {it.dur}
                  <span className="dot"/>
                  <Icon.Pin/> Room {it.room}
                  {it.done && <><span className="dot"/><span style={{ color: "var(--sage-deep)", fontWeight: 600 }}>Completed</span></>}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <PageFoot onBack={onBack} onNext={onNext}
        nextLabel="Continue to questionnaire" nextLabelTc="繼續填寫問卷"
        secondary={
          <span style={{ fontSize: 12, color: "var(--ink-mute)", fontFamily: "var(--sans)" }}>
            Need to amend? <span style={{ textDecoration: "underline", cursor: "pointer", color: "var(--ink-soft)" }}>Speak to our staff</span> · 如需修改請聯絡職員
          </span>
        } />
    </div>
  );
}

window.WelcomePage = WelcomePage;
window.FrameworkPage = FrameworkPage;
window.CheckInPage = CheckInPage;
window.ItineraryPage = ItineraryPage;
window.getDemoPatientProfile = getDemoPatientProfile;