/* Carelon Passport — concierge + coverage snapshot */

const ConciergeCard = ({ onChat }) => {
  const toast = useToast();
  return (
    <Card pad={0} style={{ overflow: "hidden", height: "100%", display: "flex", flexDirection: "column" }}>
      <div style={{ position: "relative", padding: "20px 22px 18px", background: "linear-gradient(135deg, rgba(80,9,181,.06), rgba(0,187,186,.05))", borderBottom: "1px solid var(--line)" }}>
        <div style={{ position: "absolute", top: 16, right: 18 }}><StatusPill tone="green" pulse>Online now</StatusPill></div>
        <div style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: ".05em", textTransform: "uppercase", color: "var(--ink-3)", marginBottom: 14 }}>Your Carelon concierge</div>
        <div style={{ display: "flex", alignItems: "center", gap: 13 }}>
          <Avatar initials="MC" size={52} online tone="brand2" />
          <div>
            <div style={{ fontSize: 17, fontWeight: 700, color: "var(--ink)", letterSpacing: "-.01em" }}>Maria Chen</div>
            <div style={{ fontSize: 12.5, color: "var(--ink-2)", fontWeight: 500 }}>Senior Global Care Navigator</div>
          </div>
        </div>
      </div>
      <div style={{ padding: "16px 22px 20px", display: "flex", flexDirection: "column", flex: 1 }}>
        <p style={{ margin: "0 0 16px", fontSize: 13, lineHeight: 1.55, color: "var(--ink-3)" }}>
          Maria can help with provider access, travel care coordination, benefits questions, and urgent support.
        </p>
        <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "11px 13px", borderRadius: 13, background: "var(--bg-sunk)", border: "1px solid var(--line)", marginBottom: 16 }}>
          <span style={{ width: 32, height: 32, borderRadius: 9, background: "#fff", color: "var(--violet)", display: "flex", alignItems: "center", justifyContent: "center", border: "1px solid var(--line)", flexShrink: 0 }}><Icon name="calendar" size={16} stroke={1.9} /></span>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 12.5, fontWeight: 600, color: "var(--ink)", lineHeight: 1.3, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>London trip coordinated</div>
            <div style={{ fontSize: 11.5, color: "var(--ink-3)", lineHeight: 1.3 }}>2h ago · 4 tasks handled</div>
          </div>
        </div>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: ".05em", textTransform: "uppercase", color: "var(--ink-4)", marginBottom: 9 }}>Maria can help with</div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 7, marginBottom: 8 }}>
          {["Provider access", "Travel care", "Benefits", "Urgent support"].map((c) => (
            <span key={c} style={{ padding: "5px 11px", borderRadius: 999, background: "var(--bg-sunk)", border: "1px solid var(--line)", fontSize: 12, fontWeight: 600, color: "var(--ink-2)", whiteSpace: "nowrap" }}>{c}</span>
          ))}
        </div>
        <div style={{ marginTop: "auto", paddingTop: 16 }}>
          <Button variant="brand" size="md" icon="chat" full onClick={onChat} style={{ marginBottom: 9 }}>Message Maria</Button>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 9 }}>
            <Button variant="secondary" size="md" icon="phone" full onClick={() => toast({ title: "Call scheduled", body: "Maria will call you at 2:00 PM" })}>Schedule</Button>
            <Button variant="secondary" size="md" icon="share" full onClick={() => toast({ title: "Documents shared", body: "Sent securely to Maria Chen" })}>Share</Button>
          </div>
        </div>
      </div>
    </Card>
  );
};

const CoverageRow = ({ icon, label, tone, status, last }) => {
  const t = TONES[tone];
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 0", borderBottom: last ? "none" : "1px solid var(--line)" }}>
      <span style={{ width: 34, height: 34, borderRadius: 10, background: t.bg, color: t.fg, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><Icon name={icon} size={17} stroke={1.8} /></span>
      <span style={{ fontSize: 13.5, fontWeight: 550, color: "var(--ink)", flex: 1 }}>{label}</span>
      <StatusPill tone={t.pillTone || tone}>{status}</StatusPill>
    </div>
  );
};

const CoverageCard = () => {
  const toast = useToast();
  const rows = [
    { icon: "cross", label: "In-network access", tone: "green", status: "Active" },
    { icon: "globe", label: "International urgent care", tone: "teal", status: "Included" },
    { icon: "pill", label: "Prescription support", tone: "green", status: "Active" },
    { icon: "steth", label: "Specialty referral support", tone: "violet", status: "Available" },
  ];
  return (
    <Card style={{ height: "100%", display: "flex", flexDirection: "column" }}>
      <CardHead title="Coverage snapshot" icon="layers" tone="purple" action={<StatusPill tone="purple">Platinum</StatusPill>} />
      <div style={{ marginTop: -4 }}>
        {rows.map((r, i) => <CoverageRow key={r.label} {...r} last={i === rows.length - 1} />)}
      </div>
      {/* digital ID preview */}
      <div style={{ marginTop: 16, borderRadius: 16, padding: "16px 18px", background: "linear-gradient(120deg,#5009B5,#6A2BD6 55%,#00BBBA 150%)", color: "#fff", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", top: -30, right: -20, width: 140, height: 140, borderRadius: "50%", background: "rgba(255,255,255,.08)" }} />
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", position: "relative" }}>
          <div>
            <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: ".08em", textTransform: "uppercase", opacity: .8, whiteSpace: "nowrap" }}>Digital member ID</div>
            <div style={{ fontSize: 16, fontWeight: 700, marginTop: 5 }}>Jordan Mitchell</div>
            <div style={{ fontSize: 12, opacity: .85, marginTop: 1, fontVariantNumeric: "tabular-nums", letterSpacing: ".06em" }}>ID · CRP 4471 8820</div>
          </div>
          <img src="assets/carelon-mark.svg" alt="" style={{ height: 26, filter: "brightness(0) invert(1)", opacity: .95 }} />
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginTop: 14 }}>
        <Button variant="soft" size="sm" icon="idCard" full onClick={() => toast({ title: "Digital member ID", body: "Ready to present at any provider" })}>Digital ID</Button>
        <Button variant="secondary" size="sm" icon="doc" full onClick={() => toast({ title: "Plan documents", body: "Opening your coverage details" })}>Plan docs</Button>
      </div>
    </Card>
  );
};

window.ConciergeCard = ConciergeCard;
window.CoverageCard = CoverageCard;