"use client";

import { useState } from "react";

export default function ProfilePage() {
  const [currentPassword, setCurrentPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirm, setConfirm] = useState("");
  const [message, setMessage] = useState<{ type: "ok" | "err"; text: string } | null>(null);
  const [loading, setLoading] = useState(false);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setMessage(null);
    if (newPassword !== confirm) {
      setMessage({ type: "err", text: "Les deux mots de passe ne correspondent pas." });
      return;
    }
    if (newPassword.length < 8) {
      setMessage({ type: "err", text: "Le nouveau mot de passe doit faire au moins 8 caractères." });
      return;
    }
    setLoading(true);
    try {
      const res = await fetch("/backend/auth/password", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        credentials: "include",
        body: JSON.stringify({ currentPassword, newPassword }),
      });
      if (!res.ok) {
        const d = await res.json().catch(() => ({}));
        setMessage({ type: "err", text: d.error ?? "Échec du changement de mot de passe." });
        return;
      }
      setMessage({ type: "ok", text: "Mot de passe modifié avec succès." });
      setCurrentPassword("");
      setNewPassword("");
      setConfirm("");
    } catch {
      setMessage({ type: "err", text: "Erreur réseau." });
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="mx-auto w-full max-w-md">
      <h1 className="mb-6 text-xl font-semibold text-black sm:text-2xl dark:text-zinc-50">Mon profil</h1>

      <form
        onSubmit={handleSubmit}
        className="flex flex-col gap-4 rounded-2xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950"
      >
        <h2 className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Changer mon mot de passe</h2>
        <input
          type="password"
          placeholder="Mot de passe actuel"
          autoComplete="current-password"
          value={currentPassword}
          onChange={(e) => setCurrentPassword(e.target.value)}
          required
          className="rounded-lg border border-zinc-300 px-3 py-2 text-base dark:border-zinc-700 dark:bg-black"
        />
        <input
          type="password"
          placeholder="Nouveau mot de passe (≥ 8)"
          autoComplete="new-password"
          value={newPassword}
          onChange={(e) => setNewPassword(e.target.value)}
          required
          className="rounded-lg border border-zinc-300 px-3 py-2 text-base dark:border-zinc-700 dark:bg-black"
        />
        <input
          type="password"
          placeholder="Confirmer le nouveau mot de passe"
          autoComplete="new-password"
          value={confirm}
          onChange={(e) => setConfirm(e.target.value)}
          required
          className="rounded-lg border border-zinc-300 px-3 py-2 text-base dark:border-zinc-700 dark:bg-black"
        />
        {message && (
          <p className={message.type === "ok" ? "text-sm text-green-600" : "text-sm text-red-600"} role="alert">
            {message.text}
          </p>
        )}
        <button
          type="submit"
          disabled={loading}
          className="rounded-lg bg-black px-4 py-2.5 text-base font-medium text-white hover:bg-zinc-800 disabled:opacity-60 dark:bg-white dark:text-black dark:hover:bg-zinc-200"
        >
          {loading ? "Enregistrement…" : "Changer le mot de passe"}
        </button>
      </form>
    </div>
  );
}