/* Carelon Passport — documents, medications, support, messages */

const DocRow = ({ icon, tone, title, status, statusTone, last }) => {
  const toast = useToast();
  const t = TONES[tone];
  return (
    <div className="cp-doc" style={{ display: "flex", alignItems: "center", gap: 13, padding: "13px 0", borderBottom: last ? "none" : "1px solid var(--line)" }}>
      <span style={{ width: 40, height: 46, borderRadius: 9, background: t.bg, color: t.fg, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, position: "relative" }}>
        <Icon name={icon} size={20} stroke={1.7} />
      </span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 13.5, fontWeight: 650, color: "var(--ink)" }}>{title}</div>
        <div style={{ marginTop: 4 }}><StatusPill tone={statusTone}>{status}</StatusPill></div>
      </div>
      <div style={{ display: "flex", gap: 6 }}>
        <button className="cp-doc-btn" onClick={() => toast({ title: title, body: "Opening preview…" })} aria-label="View" style={{ width: 34, height: 34, borderRadius: 9, border: "1px solid var(--line)", background: "#fff", color: "var(--ink-2)", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name="eye" size={16} stroke={1.8} /></button>
        <button className="cp-doc-btn" onClick={() => toast({ title: "Downloaded", body: title + " saved" })} aria-label="Download" style={{ width: 34, height: 34, borderRadius: 9, border: "1px solid var(--line)", background: "#fff", color: "var(--ink-2)", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name="download" size={16} stroke={1.8} /></button>
      </div>
    </div>
  );
};

const DocumentsCard = () => {
  const docs = [
    { icon: "idCard", tone: "purple", title: "Digital Member ID", status: "Ready to present", statusTone: "green" },
    { icon: "doc", tone: "violet", title: "Travel Medical Summary", status: "Updated today", statusTone: "blue" },
    { icon: "shield", tone: "teal", title: "Coverage Letter", status: "Valid through 2026", statusTone: "teal" },
  ];
  return (
    <Card style={{ height: "100%" }}>
      <CardHead title="Passport documents" icon="doc" tone="purple" action={<TextLink icon="arrowRight">All files</TextLink>} />
      <div style={{ marginTop: -6 }}>
        {docs.map((d, i) => <DocRow key={d.title} {...d} last={i === docs.length - 1} />)}
      </div>
    </Card>
  );
};

const MedRow = ({ icon, tone, title, sub, status, statusTone, last }) => {
  const t = TONES[tone];
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "13px 0", borderBottom: last ? "none" : "1px solid var(--line)" }}>
      <span style={{ width: 36, height: 36, borderRadius: 10, background: t.bg, color: t.fg, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><Icon name={icon} size={18} stroke={1.8} /></span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 13.5, fontWeight: 600, color: "var(--ink)" }}>{title}</div>
        {sub && <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 1 }}>{sub}</div>}
      </div>
      <StatusPill tone={statusTone}>{status}</StatusPill>
    </div>
  );
};

const MedicationsCard = () => {
  const toast = useToast();
  const meds = [
    { icon: "pill", tone: "amber", title: "Atorvastatin refill", sub: "10 mg · daily", status: "Due in 6 days", statusTone: "amber" },
    { icon: "checkCircle", tone: "green", title: "Travel medication confirmation", sub: "Cleared for Dubai & London", status: "Completed", statusTone: "green" },
    { icon: "chat", tone: "violet", title: "Medication support message", sub: "From Maria Chen", status: "1 new", statusTone: "violet" },
  ];
  return (
    <Card style={{ height: "100%" }}>
      <CardHead title="Medications & reminders" icon="pill" tone="teal" action={<StatusPill tone="amber">1 due soon</StatusPill>} />
      <div style={{ marginTop: -6 }}>
        {meds.map((m, i) => <MedRow key={m.title} {...m} last={i === meds.length - 1} />)}
      </div>
      <Button variant="soft" size="sm" full icon="refresh" style={{ marginTop: 14 }} onClick={() => toast({ title: "Refill requested", body: "Atorvastatin · Maria will coordinate delivery" })}>Request refill now</Button>
    </Card>
  );
};

const SupportCard = ({ onChat }) => {
  const toast = useToast();
  const lines = [
    { icon: "globe", title: "24/7 global support", sub: "Live assistance in 30+ languages" },
    { icon: "cross", title: "Urgent care guidance", sub: "Find the nearest appropriate care" },
    { icon: "heartPulse", title: "Emergency coordination", sub: "We liaise with local providers" },
    { icon: "pin", title: "Local assistance routing", sub: "Connected to your destination" },
  ];
  return (
    <Card pad={0} style={{ height: "100%", display: "flex", flexDirection: "column", overflow: "hidden", border: "1px solid var(--amber-line)" }}>
      <div style={{ padding: "22px 24px 18px", background: "linear-gradient(135deg, rgba(217,164,65,.10), rgba(229,122,107,.07))", borderBottom: "1px solid var(--amber-line)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 13 }}>
          <span style={{ width: 46, height: 46, borderRadius: 13, background: "#fff", color: "var(--amber-ink)", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "0 4px 12px -4px rgba(217,164,65,.4)" }}><Icon name="alert" size={23} stroke={1.9} /></span>
          <div>
            <div style={{ fontSize: 17, fontWeight: 750, color: "var(--ink)", letterSpacing: "-.01em" }}>Need immediate help?</div>
            <div style={{ fontSize: 13, color: "var(--ink-2)", fontWeight: 500 }}>We're available wherever you are, anytime.</div>
          </div>
        </div>
      </div>
      <div style={{ padding: "16px 24px 22px", display: "flex", flexDirection: "column", flex: 1 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px 18px", flex: 1, alignContent: "center" }}>
          {lines.map((l) => (
            <div key={l.title} style={{ display: "flex", gap: 11, alignItems: "flex-start" }}>
              <span style={{ width: 32, height: 32, borderRadius: 9, background: "var(--amber-soft)", color: "var(--amber-ink)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><Icon name={l.icon} size={17} stroke={1.85} /></span>
              <div>
                <div style={{ fontSize: 13, fontWeight: 650, color: "var(--ink)", lineHeight: 1.25 }}>{l.title}</div>
                <div style={{ fontSize: 11.5, color: "var(--ink-3)", marginTop: 2, lineHeight: 1.35 }}>{l.sub}</div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 11, marginTop: 18 }}>
          <Button variant="primary" size="md" icon="phone" full onClick={() => toast({ title: "Connecting you to support", body: "24/7 line · average wait < 30s", icon: "phone" })} style={{ background: "var(--amber-ink)" }}>Call support</Button>
          <Button variant="secondary" size="md" icon="chat" full onClick={onChat} style={{ borderColor: "var(--amber-line)", color: "var(--amber-ink)" }}>Start urgent chat</Button>
        </div>
      </div>
    </Card>
  );
};

const MsgRow = ({ initials, tone, sender, role, preview, time, unread, last }) => (
  <div className="cp-msg" style={{ display: "flex", gap: 12, padding: "13px 0", borderBottom: last ? "none" : "1px solid var(--line)", cursor: "pointer" }}>
    <Avatar initials={initials} size={38} tone={tone} />
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
        <span style={{ fontSize: 13.5, fontWeight: 650, color: "var(--ink)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", flex: 1, minWidth: 0 }}>{sender}</span>
        {unread && <span style={{ width: 7, height: 7, borderRadius: 9, background: "var(--purple)" }} />}
        <span style={{ fontSize: 11.5, color: "var(--ink-4)", marginLeft: "auto" }}>{time}</span>
      </div>
      <div style={{ fontSize: 11.5, color: "var(--violet)", fontWeight: 600, marginTop: 1, whiteSpace: "nowrap" }}>{role}</div>
      <div style={{ fontSize: 12.5, color: "var(--ink-3)", marginTop: 3, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{preview}</div>
    </div>
  </div>
);

const MessagesCard = ({ onChat }) => {
  const msgs = [
    { initials: "MC", tone: "brand", sender: "Maria Chen", role: "Your concierge", preview: "I've confirmed your cardiology appointment in London.", time: "2h", unread: true },
    { initials: "LC", tone: "brand2", sender: "The London Clinic", role: "Provider", preview: "New availability opened for Jun 18 — would you like it?", time: "5h", unread: true },
    { initials: "CP", tone: "brand2", sender: "Carelon Passport", role: "Travel care reminder", preview: "Pack your travel medical summary before departure.", time: "1d", unread: false },
  ];
  return (
    <Card style={{ height: "100%", display: "flex", flexDirection: "column" }}>
      <CardHead title="Recent messages" icon="message" tone="violet" action={<TextLink icon="arrowRight" >Inbox</TextLink>} />
      <div style={{ marginTop: -6, flex: 1 }}>
        {msgs.map((m, i) => <MsgRow key={m.sender} {...m} last={i === msgs.length - 1} />)}
      </div>
      <Button variant="secondary" size="sm" full icon="chat" style={{ marginTop: 14 }} onClick={onChat}>Open messages</Button>
    </Card>
  );
};

Object.assign(window, { DocumentsCard, MedicationsCard, SupportCard, MessagesCard });