/* CargoNote — shared components (icons, chips, badges, buttons) */

// ===== Icons (small set, stroke-based) =====
const Icon = ({ name, size = 16, ...p }) => {
  const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", ...p };
  const paths = {
    inbox:   <><path d="M3 13l3-9h12l3 9"/><path d="M3 13h6l1 3h4l1-3h6"/><path d="M3 13v6a1 1 0 001 1h16a1 1 0 001-1v-6"/></>,
    plus:    <><path d="M12 5v14"/><path d="M5 12h14"/></>,
    file:    <><path d="M6 3h8l4 4v14H6z"/><path d="M14 3v4h4"/></>,
    pdf:     <><path d="M6 3h8l4 4v14H6z"/><path d="M14 3v4h4"/><text x="9" y="17" fontSize="6" fill="currentColor" stroke="none" style={{font:"700 6px monospace"}}>PDF</text></>,
    image:   <><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="9" cy="10" r="2"/><path d="M21 17l-5-5-7 8"/></>,
    mail:    <><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 7 9-7"/></>,
    upload:  <><path d="M12 3v12"/><path d="M7 8l5-5 5 5"/><path d="M5 21h14"/></>,
    search:  <><circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/></>,
    settings:<><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 00.3 1.8l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.7 1.7 0 00-1.8-.3 1.7 1.7 0 00-1 1.5V21a2 2 0 11-4 0v-.1a1.7 1.7 0 00-1.1-1.6 1.7 1.7 0 00-1.8.3l-.1.1a2 2 0 11-2.8-2.8l.1-.1a1.7 1.7 0 00.3-1.8 1.7 1.7 0 00-1.5-1H3a2 2 0 110-4h.1a1.7 1.7 0 001.6-1.1 1.7 1.7 0 00-.3-1.8l-.1-.1a2 2 0 112.8-2.8l.1.1a1.7 1.7 0 001.8.3h.1A1.7 1.7 0 009 3.6V3a2 2 0 114 0v.1a1.7 1.7 0 001 1.5 1.7 1.7 0 001.8-.3l.1-.1a2 2 0 112.8 2.8l-.1.1a1.7 1.7 0 00-.3 1.8v.1a1.7 1.7 0 001.5 1H21a2 2 0 110 4h-.1a1.7 1.7 0 00-1.5 1z"/></>,
    chev:    <path d="M9 6l6 6-6 6"/>,
    chevD:   <path d="M6 9l6 6 6-6"/>,
    arrow:   <><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></>,
    check:   <path d="M5 12l5 5L20 7"/>,
    x:       <><path d="M6 6l12 12"/><path d="M18 6L6 18"/></>,
    spark:   <path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/>,
    eye:     <><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></>,
    edit:    <><path d="M4 20h4l10-10-4-4L4 16z"/><path d="M14 6l4 4"/></>,
    download:<><path d="M12 3v12"/><path d="M7 10l5 5 5-5"/><path d="M5 21h14"/></>,
    print:   <><path d="M6 9V3h12v6"/><rect x="3" y="9" width="18" height="8" rx="1"/><path d="M6 17h12v4H6z"/></>,
    refresh: <><path d="M21 12a9 9 0 11-3-6.7L21 8"/><path d="M21 3v5h-5"/></>,
    save:    <><path d="M5 3h11l3 3v15H5z"/><path d="M8 3v5h8V3"/><path d="M8 14h8v7H8z"/></>,
    flag:    <><path d="M5 21V4"/><path d="M5 4h12l-2 4 2 4H5"/></>,
    alert:   <><path d="M12 3l10 18H2z"/><path d="M12 10v5"/><path d="M12 18h.01"/></>,
    info:    <><circle cx="12" cy="12" r="9"/><path d="M12 8h.01"/><path d="M11 12h1v5h1"/></>,
    filter:  <><path d="M4 5h16l-6 8v6l-4-2v-4z"/></>,
    sort:    <><path d="M8 4v16M8 4L4 8M8 4l4 4M16 20V4M16 20l-4-4M16 20l4-4"/></>,
    folder:  <><path d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></>,
    paperclip:<><path d="M21 12.5L12.5 21a5 5 0 01-7-7L14 5.5a3.5 3.5 0 015 5L10 19a2 2 0 01-3-3l7.5-7.5"/></>,
    mapPin:  <><path d="M12 21s-7-7-7-12a7 7 0 0114 0c0 5-7 12-7 12z"/><circle cx="12" cy="9" r="2.5"/></>,
    calendar:<><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></>,
    truck:   <><path d="M3 7h11v9H3z"/><path d="M14 10h4l3 3v3h-7"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></>,
    layers:  <><path d="M12 3l9 5-9 5-9-5z"/><path d="M3 12l9 5 9-5"/><path d="M3 16l9 5 9-5"/></>,
    history: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    bell:    <><path d="M6 8a6 6 0 0112 0c0 7 3 8 3 8H3s3-1 3-8z"/><path d="M10 21h4"/></>,
    dot:     <circle cx="12" cy="12" r="3" fill="currentColor"/>,
  };
  return <svg {...common}>{paths[name]}</svg>;
};

// ===== Confidence chip =====
const ConfidenceChip = ({ score, compact = false }) => {
  if (score == null) return null;
  const pct = Math.round(score * 100);
  const cls = score >= 0.9 ? "hi" : score >= 0.7 ? "med" : "lo";
  const label = score >= 0.9 ? "Élevée" : score >= 0.7 ? "Moyenne" : "Faible";
  return (
    <span className={`chip ${cls}`} title={`Confiance ${pct}%`}>
      <span className="dot"></span>
      <span>{compact ? `${pct}%` : `${label} · ${pct}%`}</span>
    </span>
  );
};

// ===== Status badge =====
const StatusBadge = ({ status }) => {
  const m = {
    processing: "Traitement",
    review: "À vérifier",
    approved: "Validé",
    error: "Erreur",
  };
  return (
    <span className="status" data-s={status}>
      <span className="dot"></span>
      <span>{m[status] || status}</span>
    </span>
  );
};

// ===== Source icon =====
const SourceIcon = ({ source }) => {
  if (source === "email") return <span title="Email" style={{display:"inline-flex", alignItems:"center", gap:6, color:"var(--muted)"}}><Icon name="mail" size={14}/></span>;
  if (source === "upload") return <span title="Téléversement" style={{display:"inline-flex", alignItems:"center", gap:6, color:"var(--muted)"}}><Icon name="upload" size={14}/></span>;
  return <Icon name="file" size={14}/>;
};

// ===== Field card =====
const FieldCard = ({ id, label, box, value, conf, status, active, onActivate, onEdit, multiline, placeholder, conflictWith }) => {
  // status overrides confidence visuals: "edited" | "conflict"
  const dataConf = status || (conf == null ? null : (conf >= 0.9 ? "hi" : conf >= 0.7 ? "med" : "lo"));
  const empty = value == null || value === "" || value === "—";
  return (
    <div
      className={`field ${active ? "active" : ""}`}
      data-conf={dataConf || undefined}
      onClick={() => onActivate && onActivate(id)}
    >
      <div className="acc-bar" />
      <div className="label-row">
        <span className="box-num">{box}</span>
        <span className="label">{label}</span>
        {status === "edited" && (
          <span className="chip edited"><span className="dot"></span><span>Modifié</span></span>
        )}
        {status === "conflict" && (
          <span className="chip conflict"><span className="dot"></span><span>Conflit</span></span>
        )}
        {!status && conf != null && !empty && (
          <ConfidenceChip score={conf} compact={true} />
        )}
        {empty && !status && (
          <span className="chip neutral">Vide</span>
        )}
      </div>
      <div
        className={`value ${empty ? "empty" : ""}`}
        data-placeholder={placeholder || "—"}
        contentEditable={!!onEdit}
        suppressContentEditableWarning
        onBlur={(e) => onEdit && onEdit(id, e.currentTarget.innerText)}
      >{empty ? "" : value}</div>
      {conflictWith && (
        <div style={{marginTop:6, fontSize:11.5, color:"var(--conflict-ink)", display:"flex", gap:6, alignItems:"center"}}>
          <Icon name="alert" size={12}/>
          <span>Conflit avec <b>{conflictWith.source}</b> : « {conflictWith.value} »</span>
        </div>
      )}
    </div>
  );
};

// ===== Group section header =====
const Group = ({ title, count, action, children }) => (
  <section className="group">
    <header>
      <h2>{title}</h2>
      {count != null && <span className="count">{count}</span>}
      {action}
    </header>
    {children}
  </section>
);

// ===== Tooltip-ish hover region (used for doc highlights legend) =====
const Legend = () => (
  <div style={{display:"flex", gap:14, alignItems:"center", fontSize:11.5, color:"var(--muted)"}}>
    <span style={{display:"inline-flex", gap:6, alignItems:"center"}}><span className="chip hi"><span className="dot"></span><span>Élevée</span></span></span>
    <span style={{display:"inline-flex", gap:6, alignItems:"center"}}><span className="chip med"><span className="dot"></span><span>Moyenne</span></span></span>
    <span style={{display:"inline-flex", gap:6, alignItems:"center"}}><span className="chip lo"><span className="dot"></span><span>Faible</span></span></span>
    <span style={{display:"inline-flex", gap:6, alignItems:"center"}}><span className="chip edited"><span className="dot"></span><span>Modifié</span></span></span>
    <span style={{display:"inline-flex", gap:6, alignItems:"center"}}><span className="chip conflict"><span className="dot"></span><span>Conflit</span></span></span>
  </div>
);

// Export to window for cross-script use
Object.assign(window, { Icon, ConfidenceChip, StatusBadge, SourceIcon, FieldCard, Group, Legend });