/* evercare.jsx — Evercare Clinic chrome, now a navigable patient portal.
   Single patient (Julia Bennett) whose record matches the live chatbot.
   Sections: Dashboard · Appointments · Records · Messages · Billing.
   Cards and nav tabs are clickable; each section has simple detail views. */

const EVERCARE = {
  patient: { name: "Julia Bennett", initials: "JB" },
  careTeam: [
    { name: "Dr. Amara Okoye", role: "Primary Care", dept: "General" },
    { name: "Dr. Sofia Marchetti", role: "Cardiology", dept: "Cardiology" },
  ],
  appointments: [
    { id: "a1", status: "upcoming", title: "Annual check-up", doctor: "Dr. Amara Okoye", dept: "General", date: "Jun 12, 2026", time: "9:30 AM", mon: "JUN", day: "12", location: "Evercare Main · Room 118", note: "Routine annual physical. Please arrive 10 minutes early and bring an up-to-date medication list. Fasting is not required." },
    { id: "a2", status: "past", title: "Skin screening", doctor: "Dr. Liam Novak", dept: "Dermatology", date: "Apr 2, 2026", time: "11:00 AM", mon: "APR", day: "02", location: "Evercare Dermatology · Room 305", note: "Completed. Full-body skin screening performed; no concerning lesions found. Routine re-screening advised in 12 months." },
  ],
  labs: [
    { id: "l1", name: "Total Cholesterol", value: "212", unit: "mg/dL", flag: "high", ref: "< 200 mg/dL", date: "Apr 2, 2026", note: "Above the target range. Dr. Okoye recommends discussing diet and statin therapy at your next visit." },
    { id: "l2", name: "HbA1c", value: "5.4", unit: "%", flag: "normal", ref: "4.0–5.6 %", date: "Apr 2, 2026", note: "Within the normal range. No action needed." },
    { id: "l3", name: "Vitamin D", value: "—", unit: "", flag: "pending", ref: "30–100 ng/mL", date: "Apr 2, 2026", note: "Sample received; result is still pending from the laboratory." },
  ],
  prescriptions: [
    { id: "p1", name: "Atorvastatin", dose: "10 mg · once daily", status: "active", refills: "2 refills left", prescriber: "Dr. Amara Okoye", note: "Take one tablet each evening for cholesterol management." },
    { id: "p2", name: "Cetirizine", dose: "10 mg · as needed", status: "expired", refills: "Expired", prescriber: "Dr. Liam Novak", note: "Seasonal allergy relief. This prescription has expired — request a renewal if you need it again." },
  ],
  billing: [
    { id: "b1", desc: "Dermatology consult", doctor: "Dr. Liam Novak", date: "Apr 2, 2026", amount: "€45.00", status: "due" },
    { id: "b2", desc: "General consult", doctor: "Dr. Amara Okoye", date: "Jan 18, 2026", amount: "€30.00", status: "paid" },
  ],
};

const EC_NAV = ["Dashboard", "Appointments", "Records", "Messages", "Billing"];

function EcSectionTitle({ t, icon, title, sub }) {
  return (
    <div className="mb-4 flex items-center gap-3">
      <span className="flex h-10 w-10 items-center justify-center rounded-xl" style={{ background: t.tintBubble, color: t.primaryDeep }}><Icon name={icon} size={19} /></span>
      <div>
        <h2 className="text-[19px] font-bold leading-tight">{title}</h2>
        {sub && <p className="text-[13px]" style={{ color: t.sub }}>{sub}</p>}
      </div>
    </div>
  );
}

function EcCard({ t, children, onClick, className = "" }) {
  const clickable = !!onClick;
  return (
    <div
      onClick={onClick}
      role={clickable ? "button" : undefined}
      tabIndex={clickable ? 0 : undefined}
      onKeyDown={clickable ? (e) => { if (e.key === "Enter") onClick(); } : undefined}
      className={"rounded-2xl p-5 transition-all " + (clickable ? "cursor-pointer hover:-translate-y-0.5" : "") + " " + className}
      style={{ background: t.surface, border: `1px solid ${t.line}`, boxShadow: clickable ? "0 1px 0 rgba(0,0,0,0)" : "none" }}
      onMouseEnter={clickable ? (e) => (e.currentTarget.style.boxShadow = "0 16px 34px -24px rgba(14,138,143,0.55)") : undefined}
      onMouseLeave={clickable ? (e) => (e.currentTarget.style.boxShadow = "none") : undefined}
    >
      {children}
    </div>
  );
}

function EcFlag({ t, flag }) {
  const map = {
    high: { label: "HIGH", color: "#e2453a", bg: "rgba(226,69,58,0.12)" },
    normal: { label: "NORMAL", color: t.accent, bg: t.tintBubble },
    pending: { label: "PENDING", color: "#e0951c", bg: "rgba(245,181,61,0.16)" },
    active: { label: "ACTIVE", color: t.accent, bg: t.tintBubble },
    expired: { label: "EXPIRED", color: t.sub, bg: t.surfaceAlt },
    due: { label: "DUE", color: "#e2453a", bg: "rgba(226,69,58,0.12)" },
    paid: { label: "PAID", color: t.accent, bg: t.tintBubble },
    upcoming: { label: "UPCOMING", color: t.primary, bg: t.tintBubble },
    past: { label: "COMPLETED", color: t.sub, bg: t.surfaceAlt },
  };
  const m = map[flag] || map.normal;
  return <span className="rounded-md px-2 py-0.5 text-[10px] font-bold tracking-wide" style={{ background: m.bg, color: m.color }}>{m.label}</span>;
}

function EcBack({ t, onClick, label }) {
  return (
    <button onClick={onClick} className="mb-3 inline-flex items-center gap-1.5 text-[13px] font-semibold" style={{ color: t.primary }}>
      <Icon name="ArrowLeft" size={15} /> {label}
    </button>
  );
}

function EcDetailRow({ t, label, value }) {
  return (
    <div className="flex items-center justify-between border-b py-2.5 text-[13.5px]" style={{ borderColor: t.line }}>
      <span style={{ color: t.sub }}>{label}</span>
      <span className="font-semibold" style={{ textAlign: "right" }}>{value}</span>
    </div>
  );
}

/* ---- section bodies ---- */
function EcDashboard({ t, go }) {
  const next = EVERCARE.appointments.find((a) => a.status === "upcoming");
  return (
    <div className="space-y-5">
      <div className="overflow-hidden rounded-2xl p-6" style={{ background: `linear-gradient(120deg, ${t.heroFrom}, ${t.heroTo})`, color: "#fff" }}>
        <div className="flex flex-wrap items-end justify-between gap-4">
          <div>
            <p className="text-[13px] font-medium opacity-85">Good afternoon,</p>
            <h1 className="text-[26px] font-bold leading-tight">{EVERCARE.patient.name}</h1>
            <p className="mt-1 text-[13.5px] opacity-90">You have 1 upcoming appointment and a new lab result to review.</p>
          </div>
          <div className="flex gap-3">
            {[["CalendarCheck", "Next visit", "Jun 12", "Appointments"], ["FlaskConical", "New results", "1", "Records"], ["CreditCard", "Balance", "€45", "Billing"]].map(([ic, l, v, dest]) => (
              <button key={l} onClick={() => go(dest)} className="rounded-xl px-4 py-2.5 text-center transition-transform hover:-translate-y-0.5" style={{ background: "rgba(255,255,255,0.16)" }}>
                <Icon name={ic} size={16} className="mx-auto" />
                <div className="mt-1 text-[16px] font-bold leading-none">{v}</div>
                <div className="mt-0.5 text-[10.5px] uppercase tracking-wide opacity-85">{l}</div>
              </button>
            ))}
          </div>
        </div>
      </div>

      <EcCard t={t}>
        <h3 className="text-[15px] font-bold">Your care team</h3>
        <div className="mt-3 space-y-3">
          {EVERCARE.careTeam.map((d) => (
            <div key={d.name} className="flex items-center gap-3">
              <div className="flex h-10 w-10 items-center justify-center rounded-full text-[13px] font-bold" style={{ background: t.tintBubble, color: t.primaryDeep }}>{d.name.split(" ")[1][0]}{d.name.split(" ")[2] ? d.name.split(" ")[2][0] : ""}</div>
              <div className="leading-tight">
                <div className="text-[13.5px] font-semibold">{d.name}</div>
                <div className="text-[12px]" style={{ color: t.sub }}>{d.role}</div>
              </div>
            </div>
          ))}
        </div>
      </EcCard>

      <EcCard t={t} onClick={() => go("Appointments", next.id)}>
        <div className="flex items-center justify-between">
          <h3 className="text-[15px] font-bold">Upcoming appointment</h3>
          <Icon name="ChevronRight" size={18} style={{ color: t.sub }} />
        </div>
        <div className="mt-3 flex items-center gap-3 rounded-xl p-3" style={{ background: t.surfaceAlt }}>
          <div className="flex flex-col items-center justify-center rounded-lg px-3 py-2" style={{ background: t.primary, color: "#fff" }}>
            <span className="text-[10px] font-semibold uppercase">{next.mon}</span>
            <span className="text-[18px] font-bold leading-none">{next.day}</span>
          </div>
          <div className="text-[13px]">
            <div className="font-semibold">{next.title}</div>
            <div style={{ color: t.sub }}>{next.time} · {next.doctor} · {next.dept}</div>
          </div>
        </div>
      </EcCard>
    </div>
  );
}

function EcAppointments({ t, detail, setDetail }) {
  if (detail) {
    const a = EVERCARE.appointments.find((x) => x.id === detail);
    return (
      <div>
        <EcBack t={t} onClick={() => setDetail(null)} label="All appointments" />
        <EcCard t={t}>
          <div className="flex items-start justify-between">
            <div>
              <h2 className="text-[20px] font-bold">{a.title}</h2>
              <p className="text-[13.5px]" style={{ color: t.sub }}>{a.doctor} · {a.dept}</p>
            </div>
            <EcFlag t={t} flag={a.status} />
          </div>
          <div className="mt-4">
            <EcDetailRow t={t} label="Date" value={a.date} />
            <EcDetailRow t={t} label="Time" value={a.time} />
            <EcDetailRow t={t} label="Provider" value={a.doctor} />
            <EcDetailRow t={t} label="Location" value={a.location} />
          </div>
          <p className="mt-4 rounded-xl p-3 text-[13px] leading-relaxed" style={{ background: t.surfaceAlt, color: t.ink }}>{a.note}</p>
          {a.status === "upcoming" && (
            <div className="mt-4 flex gap-2.5">
              <button className="rounded-xl px-4 py-2.5 text-[13px] font-semibold" style={{ background: t.primary, color: "#fff" }}>Reschedule</button>
              <button className="rounded-xl px-4 py-2.5 text-[13px] font-semibold" style={{ background: t.surfaceAlt, color: t.ink, border: `1px solid ${t.line}` }}>Add to calendar</button>
            </div>
          )}
        </EcCard>
      </div>
    );
  }
  const groups = [["Upcoming", "upcoming"], ["Past", "past"]];
  return (
    <div>
      <EcSectionTitle t={t} icon="CalendarDays" title="Appointments" sub="Your scheduled and past visits" />
      {groups.map(([heading, key]) => (
        <div key={key} className="mb-5">
          <p className="mb-2 text-[12px] font-semibold uppercase tracking-wider" style={{ color: t.sub }}>{heading}</p>
          <div className="space-y-3">
            {EVERCARE.appointments.filter((a) => a.status === key).map((a) => (
              <EcCard key={a.id} t={t} onClick={() => setDetail(a.id)}>
                <div className="flex items-center gap-3.5">
                  <div className="flex flex-col items-center justify-center rounded-lg px-3 py-2" style={{ background: a.status === "upcoming" ? t.primary : t.surfaceAlt, color: a.status === "upcoming" ? "#fff" : t.sub }}>
                    <span className="text-[10px] font-semibold uppercase">{a.mon}</span>
                    <span className="text-[18px] font-bold leading-none">{a.day}</span>
                  </div>
                  <div className="flex-1">
                    <div className="flex items-center gap-2">
                      <span className="text-[14.5px] font-semibold">{a.title}</span>
                      <EcFlag t={t} flag={a.status} />
                    </div>
                    <div className="text-[13px]" style={{ color: t.sub }}>{a.time} · {a.doctor} · {a.dept}</div>
                  </div>
                  <Icon name="ChevronRight" size={18} style={{ color: t.sub }} />
                </div>
              </EcCard>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

function EcRecords({ t, detail, setDetail }) {
  if (detail) {
    const lab = EVERCARE.labs.find((x) => x.id === detail);
    const rx = EVERCARE.prescriptions.find((x) => x.id === detail);
    const item = lab || rx;
    return (
      <div>
        <EcBack t={t} onClick={() => setDetail(null)} label="All records" />
        <EcCard t={t}>
          <div className="flex items-start justify-between">
            <div>
              <h2 className="text-[20px] font-bold">{item.name}</h2>
              <p className="text-[13.5px]" style={{ color: t.sub }}>{lab ? "Lab result · " + lab.date : "Prescription · " + rx.prescriber}</p>
            </div>
            <EcFlag t={t} flag={lab ? lab.flag : rx.status} />
          </div>
          {lab ? (
            <>
              <div className="mt-4 flex items-end gap-2">
                <span className="text-[34px] font-bold leading-none" style={{ color: lab.flag === "high" ? "#e2453a" : t.ink }}>{lab.value}</span>
                <span className="pb-1 text-[14px]" style={{ color: t.sub }}>{lab.unit}</span>
              </div>
              <div className="mt-3"><EcDetailRow t={t} label="Reference range" value={lab.ref} /><EcDetailRow t={t} label="Collected" value={lab.date} /></div>
            </>
          ) : (
            <div className="mt-4"><EcDetailRow t={t} label="Dosage" value={rx.dose} /><EcDetailRow t={t} label="Refills" value={rx.refills} /><EcDetailRow t={t} label="Prescriber" value={rx.prescriber} /></div>
          )}
          <p className="mt-4 rounded-xl p-3 text-[13px] leading-relaxed" style={{ background: t.surfaceAlt, color: t.ink }}>{item.note}</p>
          {rx && rx.status === "active" && <button className="mt-4 rounded-xl px-4 py-2.5 text-[13px] font-semibold" style={{ background: t.primary, color: "#fff" }}>Request refill</button>}
          {rx && rx.status === "expired" && <button className="mt-4 rounded-xl px-4 py-2.5 text-[13px] font-semibold" style={{ background: t.surfaceAlt, color: t.ink, border: `1px solid ${t.line}` }}>Request renewal</button>}
        </EcCard>
      </div>
    );
  }
  return (
    <div>
      <EcSectionTitle t={t} icon="FileHeart" title="Medical records" sub="Lab results and prescriptions" />
      <p className="mb-2 text-[12px] font-semibold uppercase tracking-wider" style={{ color: t.sub }}>Lab results</p>
      <div className="mb-5 space-y-3">
        {EVERCARE.labs.map((l) => (
          <EcCard key={l.id} t={t} onClick={() => setDetail(l.id)}>
            <div className="flex items-center gap-3.5">
              <span className="flex h-10 w-10 items-center justify-center rounded-xl" style={{ background: t.surfaceAlt, color: t.primary }}><Icon name="FlaskConical" size={18} /></span>
              <div className="flex-1">
                <div className="flex items-center gap-2"><span className="text-[14.5px] font-semibold">{l.name}</span><EcFlag t={t} flag={l.flag} /></div>
                <div className="text-[13px]" style={{ color: t.sub }}>{l.flag === "pending" ? "Awaiting result" : l.value + " " + l.unit} · {l.date}</div>
              </div>
              <Icon name="ChevronRight" size={18} style={{ color: t.sub }} />
            </div>
          </EcCard>
        ))}
      </div>
      <p className="mb-2 text-[12px] font-semibold uppercase tracking-wider" style={{ color: t.sub }}>Prescriptions</p>
      <div className="space-y-3">
        {EVERCARE.prescriptions.map((p) => (
          <EcCard key={p.id} t={t} onClick={() => setDetail(p.id)}>
            <div className="flex items-center gap-3.5">
              <span className="flex h-10 w-10 items-center justify-center rounded-xl" style={{ background: t.surfaceAlt, color: t.primary }}><Icon name="Pill" size={18} /></span>
              <div className="flex-1">
                <div className="flex items-center gap-2"><span className="text-[14.5px] font-semibold">{p.name}</span><EcFlag t={t} flag={p.status} /></div>
                <div className="text-[13px]" style={{ color: t.sub }}>{p.dose} · {p.refills}</div>
              </div>
              <Icon name="ChevronRight" size={18} style={{ color: t.sub }} />
            </div>
          </EcCard>
        ))}
      </div>
    </div>
  );
}

function EcBilling({ t, detail, setDetail }) {
  if (detail) {
    const s = EVERCARE.billing.find((x) => x.id === detail);
    return (
      <div>
        <EcBack t={t} onClick={() => setDetail(null)} label="All statements" />
        <EcCard t={t}>
          <div className="flex items-start justify-between">
            <div><h2 className="text-[20px] font-bold">{s.desc}</h2><p className="text-[13.5px]" style={{ color: t.sub }}>{s.doctor}</p></div>
            <EcFlag t={t} flag={s.status} />
          </div>
          <div className="mt-4 flex items-end gap-1"><span className="text-[34px] font-bold leading-none">{s.amount}</span></div>
          <div className="mt-3"><EcDetailRow t={t} label="Service date" value={s.date} /><EcDetailRow t={t} label="Status" value={s.status === "due" ? "Payment due" : "Paid in full"} /></div>
          {s.status === "due" && <button className="mt-4 w-full rounded-xl px-4 py-3 text-[14px] font-bold" style={{ background: t.primary, color: "#fff" }}>Pay {s.amount}</button>}
        </EcCard>
      </div>
    );
  }
  const due = EVERCARE.billing.filter((b) => b.status === "due").reduce((s, b) => s + parseFloat(b.amount.replace("€", "")), 0);
  return (
    <div>
      <EcSectionTitle t={t} icon="CreditCard" title="Billing" sub="Statements and payments" />
      <div className="mb-5 flex items-center justify-between rounded-2xl p-5" style={{ background: `linear-gradient(120deg, ${t.heroFrom}, ${t.heroTo})`, color: "#fff" }}>
        <div><p className="text-[12px] uppercase tracking-wide opacity-85">Current balance</p><p className="text-[28px] font-bold leading-tight">€{due.toFixed(2)}</p></div>
        <button className="rounded-xl px-4 py-2.5 text-[13px] font-bold" style={{ background: "#fff", color: t.primaryDeep }}>Pay balance</button>
      </div>
      <div className="space-y-3">
        {EVERCARE.billing.map((b) => (
          <EcCard key={b.id} t={t} onClick={() => setDetail(b.id)}>
            <div className="flex items-center gap-3.5">
              <span className="flex h-10 w-10 items-center justify-center rounded-xl" style={{ background: t.surfaceAlt, color: t.primary }}><Icon name="ReceiptText" size={18} /></span>
              <div className="flex-1">
                <div className="flex items-center gap-2"><span className="text-[14.5px] font-semibold">{b.desc}</span><EcFlag t={t} flag={b.status} /></div>
                <div className="text-[13px]" style={{ color: t.sub }}>{b.date} · {b.doctor}</div>
              </div>
              <span className="text-[15px] font-bold">{b.amount}</span>
            </div>
          </EcCard>
        ))}
      </div>
    </div>
  );
}

function EcMessages({ t }) {
  return (
    <div>
      <EcSectionTitle t={t} icon="MessageSquareHeart" title="Secure messages" sub="Protected conversations with your care team" />
      <EcCard t={t}>
        <div className="flex items-center gap-3">
          <span className="flex h-10 w-10 items-center justify-center rounded-full text-[13px] font-bold" style={{ background: t.tintBubble, color: t.primaryDeep }}>AO</span>
          <div className="flex-1 leading-tight">
            <div className="text-[13.5px] font-semibold">Dr. Amara Okoye</div>
            <div className="text-[12.5px]" style={{ color: t.sub }}>Re: your cholesterol result — let's review at your visit.</div>
          </div>
          <span className="text-[11px]" style={{ color: t.sub }}>Apr 3</span>
        </div>
      </EcCard>
      <p className="mt-4 flex items-center gap-2 text-[13px]" style={{ color: t.sub }}>
        <Icon name="ArrowRight" size={15} style={{ color: t.primary }} /> Continue the conversation with Eve, your care assistant, in the panel on the right.
      </p>
    </div>
  );
}

/* ---- chrome shell ---- */
function EvercareChrome({ business, children }) {
  const t = business.theme;
  const [section, setSection] = React.useState("Dashboard");
  const [detail, setDetail] = React.useState(null);

  function go(sec, det = null) { setSection(sec); setDetail(det); }

  return (
    <div className="min-h-full" style={{ background: t.page, color: t.ink, fontFamily: t.font }}>
      <header className="sticky top-0 z-10 flex items-center justify-between px-6 py-3.5" style={{ background: t.surface, borderBottom: `1px solid ${t.line}` }}>
        <div className="flex items-center gap-8">
          <button onClick={() => go("Dashboard")}><BrandLogo business={business} size={38} withWordmark /></button>
          <nav className="hidden items-center gap-1 md:flex">
            {EC_NAV.map((n) => (
              <button key={n} onClick={() => go(n)}>
                <NavItem label={n} active={n === section} theme={t} />
              </button>
            ))}
          </nav>
        </div>
        <div className="flex items-center gap-3">
          <Icon name="Bell" size={18} style={{ color: t.sub }} />
          <div className="flex items-center gap-2 rounded-full py-1 pl-1 pr-3" style={{ background: t.surfaceAlt }}>
            <div className="flex h-7 w-7 items-center justify-center rounded-full text-[12px] font-bold" style={{ background: t.primary, color: "#fff" }}>{EVERCARE.patient.initials}</div>
            <span className="text-[13px] font-semibold">{EVERCARE.patient.name.split(" ")[0]} {EVERCARE.patient.name.split(" ")[1][0]}.</span>
          </div>
        </div>
      </header>

      <div className="mx-auto max-w-6xl px-6 py-6">
        <div className="grid grid-cols-1 gap-6 lg:grid-cols-[1fr_minmax(380px,440px)]">
          <div>
            {section === "Dashboard" && <EcDashboard t={t} go={go} />}
            {section === "Appointments" && <EcAppointments t={t} detail={detail} setDetail={setDetail} />}
            {section === "Records" && <EcRecords t={t} detail={detail} setDetail={setDetail} />}
            {section === "Messages" && <EcMessages t={t} />}
            {section === "Billing" && <EcBilling t={t} detail={detail} setDetail={setDetail} />}
          </div>
          <div style={{ height: "min(72vh, 660px)" }}>{children}</div>
        </div>
      </div>
    </div>
  );
}

window.EvercareChrome = EvercareChrome;