/* Carelon Passport — active care journey timeline */

const JourneyStep = ({ icon, tone, title, status, statusTone, meta, action, onAction, last }) => {
  const t = TONES[tone];
  return (
    <div style={{ display: "flex", gap: 15, position: "relative" }}>
      {/* rail */}
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", flexShrink: 0 }}>
        <span style={{ width: 40, height: 40, borderRadius: 12, background: t.bg, color: t.fg, display: "flex", alignItems: "center", justifyContent: "center", border: "1px solid #fff", boxShadow: "0 0 0 1px " + t.bg, zIndex: 1 }}>
          <Icon name={icon} size={19} stroke={1.85} />
        </span>
        {!last && <span style={{ flex: 1, width: 2, background: "var(--line-strong)", marginTop: 2, marginBottom: 2, minHeight: 18 }} />}
      </div>
      {/* body */}
      <div className="cp-journey-row" style={{ flex: 1, paddingBottom: last ? 0 : 20, minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 12 }}>
          <div style={{ minWidth: 0, flex: 1 }}>
            <div style={{ fontSize: 14.5, fontWeight: 650, color: "var(--ink)", letterSpacing: "-.005em", lineHeight: 1.3 }}>{title}</div>
            <div style={{ fontSize: 12.5, color: "var(--ink-3)", marginTop: 4, lineHeight: 1.35, display: "flex", alignItems: "center", gap: 7, flexWrap: "wrap" }}>
              {meta.map((m, i) => (
                <React.Fragment key={i}>
                  {i > 0 && <span style={{ width: 3, height: 3, borderRadius: 9, background: "var(--ink-4)" }} />}
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>{m.icon && <Icon name={m.icon} size={13} stroke={1.9} />}{m.text}</span>
                </React.Fragment>
              ))}
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 8, flexShrink: 0 }}>
            <StatusPill tone={statusTone}>{status}</StatusPill>
            <button className="cp-journey-action" onClick={onAction} style={{ display: "inline-flex", alignItems: "center", gap: 4, background: "none", border: "none", cursor: "pointer", color: "var(--purple)", fontWeight: 600, fontSize: 12.5, fontFamily: "inherit", padding: 0, whiteSpace: "nowrap" }}>
              {action}<Icon name="chevronRight" size={14} stroke={2.2} />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

const JourneyCard = () => {
  const toast = useToast();
  const steps = [
    { icon: "heartPulse", tone: "violet", title: "Annual cardiology follow-up", status: "Scheduled", statusTone: "violet", meta: [{ icon: "pin", text: "The London Clinic" }, { icon: "calendar", text: "Jun 18, 9:30 AM" }], action: "View appointment", t: { title: "Appointment details", body: "Cardiology · The London Clinic · Jun 18" } },
    { icon: "pill", tone: "blue", title: "Prescription refill coordination", status: "In progress", statusTone: "blue", meta: [{ icon: "clock", text: "Delivery confirmation pending" }], action: "Track delivery", t: { title: "Tracking refill", body: "Atorvastatin · arriving before departure" } },
    { icon: "chat", tone: "purple", title: "Behavioral health support options", status: "Recommended", statusTone: "purple", meta: [{ icon: "user", text: "3 matched providers available" }], action: "See providers", t: { title: "3 matched providers", body: "Tap a provider to request an intro" } },
    { icon: "doc", tone: "green", title: "Travel medical summary", status: "Ready", statusTone: "green", meta: [{ icon: "download", text: "Downloadable for your trip" }], action: "Download", t: { title: "Travel summary ready", body: "Saved to your Passport documents" } },
  ];
  return (
    <Card style={{ height: "100%" }}>
      <CardHead title="Active care journey" sub="Your current health coordination timeline" icon="route" tone="violet" action={<StatusPill tone="slate">4 active</StatusPill>} />
      <div>
        {steps.map((s, i) => (
          <JourneyStep key={s.title} {...s} last={i === steps.length - 1} onAction={() => toast(s.t)} />
        ))}
      </div>
    </Card>
  );
};

window.JourneyCard = JourneyCard;