import { useState } from "react";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/Components/ui/dialog";

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

export function UpdatePasswordModal({ isOpen, onClose }: UpdatePasswordModalProps) {
  const [currentPassword, setCurrentPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // This is a UI mockup reproducing the style of the profile update modal.
    // In a real scenario, this would post to a password update endpoint.
    console.log("Submitting password update", {
      currentPassword,
      newPassword,
      confirmPassword,
    });
    
    // Clear fields
    setCurrentPassword("");
    setNewPassword("");
    setConfirmPassword("");
    
    // Close modal
    onClose();
  };

  return (
    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
      <DialogContent className="sm:max-w-[700px] p-0 overflow-hidden rounded-xl border border-border shadow-xl">
        <DialogHeader className="px-8 pt-8 pb-4">
          <DialogTitle className="text-2xl font-normal text-slate-700">Mettre à jour le mot de passe</DialogTitle>
        </DialogHeader>

        <form onSubmit={handleSubmit} className="px-8 pb-8 space-y-6">
          <div className="grid grid-cols-[200px_1fr] items-center gap-4">
            <Label htmlFor="currentPassword" className="text-slate-500 font-normal text-base">Mot de passe actuel*</Label>
            <Input
              id="currentPassword"
              type="password"
              value={currentPassword}
              onChange={(e) => setCurrentPassword(e.target.value)}
              required
              className="h-11 border-slate-200 text-slate-700 focus-visible:ring-1 focus-visible:ring-slate-300 rounded-md"
            />
          </div>

          <div className="grid grid-cols-[200px_1fr] items-center gap-4">
            <Label htmlFor="newPassword" className="text-slate-500 font-normal text-base">Nouveau mot de passe*</Label>
            <Input
              id="newPassword"
              type="password"
              value={newPassword}
              onChange={(e) => setNewPassword(e.target.value)}
              required
              className="h-11 border-slate-200 text-slate-700 focus-visible:ring-1 focus-visible:ring-slate-300 rounded-md"
            />
          </div>

          <div className="grid grid-cols-[200px_1fr] items-center gap-4">
            <Label htmlFor="confirmPassword" className="text-slate-500 font-normal text-base">Confirmer le mot de passe*</Label>
            <Input
              id="confirmPassword"
              type="password"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
              required
              className="h-11 border-slate-200 text-slate-700 focus-visible:ring-1 focus-visible:ring-slate-300 rounded-md"
            />
          </div>

          <p className="text-sm font-medium text-slate-600 pt-2">* Requis</p>

          <DialogFooter className="pt-4 border-t border-slate-100 flex items-center justify-end gap-3 sm:space-x-0">
            <Button
              type="button"
              variant="outline"
              onClick={onClose}
              className="h-11 px-6 rounded-md font-normal text-slate-600 border-slate-200 hover:bg-slate-50"
            >
              Fermer
            </Button>
            <Button
              type="submit"
              className="h-11 px-6 rounded-md font-normal bg-[#ff5e78] text-white hover:bg-[#ff5e78]/90"
            >
              Soumettre
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}