// ============================================================
// Polycall — console super admin + barre console + modales
// ============================================================

const ACCENT_PALETTES = [
  ["#d12b2b", "#a81f1f", "#fbecec", "#f6dcdc"],
  ["#c8810f", "#9c6406", "#fbf0dc", "#f4e2bf"],
  ["#5b54d6", "#403aa8", "#ecebfa", "#dcdaf4"],
  ["#1f8a5b", "#166b46", "#e7f4ee", "#d2ebde"],
  ["#2a6fdb", "#1f56b0", "#e8f0fc", "#d3e2fa"],
  ["#b0357a", "#8a285f", "#fbe9f3", "#f4d3e6"],
  ["#2b2b33", "#16161c", "#ededf0", "#dcdce1"],
];
const DEFAULT_NEW_CODES = [
  { code: "INTERESSE", label: "Intéressé",         sub: "Suite à donner",       tone: "good",    color: "#1f8a5b", group: "Positif",     flux: ["entrant", "sortant"] },
  { code: "RAPPEL",    label: "Rappel planifié",   sub: "Recontacter le client", tone: "warn",   color: "#d7a13d", group: "À suivre",    flux: ["entrant", "sortant"], needs: "rappel" },
  { code: "REFUS",     label: "Refus",             sub: "Pas intéressé",        tone: "bad",     color: "#c0392b", group: "Refus",       flux: ["entrant", "sortant"] },
  { code: "NRP",       label: "Ne répond pas",     sub: "Aucune réponse",       tone: "neutral", color: "#b6b0a9", group: "Non abouti",  flux: ["sortant"] },
];

/* ---------- modale générique ---------- */
function Modal({ title, sub, onClose, children, footer, wide }) {
  return (
    <>
      <div className="overlay" onClick={onClose} />
      <div className={"modal" + (wide ? " wide" : "")} role="dialog">
        <div className="modal-head">
          <div><h2>{title}</h2>{sub && <p>{sub}</p>}</div>
          <button className="iconbtn" onClick={onClose}><I.x s={18} /></button>
        </div>
        <div className="modal-body">{children}</div>
        {footer && <div className="modal-foot">{footer}</div>}
      </div>
    </>
  );
}

/* ---------- upload de logo (data URL) ---------- */
function readImage(file, cb) {
  if (!file || !/^image\//.test(file.type)) return;
  const rd = new FileReader();
  rd.onload = () => cb(rd.result);
  rd.readAsDataURL(file);
}
function LogoUpload({ value, preview, onChange, label }) {
  const ref = useRef();
  return (
    <div className="logo-upload">
      <div className="logo-preview">
        {value ? <img src={value} alt="logo" /> : preview}
      </div>
      <div className="lu-actions">
        <div style={{ display: "flex", gap: 8 }}>
          <button type="button" className="btn" onClick={() => ref.current.click()}><I.image s={16} /> {value ? "Changer le logo" : (label || "Ajouter un logo")}</button>
          {value && <button type="button" className="btn btn-ghost" onClick={() => onChange(null)}><I.trash s={15} /> Retirer</button>}
        </div>
        <p className="lu-hint">PNG, JPG ou SVG (carré de préférence). À défaut, les initiales colorées sont utilisées.</p>
        <input ref={ref} type="file" accept="image/*" style={{ display: "none" }}
          onChange={(e) => { readImage(e.target.files[0], onChange); e.target.value = ""; }} />
      </div>
    </div>
  );
}

/* ---------- modale de confirmation ---------- */
function ConfirmModal({ title, message, confirmLabel, danger, onCancel, onConfirm }) {
  return (
    <Modal title={title} onClose={onCancel}
      footer={<>
        <button className="btn btn-ghost" onClick={onCancel}>Annuler</button>
        <button className={"btn " + (danger ? "btn-danger" : "btn-primary")} onClick={onConfirm}>{confirmLabel || "Confirmer"}</button>
      </>}>
      <div style={{ fontSize: 13.5, color: "var(--ink-soft)", lineHeight: 1.5 }}>{message}</div>
    </Modal>
  );
}

/* ---------- modale marque Polycall ---------- */
function BrandModal({ brand, onClose, onSave }) {
  const [logo, setLogo] = useState(brand.logo || null);
  return (
    <Modal title="Identité de la plateforme" sub="Personnalisez le logo Polycall affiché dans toute l'application." onClose={onClose}
      footer={<>
        <button className="btn btn-ghost" onClick={onClose}>Annuler</button>
        <button className="btn btn-primary" onClick={() => onSave({ logo })}><I.check s={16} /> Enregistrer</button>
      </>}>
      <div className="field"><label>Logo Polycall</label>
        <LogoUpload value={logo} onChange={setLogo} label="Importer le logo"
          preview={<span className="brand-preview-default"><Polymark s={56} /></span>} />
      </div>
      <div className="info-note"><I.info s={16} /> Sans logo importé, la marque par défaut (pastilles colorées) est utilisée.</div>
    </Modal>
  );
}

/* ---------- barre console ---------- */
function ConsoleBar({ title, sub, icon, user, onLogout, onExit, exitLabel, opChip, accent, actions }) {
  const Icn = icon ? I[icon] : null;
  return (
    <div className="console-bar">
      <div className="brand">
        <Polymark s={32} />
        <div className="wordmark"><b>Polycall</b><span>{sub || "Administration"}</span></div>
      </div>
      {opChip && (
        <div className="op-chip">
          <OpMark op={opChip} s={30} />
          <div className="oc-meta"><b>{opChip.name}</b><span>{opChip.sector}</span></div>
        </div>
      )}
      {!opChip && Icn && (
        <div className="console-title"><span className="ct-ic" style={accent ? { background: accent } : null}><Icn s={18} /></span>{title}</div>
      )}
      <div className="topbar-spacer" />
      {actions}
      <AccountMenu user={user} op={opChip} onLogout={onLogout} onExit={onExit} exitLabel={exitLabel} />
    </div>
  );
}

/* ---------- choix d'opération (admin multi-op / super admin) ---------- */
function OperationChooser({ user, operations, onPick, onLogout, title, subtitle }) {
  const ops = operations.filter((o) => user.role === "super" || user.operationIds.includes(o.id));
  return (
    <div className="app">
      <ConsoleBar user={user} onLogout={onLogout} sub="Pilotage des opérations" icon="grid" title="Choisir une opération" accent="#2a6fdb" />
      <div className="chooser">
        <div className="chooser-inner">
          <div className="chooser-head">
            <h1>{title || "Bonjour " + user.name.split(" ")[0] + " 👋"}</h1>
            <p>{subtitle || "Sélectionnez l'opération à piloter — suivi, statistiques, export et codes conclusion."}</p>
          </div>
          <div className="chooser-grid">
            {ops.map((op) => {
              const att = op.fiches.filter((f) => f.status === "attente").length;
              const tr = op.fiches.filter((f) => f.status === "traitee").length;
              return (
                <button key={op.id} className="op-card" onClick={() => onPick(op.id)}
                  style={{ "--opa": op.accent[0], "--opt": op.accent[2] }}>
                  <div className="op-card-top">
                    <OpMark op={op} s={48} radius={13} />
                    <I.chevronR s={18} className="opc-arrow" />
                  </div>
                  <h3>{op.name}</h3>
                  <p>{op.sector}</p>
                  <div className="op-card-stats">
                    <span><b>{att}</b> en attente</span>
                    <span><b>{tr}</b> traitées</span>
                    <span><b>{op.codes.length}</b> codes</span>
                  </div>
                  <div className="op-card-cta">Ouvrir le pilotage <I.arrowRight s={15} /></div>
                </button>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- modale compte ---------- */
function AccountModal({ account, operations, onClose, onSave }) {
  const [f, setF] = useState(account || { name: "", email: "", role: "user", operationIds: [], active: true, color: "#2a6fdb" });
  const set = (k, v) => setF((s) => ({ ...s, [k]: v }));
  const toggleOp = (id) => setF((s) => ({ ...s, operationIds: s.operationIds.includes(id) ? s.operationIds.filter((x) => x !== id) : [...s.operationIds, id] }));
  const valid = f.name.trim() && /\S+@\S+\.\S+/.test(f.email);

  return (
    <Modal title={account ? "Modifier le compte" : "Nouveau compte"} sub="Définissez le rôle et les opérations assignées." onClose={onClose}
      footer={<>
        <button className="btn btn-ghost" onClick={onClose}>Annuler</button>
        <button className="btn btn-primary" disabled={!valid} onClick={() => onSave(f)}><I.check s={16} /> {account ? "Enregistrer" : "Créer le compte"}</button>
      </>}>
      <div className="field-row c2">
        <Field label="Nom complet" required><input value={f.name} placeholder="Prénom Nom" onChange={(e) => set("name", e.target.value)} /></Field>
        <Field label="Adresse e-mail" required><input type="email" value={f.email} placeholder="prenom.nom@polycall.fr" onChange={(e) => set("email", e.target.value)} /></Field>
      </div>

      <div className="field">
        <label>Rôle</label>
        <div className="role-pick">
          {Object.values(ROLES).map((r) => {
            const Icn = I[r.icon];
            return (
              <button key={r.key} className={"role-opt" + (f.role === r.key ? " on" : "")} onClick={() => set("role", r.key)}
                style={{ "--rc": r.color }}>
                <span className="ro-ic"><Icn s={18} /></span>
                <span className="ro-meta"><b>{r.label}</b><span>{r.desc}</span></span>
                <span className="ro-radio">{f.role === r.key && <I.check s={13} />}</span>
              </button>
            );
          })}
        </div>
      </div>

      {f.role !== "super" ? (
        <div className="field">
          <label>Opérations assignées {(f.role === "user" || f.role === "visitor") && <span style={{ color: "var(--ink-faint)", fontWeight: 500 }}>· une seule {f.role === "visitor" ? "à suivre" : "pour un agent"}</span>}</label>
          <div className="op-pick">
            {operations.map((op) => {
              const on = f.operationIds.includes(op.id);
              const single = f.role === "user" || f.role === "visitor";
              return (
                <button key={op.id} className={"op-pick-item" + (on ? " on" : "")}
                  onClick={() => single ? set("operationIds", on ? [] : [op.id]) : toggleOp(op.id)}>
                  <OpMark op={op} s={28} />
                  <span style={{ flex: 1, textAlign: "left", fontWeight: 600 }}>{op.name}</span>
                  <span className="opk-check">{on && <I.check s={13} />}</span>
                </button>
              );
            })}
          </div>
        </div>
      ) : (
        <div className="info-note"><I.shield s={16} /> Le super administrateur a accès à toutes les opérations.</div>
      )}

      <label className="switch-row">
        <span><b>Compte actif</b><br /><span style={{ color: "var(--ink-soft)", fontSize: 12 }}>Un compte désactivé ne peut pas se connecter.</span></span>
        <button className={"switch" + (f.active ? " on" : "")} onClick={() => set("active", !f.active)}><span className="knob" /></button>
      </label>
    </Modal>
  );
}

/* ---------- modale opération (création + édition) ---------- */
function OperationModal({ operation, onClose, onSave }) {
  const editing = !!operation;
  const [f, setF] = useState(operation
    ? { name: operation.name, sector: operation.sector, accent: operation.accent, logo: operation.logo || null }
    : { name: "", sector: "", accent: ACCENT_PALETTES[0], logo: null });
  const set = (k, v) => setF((s) => ({ ...s, [k]: v }));
  const valid = f.name.trim() && f.sector.trim();
  const mark0 = (f.name.trim().slice(0, 2) || "Op");
  const mark = mark0.charAt(0).toUpperCase() + mark0.slice(1);
  const previewOp = { name: f.name, mark, accent: f.accent, logo: f.logo };

  return (
    <Modal title={editing ? "Modifier l'opération" : "Nouvelle opération"}
      sub={editing ? "Mettez à jour le nom, le secteur, la couleur ou le logo." : "Créez une opération ; vous pourrez ensuite définir ses codes conclusion."} onClose={onClose}
      footer={<>
        <button className="btn btn-ghost" onClick={onClose}>Annuler</button>
        <button className="btn btn-primary" disabled={!valid} onClick={() => onSave({ name: f.name.trim(), sector: f.sector.trim(), accent: f.accent, logo: f.logo, mark })}>
          {editing ? <><I.check s={16} /> Enregistrer</> : <><I.plus s={16} /> Créer l'opération</>}
        </button>
      </>}>
      <div className="field">
        <label>Logo de l'opération</label>
        <LogoUpload value={f.logo} onChange={(v) => set("logo", v)}
          preview={<OpMark op={previewOp} s={56} radius={15} />} />
      </div>
      <div className="field-row c2">
        <Field label="Nom de l'opération" required><input value={f.name} placeholder="ex. Service Client Néo" onChange={(e) => set("name", e.target.value)} /></Field>
        <Field label="Secteur / description" required><input value={f.sector} placeholder="ex. Assurance — souscription & SAV" onChange={(e) => set("sector", e.target.value)} /></Field>
      </div>
      <div className="field">
        <label>Couleur d'accent</label>
        <div className="swatch-row">
          {ACCENT_PALETTES.map((p, i) => (
            <button key={i} className={"swatch" + (f.accent[0] === p[0] ? " on" : "")} style={{ background: p[0] }}
              onClick={() => set("accent", p)}>{f.accent[0] === p[0] && <I.check s={14} />}</button>
          ))}
        </div>
      </div>
      {!editing && <div className="info-note"><I.info s={16} /> La nouvelle opération démarre avec 4 codes conclusion par défaut, que l'administrateur pourra adapter.</div>}
    </Modal>
  );
}

/* ---------- console super admin ---------- */
function SuperAdminConsole({ user, operations, setOperations, accounts, setAccounts, brand, setBrand, onEnterOp, onLogout }) {
  const [tab, setTab] = useState("operations");
  const [acctModal, setAcctModal] = useState(null);   // {} new, or account to edit
  const [opModal, setOpModal] = useState(null);        // null | {} new | operation edit
  const [confirm, setConfirm] = useState(null);        // { opId, name }
  const [brandModal, setBrandModal] = useState(false);

  const agentsOf = (opId) => accounts.filter((a) => a.operationIds.includes(opId)).length;

  const saveAccount = (data) => {
    if (data.id) { setAccounts((as) => as.map((a) => a.id === data.id ? { ...a, ...data } : a)); PolycallAPI.updateAccount(data.id, data); }
    else { setAccounts((as) => [...as, { ...data, id: "u-" + Math.random().toString(36).slice(2, 7), color: data.color || ROLES[data.role].color }]); PolycallAPI.saveAccount(data); }
    setAcctModal(null);
  };
  const delAccount = (id) => { setAccounts((as) => as.filter((a) => a.id !== id)); PolycallAPI.deleteAccount(id); };

  const saveOperation = (data) => {
    if (opModal && opModal.id) {
      setOperations((ops) => ops.map((o) => o.id === opModal.id
        ? { ...o, name: data.name, sector: data.sector, accent: data.accent, logo: data.logo, mark: data.mark } : o));
      PolycallAPI.updateOperation(opModal.id, data);
    } else {
      let base = data.name.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 16) || "op";
      let id = base, i = 2; const ids = operations.map((o) => o.id);
      while (ids.includes(id)) { id = base + "-" + i; i++; }
      const op = { id, name: data.name, sector: data.sector, tagline: "", accent: data.accent, logo: data.logo || null, mark: data.mark, clients: [], codes: JSON.parse(JSON.stringify(DEFAULT_NEW_CODES)), fiches: [] };
      setOperations((ops) => [...ops, op]);
      PolycallAPI.saveOperation(data);
    }
    setOpModal(null);
  };
  const deleteOperation = (id) => {
    setOperations((ops) => ops.filter((o) => o.id !== id));
    setAccounts((as) => as.map((a) => ({ ...a, operationIds: a.operationIds.filter((x) => x !== id) })));
    PolycallAPI.deleteOperation(id);
    setConfirm(null);
  };

  return (
    <div className="app">
      <ConsoleBar user={user} onLogout={onLogout} sub="Administration" icon="shield" title="Administration" accent={ROLES.super.color}
        actions={<button className="toolbtn" onClick={() => setBrandModal(true)}><I.cog s={17} /> Marque</button>} />
      <div className="console-shell">
        <div className="console-nav">
          <button className={"cnav" + (tab === "operations" ? " on" : "")} onClick={() => setTab("operations")}><I.grid s={18} /> Opérations <span className="cnav-c">{operations.length}</span></button>
          <button className={"cnav" + (tab === "accounts" ? " on" : "")} onClick={() => setTab("accounts")}><I.users s={18} /> Comptes <span className="cnav-c">{accounts.length}</span></button>
        </div>

        <div className="console-main">
          {tab === "operations" ? (
            <div className="console-page">
              <div className="page-head">
                <div><h1>Opérations</h1><p>Chaque opération a sa propre file, son logo, ses codes conclusion et ses statistiques.</p></div>
                <button className="toolbtn accent" onClick={() => setOpModal({})}><I.plus s={17} /> Nouvelle opération</button>
              </div>
              <div className="ops-grid">
                {operations.map((op) => {
                  const att = op.fiches.filter((f) => f.status === "attente").length;
                  const tr = op.fiches.filter((f) => f.status === "traitee").length;
                  return (
                    <div className="adm-op-card" key={op.id} style={{ "--opa": op.accent[0] }}>
                      <div className="aoc-top">
                        <OpMark op={op} s={46} radius={13} />
                        <div className="aoc-id"><b>{op.name}</b><span>{op.sector}</span></div>
                        <div className="aoc-edit">
                          <button className="iconbtn sm" title="Modifier l'opération" onClick={() => setOpModal(op)}><I.edit s={16} /></button>
                          <button className="iconbtn sm danger" title="Supprimer l'opération" onClick={() => setConfirm({ opId: op.id, name: op.name })}><I.trash s={16} /></button>
                        </div>
                      </div>
                      <div className="aoc-stats">
                        <div><b>{att}</b><span>en attente</span></div>
                        <div><b>{tr}</b><span>traitées</span></div>
                        <div><b>{op.codes.length}</b><span>codes</span></div>
                        <div><b>{agentsOf(op.id)}</b><span>comptes</span></div>
                      </div>
                      <div className="aoc-actions">
                        <button className="btn btn-dark" onClick={() => onEnterOp(op.id)}><I.sliders s={16} /> Piloter</button>
                      </div>
                    </div>
                  );
                })}
                {operations.length === 0 && <div className="empty-q" style={{ background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 14, gridColumn: "1 / -1" }}>Aucune opération. Créez-en une pour démarrer.</div>}
              </div>
            </div>
          ) : (
            <div className="console-page">
              <div className="page-head">
                <div><h1>Comptes</h1><p>Créez des comptes et assignez-les à un rôle et à une ou plusieurs opérations.</p></div>
                <button className="toolbtn accent" onClick={() => setAcctModal({})}><I.plus s={17} /> Nouveau compte</button>
              </div>
              <div className="acct-table">
                <table className="qtable">
                  <thead><tr><th>Collaborateur</th><th>Rôle</th><th>Opérations</th><th>Statut</th><th style={{ textAlign: "right" }}>Actions</th></tr></thead>
                  <tbody>
                    {accounts.map((a) => (
                      <tr key={a.id}>
                        <td>
                          <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
                            <Avatar user={a} size={36} />
                            <div><div className="nm">{a.name}</div><div style={{ fontSize: 11.5, color: "var(--ink-soft)" }}>{a.email}</div></div>
                          </div>
                        </td>
                        <td><RoleChip role={a.role} /></td>
                        <td>
                          {a.role === "super"
                            ? <span style={{ fontSize: 12, color: "var(--ink-soft)" }}>Toutes</span>
                            : <div style={{ display: "flex", gap: 5 }}>{a.operationIds.map((id) => { const op = operations.find((o) => o.id === id); return op ? <OpMark key={id} op={op} s={24} /> : null; })}{a.operationIds.length === 0 && <span style={{ fontSize: 12, color: "var(--ink-faint)" }}>—</span>}</div>}
                        </td>
                        <td>{a.active ? <span className="status-pill on"><I.dot s={9} /> Actif</span> : <span className="status-pill off"><I.dot s={9} /> Inactif</span>}</td>
                        <td>
                          <div style={{ display: "flex", gap: 6, justifyContent: "flex-end" }}>
                            <button className="iconbtn sm" title="Modifier" onClick={() => setAcctModal(a)}><I.edit s={16} /></button>
                            <button className="iconbtn sm danger" title="Supprimer" onClick={() => delAccount(a.id)} disabled={a.id === user.id}><I.trash s={16} /></button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}
        </div>
      </div>

      {acctModal && <AccountModal account={acctModal.id ? acctModal : null} operations={operations} onClose={() => setAcctModal(null)} onSave={saveAccount} />}
      {opModal && <OperationModal operation={opModal.id ? opModal : null} onClose={() => setOpModal(null)} onSave={saveOperation} />}
      {brandModal && <BrandModal brand={brand} onClose={() => setBrandModal(false)} onSave={(b) => { setBrand(b); setBrandModal(false); }} />}
      {confirm && <ConfirmModal title="Supprimer l'opération" danger confirmLabel="Supprimer définitivement"
        message={<>Voulez-vous vraiment supprimer l'opération <b>{confirm.name}</b> ? Toutes ses fiches, codes conclusion et statistiques seront retirés, et les comptes associés en seront détachés. Cette action est irréversible.</>}
        onCancel={() => setConfirm(null)} onConfirm={() => deleteOperation(confirm.opId)} />}
    </div>
  );
}

Object.assign(window, { ACCENT_PALETTES, DEFAULT_NEW_CODES, Modal, LogoUpload, ConfirmModal, BrandModal, ConsoleBar, OperationChooser, AccountModal, OperationModal, SuperAdminConsole });