"use client";

import { useState } from "react";
import { Loader2, Mail, ShieldCheck } from "lucide-react";

type SettingsMessage = {
  tone: "success" | "error";
  text: string;
};

export function AccountSettings({ currentEmail }: { currentEmail: string }) {
  const [email, setEmail] = useState(currentEmail);
  const [emailPassword, setEmailPassword] = useState("");
  const [currentPassword, setCurrentPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [message, setMessage] = useState<SettingsMessage | null>(null);
  const [loading, setLoading] = useState<"email" | "password" | null>(null);

  async function updateEmail() {
    setLoading("email");
    setMessage(null);
    const response = await fetch("/api/account/email", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ email, currentPassword: emailPassword })
    });
    const payload = await response.json();
    setLoading(null);

    if (!response.ok || !payload.ok) {
      setMessage({ tone: "error", text: payload.error?.message ?? "Modification impossible." });
      return;
    }

    setEmail(payload.data.email);
    setEmailPassword("");
    setMessage({ tone: "success", text: "Email mis à jour." });
  }

  async function updatePassword() {
    if (newPassword !== confirmPassword) {
      setMessage({ tone: "error", text: "Les deux nouveaux mots de passe ne correspondent pas." });
      return;
    }

    setLoading("password");
    setMessage(null);
    const response = await fetch("/api/account/password", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ currentPassword, newPassword })
    });
    const payload = await response.json();
    setLoading(null);

    if (!response.ok || !payload.ok) {
      setMessage({ tone: "error", text: payload.error?.message ?? "Modification impossible." });
      return;
    }

    setCurrentPassword("");
    setNewPassword("");
    setConfirmPassword("");
    setMessage({ tone: "success", text: "Mot de passe mis à jour." });
  }

  return (
    <div className="space-y-3">
      {message ? (
        <div className={message.tone === "success" ? "rounded-lg border border-felt/25 bg-felt/10 p-3 text-xs font-semibold text-felt" : "rounded-lg border border-ember/25 bg-ember/10 p-3 text-xs font-semibold text-ember"}>
          {message.text}
        </div>
      ) : null}

      <section className="rounded-lg border border-white/10 bg-[#101521] p-3 shadow-panel">
        <div className="flex items-center gap-2">
          <Mail className="h-4 w-4 text-felt" />
          <h2 className="text-sm font-semibold text-white">Email de connexion</h2>
        </div>
        <div className="mt-3 grid gap-2">
          <label className="text-[11px] font-semibold text-slate-500">
            Nouvel email
            <input value={email} onChange={(event) => setEmail(event.target.value)} type="email" className={inputClass} />
          </label>
          <label className="text-[11px] font-semibold text-slate-500">
            Mot de passe actuel
            <input value={emailPassword} onChange={(event) => setEmailPassword(event.target.value)} type="password" className={inputClass} />
          </label>
          <button onClick={() => void updateEmail()} disabled={loading === "email"} className="mt-1 flex h-9 items-center justify-center gap-2 rounded-lg bg-felt text-xs font-extrabold text-ink-950 disabled:opacity-60">
            {loading === "email" ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
            Enregistrer l'email
          </button>
        </div>
      </section>

      <section className="rounded-lg border border-white/10 bg-[#101521] p-3 shadow-panel">
        <div className="flex items-center gap-2">
          <ShieldCheck className="h-4 w-4 text-gold" />
          <h2 className="text-sm font-semibold text-white">Mot de passe</h2>
        </div>
        <div className="mt-3 grid gap-2">
          <label className="text-[11px] font-semibold text-slate-500">
            Mot de passe actuel
            <input value={currentPassword} onChange={(event) => setCurrentPassword(event.target.value)} type="password" className={inputClass} />
          </label>
          <label className="text-[11px] font-semibold text-slate-500">
            Nouveau mot de passe
            <input value={newPassword} onChange={(event) => setNewPassword(event.target.value)} type="password" minLength={12} className={inputClass} />
          </label>
          <label className="text-[11px] font-semibold text-slate-500">
            Confirmer
            <input value={confirmPassword} onChange={(event) => setConfirmPassword(event.target.value)} type="password" minLength={12} className={inputClass} />
          </label>
          <button onClick={() => void updatePassword()} disabled={loading === "password"} className="mt-1 flex h-9 items-center justify-center gap-2 rounded-lg bg-white/[0.07] text-xs font-extrabold text-white disabled:opacity-60">
            {loading === "password" ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
            Modifier le mot de passe
          </button>
        </div>
      </section>
    </div>
  );
}

const inputClass = "mt-1 h-9 w-full rounded-lg border-white/10 bg-ink-900 px-3 text-sm text-white placeholder:text-slate-600 focus:border-felt focus:ring-felt";