/* ============================================================
   Carebridge Portal — Communication · Financial · Analytics · Hospitals
   ============================================================ */
const { useState } = React;
const CD = window.CB_DATA;

/* ---------------- Communication Hub ---------------- */
function CommsView() {
  const [sel, setSel] = useState(CD.THREADS[0].id);
  const t = CD.THREADS.find((x) => x.id === sel);
  const channelIcon = { WhatsApp: "message-circle", "Secure chat": "lock", Email: "mail" };
  const convo = [
    { me: false, text: "Assalamu alaikum. We received your message about the appointment.", time: "09:02" },
    { me: true, text: "Wa alaikum salam. Your video consultation with the specialist is confirmed for Thursday at 14:00 (Mogadishu time).", time: "09:06" },
    { me: false, text: t.last, time: t.time },
  ];
  return (
    <div className="cb-grid" style={{ gap: "var(--gap-grid)" }}>
      <div className="cb-grid" style={{ gridTemplateColumns: "repeat(4,1fr)" }}>
        <StatCard icon="messages-square" chip="navy" value="7" label="Unread conversations" delta="+4" />
        <StatCard icon="video" chip="" value="3" label="Video consults today" />
        <StatCard icon="mail" chip="sky" value="12" label="Emails awaiting reply" />
        <StatCard icon="clock" chip="warm" value="18m" label="Avg. response time" deltaDir="down" delta="-5m" />
      </div>
      <div className="cb-grid" style={{ gridTemplateColumns: "320px 1fr 300px", alignItems: "start" }}>
        {/* Threads */}
        <Card pad0>
          <div style={{ padding: "var(--space-5)", borderBottom: "1px solid var(--border-subtle)" }}>
            <div className="cb-search"><Icon name="search" size={16} /><input placeholder="Search messages…" /></div>
          </div>
          {CD.THREADS.map((th) => (
            <div key={th.id} onClick={() => setSel(th.id)} className="cb-row" style={{ gap: 11, padding: "13px var(--space-5)", borderBottom: "1px solid var(--border-subtle)", cursor: "pointer", background: sel === th.id ? "var(--sky-100)" : "transparent", borderLeft: "3px solid " + (sel === th.id ? "var(--teal-500)" : "transparent") }}>
              <Avatar initials={th.initials} color="var(--navy-500)" size="sm" />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="cb-between"><span style={{ fontSize: 13.5, fontWeight: 600, color: "var(--text-strong)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{th.name}</span><span style={{ fontSize: 11, color: "var(--text-faint)" }}>{th.time}</span></div>
                <div className="cb-row" style={{ gap: 6, marginTop: 3 }}>
                  <Icon name={channelIcon[th.channel]} size={12} style={{ color: "var(--teal-600)" }} />
                  <span style={{ fontSize: 12, color: "var(--text-muted)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", flex: 1 }}>{th.last}</span>
                  {th.unread ? <span style={{ background: "var(--teal-500)", color: "#fff", fontSize: 10.5, fontWeight: 700, minWidth: 18, height: 18, borderRadius: 999, display: "grid", placeItems: "center", padding: "0 5px" }}>{th.unread}</span> : null}
                </div>
              </div>
            </div>
          ))}
        </Card>
        {/* Conversation */}
        <Card pad0 style={{ display: "flex", flexDirection: "column", height: 540 }}>
          <div className="cb-between" style={{ padding: "14px var(--space-5)", borderBottom: "1px solid var(--border-subtle)" }}>
            <div className="cb-row" style={{ gap: 11 }}>
              <Avatar initials={t.initials} color="var(--navy-600)" size="sm" />
              <div><div style={{ fontSize: 14.5, fontWeight: 700, color: "var(--text-strong)" }}>{t.name}</div><div className="cb-row" style={{ gap: 5 }}><Icon name={channelIcon[t.channel]} size={12} style={{ color: "var(--teal-600)" }} /><span style={{ fontSize: 12, color: "var(--text-muted)" }}>{t.channel}</span></div></div>
            </div>
            <div className="cb-row" style={{ gap: 6 }}>
              <button className="cb-icon-pill" style={{ width: 36, height: 36 }}><Icon name="phone-call" size={16} /></button>
              <button className="cb-icon-pill" style={{ width: 36, height: 36 }}><Icon name="video" size={16} /></button>
            </div>
          </div>
          <div style={{ flex: 1, overflowY: "auto", padding: "var(--space-5)", display: "flex", flexDirection: "column", gap: 12, background: "var(--bg-page)" }}>
            {convo.map((m, i) => (
              <div key={i} style={{ alignSelf: m.me ? "flex-end" : "flex-start", maxWidth: "76%" }}>
                <div style={{ padding: "11px 15px", borderRadius: m.me ? "16px 16px 4px 16px" : "16px 16px 16px 4px", background: m.me ? "var(--navy-600)" : "#fff", color: m.me ? "#fff" : "var(--text-body)", fontSize: 14, lineHeight: 1.5, border: m.me ? "none" : "1px solid var(--border-subtle)", boxShadow: "var(--shadow-xs)" }}>{m.text}</div>
                <div style={{ fontSize: 11, color: "var(--text-faint)", marginTop: 4, textAlign: m.me ? "right" : "left" }}>{m.time}</div>
              </div>
            ))}
          </div>
          <div className="cb-row" style={{ gap: 10, padding: "14px var(--space-5)", borderTop: "1px solid var(--border-subtle)" }}>
            <button className="cb-icon-pill" style={{ width: 40, height: 40 }}><Icon name="paperclip" size={17} /></button>
            <div className="cb-search" style={{ flex: 1, minWidth: 0 }}><input placeholder="Type a message…" /></div>
            <button className="cb-icon-pill" style={{ background: "var(--teal-500)", color: "#fff", border: "none" }}><Icon name="send" size={18} /></button>
          </div>
        </Card>
        {/* Schedule */}
        <Card>
          <CardHead title="Upcoming consults" />
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {[["Hodan Ali", "Oncology · second opinion", "Today 14:00", "video"], ["Mohamed Farah", "Nephrology intake", "Tomorrow 10:30", "video"], ["Asha Diriye", "Endocrine review", "Jun 14 · 16:00", "video"]].map((c, i) => (
              <div key={i} className="cb-soft-panel" style={{ padding: 13 }}>
                <div className="cb-row" style={{ gap: 9, marginBottom: 6 }}><div className="cb-chip" style={{ width: 32, height: 32, borderRadius: 9 }}><Icon name={c[3]} size={16} /></div><div style={{ fontSize: 13.5, fontWeight: 700, color: "var(--text-strong)" }}>{c[0]}</div></div>
                <div style={{ fontSize: 12.5, color: "var(--text-muted)" }}>{c[1]}</div>
                <div className="cb-row" style={{ gap: 5, marginTop: 7 }}><Icon name="clock" size={13} style={{ color: "var(--teal-600)" }} /><span style={{ fontSize: 12.5, fontWeight: 600, color: "var(--navy-700)" }}>{c[2]}</span></div>
              </div>
            ))}
          </div>
          <button className="cb-link" style={{ marginTop: 14, color: "var(--teal-600)" }}><Icon name="calendar-plus" size={15} />Schedule consultation</button>
        </Card>
      </div>
    </div>
  );
}

/* ---------------- Financial Management ---------------- */
function FinancialView() {
  const byDest = {};
  CD.INVOICES.forEach((iv) => { byDest[iv.dest] = (byDest[iv.dest] || 0) + iv.amount; });
  const destColors = { TR: "#1B3A6B", IN: "#1CA89C", AE: "#2C5089" };
  const segs = Object.keys(byDest).map((k) => ({ label: CD.destByCode(k).country, value: Math.round(byDest[k] / 1000), color: destColors[k] || "#7C99B8", suffix: "K" }));
  const totalOutstanding = CD.INVOICES.reduce((s, i) => s + (i.amount - i.paid), 0);
  return (
    <div className="cb-grid" style={{ gap: "var(--gap-grid)" }}>
      <div className="cb-grid" style={{ gridTemplateColumns: "repeat(4,1fr)" }}>
        <StatCard icon="wallet" chip="navy" value="$263K" label="Coordinated value (Jun)" delta="+6.5%" />
        <StatCard icon="circle-dollar-sign" chip="" value="$182K" label="Collected to date" delta="+8%" />
        <StatCard icon="hourglass" chip="warm" value={CD.money(totalOutstanding)} label="Outstanding balance" deltaDir="flat" delta="watch" />
        <StatCard icon="receipt" chip="sky" value="6" label="Open invoices" />
      </div>
      <div className="cb-grid" style={{ gridTemplateColumns: "1.6fr 1fr" }}>
        <Card pad0>
          <div style={{ padding: "var(--pad-card) var(--pad-card) 0" }}><CardHead title="Invoices" sub="Treatment cost estimates & payments" action="New invoice" onAction={() => {}} /></div>
          <table className="cb-table">
            <thead><tr><th>Invoice</th><th>Patient</th><th>Amount</th><th>Paid</th><th>Status</th><th>Due</th></tr></thead>
            <tbody>
              {CD.INVOICES.map((iv) => (
                <tr key={iv.id}>
                  <td><b style={{ fontWeight: 700, color: "var(--navy-700)" }}>{iv.id}</b></td>
                  <td style={{ fontWeight: 500, color: "var(--text-strong)" }}>{iv.patient}</td>
                  <td style={{ fontWeight: 700, color: "var(--text-strong)", fontFamily: "var(--font-display)" }}>{CD.money(iv.amount)}</td>
                  <td className="cb-muted">{CD.money(iv.paid)}</td>
                  <td><Pill tone={iv.status === "Paid" ? "teal" : "warn"} dot>{iv.status}</Pill></td>
                  <td className="cb-muted">{iv.due}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>
        <div className="cb-grid">
          <Card>
            <CardHead title="Revenue by destination" sub="Coordinated value (thousands)" />
            <Donut segments={segs} centerTop="$93K" centerBottom="invoiced" size={150} />
          </Card>
          <CurrencyCard />
        </div>
      </div>
    </div>
  );
}

function CurrencyCard() {
  const [usd, setUsd] = useState(1000);
  const rates = [["SOS", "Somali Shilling", 571], ["TRY", "Turkish Lira", 39.2], ["INR", "Indian Rupee", 85.4], ["AED", "UAE Dirham", 3.67]];
  return (
    <Card>
      <CardHead title="Currency conversion" sub="Indicative rates — sample" />
      <div className="cb-row" style={{ gap: 10, marginBottom: 14 }}>
        <div className="cb-soft-panel" style={{ flex: 1, padding: "10px 14px" }}>
          <div style={{ fontSize: 11, color: "var(--text-muted)", fontWeight: 600 }}>USD amount</div>
          <input type="number" value={usd} onChange={(e) => setUsd(+e.target.value || 0)} style={{ border: "none", background: "none", outline: "none", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22, color: "var(--text-strong)", width: "100%" }} />
        </div>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {rates.map((r) => (
          <div key={r[0]} className="cb-between" style={{ fontSize: 13.5, padding: "7px 0", borderBottom: "1px solid var(--border-subtle)" }}>
            <span><b style={{ color: "var(--text-strong)" }}>{r[0]}</b> <span className="cb-muted">· {r[1]}</span></span>
            <b style={{ color: "var(--navy-700)", fontFamily: "var(--font-display)" }}>{(usd * r[2]).toLocaleString("en-US", { maximumFractionDigits: 0 })}</b>
          </div>
        ))}
      </div>
    </Card>
  );
}

/* ---------------- Analytics & Reporting ---------------- */
function AnalyticsView() {
  const destColors = ["#1B3A6B", "#1CA89C", "#2C5089", "#19938A", "#7C99B8", "#74D2C8"];
  const specialties = [
    { label: "Oncology", value: 28 }, { label: "Cardiac", value: 24 }, { label: "Orthopedics", value: 16 },
    { label: "Transplant", value: 12 }, { label: "Fertility", value: 11 }, { label: "Other", value: 9 },
  ];
  return (
    <div className="cb-grid" style={{ gap: "var(--gap-grid)" }}>
      <div className="cb-grid" style={{ gridTemplateColumns: "repeat(4,1fr)" }}>
        <StatCard icon="hand-heart" chip="" value="94%" label="Treatment success rate" delta="+1.2%" />
        <StatCard icon="smile" chip="navy" value="4.8" label="Patient satisfaction (of 5)" delta="+0.1" />
        <StatCard icon="repeat" chip="sky" value="31%" label="Referral / repeat families" delta="+4%" />
        <StatCard icon="timer" chip="warm" value="2.1d" label="Avg. report turnaround" deltaDir="down" delta="-0.4d" />
      </div>
      <div className="cb-grid" style={{ gridTemplateColumns: "1.5fr 1fr" }}>
        <Card>
          <CardHead title="Patients & revenue trend" sub="Monthly — last 8 months" />
          <BarsChart data={CD.TREND.map((d) => ({ label: d.m, active: d.active, inquiries: d.inquiries }))} keys={["active", "inquiries"]} colors={["var(--navy-500)", "var(--teal-500)"]} />
          <div className="cb-row" style={{ gap: 18, marginTop: 14, justifyContent: "center" }}>
            <span className="cb-row" style={{ gap: 7, fontSize: 12.5, color: "var(--text-muted)" }}><span style={{ width: 11, height: 11, borderRadius: 3, background: "var(--navy-500)" }} />Active patients</span>
            <span className="cb-row" style={{ gap: 7, fontSize: 12.5, color: "var(--text-muted)" }}><span style={{ width: 11, height: 11, borderRadius: 3, background: "var(--teal-500)" }} />New inquiries</span>
          </div>
        </Card>
        <Card>
          <CardHead title="Destination analytics" sub="Share of active patients" />
          <Donut segments={CD.DESTINATIONS.map((d, i) => ({ label: d.country, value: d.patients, color: destColors[i] }))} centerTop="123" centerBottom="patients" size={150} />
        </Card>
      </div>
      <div className="cb-grid" style={{ gridTemplateColumns: "1fr 1.4fr" }}>
        <Card>
          <CardHead title="Cases by specialty" sub="Share of pathways" />
          <div style={{ display: "flex", flexDirection: "column", gap: 13, marginTop: 4 }}>
            {specialties.map((s, i) => (
              <div key={s.label}>
                <div className="cb-between" style={{ fontSize: 13, marginBottom: 6 }}><span style={{ fontWeight: 600, color: "var(--text-strong)" }}>{s.label}</span><span className="cb-muted" style={{ fontWeight: 700 }}>{s.value}%</span></div>
                <div className="cb-prog"><div className="cb-prog__fill" style={{ width: s.value + "%", background: destColors[i] }} /></div>
              </div>
            ))}
          </div>
        </Card>
        <Card>
          <div className="cb-row" style={{ gap: 9, marginBottom: 16 }}>
            <div className="cb-chip" style={{ width: 38, height: 38, borderRadius: 11 }}><Icon name="lightbulb" size={19} /></div>
            <div><h3 style={{ fontSize: 16, fontWeight: 700 }}>Executive insights</h3><div style={{ fontSize: 12.5, color: "var(--text-muted)" }}>Generated from this quarter's data — sample</div></div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {[
              ["trending-up", "Türkiye remains the leading destination at 31% of active cases, driven by cardiac and fertility pathways."],
              ["clock", "Report turnaround improved to 2.1 days — 0.4 days faster than last quarter."],
              ["hand-heart", "94% treatment success and 4.8/5 satisfaction reflect strong end-to-end coordination."],
              ["alert-triangle", "Outstanding balances concentrated in 3 active cases — recommend earlier payment milestones."],
            ].map((it, i) => (
              <div key={i} className="cb-row" style={{ gap: 12, padding: 13, borderRadius: "var(--radius-md)", background: "var(--sky-100)", alignItems: "flex-start" }}>
                <Icon name={it[0]} size={18} style={{ color: "var(--teal-600)", marginTop: 2, flex: "none" }} />
                <span style={{ fontSize: 13.5, color: "var(--text-body)", lineHeight: 1.5 }}>{it[1]}</span>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
}

/* ---------------- Hospital Network ---------------- */
function HospitalsView() {
  return (
    <div className="cb-grid" style={{ gap: "var(--gap-grid)" }}>
      <div className="cb-grid" style={{ gridTemplateColumns: "repeat(4,1fr)" }}>
        <StatCard icon="hospital" chip="navy" value="8" label="Partner hospitals" />
        <StatCard icon="globe" chip="" value="6" label="Destination countries" />
        <StatCard icon="badge-check" chip="sky" value="7" label="JCI / NABH accredited" />
        <StatCard icon="star" chip="warm" value="4.7" label="Avg. partner rating" />
      </div>
      <div className="cb-grid" style={{ gridTemplateColumns: "repeat(2,1fr)" }}>
        {CD.HOSPITALS.map((h) => (
          <Card key={h.id} className="cb-hosp-card">
            <div className="cb-between" style={{ alignItems: "flex-start" }}>
              <div className="cb-row" style={{ gap: 13 }}>
                <div className="cb-chip cb-chip--navy" style={{ width: 46, height: 46 }}><Icon name="hospital" size={23} /></div>
                <div>
                  <h3 style={{ fontSize: 16, fontWeight: 700, lineHeight: 1.25, maxWidth: "32ch" }}>{h.name}</h3>
                  <div className="cb-row" style={{ gap: 6, marginTop: 5, color: "var(--text-muted)", fontSize: 13 }}><Icon name="map-pin" size={14} style={{ color: "var(--teal-600)" }} />{h.city}, {h.country}</div>
                </div>
              </div>
              <Pill tone={h.status === "Active partner" ? "teal" : "warn"} dot>{h.status}</Pill>
            </div>
            <div className="cb-tag-list" style={{ margin: "16px 0" }}>
              {h.specialties.map((s) => <span key={s} className="cb-spec">{s}</span>)}
            </div>
            <div className="cb-between" style={{ paddingTop: 14, borderTop: "1px solid var(--border-subtle)" }}>
              <div className="cb-row" style={{ gap: 18 }}>
                <div><div style={{ fontSize: 11, color: "var(--text-muted)", fontWeight: 600 }}>Accreditation</div><div className="cb-row" style={{ gap: 5, marginTop: 2 }}><Icon name="badge-check" size={15} style={{ color: "var(--teal-600)" }} /><span style={{ fontSize: 13, fontWeight: 700, color: "var(--text-strong)" }}>{h.accreditation}</span></div></div>
                <div><div style={{ fontSize: 11, color: "var(--text-muted)", fontWeight: 600 }}>Active cases</div><div style={{ fontSize: 15, fontWeight: 700, color: "var(--text-strong)", fontFamily: "var(--font-display)", marginTop: 2 }}>{h.cases}</div></div>
                <div><div style={{ fontSize: 11, color: "var(--text-muted)", fontWeight: 600 }}>Rating</div><div className="cb-row" style={{ gap: 4, marginTop: 2 }}><Icon name="star" size={15} style={{ color: "var(--warning)" }} /><span style={{ fontSize: 13, fontWeight: 700, color: "var(--text-strong)" }}>{h.rating}</span></div></div>
              </div>
              <button className="cb-link" style={{ color: "var(--teal-600)" }}>Details<Icon name="arrow-right" size={15} /></button>
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { CommsView, FinancialView, AnalyticsView, HospitalsView });