// ============================================================
// Polycall — primitives UI, topbar, file d'attente
// ============================================================
const { useState, useRef, useEffect, useMemo } = React;

/* ---------- champs de formulaire ---------- */
function Field({ label, required, children, note }) {
  return (
    <div className="field">
      {label && <label>{label}{required && <span className="star">*</span>}</label>}
      {children}
      {note && <div className="fieldnote">{note}</div>}
    </div>
  );
}
function TextField({ label, value, onChange, placeholder, required, mono, note, type = "text" }) {
  return (
    <Field label={label} required={required} note={note}>
      <input type={type} className={mono ? "mono" : ""} value={value || ""}
        placeholder={placeholder} onChange={(e) => onChange(e.target.value)} />
    </Field>
  );
}
function TextArea({ label, value, onChange, placeholder, required, rows = 3 }) {
  return (
    <Field label={label} required={required}>
      <textarea rows={rows} value={value || ""} placeholder={placeholder}
        onChange={(e) => onChange(e.target.value)} />
    </Field>
  );
}
function SelectField({ label, value, onChange, options, required }) {
  return (
    <Field label={label} required={required}>
      <select value={value} onChange={(e) => onChange(e.target.value)}>
        {options.map((o) => <option key={o} value={o}>{o}</option>)}
      </select>
    </Field>
  );
}

/* ---------- badges ---------- */
function FluxBadge({ type }) {
  const In = I.phoneIn, Out = I.phoneOut;
  return type === "entrant"
    ? <span className="badge entrant"><In s={13} w={2} /> Entrant</span>
    : <span className="badge sortant"><Out s={13} w={2} /> Sortant</span>;
}
function ToneBadge({ tone, children }) {
  return <span className={"badge tone-" + tone}>{children}</span>;
}

/* ---------- canal de provenance ---------- */
function ChannelBadge({ canal, size = 13, withLabel = true }) {
  const ch = findChannel(canal) || findChannel(DEFAULT_CHANNEL);
  const Icn = I[ch.icon] || I.dot;
  return (
    <span className="chan-badge" title={ch.label} style={{ color: ch.color, background: ch.color + "1c" }}>
      <Icn s={size} />{withLabel && <span>{ch.short}</span>}
    </span>
  );
}

function ChannelSelect({ canal, onChange, disabled, compact }) {
  const [open, setOpen] = useState(false);
  const cur = findChannel(canal) || findChannel(DEFAULT_CHANNEL);
  const Icn = I[cur.icon] || I.dot;
  return (
    <div className={"chan-select" + (compact ? " compact" : "")}>
      <button type="button" className="chan-trigger" disabled={disabled}
        onClick={() => setOpen((o) => !o)} style={{ "--cc": cur.color }}>
        <span className="chan-trigger-ic"><Icn s={16} /></span>
        <b>{cur.label}</b>
        {!disabled && <I.chevronD s={14} style={{ color: "var(--ink-faint)", marginLeft: "auto" }} />}
      </button>
      {open && !disabled && (
        <>
          <div className="menu-scrim" onClick={() => setOpen(false)} />
          <div className="chan-menu">
            <div className="chan-menu-h">Canal de provenance</div>
            {CHANNELS.map((c) => {
              const Ic = I[c.icon] || I.dot; const on = c.key === canal;
              return (
                <button key={c.key} className={"chan-opt" + (on ? " on" : "")}
                  onClick={() => { onChange(c.key); setOpen(false); }}>
                  <span className="chan-opt-ic" style={{ color: c.color, background: c.color + "1c" }}><Ic s={15} /></span>
                  <span className="chan-opt-lbl">{c.label}</span>
                  {on && <I.check s={15} style={{ marginLeft: "auto", color: c.color }} />}
                </button>
              );
            })}
          </div>
        </>
      )}
    </div>
  );
}

/* ---------- topbar plateforme ---------- */
function Topbar({ op, stats, query, setQuery, onOpenDash, onExport, user, onLogout, onExit, exitLabel }) {
  return (
    <div className="topbar">
      <div className="brand">
        <Polymark s={32} />
        <div className="wordmark">
          <b>Polycall</b>
          <span>Qualification</span>
        </div>
      </div>

      <div className="op-chip">
        <OpMark op={op} s={30} />
        <div className="oc-meta">
          <b>{op.name}</b>
          <span>{op.sector}</span>
        </div>
      </div>

      <div className="topbar-search">
        <span className="ico"><I.search s={17} /></span>
        <input value={query} onChange={(e) => setQuery(e.target.value)}
          placeholder="Rechercher un client : nom, société, n°, téléphone…" />
        <span className="hint">⌘K</span>
      </div>

      <div className="topbar-spacer" />

      <div className="kpis">
        <div className="kpi accent"><b>{stats.attente}</b><span>En attente</span></div>
        <div className="kpi"><b>{stats.traitees}</b><span>Traitées</span></div>
        <div className="kpi"><b>{stats.taux}%</b><span>Conversion</span></div>
      </div>

      <button className="toolbtn" title="Exporter les fiches traitées (CSV)" onClick={onExport}>
        <I.download s={17} /> Export</button>
      <button className="toolbtn" title="Tableau de bord" onClick={onOpenDash}>
        <I.chart s={17} /> Stats</button>

      <AccountMenu user={user} op={op} onLogout={onLogout} onExit={onExit} exitLabel={exitLabel} />
    </div>
  );
}

/* ---------- carte de file ---------- */
function displayName(f) {
  const x = f.fields;
  if (x.civilite === "Société" || x.societe) return x.societe || "Société (à renseigner)";
  const n = [x.civilite, x.prenom, x.nom].filter(Boolean).join(" ").trim();
  return n || "Nouvelle fiche";
}

function QueueCard({ f, selected, onClick }) {
  const op = useOp();
  const c = f.conclusion ? op.byCode(f.conclusion.code) : null;
  return (
    <div className={"qcard" + (selected ? " sel" : "") + (f.status === "traitee" ? " done" : "")}
      onClick={onClick}>
      <div className="qcard-top">
        <span className="qcard-name">{displayName(f)}</span>
        <span className="qcard-tags">
          <ChannelBadge canal={f.canal} size={12} withLabel={false} />
          <FluxBadge type={f.type} />
        </span>
      </div>
      <div className="qcard-sub">{f.fields.motif || f.channel}</div>
      <div className="qcard-foot">
        {f.status === "traitee" && c
          ? <ToneBadge tone={c.tone}>{c.label}</ToneBadge>
          : <span className="qcard-wait"><I.clock s={12} w={2} />
              {f.type === "entrant" ? "Attente " + f.waiting : f.channel}</span>}
        {f.status === "traitee"
          ? <span className="qcard-wait">{f.qualifiedAt}</span>
          : <I.arrowRight s={15} style={{ color: "var(--ink-faint)" }} />}
      </div>
    </div>
  );
}

/* ---------- panneau file d'attente ---------- */
function Queue({ fiches, tab, setTab, selectedId, onSelect, fluxFilter, setFluxFilter, onNew }) {
  const counts = useMemo(() => ({
    attente: fiches.filter((f) => f.status === "attente").length,
    traitee: fiches.filter((f) => f.status === "traitee").length,
  }), [fiches]);

  const list = useMemo(() => fiches.filter((f) => {
    const st = tab === "attente" ? f.status === "attente" : f.status === "traitee";
    const fl = fluxFilter === "tous" || f.type === fluxFilter;
    return st && fl;
  }), [fiches, tab, fluxFilter]);

  return (
    <div className="col-queue">
      <div className="queue-head">
        <div className="tabs">
          <button className={"tab" + (tab === "attente" ? " active" : "")} onClick={() => setTab("attente")}>
            File d'attente <span className="cnt">{counts.attente}</span>
          </button>
          <button className={"tab" + (tab === "traitee" ? " active" : "")} onClick={() => setTab("traitee")}>
            Traitées <span className="cnt">{counts.traitee}</span>
          </button>
        </div>
      </div>

      <div className="queue-filter">
        {[["tous", "Tous"], ["entrant", "Entrants"], ["sortant", "Sortants"]].map(([k, lbl]) => (
          <button key={k} className={"fchip" + (fluxFilter === k ? " on" : "")}
            onClick={() => setFluxFilter(k)}>{lbl}</button>
        ))}
        <button className="fchip newchip" onClick={() => onNew("sortant")} title="Créer une fiche vierge">
          <I.plus s={13} w={2.4} /> Nouvelle
        </button>
      </div>

      <div className="queue-list">
        {list.length === 0
          ? <div className="empty-q">{tab === "attente" ? "Aucune fiche en attente.\nBeau travail !" : "Aucune fiche traitée pour l'instant."}</div>
          : list.map((f) => (
              <QueueCard key={f.id} f={f} selected={f.id === selectedId} onClick={() => onSelect(f.id)} />
            ))}
      </div>
    </div>
  );
}

Object.assign(window, {
  useState, useRef, useEffect, useMemo,
  Field, TextField, TextArea, SelectField,
  FluxBadge, ToneBadge, ChannelBadge, ChannelSelect, Topbar, Queue, QueueCard, displayName,
});