import { useEffect } from "react";
import { X, Mail, Loader2 } from "lucide-react";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import { useForm } from "@inertiajs/react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/Components/ui/dialog";

interface UpdateProfileModalProps {
  isOpen: boolean;
  onClose: () => void;
  user?: any;
}

export function UpdateProfileModal({ isOpen, onClose, user }: UpdateProfileModalProps) {
  const nameParts = user?.name ? user.name.split(" ") : ["", ""];
  const initialFirstName = nameParts[0] || "";
  const initialLastName = nameParts.slice(1).join(" ") || "";

  const { data, setData, patch, processing, errors, reset, clearErrors, transform } = useForm({
    firstName: initialFirstName,
    lastName: initialLastName,
    name: user?.name || "",
    email: user?.email || "",
    phone: user?.phone || "",
  });

  useEffect(() => {
    if (isOpen) {
      const parts = user?.name ? user.name.split(" ") : ["", ""];
      setData({
        firstName: parts[0] || "",
        lastName: parts.slice(1).join(" ") || "",
        name: user?.name || "",
        email: user?.email || "",
        phone: user?.phone || "",
      });
      clearErrors();
    }
  }, [isOpen, user]);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    transform((data) => ({
      ...data,
      name: `${data.firstName} ${data.lastName}`.trim(),
    }));

    patch('/profile', {
      preserveScroll: true,
      onSuccess: () => {
        onClose();
      },
      onError: (errors) => {
        console.error(errors);
      }
    });
  };

  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 mon profil</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="firstName" className="text-slate-500 font-normal text-base">Prénom*</Label>
            <Input
              id="firstName"
              value={data.firstName}
              onChange={(e) => setData('firstName', e.target.value)}
              required
              className="h-11 border-slate-200 text-slate-700 focus-visible:ring-1 focus-visible:ring-slate-300 rounded-md"
            />
            {errors.name && <p className="text-sm text-red-500">{errors.name}</p>}
          </div>

          <div className="grid grid-cols-[200px_1fr] items-center gap-4">
            <Label htmlFor="lastName" className="text-slate-500 font-normal text-base">Nom de famille*</Label>
            <Input
              id="lastName"
              value={data.lastName}
              onChange={(e) => setData('lastName', 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="email" className="text-slate-500 font-normal text-base">Adresse email*</Label>
            <div className="relative">
              <Input
                id="email"
                type="email"
                value={data.email}
                onChange={(e) => setData('email', e.target.value)}
                required
                className="h-11 border-slate-200 text-slate-700 pr-10 focus-visible:ring-1 focus-visible:ring-slate-300 rounded-md"
              />
              <Mail className="absolute right-3 top-3 h-5 w-5 text-teal-600/80" />
            </div>
            {errors.email && <p className="text-sm text-red-500">{errors.email}</p>}
          </div>

          <div className="grid grid-cols-[200px_1fr] items-center gap-4">
            <Label htmlFor="phone" className="text-slate-500 font-normal text-base">Téléphone</Label>
            <Input
              id="phone"
              type="tel"
              value={data.phone}
              onChange={(e) => setData('phone', e.target.value)}
              className="h-11 border-slate-200 text-slate-700 focus-visible:ring-1 focus-visible:ring-slate-300 rounded-md"
            />
            {errors.phone && <p className="text-sm text-red-500">{errors.phone}</p>}
          </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"
              disabled={processing}
              className="h-11 px-6 rounded-md font-normal bg-[#ff5e78] text-white hover:bg-[#ff5e78]/90"
            >
              {processing && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
              Soumettre
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}