// Settings — persisted to the backend (/api/settings).

function SettingsPage() {
  const [section, setSection] = React.useState("Общие");
  const [s, setS] = React.useState(null);
  const [saved, setSaved] = React.useState(false);
  const sections = ["Общие", "Уведомления", "ИИ-ассистент", "Команда", "Биллинг", "Безопасность"];

  React.useEffect(() => {
    if (window.API && window.API.getSettings) {
      window.API.getSettings().then(setS).catch(() => setS({}));
    } else {
      setS({});
    }
  }, []);

  const save = (patch) => {
    setS(prev => ({ ...(prev || {}), ...patch }));
    if (window.API) {
      window.API.putSettings(patch).then(() => {
        setSaved(true);
        setTimeout(() => setSaved(false), 1500);
      }).catch(() => {});
    }
  };
  const toggle = (key) => save({ [key]: !(s && s[key]) });

  if (!s) {
    return (
      <div className="page page-fade">
        <div className="page-head"><div><h1 className="page-title">Настройки</h1><p className="page-subtitle">загрузка…</p></div></div>
      </div>
    );
  }

  return (
    <div className="page page-fade">
      <div className="page-head">
        <div>
          <h1 className="page-title">Настройки</h1>
          <p className="page-subtitle">Рабочее пространство · {s.companyName || "—"}{saved ? " · ✓ сохранено" : ""}</p>
        </div>
      </div>

      <div className="settings">
        <div className="settings-nav">
          {sections.map(x => (
            <div key={x} className={`item ${section === x ? "active" : ""}`} onClick={() => setSection(x)}>{x}</div>
          ))}
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <CompanyProfileCard s={s} onSave={save} />

          <Card title="Уведомления" subtitle="Как и когда приходят оповещения" bodyStyle={{ padding: 0 }}>
            <SettingToggle title="Email-уведомления" sub="Сводка по поручениям каждое утро" on={!!s.emailNotif} onChange={() => toggle("emailNotif")} />
            <SettingToggle title="Сводка от ИИ-ассистента" sub="Краткий отчёт по реестру по понедельникам" on={!!s.aiSummary} onChange={() => toggle("aiSummary")} />
            <SettingToggle title="Авто-тегирование документов" sub="ИИ определяет тип и отдел по содержимому" on={!!s.autoTag} onChange={() => toggle("autoTag")} />
            <SettingToggle title="Оповещать о просрочках" sub="Уведомлять отдел контроля о просроченных поручениях" on={!!s.overdueAlert} onChange={() => toggle("overdueAlert")} />
          </Card>

          <Card title="Безопасность" bodyStyle={{ padding: 0 }}>
            <SettingToggle title="Двухфакторная аутентификация" sub="SMS-код при входе с нового устройства" on={!!s.twoFa} onChange={() => toggle("twoFa")} />
            <div className="setting-row">
              <div className="desc"><div className="t">Активные сессии</div><div className="s">Управление устройствами</div></div>
              <button className="btn btn-outline" onClick={() => window.alert("Раздел сессий появится вместе с модулем авторизации.")}>Управлять</button>
            </div>
            <div className="setting-row">
              <div className="desc"><div className="t">Журнал доступа</div><div className="s">История действий</div></div>
              <button className="btn btn-outline" onClick={() => window.alert("Журнал доступа появится вместе с модулем авторизации.")}>Открыть</button>
            </div>
          </Card>

          <UsersCard />
        </div>
      </div>
    </div>
  );
}

function CompanyProfileCard({ s, onSave }) {
  const [name, setName] = React.useState(s.companyName || "");
  const [inn, setInn] = React.useState(s.inn || "");
  const [plan, setPlan] = React.useState(s.plan || "");
  const [created, setCreated] = React.useState(s.created || "");
  const dirty = name !== (s.companyName || "") || inn !== (s.inn || "") || plan !== (s.plan || "") || created !== (s.created || "");

  return (
    <Card
      title="Профиль компании"
      subtitle="Эти данные видят все участники"
      action={dirty ? <button className="btn btn-accent" style={{ padding: "6px 12px" }} onClick={() => onSave({ companyName: name, inn, plan, created })}><I.Check size={13} /> Сохранить</button> : null}
    >
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        <div><label className="fld-label">Название</label><input className="fld" style={{ width: "100%" }} value={name} onChange={e => setName(e.target.value)} /></div>
        <div><label className="fld-label">ИНН</label><input className="fld" style={{ width: "100%" }} value={inn} onChange={e => setInn(e.target.value)} /></div>
        <div><label className="fld-label">Тарифный план</label><input className="fld" style={{ width: "100%" }} value={plan} onChange={e => setPlan(e.target.value)} /></div>
        <div><label className="fld-label">Дата создания</label><input className="fld" style={{ width: "100%" }} value={created} onChange={e => setCreated(e.target.value)} /></div>
      </div>
    </Card>
  );
}

function SettingToggle({ title, sub, on, onChange }) {
  return (
    <div className="setting-row">
      <div className="desc">
        <div className="t">{title}</div>
        <div className="s">{sub}</div>
      </div>
      <button className={`toggle ${on ? "on" : ""}`} onClick={onChange} />
    </div>
  );
}

// ---- Users & access (admin) ----
function UsersCard() {
  const [users, setUsers] = React.useState([]);
  const [open, setOpen] = React.useState(false);
  const depts = (typeof DEPARTMENTS !== "undefined") ? DEPARTMENTS : [];
  const load = () => { if (window.API && window.API.listUsers) window.API.listUsers().then(setUsers).catch(() => {}); };
  React.useEffect(() => { load(); }, []);
  const roleLabel = { admin: "Администратор", controller: "Отдел контроля", executor: "Исполнитель" };

  return (
    <Card
      title="Пользователи и доступ"
      subtitle={`${users.length} учётных записей · роли admin / контроль / исполнитель`}
      action={<button className="btn btn-accent" style={{ padding: "6px 12px" }} onClick={() => setOpen(true)}><I.Plus size={13} /> Добавить</button>}
      bodyStyle={{ padding: 0 }}
    >
      {users.map(u => (
        <div key={u.id} className="setting-row">
          <div className="desc">
            <div className="t">{u.name || u.login} <span style={{ color: "var(--ink-400)", fontWeight: 400 }}>· {u.login}</span></div>
            <div className="s">{roleLabel[u.role] || u.role}{u.person ? ` · ${u.person}` : ""}</div>
          </div>
          <span className={`pill ${u.role === "admin" ? "accepted" : u.role === "controller" ? "tg" : "muted"}`}>{u.role}</span>
        </div>
      ))}
      {users.length === 0 && <div style={{ padding: 16, color: "var(--ink-400)", fontSize: 13 }}>Загрузка…</div>}
      {open && <AddUserModal depts={depts} onClose={() => setOpen(false)} onAdded={() => { setOpen(false); load(); }} />}
    </Card>
  );
}

function AddUserModal({ onClose, onAdded }) {
  const [login, setLogin] = React.useState("");
  const [name, setName] = React.useState("");
  const [role, setRole] = React.useState("executor");
  const [person, setPerson] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState("");

  const submit = async () => {
    if (!login.trim() || password.length < 6) { setError("Логин и пароль (≥ 6 символов) обязательны"); return; }
    setBusy(true); setError("");
    try {
      await window.API.createUser({ login: login.trim(), name: name.trim(), role, person: person.trim(), password });
      onAdded();
    } catch (e) {
      setError(String((e && e.message) || e));
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="tg-overlay open" style={{ background: "rgba(13,22,32,.5)", display: "grid", placeItems: "center", zIndex: 260 }} onClick={onClose}>
      <div className="card" style={{ width: 480, maxWidth: "92vw", boxShadow: "var(--sh-3)" }} onClick={e => e.stopPropagation()}>
        <div className="card-head">
          <div style={{ flex: 1 }}><h3 className="card-title">Новый пользователь</h3><p className="card-sub">Учётная запись с ролью доступа</p></div>
          <button className="icon-btn" style={{ color: "var(--ink-400)" }} onClick={onClose}><I.X size={18} /></button>
        </div>
        <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <div><label className="fld-label">Логин</label><input className="fld" style={{ width: "100%" }} value={login} onChange={e => setLogin(e.target.value)} /></div>
            <div><label className="fld-label">Пароль</label><input className="fld" style={{ width: "100%" }} type="password" value={password} onChange={e => setPassword(e.target.value)} /></div>
          </div>
          <div><label className="fld-label">ФИО</label><input className="fld" style={{ width: "100%" }} value={name} onChange={e => setName(e.target.value)} /></div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <div>
              <label className="fld-label">Роль</label>
              <select className="fld" style={{ width: "100%" }} value={role} onChange={e => setRole(e.target.value)}>
                <option value="admin">Администратор</option>
                <option value="controller">Отдел контроля</option>
                <option value="executor">Исполнитель</option>
              </select>
            </div>
            <div>
              <label className="fld-label">Связать с ФИО</label>
              <input className="fld" style={{ width: "100%" }} placeholder="как в реестре" value={person} onChange={e => setPerson(e.target.value)} />
            </div>
          </div>
          <div style={{ fontSize: 12, color: "var(--ink-400)" }}>
            «Связать с ФИО» — для исполнителя: он видит только поручения, где ответственный = это ФИО (точно как в реестре).
          </div>
          {error && <div style={{ color: "var(--err)", fontSize: 12.5 }}>{error}</div>}
        </div>
        <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, padding: "0 20px 18px" }}>
          <button className="btn btn-ghost" onClick={onClose}>Отмена</button>
          <button className="btn btn-accent" onClick={submit} disabled={busy || !login.trim()}>Создать</button>
        </div>
      </div>
    </div>
  );
}

window.SettingsPage = SettingsPage;