import React, { useState } from 'react';
import { Camera, Shirt, Trash2, Palette, Zap, Plus, X } from 'lucide-react';

export default function App() {
  const [activeTab, setActiveTab] = useState('outfits');
  const [wardrobe, setWardrobe] = useState({
    tops: [],
    bottoms: [],
    turbans: []
  });

  const [selectedOutfit, setSelectedOutfit] = useState({
    topIndex: 0,
    bottomIndex: 0,
    turbanIndex: 0
  });

  const handleFileUpload = (category, event) => {
    const files = event.target.files;
    if (!files || files.length === 0) return;
    Array.from(files).forEach(file => {
      const reader = new FileReader();
      reader.onloadend = () => {
        const newItem = { id: Date.now() + Math.random(), src: reader.result, color: '#ffffff' };
        setWardrobe(prev => ({ ...prev, [category]: [...prev[category], newItem] }));
      };
      reader.readAsDataURL(file);
    });
  };

  const updateTurbanColor = (id, newColor) => {
    setWardrobe(prev => ({
      ...prev,
      turbans: prev.turbans.map(t => t.id === id ? { ...t, color: newColor } : t)
    }));
  };

  const deleteItem = (category, id) => {
    setWardrobe(prev => ({
      ...prev,
      [category]: prev[category].filter(item => item.id !== id)
    }));
  };

  const tabs = [
    { id: 'outfits', label: 'Outfits', icon: Zap },
    { id: 'tops', label: 'Tops', icon: Shirt },
    { id: 'bottoms', label: 'Bottoms', icon: Shirt },
    { id: 'turbans', label: 'Turbans', icon: Palette }
  ];

  const selectedTop = wardrobe.tops[selectedOutfit.topIndex];
  const selectedBottom = wardrobe.bottoms[selectedOutfit.bottomIndex];
  const selectedTurban = wardrobe.turbans[selectedOutfit.turbanIndex];

  return (
    <div className="min-h-screen bg-gray-50 p-4 font-sans max-w-md mx-auto text-gray-900">
      <header className="mb-8 pt-4">
        <h1 className="text-3xl font-semibold tracking-tight">Wardrobe</h1>
      </header>

      <nav className="flex space-x-1 bg-gray-200/50 p-1 rounded-2xl mb-8 backdrop-blur-md">
        {tabs.map(tab => (
          <button
            key={tab.id}
            onClick={() => setActiveTab(tab.id)}
            className={`flex-1 flex flex-col items-center py-2.5 rounded-xl transition-all duration-300 ${activeTab === tab.id ? 'bg-white shadow-sm text-black' : 'text-gray-500'}`}
          >
            <tab.icon size={20} className="mb-0.5" />
            <span className="text-[10px] font-medium tracking-wide uppercase">{tab.label}</span>
          </button>
        ))}
      </nav>

      {activeTab === 'outfits' ? (
        <div className="space-y-8">
          <div className="bg-white p-6 rounded-3xl shadow-sm border border-gray-100 flex flex-col items-center">
            <div className="w-24 h-24 rounded-full overflow-hidden mb-6 shadow-inner border border-gray-100">
              {selectedTurban ? (
                <img src={selectedTurban.src} className="w-full h-full object-cover" style={{ filter: `sepia(1) hue-rotate(${parseInt(selectedTurban.color.slice(1), 16) % 360}deg) saturate(2)` }} />
              ) : <div className="h-full bg-gray-100" />}
            </div>
            
            <div className="flex flex-col w-36 h-72 space-y-px">
              <div className="flex-1 rounded-t-3xl overflow-hidden bg-gray-100">
                {selectedTop && <img src={selectedTop.src} className="w-full h-full object-cover" />}
              </div>
              <div className="flex-1 rounded-b-3xl overflow-hidden bg-gray-100">
                {selectedBottom && <img src={selectedBottom.src} className="w-full h-full object-cover" />}
              </div>
            </div>

            {selectedTurban && (
              <div className="mt-6 flex items-center bg-gray-100 px-4 py-2 rounded-full">
                <span className="text-xs font-medium mr-3 uppercase tracking-wider text-gray-500">Tint</span>
                <input type="color" value={selectedTurban.color} onChange={(e) => updateTurbanColor(selectedTurban.id, e.target.value)} className="w-8 h-8 rounded-full border-0 cursor-pointer" />
              </div>
            )}
          </div>

          {['tops', 'bottoms', 'turbans'].map(cat => (
            <section key={cat}>
              <h2 className="text-lg font-semibold mb-3 px-1 capitalize">{cat}</h2>
              <div className="flex space-x-3 overflow-x-auto pb-4 scrollbar-hide">
                {wardrobe[cat].map((item, idx) => (
                  <div key={item.id} onClick={() => setSelectedOutfit(p => ({...p, [`${cat.slice(0,-1)}Index`]: idx}))} 
                       className={`w-24 h-24 rounded-2xl overflow-hidden flex-shrink-0 cursor-pointer border-4 ${selectedOutfit[`${cat.slice(0,-1)}Index`] === idx ? 'border-blue-500 scale-105' : 'border-transparent'}`}>
                    <img src={item.src} className="w-full h-full object-cover" style={cat === 'turbans' ? { filter: `sepia(1) hue-rotate(${parseInt(item.color.slice(1), 16) % 360}deg) saturate(2)` } : {}} />
                  </div>
                ))}
              </div>
            </section>
          ))}
        </div>
      ) : (
        <div className="space-y-6">
          <label className="flex items-center justify-center w-full py-8 border-2 border-dashed border-gray-300 rounded-3xl cursor-pointer hover:bg-gray-100 transition-colors">
            <Plus className="text-gray-400 mr-2" />
            <span className="text-gray-500 font-medium">Add {activeTab}</span>
            <input type="file" className="hidden" accept="image/*" multiple onChange={(e) => handleFileUpload(activeTab, e)} />
          </label>

          <div className="grid grid-cols-2 gap-4">
            {wardrobe[activeTab].map(item => (
              <div key={item.id} className="relative group rounded-3xl overflow-hidden shadow-sm aspect-square bg-white border border-gray-100">
                <img src={item.src} className="w-full h-full object-cover" style={activeTab === 'turbans' ? { filter: `sepia(1) hue-rotate(${parseInt(item.color.slice(1), 16) % 360}deg) saturate(2)` } : {}} />
                <button onClick={() => deleteItem(activeTab, item.id)} className="absolute top-3 right-3 p-1.5 bg-black/20 backdrop-blur-md rounded-full text-white">
                  <X size={16} />
                </button>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}