// components.jsx — shared UI primitives for Helm PO Onboarding
const { useState, useEffect, useRef, useMemo } = React;

// ── Logos ──────────────────────────────────────────────────────────
const HelmLogotype = ({ height = 22, color = "darkgreen" }) => (
  <img src={`assets/logo/helm-logotype-${color}.svg`} alt="Helm" style={{ height }} />
);

const HelmMark = ({ size = 24 }) => (
  <img src="assets/logo/helm-mark-darkgreen.svg" alt="Helm" style={{ width: size, height: size }} />
);

const StarIcon = ({ size = 24, color = "var(--helm-dark-green)", className }) => (
  <img src="assets/icons/icon_ai.svg" alt="" className={className}
    style={{ width: size, height: size, filter: color === "var(--helm-white)" ? "invert(1) brightness(2)" : "none" }} />
);

// ── Buttons ────────────────────────────────────────────────────────
const Button = ({ variant = "primary", children, onClick, style, disabled, type = "button" }) => {
  const variants = {
    primary:        { bg: "var(--helm-chartreuse-2)", fg: "var(--helm-white)", border: "none" },
    "primary-soft": { bg: "var(--helm-soft-chartreuse)", fg: "var(--helm-white)", border: "none" },
    "primary-purple": { bg: "var(--helm-dark-purple)", fg: "var(--helm-white)", border: "none" },
    secondary:      { bg: "transparent", fg: "var(--helm-dark-green)", border: "1px solid var(--helm-dark-green)" },
    ghost:          { bg: "transparent", fg: "var(--helm-dark-green)", border: "none" },
    inverse:        { bg: "var(--helm-dark-green)", fg: "var(--helm-white)", border: "none" },
    lemon:          { bg: "var(--helm-lemon)", fg: "var(--helm-dark-green)", border: "1px solid var(--helm-dark-green)" },
  }[variant];
  return (
    <button type={type} onClick={onClick} disabled={disabled} style={{
      display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
      fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 16, lineHeight: "18px",
      padding: "16px 28px", borderRadius: 999,
      background: variants.bg, color: variants.fg, border: variants.border,
      cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? 0.5 : 1,
      transition: "transform .12s ease, opacity .12s ease",
      whiteSpace: "nowrap",
      ...style,
    }}
      onMouseDown={e => !disabled && (e.currentTarget.style.transform = "translateY(1px)")}
      onMouseUp={e => (e.currentTarget.style.transform = "none")}
      onMouseLeave={e => (e.currentTarget.style.transform = "none")}>
      {children}
    </button>
  );
};

// ── Chip ───────────────────────────────────────────────────────────
const Chip = ({ selected, onClick, children, size = "md" }) => {
  const pads = size === "sm" ? "8px 14px" : (selected ? "10px 18px 10px 14px" : "10px 18px");
  return (
    <button onClick={onClick} style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      padding: pads, borderRadius: 24, background: "var(--helm-ecru)",
      fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: size === "sm" ? 13 : 15,
      color: "var(--helm-dark-green)", border: "none",
      opacity: selected ? 1 : 0.4, cursor: "pointer",
      transition: "opacity .15s",
    }}>
      {selected && (
        <svg width="14" height="11" viewBox="0 0 16 12" fill="currentColor">
          <path d="M5.6 11.6L0 6l1.2-1.2L5.6 9.2 14.8 0 16 1.2z"/>
        </svg>
      )}
      {children}
    </button>
  );
};

// ── Carrier logo placeholder (text-based, matches Figma feel) ─────
const CARRIER_LOGOS = {
  "Banner Life": "assets/logo/bannerlife-logo.png",
};
const CarrierLogo = ({ name, size = "md" }) => {
  const palette = {
    "Banner Life":  { bg: "#FFFFFF", fg: "#006EF5" },
    "New York Life":{ bg: "#0033A0", fg: "#FFFFFF" },
    "MetLife":      { bg: "#0061A0", fg: "#FFFFFF" },
    "Prudential":   { bg: "#003DA5", fg: "#FFFFFF" },
    "Northwestern Mutual": { bg: "#0F2A4F", fg: "#FFFFFF" },
    "State Farm":   { bg: "#C8102E", fg: "#FFFFFF" },
  }[name] || { bg: "var(--helm-ecru)", fg: "var(--helm-dark-green)" };
  const [w, h, fs] = size === "lg" ? [120, 64, 13] : size === "sm" ? [60, 36, 9] : [88, 48, 11];
  const logoSrc = CARRIER_LOGOS[name];
  return (
    <div style={{
      width: w, height: h, flexShrink: 0,
      background: palette.bg, color: palette.fg,
      borderRadius: 4, display: "flex", alignItems: "center", justifyContent: "center",
      fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: fs,
      letterSpacing: "-0.02em", textAlign: "center", padding: "0 4px", lineHeight: 1.1,
      border: logoSrc ? "1px solid var(--helm-dark-ecru)" : "none",
      overflow: "hidden",
    }}>
      {logoSrc
        ? <img src={logoSrc} alt={name} style={{ maxWidth: "82%", maxHeight: "70%", objectFit: "contain" }} />
        : name}
    </div>
  );
};

// ── Co-branded Nav ─────────────────────────────────────────────────
const Nav = ({ section, setSection, cobrand, partner = "Banner Life", partnerLogo = "assets/logo/bannerlife-logo.png", avatarInitials = "SG" }) => {
  const items = ["Plan", "Policies", "Guidance", "Profile"];
  return (
    <header style={{
      display: "flex", alignItems: "center", gap: 32,
      padding: "16px 32px", background: "var(--helm-white)",
      borderBottom: "1px solid var(--helm-dark-ecru)",
      position: "sticky", top: 0, zIndex: 10, height: 66, boxSizing: "border-box",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
        {cobrand && (
          <>
            {partnerLogo ? (
              <img src={partnerLogo} alt={partner} style={{ height: 22, width: "auto", display: "block" }} />
            ) : (
              <span style={{
                fontFamily: "var(--font-sans)", fontSize: 16, fontWeight: 600,
                letterSpacing: "-0.01em", color: "var(--helm-dark-green)",
              }}>{partner}</span>
            )}
            <div style={{ width: 1, height: 22, background: "var(--helm-dark-ecru)" }} />
          </>
        )}
        <HelmLogotype height={20} />
      </div>
      <nav style={{ display: "flex", gap: 28, flex: 1, justifyContent: "center" }}>
        {items.map(i => (
          <a key={i} href="#" onClick={e => { e.preventDefault(); setSection && setSection(i); }} style={{
            fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: 500,
            color: "var(--helm-dark-green)",
            opacity: i === section ? 1 : 0.5,
            borderBottom: i === section ? "2px solid var(--helm-dark-green)" : "2px solid transparent",
            paddingBottom: 4, textDecoration: "none", cursor: "pointer",
          }}>{i}</a>
        ))}
      </nav>
      <div style={{
        width: 36, height: 36, borderRadius: "50%", background: "var(--helm-orange)",
        display: "flex", alignItems: "center", justifyContent: "center",
        fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 13,
        color: "var(--helm-dark-green)", flexShrink: 0,
      }}>{avatarInitials}</div>
    </header>
  );
};

// ── Step indicator (dotted breadcrumb at top of upload screens) ───
const StepBreadcrumb = ({ steps, current, onStepClick }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 12, fontFamily: "var(--font-sans)" }}>
    {steps.map((s, i) => {
      const clickable = typeof onStepClick === "function" && i !== current;
      return (
      <React.Fragment key={s}>
        <button
          type="button"
          onClick={clickable ? () => onStepClick(i) : undefined}
          disabled={!clickable}
          aria-current={i === current ? "step" : undefined}
          style={{
            display: "flex", alignItems: "center", gap: 8,
            background: "transparent", border: "none", padding: "4px 6px", margin: "-4px -6px",
            borderRadius: 999,
            cursor: clickable ? "pointer" : "default",
            fontFamily: "inherit",
            transition: "background 120ms ease",
          }}
          onMouseEnter={(e) => { if (clickable) e.currentTarget.style.background = "var(--helm-ecru)"; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; }}
        >
          <div style={{
            width: 22, height: 22, borderRadius: "50%",
            background: i < current ? "var(--helm-chartreuse-2)" : i === current ? "var(--helm-dark-green)" : "transparent",
            border: i > current ? "1px solid var(--helm-dark-ecru)" : "none",
            color: i <= current ? "var(--helm-white)" : "var(--helm-dark-grey)",
            display: "flex", alignItems: "center", justifyContent: "center",
            fontSize: 12, fontWeight: 600,
          }}>{i < current ? "✓" : i + 1}</div>
          <span style={{
            fontSize: 13, fontWeight: 500,
            color: i === current ? "var(--helm-dark-green)" : "var(--helm-dark-grey)",
            textDecoration: clickable ? "underline" : "none",
            textDecorationColor: "var(--helm-dark-ecru)",
            textUnderlineOffset: 3,
          }}>{s}</span>
        </button>
        {i < steps.length - 1 && <div style={{ width: 24, height: 1, background: "var(--helm-dark-ecru)" }} />}
      </React.Fragment>
      );
    })}
  </div>
);

Object.assign(window, { HelmLogotype, HelmMark, StarIcon, Button, Chip, CarrierLogo, Nav, StepBreadcrumb });