"use client";

import { useState, type FormEvent } from "react";
import { useRouter } from "next/navigation";
import { Icon } from "@/components/Icon";
import { api } from "@/lib/client";
import { PrefsCard } from "@/components/PrefsCard";
import { useT } from "@/components/providers";

export default function ProfilePage() {
  const router = useRouter();
  const [current, setCurrent] = useState("");
  const [next, setNext] = useState("");
  const [confirm, setConfirm] = useState("");
  const [state, setState] = useState<{ kind: "ok" | "err"; text: string } | null>(null);
  const [busy, setBusy] = useState(false);
  const { t } = useT();

  async function submit(e: FormEvent) {
    e.preventDefault();
    setState(null);
    if (next !== confirm) {
      setState({ kind: "err", text: t.account.mismatch });
      return;
    }
    setBusy(true);
    const res = await api("/api/auth/change-password", "POST", { currentPassword: current, newPassword: next });
    setBusy(false);
    if (res.status === 200) {
      setState({ kind: "ok", text: t.account.changed });
      setCurrent("");
      setNext("");
      setConfirm("");
      router.refresh();
    } else {
      setState({ kind: "err", text: res.error ?? t.account.failed });
    }
  }

  return (
    <div className="mx-auto max-w-xl space-y-6">
      <PrefsCard initialLocale={null} initialTheme={null} />
      <header>
        <h1 className="text-2xl font-extrabold text-slate-900">{t.account.title}</h1>
        <p className="mt-1 text-sm text-slate-500">{t.account.subtitle}</p>
      </header>

      <form onSubmit={submit} className="space-y-5 rounded-xl border border-slate-200 bg-white p-6 shadow-card">
        <h2 className="flex items-center gap-2 font-bold text-slate-900">
          <Icon name="key" className="h-5 w-5 text-bousla-700" /> {t.account.changeTitle}
        </h2>
        {state && (
          <div
            role="status"
            className={`rounded-lg border px-4 py-2.5 text-sm ${
              state.kind === "ok" ? "border-emerald-200 bg-emerald-50 text-emerald-800" : "border-red-200 bg-red-50 text-red-700"
            }`}
          >
            {state.text}
          </div>
        )}
        <div>
          <label htmlFor="cur" className="mb-1.5 block text-sm font-semibold text-slate-700">{t.account.current}</label>
          <input id="cur" type="password" dir="ltr" required value={current} onChange={(e) => setCurrent(e.target.value)}
            className="w-full rounded-lg border border-slate-300 px-3.5 py-2.5 text-sm outline-none focus:border-bousla-500 focus:ring-2 focus:ring-bousla-100" />
        </div>
        <div>
          <label htmlFor="new" className="mb-1.5 block text-sm font-semibold text-slate-700">{t.account.new}</label>
          <input id="new" type="password" dir="ltr" required minLength={10} value={next} onChange={(e) => setNext(e.target.value)}
            className="w-full rounded-lg border border-slate-300 px-3.5 py-2.5 text-sm outline-none focus:border-bousla-500 focus:ring-2 focus:ring-bousla-100" />
          <p className="mt-1.5 text-xs text-slate-400">{t.account.newHint}</p>
        </div>
        <div>
          <label htmlFor="conf" className="mb-1.5 block text-sm font-semibold text-slate-700">{t.account.confirm}</label>
          <input id="conf" type="password" dir="ltr" required value={confirm} onChange={(e) => setConfirm(e.target.value)}
            className="w-full rounded-lg border border-slate-300 px-3.5 py-2.5 text-sm outline-none focus:border-bousla-500 focus:ring-2 focus:ring-bousla-100" />
        </div>
        <button type="submit" disabled={busy}
          className="w-full rounded-lg bg-bousla-700 px-4 py-2.5 text-sm font-bold text-white transition hover:bg-bousla-800 disabled:opacity-60">
          {busy ? t.account.submitting : t.account.submit}
        </button>
      </form>
    </div>
  );
}