import React, { useState, useEffect } from 'react';
import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
import { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable, rectSortingStrategy } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { X, Plus, Save, Upload, Trash2 } from 'lucide-react';

// Main App Component
export default function TierListTuesday() {
  // Define tiers with their colors and labels
  const tierDefinitions = [
    { id: 'S', label: 'S', color: 'bg-rose-600' },
    { id: 'A', label: 'A', color: 'bg-amber-500' },
    { id: 'B', label: 'B', color: 'bg-emerald-500' },
    { id: 'C', label: 'C', color: 'bg-sky-500' },
    { id: 'D', label: 'D', color: 'bg-indigo-500' },
    { id: 'F', label: 'F', color: 'bg-slate-500' },
    { id: 'unranked', label: 'Unranked', color: 'bg-gray-300' }
  ];

  // State for the tier list title
  const [title, setTitle] = useState('Tier List Tuesday');
  
  // State for items in each tier
  const [tiers, setTiers] = useState(() => {
    const savedTiers = localStorage.getItem('tierListItems');
    return savedTiers ? JSON.parse(savedTiers) : tierDefinitions.reduce((acc, tier) => {
      acc[tier.id] = [];
      return acc;
    }, {});
  });

  // State for new item form
  const [newItem, setNewItem] = useState({ name: '', image: '' });
  const [showForm, setShowForm] = useState(false);

  // Save to localStorage whenever tiers change
  useEffect(() => {
    localStorage.setItem('tierListItems', JSON.stringify(tiers));
  }, [tiers]);

  // DnD sensors setup
  const sensors = useSensors(
    useSensor(PointerSensor),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    })
  );

  // Handle DnD end event
  const handleDragEnd = (event) => {
    const { active, over } = event;
    
    if (!over) return;
    
    const activeId = active.id;
    const overId = over.id;
    
    // Extract tier and item info from the IDs
    const [activeItemId, activeTier] = activeId.split('-item-');
    const [overItemId, overTier] = overId.split('-item-');
    
    // If dropping on a different tier
    if (activeTier !== overTier) {
      setTiers(prev => {
        const activeItem = prev[activeTier].find(item => `${item.id}-item-${activeTier}` === activeId);
        
        return {
          ...prev,
          [activeTier]: prev[activeTier].filter(item => `${item.id}-item-${activeTier}` !== activeId),
          [overTier]: [...prev[overTier], { ...activeItem, id: Date.now() }]
        };
      });
    } 
    // If reordering within the same tier
    else if (activeId !== overId) {
      setTiers(prev => {
        const activeIndex = prev[activeTier].findIndex(item => `${item.id}-item-${activeTier}` === activeId);
        const overIndex = prev[activeTier].findIndex(item => `${item.id}-item-${activeTier}` === overId);
        
        return {
          ...prev,
          [activeTier]: arrayMove(prev[activeTier], activeIndex, overIndex)
        };
      });
    }
  };

  // Add a new item to the unranked tier
  const handleAddItem = (e) => {
    e.preventDefault();
    if (newItem.name.trim()) {
      setTiers(prev => ({
        ...prev,
        unranked: [...prev.unranked, { id: Date.now(), name: newItem.name, image: newItem.image }]
      }));
      setNewItem({ name: '', image: '' });
      setShowForm(false);
    }
  };

  // Delete an item
  const handleDeleteItem = (tierId, itemId) => {
    setTiers(prev => ({
      ...prev,
      [tierId]: prev[tierId].filter(item => `${item.id}-item-${tierId}` !== itemId)
    }));
  };

  // Reset the tier list
  const handleReset = () => {
    if (window.confirm('Are you sure you want to reset the tier list? This will remove all items.')) {
      setTiers(tierDefinitions.reduce((acc, tier) => {
        acc[tier.id] = [];
        return acc;
      }, {}));
    }
  };

  // Export tier list as JSON
  const handleExport = () => {
    const dataStr = JSON.stringify({ title, tiers });
    const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
    
    const exportFileDefaultName = `${title.replace(/\s+/g, '-').toLowerCase()}.json`;
    
    const linkElement = document.createElement('a');
    linkElement.setAttribute('href', dataUri);
    linkElement.setAttribute('download', exportFileDefaultName);
    linkElement.click();
  };

  // Import tier list from JSON
  const handleImport = (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        try {
          const { title: importedTitle, tiers: importedTiers } = JSON.parse(e.target.result);
          setTitle(importedTitle);
          setTiers(importedTiers);
        } catch (error) {
          alert('Error importing file. Please make sure it\'s a valid tier list JSON file.');
        }
      };
      reader.readAsText(file);
    }
  };

  return (
    <div className="min-h-screen bg-gray-50 font-inter">
      <header className="bg-purple-700 text-white p-4 shadow-md">
        <div className="container mx-auto flex flex-col md:flex-row justify-between items-center">
          <div className="flex-1 mb-4 md:mb-0">
            <input
              type="text"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              className="bg-purple-800 text-white text-xl md:text-2xl font-bold p-2 rounded border border-purple-500 w-full md:w-auto"
              aria-label="Tier List Title"
            />
          </div>
          <div className="flex space-x-2">
            <button 
              onClick={() => setShowForm(true)}
              className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded flex items-center"
            >
              <Plus size={18} className="mr-1" /> Add Item
            </button>
            <button 
              onClick={handleExport}
              className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded flex items-center"
            >
              <Save size={18} className="mr-1" /> Save
            </button>
            <label className="bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded flex items-center cursor-pointer">
              <Upload size={18} className="mr-1" /> Load
              <input 
                type="file" 
                accept=".json" 
                onChange={handleImport} 
                className="hidden" 
              />
            </label>
            <button 
              onClick={handleReset}
              className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded flex items-center"
            >
              <Trash2 size={18} className="mr-1" /> Reset
            </button>
          </div>
        </div>
      </header>

      <main className="container mx-auto p-4">
        <DndContext 
          sensors={sensors}
          collisionDetection={closestCenter}
          onDragEnd={handleDragEnd}
        >
          <div className="space-y-4">
            {tierDefinitions.map((tier) => (
              <div key={tier.id} className="flex flex-col md:flex-row border rounded-lg overflow-hidden shadow-sm">
                <div className={`${tier.color} text-white font-bold p-4 flex items-center justify-center min-w-[80px]`}>
                  {tier.label}
                </div>
                <div className="flex-1 bg-white p-4">
                  <SortableContext 
                    items={tiers[tier.id].map(item => `${item.id}-item-${tier.id}`)}
                    strategy={rectSortingStrategy}
                  >
                    <div className="flex flex-wrap gap-2">
                      {tiers[tier.id].map((item) => (
                        <SortableItem 
                          key={`${item.id}-item-${tier.id}`}
                          id={`${item.id}-item-${tier.id}`}
                          item={item}
                          tierId={tier.id}
                          onDelete={handleDeleteItem}
                        />
                      ))}
                      {tiers[tier.id].length === 0 && (
                        <div className="text-gray-400 italic">Drop items here</div>
                      )}
                    </div>
                  </SortableContext>
                </div>
              </div>
            ))}
          </div>
        </DndContext>
      </main>

      {/* Add Item Modal */}
      {showForm && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
          <div className="bg-white rounded-lg shadow-xl p-6 w-full max-w-md">
            <div className="flex justify-between items-center mb-4">
              <h2 className="text-xl font-bold">Add New Item</h2>
              <button onClick={() => setShowForm(false)} className="text-gray-500 hover:text-gray-700">
                <X size={24} />
              </button>
            </div>
            <form onSubmit={handleAddItem}>
              <div className="mb-4">
                <label className="block text-gray-700 mb-2" htmlFor="item-name">
                  Item Name
                </label>
                <input
                  id="item-name"
                  type="text"
                  value={newItem.name}
                  onChange={(e) => setNewItem({...newItem, name: e.target.value})}
                  className="w-full p-2 border rounded"
                  placeholder="Enter item name"
                  required
                />
              </div>
              <div className="mb-4">
                <label className="block text-gray-700 mb-2" htmlFor="item-image">
                  Image URL (optional)
                </label>
                <input
                  id="item-image"
                  type="text"
                  value={newItem.image}
                  onChange={(e) => setNewItem({...newItem, image: e.target.value})}
                  className="w-full p-2 border rounded"
                  placeholder="https://example.com/image.jpg"
                />
              </div>
              <div className="flex justify-end space-x-2">
                <button
                  type="button"
                  onClick={() => setShowForm(false)}
                  className="px-4 py-2 border rounded text-gray-700 hover:bg-gray-100"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  className="px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700"
                >
                  Add Item
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      <footer className="bg-gray-100 p-4 mt-8 border-t">
        <div className="container mx-auto text-center text-gray-600">
          <p>Tier List Tuesday - Create and share your rankings!</p>
        </div>
      </footer>
    </div>
  );
}

// Sortable Item Component
function SortableItem({ id, item, tierId, onDelete }) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
  } = useSortable({ id });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  };

  return (
    <div
      ref={setNodeRef}
      style={style}
      {...attributes}
      {...listeners}
      className="bg-white border rounded-md shadow-sm p-2 cursor-move w-[100px] h-[100px] relative group"
    >
      <button 
        onClick={() => onDelete(tierId, id)}
        className="absolute top-1 right-1 bg-red-100 text-red-600 rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
        aria-label="Delete item"
      >
        <X size={14} />
      </button>
      
      {item.image ? (
        <div className="w-full h-[60px] mb-1 overflow-hidden flex items-center justify-center">
          <img 
            src={item.image} 
            alt={item.name} 
            className="max-w-full max-h-full object-contain"
            onError={(e) => {
              e.target.onerror = null;
              e.target.src = 'https://via.placeholder.com/80?text=No+Image';
            }}
          />
        </div>
      ) : (
        <div className="w-full h-[60px] mb-1 bg-gray-100 flex items-center justify-center text-gray-400 text-xs">
          No Image
        </div>
      )}
      
      <div className="text-center text-sm font-medium truncate" title={item.name}>
        {item.name}
      </div>
    </div>
  );
}