/* Carelon Passport — trusted care near you (map + providers) */

const Badge = ({ icon, children, tone = "slate" }) => {
  const t = TONES[tone];
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 4, fontSize: 11.5, fontWeight: 600, color: t.fg, whiteSpace: "nowrap" }}>
      <Icon name={icon} size={13} stroke={2} />{children}
    </span>
  );
};

const ProviderRow = ({ idx, icon, tone, name, specialty, distance, rating, active, onSelect, onBook }) => {
  const t = TONES[tone];
  return (
    <div onMouseEnter={onSelect} onClick={onSelect} className="cp-provider" style={{
      display: "flex", alignItems: "center", gap: 13, padding: "12px 12px", borderRadius: 14, cursor: "pointer",
      background: active ? "var(--purple-soft)" : "transparent",
      boxShadow: active ? "inset 0 0 0 1px var(--purple-line)" : "inset 0 0 0 1px transparent",
      transition: "background .15s, box-shadow .15s",
    }}>
      <span style={{ position: "relative", width: 42, height: 42, borderRadius: 12, background: t.bg, color: t.fg, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
        <Icon name={icon} size={20} stroke={1.8} />
        <span style={{ position: "absolute", top: -6, left: -6, width: 19, height: 19, borderRadius: 999, background: active ? "var(--purple)" : "var(--ink)", color: "#fff", fontSize: 10.5, fontWeight: 700, display: "flex", alignItems: "center", justifyContent: "center", border: "2px solid #fff" }}>{idx}</span>
      </span>
      <div style={{ minWidth: 0, flex: 1 }}>
        <div style={{ fontSize: 14, fontWeight: 650, color: "var(--ink)", letterSpacing: "-.005em" }}>{name}</div>
        <div style={{ display: "flex", alignItems: "center", gap: 9, marginTop: 3 }}>
          <span style={{ fontSize: 12.5, color: "var(--ink-3)", whiteSpace: "nowrap" }}>{specialty}</span>
          <span style={{ width: 3, height: 3, borderRadius: 9, background: "var(--ink-4)" }} />
          <Badge icon="pin" tone="slate">{distance}</Badge>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 7 }}>
          <Badge icon="checkCircle" tone="green">In-network</Badge>
          <Badge icon="user" tone="blue">Accepting patients</Badge>
        </div>
      </div>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 9, flexShrink: 0 }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 4, fontSize: 13, fontWeight: 700, color: "var(--ink)" }}>
          <Icon name="star" size={14} stroke={0} fill="#E5A52E" style={{ color: "#E5A52E" }} />{rating}
        </span>
        <Button variant="secondary" size="sm" onClick={(e) => { e.stopPropagation(); onBook(); }} style={{ height: 34 }}>Book assistance</Button>
      </div>
    </div>
  );
};

const TrustedCareCard = () => {
  const toast = useToast();
  const [active, setActive] = React.useState(1);
  const providers = [
    { icon: "heartPulse", tone: "violet", name: "St. Thomas Outpatient Center", specialty: "Cardiology & imaging", distance: "1.2 mi", rating: "4.9" },
    { icon: "cross", tone: "purple", name: "The London Clinic", specialty: "Multispecialty hospital", distance: "2.0 mi", rating: "4.8" },
    { icon: "chat", tone: "teal", name: "City Behavioral Health Partners", specialty: "Behavioral health", distance: "0.8 mi", rating: "4.7" },
  ];
  return (
    <Card pad={0} style={{ height: "100%", display: "flex", flexDirection: "column", overflow: "hidden" }}>
      <div style={{ position: "relative", height: 150, flexShrink: 0 }}>
        <CityMap active={active} onPin={setActive} />
        <div style={{ position: "absolute", top: 16, left: 18, right: 18, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ width: 36, height: 36, borderRadius: 11, background: "#fff", color: "var(--violet)", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "0 4px 12px -4px rgba(28,21,48,.25)" }}><Icon name="pin" size={19} stroke={1.9} /></span>
            <div>
              <div style={{ fontSize: 16, fontWeight: 700, color: "var(--ink)", letterSpacing: "-.01em" }}>Trusted care near you</div>
              <div style={{ fontSize: 12, color: "var(--ink-2)", fontWeight: 500 }}>London, UK · 3 in-network options</div>
            </div>
          </div>
          <span style={{ padding: "5px 11px", borderRadius: 999, background: "rgba(255,255,255,.9)", backdropFilter: "blur(6px)", fontSize: 12, fontWeight: 600, color: "var(--ink-2)", border: "1px solid var(--line)" }}>Map view</span>
        </div>
      </div>
      <div style={{ padding: "10px 12px 14px", display: "flex", flexDirection: "column", gap: 2, flex: 1 }}>
        {providers.map((p, i) => (
          <ProviderRow key={p.name} idx={i + 1} {...p} active={active === i} onSelect={() => setActive(i)} onBook={() => toast({ title: "Booking assistance requested", body: p.name + " · Maria will coordinate" })} />
        ))}
      </div>
    </Card>
  );
};

window.TrustedCareCard = TrustedCareCard;