// ============================================================
// Polycall — authentification : login, avatar, menu compte
// ============================================================

function Avatar({ user, size = 34 }) {
  return (
    <span className="avatar" style={{ width: size, height: size, background: user.color, fontSize: Math.round(size * 0.4) }}>
      {initials(user.name)}
    </span>
  );
}

function RoleChip({ role, size = 13 }) {
  const r = ROLES[role]; const Icn = I[r.icon];
  return (
    <span className="role-chip" style={{ color: r.color, background: r.color + "1a", fontSize: size }}>
      <Icn s={size} /> {r.short}
    </span>
  );
}

/* ---------- menu compte (topbar) ---------- */
function PasswordModal({ onClose }) {
  const [current, setCurrent] = React.useState("");
  const [next, setNext] = React.useState("");
  const [confirm, setConfirm] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState("");
  const [ok, setOk] = React.useState(false);

  async function submit() {
    setErr("");
    if (!current || !next) { setErr("Remplissez tous les champs."); return; }
    if (next.length < 8) { setErr("Le nouveau mot de passe doit faire au moins 8 caractères."); return; }
    if (next !== confirm) { setErr("La confirmation ne correspond pas."); return; }
    setBusy(true);
    try {
      await PolycallAPI.changePassword(current, next);
      setOk(true);
      setTimeout(onClose, 1500);
    } catch (e) {
      setErr(e.message || "Échec du changement.");
    } finally {
      setBusy(false);
    }
  }

  return (
    <>
      <div className="menu-scrim" onClick={onClose} style={{ zIndex: 200 }} />
      <div className="acct-menu" style={{ position: "fixed", top: "50%", left: "50%", transform: "translate(-50%,-50%)", width: 360, maxWidth: "90vw", zIndex: 201, padding: 20 }}>
        <b style={{ display: "block", fontSize: 15, marginBottom: 4 }}>Changer mon mot de passe</b>
        <span style={{ fontSize: 12, color: "var(--ink-soft)", display: "block", marginBottom: 14 }}>Saisissez votre mot de passe actuel puis le nouveau.</span>
        {ok ? (
          <div style={{ color: "#1f8a5b", fontSize: 14, padding: "8px 0" }}>✅ Mot de passe modifié avec succès.</div>
        ) : (
          <>
            <div className="field" style={{ marginBottom: 8 }}>
              <input type="password" placeholder="Mot de passe actuel" value={current} onChange={(e) => setCurrent(e.target.value)} />
            </div>
            <div className="field" style={{ marginBottom: 8 }}>
              <input type="password" placeholder="Nouveau mot de passe (8+ caractères)" value={next} onChange={(e) => setNext(e.target.value)} />
            </div>
            <div className="field" style={{ marginBottom: 8 }}>
              <input type="password" placeholder="Confirmer le nouveau" value={confirm} onChange={(e) => setConfirm(e.target.value)} />
            </div>
            {err && <div style={{ color: "#c0392b", fontSize: 12, marginBottom: 8 }}>{err}</div>}
            <div style={{ display: "flex", gap: 8, marginTop: 6 }}>
              <button className="acct-item" onClick={onClose} style={{ flex: 1, justifyContent: "center" }}>Annuler</button>
              <button className="acct-item" onClick={submit} disabled={busy} style={{ flex: 1, justifyContent: "center", background: "var(--solid)", color: "var(--on-solid)" }}>{busy ? "..." : "Enregistrer"}</button>
            </div>
          </>
        )}
      </div>
    </>
  );
}

function AccountMenu({ user, op, onLogout, onExit, exitLabel }) {
  const [open, setOpen] = useState(false);
  const [pwdOpen, setPwdOpen] = useState(false);
  const { theme, toggleTheme } = React.useContext(BrandCtx) || {};
  const r = ROLES[user.role];
  return (
    <div className="acct">
      <button className="acct-btn" onClick={() => setOpen((o) => !o)}>
        <Avatar user={user} size={34} />
        <span className="acct-meta">
          <b>{user.name}</b>
          <span style={{ color: r.color }}>{r.short}</span>
        </span>
        <I.chevronD s={15} style={{ color: "var(--ink-faint)" }} />
      </button>
      {open && (
        <>
          <div className="menu-scrim" onClick={() => setOpen(false)} />
          <div className="acct-menu">
            <div className="acct-menu-head">
              <Avatar user={user} size={40} />
              <div style={{ minWidth: 0 }}>
                <b style={{ display: "block", fontSize: 14 }}>{user.name}</b>
                <span style={{ fontSize: 12, color: "var(--ink-soft)" }}>{user.email}</span>
              </div>
            </div>
            <div className="acct-menu-role"><RoleChip role={user.role} /> <span style={{ color: "var(--ink-faint)", fontSize: 12 }}>{user.title}</span></div>
            <button className="acct-item" onClick={() => toggleTheme && toggleTheme()}>
              {theme === "dark" ? <I.sun s={17} /> : <I.moon s={17} />}
              <span style={{ flex: 1, textAlign: "left" }}>Thème {theme === "dark" ? "clair" : "sombre"}</span>
              <span className={"switch" + (theme === "dark" ? " on" : "")} style={{ pointerEvents: "none" }}><span className="knob" /></span>
            </button>
            {onExit && (
              <button className="acct-item" onClick={() => { setOpen(false); onExit(); }}>
                <I.grid s={17} /> {exitLabel || "Changer d'opération"}
              </button>
            )}
            <button className="acct-item" onClick={() => { setOpen(false); setPwdOpen(true); }}>
              <I.key s={17} /> Changer mon mot de passe
            </button>
            <button className="acct-item danger" onClick={onLogout}>
              <I.logout s={17} /> Se déconnecter
            </button>
          </div>
        </>
      )}
      {pwdOpen && <PasswordModal onClose={() => setPwdOpen(false)} />}
    </div>
  );
}

/* ---------- écran de connexion ---------- */
function LoginScreen({ accounts, operations, onLogin, apiMode }) {
  const [email, setEmail] = useState("");
  const [pwd, setPwd] = useState("");
  const [show, setShow] = useState(false);
  const [err, setErr] = useState("");
  const [busy, setBusy] = useState(false);
  const { theme, toggleTheme } = React.useContext(BrandCtx) || {};

  const submit = (e) => {
    e && e.preventDefault();
    if (apiMode) {
      setBusy(true); setErr("");
      Promise.resolve(onLogin({ email: email.trim(), password: pwd }))
        .catch((ex) => setErr(ex.message || "Connexion impossible.")).finally(() => setBusy(false));
      return;
    }
    const acc = accounts.find((a) => a.email.toLowerCase() === email.trim().toLowerCase());
    if (!acc) { setErr("Aucun compte ne correspond à cet e-mail."); return; }
    if (!acc.active) { setErr("Ce compte est désactivé. Contactez votre administrateur."); return; }
    onLogin(acc);
  };
  const quick = (acc) => {
    setEmail(acc.email); setErr("");
    if (apiMode) {
      setBusy(true);
      Promise.resolve(onLogin({ email: acc.email, password: "Polycall2026!" }))
        .catch((ex) => setErr(ex.message || "Connexion impossible.")).finally(() => setBusy(false));
    } else { onLogin(acc); }
  };

  const demos = ["u-dir", "u-resp", "u-sofia", "u-cli-co"].map((id) => accounts.find((a) => a.id === id)).filter(Boolean);

  return (
    <div className="login">
      <div className="login-card">
        {/* panneau marque */}
        <div className="login-brand">
          <div className="lb-top">
            <Polymark s={42} />
            <div className="lb-word"><b>Polycall</b><span>Plateforme de qualification</span></div>
          </div>
          <div className="lb-pitch">
            <h1>Vos opérations,<br />une seule plateforme.</h1>
            <p>Émission &amp; réception d'appels, qualification des fiches et pilotage en temps réel — par opération.</p>
          </div>
          {!apiMode && (
          <div className="lb-ops">
            <div className="lb-ops-h">Opérations actives</div>
            {operations.map((op) => (
              <div className="lb-op" key={op.id}>
                <OpMark op={op} s={34} />
                <div><b>{op.name}</b><span>{op.sector}</span></div>
              </div>
            ))}
          </div>
          )}
        </div>

        {/* panneau formulaire */}
        <div className="login-form">
          <button className="theme-toggle-fab" onClick={toggleTheme} title="Changer de thème" type="button">
            {theme === "dark" ? <I.sun s={18} /> : <I.moon s={18} />}
          </button>
          <div className="lf-head">
            <h2>Connexion</h2>
            <p>Accédez à votre espace selon votre rôle.</p>
          </div>
          <form onSubmit={submit}>
            <div className="field">
              <label>Adresse e-mail</label>
              <div className="input-ico">
                <I.mail s={17} />
                <input type="email" value={email} placeholder="prenom.nom@polycall.fr"
                  onChange={(e) => { setEmail(e.target.value); setErr(""); }} autoFocus />
              </div>
            </div>
            <div className="field">
              <label>Mot de passe</label>
              <div className="input-ico">
                <I.lock s={17} />
                <input type={show ? "text" : "password"} value={pwd} placeholder="••••••••"
                  onChange={(e) => setPwd(e.target.value)} />
                <button type="button" className="pwd-toggle" onClick={() => setShow((s) => !s)} tabIndex={-1}>
                  {show ? <I.eyeOff s={17} /> : <I.eye s={17} />}
                </button>
              </div>
            </div>
            {err && <div className="login-err"><I.info s={15} /> {err}</div>}
            <button type="submit" className="login-submit" disabled={busy}>{busy ? "Connexion…" : <>Se connecter <I.arrowRight s={17} /></>}</button>
          </form>

          {!apiMode && (
          <div className="login-demo">
            <div className="ld-h"><span>Comptes de démonstration</span></div>
            <div className="ld-chips">
              {demos.map((a) => (
                <button key={a.id} className="ld-chip" onClick={() => quick(a)}>
                  <Avatar user={a} size={32} />
                  <span className="ld-chip-meta">
                    <b>{a.name}</b>
                    <RoleChip role={a.role} size={11} />
                  </span>
                  <I.arrowRight s={15} style={{ color: "var(--ink-faint)" }} />
                </button>
              ))}
            </div>
          </div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Avatar, RoleChip, AccountMenu, LoginScreen });