"use client";

import { useState } from "react";
import { Eye, EyeOff, Lock, Check, KeyRound } from "lucide-react";
import Modal from "../ui/Modal";
import Button from "../ui/Button";
import toast from "react-hot-toast";

interface ChangePasswordModalProps {
  isOpen: boolean;
  onClose: () => void;
}

function strength(pwd: string): { score: number; label: string; bar: string } {
  if (!pwd) return { score: 0, label: "", bar: "bg-gray-300" };
  let s = 0;
  if (pwd.length >= 8) s++;
  if (pwd.length >= 12) s++;
  if (/[A-Z]/.test(pwd) && /[a-z]/.test(pwd)) s++;
  if (/\d/.test(pwd)) s++;
  if (/[^A-Za-z0-9]/.test(pwd)) s++;
  const labels = ["", "Très faible", "Faible", "Moyen", "Bon", "Excellent"];
  const bars = ["bg-gray-300", "bg-rose-500", "bg-orange-500", "bg-amber-500", "bg-emerald-500", "bg-emerald-500"];
  return { score: s, label: labels[s], bar: bars[s] };
}

function Field({
  label, value, onChange, show, onToggle, placeholder, autoFocus, extraClass = "", onEnter, showToggle = true, trailing,
}: {
  label: string; value: string; onChange: (v: string) => void; show?: boolean; onToggle?: () => void;
  placeholder: string; autoFocus?: boolean; extraClass?: string; onEnter?: () => void; showToggle?: boolean; trailing?: React.ReactNode;
}): React.ReactElement {
  return (
  <div>
    <label className="block text-[12px] font-medium text-gray-500 dark:text-gray-400 mb-1.5">{label}</label>
    <div className="relative">
      <Lock className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
      <input
        type={show ? "text" : "password"}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        onKeyDown={(e) => e.key === "Enter" && onEnter?.()}
        placeholder={placeholder}
        className={`field pl-10 pr-11 h-11 ${extraClass}`}
        autoFocus={autoFocus}
        autoComplete={label.includes("actuel") ? "current-password" : "new-password"}
      />
      {trailing}
      {showToggle && onToggle && (
        <button
          type="button"
          onClick={onToggle}
          className="absolute right-2 top-1/2 -translate-y-1/2 w-8 h-8 flex items-center justify-center rounded-lg text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-200/60 dark:hover:bg-white/10 transition-colors"
          aria-label={show ? "Masquer" : "Afficher"}
        >
          {show ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
        </button>
      )}
    </div>
  </div>
);
}

export default function ChangePasswordModal({ isOpen, onClose }: ChangePasswordModalProps) {
  const [currentPassword, setCurrentPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [showCurrent, setShowCurrent] = useState(false);
  const [showNew, setShowNew] = useState(false);
  const [loading, setLoading] = useState(false);

  const handleClose = () => {
    setCurrentPassword("");
    setNewPassword("");
    setConfirmPassword("");
    setShowCurrent(false);
    setShowNew(false);
    onClose();
  };

  const passwordsMatch = newPassword && confirmPassword && newPassword === confirmPassword;
  const newPasswordValid = newPassword.length >= 6;
  const canSubmit = currentPassword && newPasswordValid && passwordsMatch;
  const st = strength(newPassword);

  const handleSubmit = async () => {
    if (!canSubmit) return;
    setLoading(true);
    try {
      const res = await fetch("/api/auth/change-password", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ currentPassword, newPassword }),
      });
      const data = await res.json();
      if (res.ok) {
        toast.success("Mot de passe modifié avec succès");
        handleClose();
      } else {
        toast.error(data.error || "Erreur");
      }
    } catch {
      toast.error("Erreur réseau");
    } finally {
      setLoading(false);
    }
  };

  return (
    <Modal
      isOpen={isOpen}
      onClose={handleClose}
      title="Changer le mot de passe"
      description="Choisissez un mot de passe long et unique."
      footer={
        <>
          <Button variant="ghost" onClick={handleClose}>Annuler</Button>
          <Button variant="accent" onClick={handleSubmit} loading={loading} disabled={!canSubmit}>
            <KeyRound className="w-4 h-4" /> Mettre à jour
          </Button>
        </>
      }
    >
      <div className="space-y-4">
        <Field label="Mot de passe actuel" value={currentPassword} onChange={setCurrentPassword} show={showCurrent} onToggle={() => setShowCurrent(!showCurrent)} placeholder="••••••••" autoFocus />

        <div>
          <Field
            label="Nouveau mot de passe"
            value={newPassword}
            onChange={setNewPassword}
            show={showNew}
            onToggle={() => setShowNew(!showNew)}
            placeholder="Min. 6 caractères"
            extraClass={newPassword && !newPasswordValid ? "!border-rose-400" : ""}
          />
          {newPassword && (
            <div className="mt-2 flex items-center gap-2">
              <div className="flex gap-1 flex-1">
                {Array.from({ length: 5 }).map((_, i) => (
                  <span key={i} className={`h-1 flex-1 rounded-full transition-colors ${i < st.score ? st.bar : "bg-gray-200 dark:bg-white/10"}`} />
                ))}
              </div>
              <span className="text-[11px] text-gray-500 min-w-[4.5rem] text-right">{st.label}</span>
            </div>
          )}
          {newPassword && !newPasswordValid && <p className="text-xs text-rose-500 mt-1.5">Au moins 6 caractères requis</p>}
        </div>

        <div>
          <Field
            label="Confirmer le nouveau mot de passe"
            value={confirmPassword}
            onChange={setConfirmPassword}
            placeholder="••••••••"
            onEnter={handleSubmit}
            showToggle={false}
            extraClass={confirmPassword && !passwordsMatch ? "!border-rose-400" : confirmPassword && passwordsMatch ? "!border-emerald-400" : ""}
            trailing={confirmPassword && passwordsMatch ? <Check className="absolute right-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-emerald-500" /> : undefined}
          />
          {confirmPassword && !passwordsMatch && <p className="text-xs text-rose-500 mt-1.5">Les mots de passe ne correspondent pas</p>}
        </div>
      </div>
    </Modal>
  );
}