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

/* ---------- Icons (simple line icons) ---------- */
function Icon({ name, size = 20, stroke = 2, ...rest }) {
  const paths = {
    wa: <><path d="M12 2a10 10 0 00-8.5 15.2L2 22l4.9-1.4A10 10 0 1012 2z"/><path d="M8.5 8.5c0 3.5 3.5 7 7 7 .6 0 1.2-.5 1.3-1l.2-1.2-2.2-1-.9 1c-1.3-.5-2.4-1.6-2.9-2.9l1-.9-1-2.2L9.5 7c-.5.1-1 .7-1 1.5z" fill="currentColor" stroke="none"/></>,
    mail: <><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></>,
    user: <><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.6-7 8-7s8 3 8 7"/></>,
    arrow: <><path d="M5 12h14M13 6l6 6-6 6"/></>,
    arrowL: <><path d="M19 12H5M11 18l-6-6 6-6"/></>,
    check: <><path d="M4 12l5 5L20 6"/></>,
    upload: <><path d="M12 16V4M7 9l5-5 5 5"/><path d="M4 16v3a2 2 0 002 2h12a2 2 0 002-2v-3"/></>,
    doc: <><path d="M7 3h7l5 5v13a1 1 0 01-1 1H7a1 1 0 01-1-1V4a1 1 0 011-1z"/><path d="M14 3v5h5"/></>,
    sparkle: <><path d="M12 3l1.8 4.7L18.5 9.5 13.8 11.3 12 16l-1.8-4.7L5.5 9.5l4.7-1.8z"/></>,
    edit: <><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z"/></>,
    clock: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    image: <><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="9" cy="10" r="2"/><path d="M21 16l-5-5L5 21"/></>,
    id: <><rect x="2" y="5" width="20" height="14" rx="2"/><circle cx="8" cy="11" r="2.2"/><path d="M14 9h5M14 13h5M5 16h8"/></>,
    x: <><path d="M6 6l12 12M18 6L6 18"/></>,
    briefcase: <><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 012-2h4a2 2 0 012 2v2M3 12h18"/></>,
    pin: <><path d="M12 21s7-5.5 7-11a7 7 0 10-14 0c0 5.5 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></>,
    shield: <><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"/><path d="M9 12l2 2 4-4"/></>,
    bolt: <><path d="M13 2L4 14h7l-1 8 9-12h-7z"/></>,
    chevR: <><path d="M9 6l6 6-6 6"/></>,
    plus: <><path d="M12 5v14M5 12h14"/></>,
    home: <><path d="M3 11l9-8 9 8"/><path d="M5 10v10h14V10"/></>,
    phone: <><path d="M5 4h4l2 5-3 2a12 12 0 005 5l2-3 5 2v4a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2z"/></>,
    lock: <><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 018 0v4"/></>,
    file: <><path d="M7 3h7l5 5v13a1 1 0 01-1 1H7a1 1 0 01-1-1V4a1 1 0 011-1z"/><path d="M14 3v5h5"/></>,
    users: <><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.9"/></>,
    instagram: <><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17" cy="7" r="1" fill="currentColor" stroke="none"/></>,
    tiktok: <><path d="M9 12a4 4 0 104 4V4c.5 2.5 2 4 4.5 4.2"/></>,
    linkedin: <><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M7 10v7M7 7v.01M11 17v-4a2 2 0 014 0v4"/></>,
    calendar: <><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></>,
    cal: <><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></>,
    map: <><path d="M12 21s7-5.5 7-11a7 7 0 10-14 0c0 5.5 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></>,
    star: <><path d="M12 3l2.6 5.6 6.1.7-4.5 4.2 1.2 6L12 16.8 6.6 19.5l1.2-6L3.3 9.3l6.1-.7z"/></>,
    'check-circle': <><circle cx="12" cy="12" r="9"/><path d="M8 12l3 3 5-5"/></>,
    eye: <><path d="M1 12S4.5 5 12 5s11 7 11 7-3.5 7-11 7S1 12 1 12z"/><circle cx="12" cy="12" r="3"/></>,
    eyeOff: <><path d="M17.9 17.9A10.9 10.9 0 0112 19C4.5 19 1 12 1 12a19.6 19.6 0 015.1-6.9M9.9 5.2A10.4 10.4 0 0112 5c7.5 0 11 7 11 7a19.7 19.7 0 01-2.8 4.1M14.1 14.1A3 3 0 019.9 9.9"/><path d="M2 2l20 20"/></>,
    download: <><path d="M12 4v12M7 11l5 5 5-5"/><path d="M4 17v2a2 2 0 002 2h12a2 2 0 002-2v-2"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" {...rest}>
      {paths[name]}
    </svg>
  );
}

/* ---------- Logo (Rabbani) ---------- */
function Logo({ suffix = "Karier", light = false }) {
  return (
    <span className="logo">
      <span className={`logo-img ${light ? "on-dark" : ""}`}>
        <img src="/assets/rabbani-logo.png" alt="Rabbani" />
      </span>
      {suffix && <span className="logo-suffix" style={light ? { color: "#fff" } : null}>{suffix}</span>}
    </span>
  );
}

/* ---------- Field + Input ---------- */
function Field({ label, hint, error, required, children }) {
  return (
    <div className="field">
      {label && <label>{label}{required && <span style={{ color: "var(--brand)", marginLeft: 4, fontWeight: 800, fontSize: 15 }} title="Wajib diisi">*</span>}</label>}
      {children}
      {hint && !error && <div className="hint">{hint}</div>}
      {error && <div className="err">{error}</div>}
    </div>
  );
}

function Input({ lead, leadText, invalid, verified, ...rest }) {
  return (
    <div className="input-wrap">
      {lead && <span className="lead"><Icon name={lead} size={18} /></span>}
      {leadText && <span className="lead-text">{leadText}</span>}
      <input className={`inp ${lead ? "has-lead" : ""} ${leadText ? "has-lead-text" : ""} ${invalid ? "invalid" : ""} ${verified ? "inp-verified" : ""}`} {...rest} />
      {verified && <span className="lead-verified" title="Terverifikasi via OTP"><Icon name="check-circle" size={17} /></span>}
    </div>
  );
}

function Select({ children, ...rest }) {
  return <select className="sel" {...rest}>{children}</select>;
}

/* ---------- Button ---------- */
function Button({ variant = "primary", block, lg, icon, iconR, children, ...rest }) {
  return (
    <button className={`btn btn-${variant} ${block ? "btn-block" : ""} ${lg ? "btn-lg" : ""}`} {...rest}>
      {icon && <Icon name={icon} size={18} />}
      {children}
      {iconR && <Icon name={iconR} size={18} />}
    </button>
  );
}

/* ---------- Stepper ---------- */
function Stepper({ steps, current }) {
  // current: index of active phase
  return (
    <div className="stepper">
      {steps.map((s, i) => (
        <React.Fragment key={i}>
          {i > 0 && <div className={`step-line ${i <= current ? "done" : ""}`} />}
          <div className={`step-dot ${i === current ? "active" : ""} ${i < current ? "done" : ""}`}>
            <span className="num">{i < current ? <Icon name="check" size={14} /> : i + 1}</span>
            <span className="label">{s}</span>
          </div>
        </React.Fragment>
      ))}
    </div>
  );
}

/* ---------- FileDrop ---------- */
function FileDrop({ title, sub, accept, onPick }) {
  const [over, setOver] = useState(false);
  const ref = useRef();
  return (
    <div
      className={`drop ${over ? "over" : ""}`}
      onClick={() => ref.current.click()}
      onDragOver={(e) => { e.preventDefault(); setOver(true); }}
      onDragLeave={() => setOver(false)}
      onDrop={(e) => { e.preventDefault(); setOver(false); onPick && onPick(e.dataTransfer.files[0]); }}
    >
      <div className="dicon"><Icon name="upload" size={24} /></div>
      <div className="dtitle">{title}</div>
      <div className="dsub">{sub}</div>
      <input ref={ref} type="file" accept={accept} style={{ display: "none" }}
        onChange={(e) => onPick && onPick(e.target.files[0])} />
    </div>
  );
}

function FileChip({ name, size, color = "#ef4444", tag = "PDF", onRemove }) {
  return (
    <div className="filechip">
      <div className="ficon" style={{ background: color }}>{tag}</div>
      <div className="fmeta">
        <div className="fname">{name}</div>
        <div className="fsize">{size}</div>
      </div>
      {onRemove && <button className="fx" onClick={onRemove}><Icon name="x" size={16} /></button>}
    </div>
  );
}

/* ---------- Image upload tile (KTP / photo) ---------- */
function ImageTile({ label, sub, wide, filled, capLabel, onPick }) {
  const ref = useRef();
  const isUrl = typeof filled === "string" && (filled.startsWith("blob:") || filled.startsWith("http") || filled.startsWith("/"));
  return (
    <div className={`imgtile ${wide ? "wide" : ""}`} onClick={() => ref.current.click()}>
      {filled ? (
        <div className="filled">
          {isUrl
            ? <img src={filled} alt={label} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", borderRadius: "inherit" }} />
            : <div className="doc" />}
          <div className="badge"><Icon name="check" size={15} /></div>
          <div className="cap">{capLabel}</div>
        </div>
      ) : (
        <div className="ph">
          <Icon name={wide ? "id" : "image"} size={26} />
          <div className="t">{label}</div>
          <div className="s">{sub}</div>
        </div>
      )}
      <input ref={ref} type="file" accept="image/*" style={{ display: "none" }}
        onChange={(e) => onPick && onPick(e.target.files[0])} />
    </div>
  );
}

// Seeded shuffle — same seed → same order (reproducible per applicant)
function seededShuffle(arr, seed) {
  const a = arr.slice();
  let s = seed >>> 0;
  function rand() { s = (s * 1664525 + 1013904223) >>> 0; return s / 0xFFFFFFFF; }
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(rand() * (i + 1));
    [a[i], a[j]] = [a[j], a[i]];
  }
  return a;
}

Object.assign(window, { Icon, Logo, Field, Input, Select, Button, Stepper, FileDrop, FileChip, ImageTile, seededShuffle });