/* ============================================================
   PURE SPA — AGENDA · Configuración  /admin/settings
   ============================================================ */
function SettingsView() {
  const { version, can } = useApp();
  const toast = useToast();
  const initial = useMemo(() => PureApi.getSettings(), []);
  const [s, setS] = useState(initial);
  const users = useMemo(() => PureApi.getUsers ? PureApi.getUsers() : [], [version]);
  const [userForm, setUserForm] = useState({ name: "", email: "", role: "RECEPTION", password: "" });
  const editable = can("settings:update");
  const set = (k, v) => setS({ ...s, [k]: v });
  useEffect(() => {
    const next = PureApi.getSettings();
    if (next && next.business_name) setS(next);
  }, [version]);
  const toggleDay = (d) => { const days = s.active_days || []; const has = days.includes(d); set("active_days", has ? days.filter((x) => x !== d) : [...days, d]); };
  const save = () => { PureApi.updateSettings(s); toast("Configuración guardada"); };
  const createUser = async () => {
    if (!userForm.name || !userForm.email || !userForm.password) { toast("Completa nombre, email y contraseña", "info"); return; }
    await PureApi.createUser(userForm);
    setUserForm({ name: "", email: "", role: "RECEPTION", password: "" });
    toast("Usuario creado");
  };
  const resetPassword = async (u) => {
    const password = window.prompt(`Nueva contraseña para ${u.name}`);
    if (!password) return;
    if (password.length < 8) { toast("La contraseña debe tener al menos 8 caracteres", "info"); return; }
    await PureApi.updateUser(u.id, { password });
    toast("Contraseña actualizada");
  };
  const DAYS = ["Lun", "Mar", "Mié", "Jue", "Vie", "Sáb", "Dom"];

  const Section = ({ title, children }) => (
    <Card pad={22} style={{ marginBottom: 16 }}>
      <h3 style={{ fontFamily: "var(--font-display)", fontSize: 20, color: C.espresso, marginBottom: 18, paddingBottom: 14, borderBottom: `1px solid ${C.line}` }}>{title}</h3>
      <div className="pu-settings-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0 20px" }}>{children}</div>
    </Card>
  );
  const Toggle = ({ label, value, onChange }) => (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "12px 0", gridColumn: "1 / -1", borderTop: `1px solid ${C.line}` }}>
      <span style={{ fontFamily: "var(--font-body)", fontSize: 13.5, color: C.espresso }}>{label}</span>
      <button disabled={!editable} onClick={() => onChange(!value)} style={{ width: 46, height: 26, borderRadius: 999, border: "none", cursor: editable ? "pointer" : "default", background: value ? C.gold : C.line, position: "relative", transition: "background .2s" }}>
        <span style={{ position: "absolute", top: 3, left: value ? 23 : 3, width: 20, height: 20, borderRadius: 999, background: C.white, transition: "left .2s", boxShadow: "0 1px 3px rgba(0,0,0,0.2)" }} />
      </button>
    </div>
  );

  return (
    <div style={{ maxWidth: 760 }}>
      <PageHead eyebrow="Sistema" title="Configuración" sub="Parámetros del negocio y de la agenda.">
        {editable && <Button variant="primary" size="sm" onClick={save}><Icon name="Check" size={14} color={C.espresso} style={{ marginRight: 4 }} />Guardar cambios</Button>}
      </PageHead>

      {!editable && <div style={{ background: C.gold15, border: `1px solid ${C.champ30}`, borderRadius: 12, padding: "12px 16px", marginBottom: 16, display: "flex", gap: 10, alignItems: "center" }}>
        <Icon name="Lock" size={16} color={C.goldDeep} /><span style={{ fontFamily: "var(--font-body)", fontSize: 12.5, fontWeight: 300, color: C.espresso }}>Tu rol puede ver la configuración pero no editarla.</span>
      </div>}

      <Section title="Negocio">
        <Field label="Nombre del negocio"><Input value={s.business_name} disabled={!editable} onChange={(e) => set("business_name", e.target.value)} /></Field>
        <Field label="WhatsApp"><Input value={s.whatsapp} disabled={!editable} onChange={(e) => set("whatsapp", e.target.value)} /></Field>
        <div style={{ gridColumn: "1 / -1" }}><Field label="Dirección"><Input value={s.address} disabled={!editable} onChange={(e) => set("address", e.target.value)} /></Field></div>
        <Field label="Email"><Input value={s.email} disabled={!editable} onChange={(e) => set("email", e.target.value)} /></Field>
        <Field label="Zona horaria"><Input value={s.timezone} disabled onChange={() => {}} /></Field>
      </Section>

      <Section title="Horario de atención">
        <Field label="Hora de apertura"><Input type="time" value={s.open_time} disabled={!editable} onChange={(e) => set("open_time", e.target.value)} /></Field>
        <Field label="Hora de cierre"><Input type="time" value={s.close_time} disabled={!editable} onChange={(e) => set("close_time", e.target.value)} /></Field>
        <div style={{ gridColumn: "1 / -1" }}>
          <Field label="Días activos">
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              {DAYS.map((d) => {
                const on = (s.active_days || []).includes(d);
                return <button key={d} disabled={!editable} onClick={() => toggleDay(d)} style={{ padding: "9px 15px", borderRadius: 999, cursor: editable ? "pointer" : "default", fontFamily: "var(--font-body)", fontSize: 11.5, fontWeight: 600, letterSpacing: "0.04em", border: `1.5px solid ${on ? C.gold : C.line}`, background: on ? C.gold : C.white, color: on ? C.espresso : C.taupe }}>{d}</button>;
              })}
            </div>
          </Field>
        </div>
      </Section>

      <Section title="Reglas de agenda">
        <Field label="Intervalo de agenda (min)"><Input type="number" value={s.slot_interval_minutes} disabled={!editable} onChange={(e) => set("slot_interval_minutes", +e.target.value)} /></Field>
        <Field label="Aviso mínimo para reservar (min)"><Input type="number" value={s.minimum_notice_minutes} disabled={!editable} onChange={(e) => set("minimum_notice_minutes", +e.target.value)} /></Field>
        <Field label="Expiración de pago pendiente (min)"><Input type="number" value={s.pending_payment_expiration_minutes} disabled={!editable} onChange={(e) => set("pending_payment_expiration_minutes", +e.target.value)} /></Field>
        <Toggle label="Requerir pago online para reservar" value={s.require_online_payment} onChange={(v) => set("require_online_payment", v)} />
        <Toggle label="Permitir reservas el mismo día" value={s.allow_same_day_booking} onChange={(v) => set("allow_same_day_booking", v)} />
      </Section>

      {editable && (
        <Card pad={22} style={{ marginBottom: 16 }}>
          <h3 style={{ fontFamily: "var(--font-display)", fontSize: 20, color: C.espresso, marginBottom: 18, paddingBottom: 14, borderBottom: `1px solid ${C.line}` }}>Usuarios internos</h3>
          <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1.2fr 0.8fr 1fr auto", gap: 10, alignItems: "end", marginBottom: 18 }}>
            <Field label="Nombre"><Input value={userForm.name} onChange={(e) => setUserForm({ ...userForm, name: e.target.value })} placeholder="Nombre" /></Field>
            <Field label="Email"><Input value={userForm.email} onChange={(e) => setUserForm({ ...userForm, email: e.target.value })} placeholder="correo@purespa.cl" /></Field>
            <Field label="Rol"><Select value={userForm.role} onChange={(role) => setUserForm({ ...userForm, role })} options={[
              { value: "OWNER", label: "Owner" },
              { value: "ADMIN", label: "Admin" },
              { value: "RECEPTION", label: "Recepción" },
              { value: "STAFF", label: "Staff" },
            ]} /></Field>
            <Field label="Contraseña inicial"><Input type="password" value={userForm.password} onChange={(e) => setUserForm({ ...userForm, password: e.target.value })} placeholder="mín. 8 caracteres" /></Field>
            <Button variant="primary" size="sm" onClick={createUser}>Crear</Button>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {users.map((u) => (
              <div key={u.id} style={{ display: "grid", gridTemplateColumns: "1.4fr 1.5fr 0.8fr auto auto", gap: 10, alignItems: "center", padding: "11px 0", borderTop: `1px solid ${C.line}` }}>
                <div style={{ fontFamily: "var(--font-body)", fontSize: 13, fontWeight: 600, color: C.espresso }}>{u.name}</div>
                <div style={{ fontFamily: "var(--font-body)", fontSize: 12, color: C.taupe }}>{u.email}</div>
                <Tag tone={u.active ? "gold" : "soft"}>{ROLE_LABELS[u.role] || u.role}</Tag>
                <Button variant="soft" size="sm" onClick={() => resetPassword(u)}>Reset clave</Button>
                <Button variant={u.active ? "danger" : "ghost"} size="sm" onClick={() => PureApi.updateUser(u.id, { active: !u.active })}>{u.active ? "Desactivar" : "Activar"}</Button>
              </div>
            ))}
          </div>
        </Card>
      )}
    </div>
  );
}

Object.assign(window, { SettingsView });