// PassMark onboarding — shared UI components
const { useState, useRef, useEffect } = React;

/* ---------- Icons (simple, inline) ---------- */
function Icon({ name, size = 20, stroke = 2 }) {
  const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
  const paths = {
    check: <polyline points="20 6 9 17 4 12" />,
    arrowRight: <><line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></>,
    arrowLeft: <><line x1="19" y1="12" x2="5" y2="12" /><polyline points="12 19 5 12 12 5" /></>,
    eye: <><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" /><circle cx="12" cy="12" r="3" /></>,
    eyeOff: <><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" /><line x1="1" y1="1" x2="23" y2="23" /></>,
    user: <><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" /></>,
    school: <><path d="M22 10v6M2 10l10-5 10 5-10 5z" /><path d="M6 12v5c3 3 9 3 12 0v-5" /></>,
    book: <><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" /><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" /></>,
    target: <><circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="6" /><circle cx="12" cy="12" r="2" /></>,
    spark: <path d="M12 3v3m0 12v3M5.6 5.6l2.1 2.1m8.6 8.6l2.1 2.1M3 12h3m12 0h3M5.6 18.4l2.1-2.1m8.6-8.6l2.1-2.1" />,
  };
  return <svg {...common}>{paths[name]}</svg>;
}

/* ---------- Logo ---------- */
function Logo({ light = false, size = 30 }) {
  const ink = light ? "#fff" : "var(--brand-deep)";
  return (
    <div className="pm-logo" style={{ gap: size * 0.32 }}>
      <span className="pm-logo-mark" style={{ width: size * 1.12, height: size * 1.12 }}>
        <img src="assets/mascot_head_512.png" width={size * 1.12} height={size * 1.12}
          alt="PassMark mascot" style={{ display: "block", objectFit: "contain" }} />
      </span>
      <span className="pm-logo-word" style={{ color: ink, fontSize: size * 0.62 }}>
        Pass<span style={{ color: light ? "#fff" : "var(--brand)" }}>Mark</span>
      </span>
    </div>
  );
}

/* ---------- Text field ---------- */
function Field({ label, value, onChange, type = "text", placeholder, error, optional, hint, autoFocus, onEnter, wide }) {
  const isPw = type === "password";
  const [show, setShow] = useState(false);
  return (
    <label className={"pm-field" + (error ? " is-error" : "") + (wide ? " wide" : "")}>
      <span className="pm-label">
        {label}{optional && <em className="pm-opt">Optional</em>}
      </span>
      <span className="pm-input-wrap">
        <input
          className="pm-input"
          type={isPw ? (show ? "text" : "password") : type}
          value={value}
          placeholder={placeholder}
          autoFocus={autoFocus}
          onChange={(e) => onChange(e.target.value)}
          onKeyDown={(e) => { if (e.key === "Enter" && onEnter) onEnter(); }}
        />
        {isPw && (
          <button type="button" className="pm-eye" onClick={() => setShow((s) => !s)} tabIndex={-1}
            aria-label={show ? "Hide password" : "Show password"}>
            <Icon name={show ? "eyeOff" : "eye"} size={18} />
          </button>
        )}
      </span>
      {error ? <span className="pm-err">{error}</span> : hint ? <span className="pm-hint">{hint}</span> : null}
    </label>
  );
}

/* ---------- Select field (custom dropdown for long lists) ---------- */
function Select({ label, value, onChange, options, placeholder = "Select…", error, optional, searchable }) {
  const [open, setOpen] = useState(false);
  const [q, setQ] = useState("");
  const ref = useRef(null);
  useEffect(() => {
    function onDoc(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, []);
  const opts = options.map((o) => typeof o === "string" ? { value: o, label: o } : o);
  const filtered = searchable && q ? opts.filter((o) => o.label.toLowerCase().includes(q.toLowerCase())) : opts;
  const current = opts.find((o) => o.value === value);
  return (
    <div className={"pm-field" + (error ? " is-error" : "")} ref={ref}>
      <span className="pm-label">{label}{optional && <em className="pm-opt">Optional</em>}</span>
      <div className="pm-select">
        <button type="button" className={"pm-select-btn" + (open ? " open" : "")} onClick={() => setOpen((o) => !o)}>
          <span className={current ? "" : "ph"}>{current ? current.label : placeholder}</span>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
            strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" className="pm-chev">
            <polyline points="6 9 12 15 18 9" />
          </svg>
        </button>
        {open && (
          <div className="pm-menu">
            {searchable && (
              <input className="pm-menu-search" autoFocus placeholder="Search…" value={q}
                onChange={(e) => setQ(e.target.value)} />
            )}
            <div className="pm-menu-list">
              {filtered.length === 0 && <div className="pm-menu-empty">No matches</div>}
              {filtered.map((o) => (
                <button key={o.value} type="button"
                  className={"pm-menu-item" + (o.value === value ? " sel" : "")}
                  onClick={() => { onChange(o.value); setOpen(false); setQ(""); }}>
                  {o.label}
                  {o.value === value && <Icon name="check" size={16} />}
                </button>
              ))}
            </div>
          </div>
        )}
      </div>
      {error && <span className="pm-err">{error}</span>}
    </div>
  );
}

/* ---------- Selectable choice card ---------- */
function ChoiceCard({ selected, onClick, icon, tag, title, desc, points, accent, wide }) {
  return (
    <button type="button" className={"pm-choice" + (selected ? " sel" : "") + (wide ? " wide" : "")} onClick={onClick}>
      <span className="pm-choice-check"><Icon name="check" size={14} stroke={3} /></span>
      <span className="pm-choice-top">
        {icon && <span className="pm-choice-icon"><Icon name={icon} size={22} /></span>}
        {tag && <span className={"pm-choice-tag" + (accent ? " accent" : "")}>{tag}</span>}
      </span>
      <span className="pm-choice-title">{title}</span>
      {desc && <span className="pm-choice-desc">{desc}</span>}
      {points && (
        <span className="pm-choice-points">
          {points.map((p, i) => (
            <span key={i} className="pm-choice-point"><Icon name="check" size={13} stroke={3} />{p}</span>
          ))}
        </span>
      )}
    </button>
  );
}

/* ---------- Buttons ---------- */
function Btn({ children, onClick, variant = "primary", disabled, iconRight, iconLeft, full, type = "button" }) {
  return (
    <button type={type} className={"pm-btn " + variant + (full ? " full" : "")} onClick={onClick} disabled={disabled}>
      {iconLeft && <Icon name={iconLeft} size={18} />}
      <span>{children}</span>
      {iconRight && <Icon name={iconRight} size={18} />}
    </button>
  );
}

Object.assign(window, { Icon, Logo, Field, Select, ChoiceCard, Btn });