import { useState, useEffect } from "react";
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Pencil, Trash2, ChevronDown } from "lucide-react";
import { useUpdateSocialLinks } from "@/hooks/useProfile";
import { useQuery } from "@tanstack/react-query";
import { api } from "@/services/api";
import Image from "next/image";

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

export function EditSocialMediaModal({ isOpen, onClose, user }: EditSocialMediaModalProps) {
  const updateMutation = useUpdateSocialLinks();
  
  // Try to load from user object if available, otherwise fallback to empty (or mock)
  const initialLinks = user?.social_links?.length > 0 
    ? user.social_links.map((l: any) => ({
        id: l.id,
        platform_id: l.platform_id,
        platform: l.platform_name || '',
        url: l.url,
        icon_url: l.icon_url
      }))
    : [];

  const [links, setLinks] = useState<any[]>(initialLinks);

  useEffect(() => {
    if (isOpen) {
      if (user?.social_links?.length > 0) {
        setLinks(user.social_links.map((l: any) => ({
          id: l.id,
          platform_id: l.platform_id,
          platform: l.platform_name || '',
          url: l.url,
          icon_url: l.icon_url
        })));
      } else {
        setLinks([]);
      }
    }
  }, [isOpen, user]);

  const { data: platforms = [] } = useQuery({
    queryKey: ['socialPlatforms'],
    queryFn: async () => {
      const res = await api.get('/socialPlatform');
      return res.data;
    }
  });

  const [isFormVisible, setIsFormVisible] = useState(false);
  const [editingId, setEditingId] = useState<number | null>(null);
  const [formData, setFormData] = useState({ platform: '', url: '' });

  const handleAddNewClick = () => {
    setEditingId(null);
    setFormData({ platform: '', url: '' });
    setIsFormVisible(true);
  };

  const handleEditClick = (link: any) => {
    setEditingId(link.id);
    setFormData({ platform: link.platform, url: link.url });
    setIsFormVisible(true);
  };

  const handleFormSubmit = () => {
    if (!formData.platform || !formData.url) return;
    
    const selectedPlatform = platforms.find((p: any) => p.name === formData.platform);
    if (!selectedPlatform) return;

    if (editingId) {
      setLinks(links.map(l => l.id === editingId ? { ...l, platform: formData.platform, platform_id: selectedPlatform.id, url: formData.url, icon_url: selectedPlatform.icon_url } : l));
    } else {
      const newId = Math.max(0, ...links.map(l => l.id)) + 1;
      setLinks([...links, { id: newId, platform: formData.platform, platform_id: selectedPlatform.id, url: formData.url, icon_url: selectedPlatform.icon_url }]);
    }
    
    setIsFormVisible(false);
    setEditingId(null);
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    const dataToSave = links.map(l => ({
      platform_id: l.platform_id || 1,
      url: l.url
    }));

    updateMutation.mutate(dataToSave, {
      onSuccess: () => {
        onClose();
      }
    });
  };

  const removeLink = (idToRemove: number) => {
    setLinks(links.filter(link => link.id !== idToRemove));
  };

  const renderIcon = (link: any) => {
    if (link.icon_url) {
      return (
        <div className="w-8 h-8 flex items-center justify-center bg-gray-50 rounded-md shrink-0 border border-gray-100">
          <Image src={link.icon_url} alt={link.platform || ''} width={20} height={20} className="object-contain" />
        </div>
      );
    }
    return (
      <div className="w-8 h-8 flex items-center justify-center bg-gray-50 rounded-md shrink-0 border border-gray-100">
        <span className="text-xs font-semibold text-gray-500">{(link.platform || 'L').charAt(0)}</span>
      </div>
    );
  };

  return (
    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
      <DialogContent className="sm:max-w-[750px] w-full p-0 overflow-hidden bg-[#fafafa] rounded-2xl border-0 shadow-2xl flex flex-col max-h-[90vh]">
        
        {/* Header */}
        <div className="p-8 pb-4">
          <DialogTitle className="text-xl font-bold text-gray-900 mt-2 mb-2">Social Media Links</DialogTitle>
        </div>

        {/* Scrollable Body */}
        <div className="px-8 pb-6 flex-1 overflow-y-auto">
          <div className="flex flex-col gap-4">
            
            {links.map((link) => (
              <div 
                key={link.id} 
                className="flex items-center gap-6 bg-white rounded-xl shadow-[0_4px_12px_-2px_rgba(0,0,0,0.08)] border border-gray-100 p-4 h-16"
              >
                {renderIcon(link)}
                
                <div className="font-semibold text-gray-600 text-sm w-[80px]">
                  {link.platform}
                </div>
                
                <div className="flex-1 font-medium text-gray-500 text-sm truncate">
                  {link.url}
                </div>
                
                <div className="flex items-center gap-4 ml-4 shrink-0 pr-2">
                  <button type="button" onClick={() => handleEditClick(link)} className="text-gray-500 hover:text-gray-700 transition-colors">
                    <Pencil className="w-4 h-4" />
                  </button>
                  <button type="button" onClick={() => removeLink(link.id)} className="text-red-400 hover:text-red-600 transition-colors">
                    <Trash2 className="w-4 h-4" />
                  </button>
                </div>
              </div>
            ))}

            {!isFormVisible ? (
              <button 
                type="button" 
                onClick={handleAddNewClick}
                className="mt-4 w-full h-12 rounded-xl border border-[#ff6b00] text-[#ff6b00] font-bold text-sm bg-white hover:bg-[#fff0e6] transition-colors flex items-center justify-center gap-1"
              >
                + Add New Link
              </button>
            ) : (
              <div className="mt-4 flex flex-col gap-4">
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <label className="text-xs font-bold text-gray-800">Platform</label>
                    <div className="relative">
                      <select 
                        value={formData.platform}
                        onChange={(e) => setFormData({...formData, platform: e.target.value})}
                        className="w-full h-11 px-4 rounded-xl !border-0 shadow-[0_4px_8px_-2px_rgba(0,0,0,0.15)] ring-1 ring-inset ring-gray-100 bg-white text-sm font-medium text-gray-700 focus:outline-none appearance-none"
                      >
                        <option value="" disabled>Choose a platform</option>
                        {platforms.map((p: any) => (
                          <option key={p.id} value={p.name}>{p.name}</option>
                        ))}
                      </select>
                      <div className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
                        <ChevronDown className="w-5 h-5" />
                      </div>
                    </div>
                  </div>
                  <div className="space-y-2">
                    <label className="text-xs font-bold text-gray-800">URL</label>
                    <input 
                      type="text" 
                      placeholder="Paste URL"
                      value={formData.url}
                      onChange={(e) => setFormData({...formData, url: e.target.value})}
                      className="w-full h-11 px-4 rounded-xl !border-0 shadow-[0_4px_8px_-2px_rgba(0,0,0,0.15)] ring-1 ring-inset ring-gray-100 bg-white text-sm font-medium text-gray-700 placeholder:font-normal focus:outline-none"
                    />
                  </div>
                </div>
                <div className="flex justify-end mt-2">
                  <button 
                    type="button" 
                    onClick={handleFormSubmit}
                    className="h-10 px-8 rounded-lg border border-[#ff6b00] text-[#ff6b00] font-bold text-sm bg-white hover:bg-[#fff0e6] transition-colors"
                  >
                    {editingId ? 'Update' : 'Add'}
                  </button>
                </div>
              </div>
            )}
            
          </div>
          
          <div className="h-20"></div>
        </div>

        {/* Footer */}
        <div className="flex items-center justify-end gap-4 p-6 pt-4 bg-[#fafafa]">
          <button type="button" onClick={onClose} className="text-sm font-bold text-gray-900 hover:text-gray-700 px-2 py-2">
            Cancel
          </button>
          <Button onClick={handleSubmit} className="bg-[#ff6b00] hover:bg-[#e65c00] text-white px-8 h-10 rounded-lg font-bold border-0 shadow-sm min-w-[120px]">
            Save
          </Button>
        </div>

      </DialogContent>
    </Dialog>
  );
}