import { useState, useEffect } from "react";
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { useAddCertification, useUpdateCertification, useDeleteCertification } from "@/hooks/useProfile";
import { Trash2, X } from "lucide-react";
import { profileService } from "@/services/profile.service";
import { useQuery } from "@tanstack/react-query";

interface EditCertificationModalProps {
  isOpen: boolean;
  onClose: () => void;
  certification?: any;
}

export function EditCertificationModal({ isOpen, onClose, certification }: EditCertificationModalProps) {
  const addMutation = useAddCertification();
  const updateMutation = useUpdateCertification();
  const deleteMutation = useDeleteCertification();

  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
  const [searchTerm, setSearchTerm] = useState("");

  const [formData, setFormData] = useState({
    certification_name: "",
    certification_provider: "",
    issue_date: "",
    expiry_date: "",
    certification_id: undefined as number | undefined,
  });

  const { data: certificateOptions = [] } = useQuery({
    queryKey: ['certificates', searchTerm],
    queryFn: () => profileService.getCertificates(searchTerm),
    enabled: isOpen,
  });

  useEffect(() => {
    if (isOpen) {
      if (certification) {
        setFormData({
          certification_name: certification.certification_name || "",
          certification_provider: certification.certification_provider || "",
          issue_date: certification.issue_date ? new Date(certification.issue_date).toISOString().split('T')[0] : "",
          expiry_date: certification.expiry_date ? new Date(certification.expiry_date).toISOString().split('T')[0] : "",
          certification_id: certification.certification_id || undefined,
        });
        setSearchTerm(certification.certification_name || "");
      } else {
        setFormData({
          certification_name: "",
          certification_provider: "",
          issue_date: "",
          expiry_date: "",
          certification_id: undefined,
        });
        setSearchTerm("");
      }
      setIsDeleteDialogOpen(false);
    }
  }, [isOpen, certification]);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (certification) {
      updateMutation.mutate(
        { id: certification.id, data: formData },
        { onSuccess: onClose }
      );
    } else {
      addMutation.mutate(
        formData,
        { onSuccess: onClose }
      );
    }
  };

  const handleDelete = () => {
    if (certification) {
      deleteMutation.mutate(certification.id, {
        onSuccess: onClose
      });
    }
  };

  const isPending = addMutation.isPending || updateMutation.isPending;

  return (
    <>
      <Dialog open={isOpen} onOpenChange={onClose}>
        <DialogContent className="max-w-2xl p-0 gap-0 overflow-hidden bg-white rounded-[24px]">
          <div className="flex items-center justify-between px-6 py-4 border-b border-gray-100">
            <DialogTitle className="text-xl font-semibold text-gray-900">
              {certification ? "Edit Certification" : "Add Certification"}
            </DialogTitle>
            <button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
              <X className="w-5 h-5 text-gray-500" />
            </button>
          </div>

          <form onSubmit={handleSubmit} className="p-6">
            <div className="space-y-6">
              
              <div className="grid grid-cols-1 gap-6">
                <div className="space-y-1.5 relative">
                  <label className="text-sm font-medium text-gray-700">Certification Name <span className="text-red-500">*</span></label>
                  <input
                    type="text"
                    value={formData.certification_name}
                    onChange={(e) => {
                      setFormData({ ...formData, certification_name: e.target.value, certification_id: undefined });
                      setSearchTerm(e.target.value);
                    }}
                    placeholder="e.g. AWS Certified Solutions Architect"
                    className="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-orange-500 focus:ring-1 focus:ring-orange-500 outline-none transition-all text-sm text-gray-900"
                    required
                  />
                  {/* Autocomplete dropdown */}
                  {searchTerm && document.activeElement === document.querySelector('input[placeholder="e.g. AWS Certified Solutions Architect"]') && certificateOptions.length > 0 && (
                    <div className="absolute top-full left-0 right-0 mt-1 bg-white border border-gray-200 rounded-xl shadow-lg z-50 max-h-48 overflow-y-auto">
                      {certificateOptions.map((cert: any) => (
                        <div
                          key={cert.id}
                          className="px-4 py-2 hover:bg-orange-50 cursor-pointer text-sm text-gray-700"
                          onMouseDown={(e) => {
                            e.preventDefault();
                            setFormData({
                              ...formData,
                              certification_name: cert.certification_name,
                              certification_provider: cert.certification_provider || formData.certification_provider,
                              certification_id: cert.id,
                            });
                            setSearchTerm(cert.certification_name);
                          }}
                        >
                          <div className="font-medium">{cert.certification_name}</div>
                          {cert.certification_provider && (
                            <div className="text-xs text-gray-500 mt-0.5">{cert.certification_provider}</div>
                          )}
                        </div>
                      ))}
                    </div>
                  )}
                </div>

                <div className="space-y-1.5">
                  <label className="text-sm font-medium text-gray-700">Issuing Organization</label>
                  <input
                    type="text"
                    value={formData.certification_provider}
                    onChange={(e) => setFormData({ ...formData, certification_provider: e.target.value })}
                    placeholder="e.g. Amazon Web Services"
                    className="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-orange-500 focus:ring-1 focus:ring-orange-500 outline-none transition-all text-sm text-gray-900"
                  />
                </div>
              </div>

              <div className="grid grid-cols-1 gap-6">
                <div className="space-y-1.5">
                  <label className="text-sm font-medium text-gray-700">Issue Date</label>
                  <input
                    type="date"
                    value={formData.issue_date}
                    onChange={(e) => setFormData({ ...formData, issue_date: e.target.value })}
                    className="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-orange-500 focus:ring-1 focus:ring-orange-500 outline-none transition-all text-sm text-gray-900"
                  />
                </div>
                
                <div className="space-y-1.5">
                  <label className="text-sm font-medium text-gray-700">Expiry Date (if applicable)</label>
                  <input
                    type="date"
                    value={formData.expiry_date}
                    onChange={(e) => setFormData({ ...formData, expiry_date: e.target.value })}
                    className="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-orange-500 focus:ring-1 focus:ring-orange-500 outline-none transition-all text-sm text-gray-900"
                  />
                </div>
              </div>

            </div>

            <div className="flex items-center justify-between mt-8 pt-6 border-t border-gray-100">
              {certification ? (
                <Button
                  type="button"
                  variant="ghost"
                  className="text-gray-500 hover:text-red-600 hover:bg-red-50 px-4"
                  onClick={() => setIsDeleteDialogOpen(true)}
                >
                  <Trash2 className="w-4 h-4 mr-2" />
                  Delete
                </Button>
              ) : (
                <div></div>
              )}
              
              <div className="flex gap-3">
                <Button
                  type="button"
                  variant="outline"
                  onClick={onClose}
                  className="px-6 rounded-xl border-gray-200 hover:bg-gray-50"
                  disabled={isPending}
                >
                  Cancel
                </Button>
                <Button
                  type="submit"
                  className="px-6 rounded-xl bg-[#ff6b00] hover:bg-[#e66000] text-white"
                  disabled={isPending}
                >
                  {isPending ? "Saving..." : "Save"}
                </Button>
              </div>
            </div>
          </form>
        </DialogContent>
      </Dialog>

      <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
        <DialogContent className="max-w-md p-6 bg-white rounded-[24px]">
          <DialogTitle className="text-xl font-semibold text-gray-900 mb-2">Delete Certification</DialogTitle>
          <p className="text-gray-600 mb-6">Are you sure you want to delete this certification? This action cannot be undone.</p>
          <div className="flex justify-end gap-3">
            <Button
              variant="outline"
              onClick={() => setIsDeleteDialogOpen(false)}
              className="px-6 rounded-xl border-gray-200"
              disabled={deleteMutation.isPending}
            >
              Cancel
            </Button>
            <Button
              variant="destructive"
              onClick={handleDelete}
              className="px-6 rounded-xl"
              disabled={deleteMutation.isPending}
            >
              {deleteMutation.isPending ? "Deleting..." : "Delete"}
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
}