"use client";

import { useRouter } from "next/navigation";
import { useState, type FormEvent } from "react";
import { WindowFields } from "@/components/WindowFields";
import { apiFetch, errorMessage } from "@/lib/client-api";
import type { QueryWindow, WindowPreview } from "@/lib/types";

export function SettingsForm({ initial, disabled }: { initial: QueryWindow; disabled: boolean }) {
  const router = useRouter();
  const [value, setValue] = useState<QueryWindow>(initial);
  const [preview, setPreview] = useState<WindowPreview | null>(null);
  const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null);
  const [busy, setBusy] = useState(false);

  async function runPreview() {
    setBusy(true);
    setMessage(null);
    try {
      setPreview(await apiFetch<WindowPreview>("/settings/preview", { method: "POST", body: value }));
    } catch (err) {
      setMessage({ ok: false, text: errorMessage(err) });
    } finally {
      setBusy(false);
    }
  }

  async function save(e: FormEvent) {
    e.preventDefault();
    if (!window.confirm("Salvar a nova janela global? Ela vale para todos os usuários sem janela personalizada.")) return;
    setBusy(true);
    setMessage(null);
    try {
      await apiFetch("/settings", { method: "PUT", body: value });
      setMessage({ ok: true, text: "Janela salva." });
      router.refresh();
    } catch (err) {
      setMessage({ ok: false, text: errorMessage(err) });
    } finally {
      setBusy(false);
    }
  }

  return (
    <form onSubmit={save}>
      <WindowFields value={value} onChange={(w) => { setValue(w); setPreview(null); }} disabled={disabled} />
      {!disabled && (
        <div className="actions">
          <button className="btn secondary" type="button" onClick={runPreview} disabled={busy}>
            Pré-visualizar efeito
          </button>
          <button className="btn primary" type="submit" disabled={busy}>
            Salvar
          </button>
        </div>
      )}
      {message && <p className={message.ok ? "ok-text" : "error-text"}>{message.text}</p>}

      {preview && (
        <div className="preview">
          {preview.errors.length > 0 ? (
            <ul className="error-text">
              {preview.errors.map((e) => (
                <li key={e.field + e.message}>{e.message}</li>
              ))}
            </ul>
          ) : (
            <dl className="kv">
              <dt>Consultas por usuário (máximo)</dt>
              <dd>{preview.max_queries_per_user} por dia</dd>
              <dt>Consultas num dia típico</dt>
              <dd>{preview.typical_queries_per_user} por usuário</dd>
              <dt>Consultas num dia de folga</dt>
              <dd>{preview.day_off_queries_per_user} por usuário</dd>
              <dt>Lembretes que sairiam atrasados</dt>
              <dd>
                {preview.affected_users} usuário(s), {preview.affected_days} dia(s) nos últimos 30 dias (aviso de retorno
                antes do início da janela)
              </dd>
              <dt>Não afetados</dt>
              <dd>{preview.custom_window_users} usuário(s) com janela personalizada</dd>
            </dl>
          )}
        </div>
      )}
    </form>
  );
}