import React, { useState } from 'react';
import { Upload, Download, FileArchive, Image, Trash2, Plus, Package } from 'lucide-react';

export default function IconZipManager() {
  const [icons, setIcons] = useState([]);
  const [collections, setCollections] = useState([]);
  const [currentCollection, setCurrentCollection] = useState('');

  const handleFileUpload = (e) => {
    const files = Array.from(e.target.files);
    const validFiles = files.filter(f => 
      f.type.startsWith('image/') || f.name.endsWith('.ico')
    );

    validFiles.forEach(file => {
      const reader = new FileReader();
      reader.onload = (event) => {
        setIcons(prev => [...prev, {
          id: Date.now() + Math.random(),
          name: file.name,
          data: event.target.result,
          size: file.size,
          type: file.type
        }]);
      };
      reader.readAsDataURL(file);
    });
  };

  const createCollection = () => {
    if (!currentCollection.trim()) {
      alert('Please enter a collection name');
      return;
    }
    
    if (icons.length === 0) {
      alert('Please add some icons first');
      return;
    }

    setCollections(prev => [...prev, {
      id: Date.now(),
      name: currentCollection,
      icons: [...icons],
      created: new Date().toLocaleString()
    }]);
    
    setCurrentCollection('');
    setIcons([]);
    alert('Collection created successfully!');
  };

  const downloadAsZip = async (collectionIcons, collectionName) => {
    try {
      const JSZip = (await import('https://cdn.jsdelivr.net/npm/jszip@3.10.1/+esm')).default;
      const zip = new JSZip();
      
      collectionIcons.forEach(icon => {
        const base64Data = icon.data.split(',')[1];
        zip.file(icon.name, base64Data, { base64: true });
      });

      const content = await zip.generateAsync({ type: 'blob' });
      const url = URL.createObjectURL(content);
      const a = document.createElement('a');
      a.href = url;
      a.download = `${collectionName || 'icons'}.zip`;
      a.click();
      URL.revokeObjectURL(url);
    } catch (error) {
      alert('Error creating zip file: ' + error.message);
    }
  };

  const removeIcon = (id) => {
    setIcons(prev => prev.filter(icon => icon.id !== id));
  };

  const deleteCollection = (id) => {
    setCollections(prev => prev.filter(col => col.id !== id));
  };

  const formatSize = (bytes) => {
    if (bytes < 1024) return bytes + ' B';
    if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
    return (bytes / 1048576).toFixed(1) + ' MB';
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-6">
      <div className="max-w-6xl mx-auto">
        <div className="bg-white rounded-lg shadow-lg p-8 mb-6">
          <div className="flex items-center gap-3 mb-6">
            <Package className="w-8 h-8 text-indigo-600" />
            <h1 className="text-3xl font-bold text-gray-800">Icon & Zip Manager</h1>
          </div>

          {/* Upload Section */}
          <div className="mb-8">
            <label className="flex flex-col items-center justify-center w-full h-40 border-2 border-dashed border-indigo-300 rounded-lg cursor-pointer bg-indigo-50 hover:bg-indigo-100 transition">
              <div className="flex flex-col items-center justify-center pt-5 pb-6">
                <Upload className="w-12 h-12 text-indigo-500 mb-3" />
                <p className="text-sm text-gray-600 font-semibold">Click to upload icons</p>
                <p className="text-xs text-gray-500 mt-1">PNG, JPG, SVG, ICO files supported</p>
              </div>
              <input 
                type="file" 
                className="hidden" 
                multiple 
                accept="image/*,.ico"
                onChange={handleFileUpload}
              />
            </label>
          </div>

          {/* Current Icons */}
          {icons.length > 0 && (
            <div className="mb-8">
              <h2 className="text-xl font-semibold text-gray-800 mb-4 flex items-center gap-2">
                <Image className="w-5 h-5" />
                Current Icons ({icons.length})
              </h2>
              <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mb-6">
                {icons.map(icon => (
                  <div key={icon.id} className="relative bg-gray-50 rounded-lg p-3 border border-gray-200 hover:border-indigo-400 transition">
                    <button
                      onClick={() => removeIcon(icon.id)}
                      className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-1 hover:bg-red-600 transition"
                    >
                      <Trash2 className="w-3 h-3" />
                    </button>
                    <img src={icon.data} alt={icon.name} className="w-full h-20 object-contain mb-2" />
                    <p className="text-xs text-gray-600 truncate" title={icon.name}>{icon.name}</p>
                    <p className="text-xs text-gray-400">{formatSize(icon.size)}</p>
                  </div>
                ))}
              </div>

              {/* Create Collection */}
              <div className="flex gap-3">
                <input
                  type="text"
                  placeholder="Collection name..."
                  value={currentCollection}
                  onChange={(e) => setCurrentCollection(e.target.value)}
                  className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
                />
                <button
                  onClick={createCollection}
                  className="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center gap-2"
                >
                  <Plus className="w-4 h-4" />
                  Create Collection
                </button>
              </div>
            </div>
          )}
        </div>

        {/* Collections */}
        {collections.length > 0 && (
          <div className="bg-white rounded-lg shadow-lg p-8">
            <h2 className="text-2xl font-bold text-gray-800 mb-6 flex items-center gap-2">
              <FileArchive className="w-6 h-6" />
              Icon Collections ({collections.length})
            </h2>
            <div className="space-y-4">
              {collections.map(collection => (
                <div key={collection.id} className="border border-gray-200 rounded-lg p-6 hover:border-indigo-300 transition">
                  <div className="flex justify-between items-start mb-4">
                    <div>
                      <h3 className="text-lg font-semibold text-gray-800">{collection.name}</h3>
                      <p className="text-sm text-gray-500">
                        {collection.icons.length} icons • Created {collection.created}
                      </p>
                    </div>
                    <div className="flex gap-2">
                      <button
                        onClick={() => downloadAsZip(collection.icons, collection.name)}
                        className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition flex items-center gap-2"
                      >
                        <Download className="w-4 h-4" />
                        Download ZIP
                      </button>
                      <button
                        onClick={() => deleteCollection(collection.id)}
                        className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition"
                      >
                        <Trash2 className="w-4 h-4" />
                      </button>
                    </div>
                  </div>
                  <div className="grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 gap-2">
                    {collection.icons.map(icon => (
                      <div key={icon.id} className="bg-gray-50 rounded p-2 border border-gray-200">
                        <img src={icon.data} alt={icon.name} className="w-full h-12 object-contain" />
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {collections.length === 0 && icons.length === 0 && (
          <div className="bg-white rounded-lg shadow-lg p-12 text-center">
            <FileArchive className="w-16 h-16 text-gray-400 mx-auto mb-4" />
            <h3 className="text-xl font-semibold text-gray-600 mb-2">No collections yet</h3>
            <p className="text-gray-500">Upload some icons to get started!</p>
          </div>
        )}
      </div>
    </div>
  );
}