"use client";

import { useState } from "react";
import Link from "next/link";
import { changePassword, changeName } from "@/actions/password";

export function SettingsPasswordForm({ currentName }: { currentName: string }) {
  // --- Nom d'affichage ---
  const [name, setName] = useState(currentName);
  const [nameError, setNameError] = useState("");
  const [nameSuccess, setNameSuccess] = useState(false);
  const [nameLoading, setNameLoading] = useState(false);

  async function handleNameSubmit(e: React.FormEvent) {
    e.preventDefault();
    setNameError("");
    setNameSuccess(false);
    setNameLoading(true);
    try {
      const result = await changeName(name);
      if (result.success) {
        setNameSuccess(true);
      } else {
        setNameError(result.error);
      }
    } catch {
      setNameError("Erreur de connexion");
    } finally {
      setNameLoading(false);
    }
  }

  // --- Mot de passe ---
  const [currentPassword, setCurrentPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [error, setError] = useState("");
  const [success, setSuccess] = useState(false);
  const [loading, setLoading] = useState(false);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError("");
    setSuccess(false);
    if (newPassword !== confirmPassword) {
      setError("Les deux nouveaux mots de passe ne correspondent pas");
      return;
    }
    if (newPassword.length < 8) {
      setError("Le mot de passe doit faire au moins 8 caractères");
      return;
    }
    setLoading(true);
    try {
      const result = await changePassword(currentPassword, newPassword);
      if (result.success) {
        setSuccess(true);
        setCurrentPassword("");
        setNewPassword("");
        setConfirmPassword("");
      } else {
        setError(result.error);
      }
    } catch {
      setError("Erreur de connexion");
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="mx-auto max-w-md">
      <h1 className="mb-6 font-mono text-lg font-medium text-zinc-800 dark:text-zinc-100">
        Paramètres
      </h1>

      <section className="rounded-lg border border-zinc-200 dark:border-zinc-600 bg-white dark:bg-zinc-800/50 p-4">
        <h2 className="mb-4 font-mono text-sm font-medium text-zinc-700 dark:text-zinc-300">
          Nom d&apos;affichage
        </h2>
        <form onSubmit={handleNameSubmit} className="space-y-4">
          <div>
            <label className="mb-1 block font-mono text-xs text-zinc-600 dark:text-zinc-400">
              Nom
            </label>
            <input
              type="text"
              value={name}
              onChange={(e) => { setName(e.target.value); setNameSuccess(false); }}
              required
              maxLength={64}
              autoComplete="name"
              className="w-full rounded border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500/30"
            />
          </div>
          {nameError && (
            <p className="font-mono text-xs text-red-500">{nameError}</p>
          )}
          {nameSuccess && (
            <p className="font-mono text-xs text-emerald-600 dark:text-emerald-400">
              Nom modifié.
            </p>
          )}
          <button
            type="submit"
            disabled={nameLoading}
            className="rounded border border-cyan-500/50 bg-cyan-500/10 px-3 py-2 font-mono text-sm text-cyan-600 dark:text-cyan-400 hover:bg-cyan-500/20 disabled:opacity-50"
          >
            {nameLoading ? "..." : "Modifier le nom"}
          </button>
        </form>
      </section>

      <section className="mt-4 rounded-lg border border-zinc-200 dark:border-zinc-600 bg-white dark:bg-zinc-800/50 p-4">
        <h2 className="mb-4 font-mono text-sm font-medium text-zinc-700 dark:text-zinc-300">
          Changer mon mot de passe
        </h2>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="mb-1 block font-mono text-xs text-zinc-600 dark:text-zinc-400">
              Mot de passe actuel
            </label>
            <input
              type="password"
              value={currentPassword}
              onChange={(e) => setCurrentPassword(e.target.value)}
              required
              autoComplete="current-password"
              className="w-full rounded border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500/30"
            />
          </div>
          <div>
            <label className="mb-1 block font-mono text-xs text-zinc-600 dark:text-zinc-400">
              Nouveau mot de passe
            </label>
            <input
              type="password"
              value={newPassword}
              onChange={(e) => setNewPassword(e.target.value)}
              required
              minLength={8}
              autoComplete="new-password"
              className="w-full rounded border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500/30"
            />
          </div>
          <div>
            <label className="mb-1 block font-mono text-xs text-zinc-600 dark:text-zinc-400">
              Confirmer le nouveau mot de passe
            </label>
            <input
              type="password"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
              required
              minLength={8}
              autoComplete="new-password"
              className="w-full rounded border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500/30"
            />
          </div>
          {error && (
            <p className="font-mono text-xs text-red-500">{error}</p>
          )}
          {success && (
            <p className="font-mono text-xs text-emerald-600 dark:text-emerald-400">
              Mot de passe modifié.
            </p>
          )}
          <button
            type="submit"
            disabled={loading}
            className="rounded border border-cyan-500/50 bg-cyan-500/10 px-3 py-2 font-mono text-sm text-cyan-600 dark:text-cyan-400 hover:bg-cyan-500/20 disabled:opacity-50"
          >
            {loading ? "..." : "Modifier le mot de passe"}
          </button>
        </form>
      </section>

      <p className="mt-6 font-mono text-xs text-zinc-500 dark:text-zinc-400">
        <Link href="/dashboard" className="text-cyan-600 dark:text-cyan-400 hover:underline">
          ← Retour au dashboard
        </Link>
      </p>
    </div>
  );
}
