import React, { useState, useEffect } from 'react';
import { 
  Backpack, 
  Paintbrush, 
  FolderOpen, 
  Map, 
  Settings, 
  Search, 
  X, 
  Zap, 
  Hammer, 
  Globe, 
  ChevronRight,
  Upload,
  Heart
} from 'lucide-react';

// --- Mock Data ---

const HOTBAR_ITEMS = [
  { id: 1, icon: '🧱', name: 'Brick', count: 64 },
  { id: 2, icon: '🪵', name: 'Wood', count: 32 },
  { id: 3, icon: '🪨', name: 'Stone', count: 12 },
  { id: 4, icon: '🪜', name: 'Ladder', count: 5 },
  { id: 5, icon: '🚪', name: 'Door', count: 2 },
  { id: 6, icon: '🔦', name: 'Torch', count: 15 },
  { id: 7, icon: '⚔️', name: 'Sword', count: 1 },
  { id: 8, icon: null, name: null, count: 0 },
  { id: 9, icon: null, name: null, count: 0 },
  { id: 0, icon: null, name: null, count: 0 },
];

const CREATIONS = [
  { id: 1, name: 'Chaos Town Hall', likes: 120, tags: ['Structure'] },
  { id: 2, name: 'Underground Base', likes: 45, tags: ['Base'] },
  { id: 3, name: 'Hello Kitty Pixel Art', likes: 890, tags: ['Art'] },
];

const WARP_LOCATIONS = [
  { id: 1, name: 'Spawn Point', type: 'Public' },
  { id: 2, name: 'Chaos Town', type: 'City' },
  { id: 3, name: 'Deep Mines', type: 'Adventure' },
  { id: 4, name: 'Cloud City', type: 'Sky' },
];

// --- Components ---

const Tooltip = ({ text, children }) => (
  <div className="group relative flex items-center justify-center">
    {children}
    <div className="absolute bottom-full mb-2 hidden whitespace-nowrap rounded bg-black/80 px-2 py-1 text-xs text-white backdrop-blur-sm transition-opacity group-hover:block">
      {text}
      <div className="absolute -bottom-1 left-1/2 -translate-x-1/2 border-4 border-transparent border-t-black/80"></div>
    </div>
  </div>
);

const WindowBase = ({ title, icon: Icon, onClose, children }) => (
  <div className="animate-in fade-in zoom-in-95 pointer-events-auto absolute left-1/2 top-1/2 flex h-96 w-[500px] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-2xl border border-white/20 bg-black/60 text-white shadow-2xl backdrop-blur-xl duration-200">
    {/* Header */}
    <div className="flex items-center justify-between border-b border-white/10 bg-white/5 px-4 py-3">
      <div className="flex items-center gap-2">
        <Icon size={18} className="text-yellow-400" />
        <span className="font-bold tracking-wide text-white/90">{title}</span>
      </div>
      <button 
        onClick={onClose}
        className="rounded-full p-1 text-white/50 hover:bg-white/10 hover:text-white transition-colors"
      >
        <X size={16} />
      </button>
    </div>
    {/* Content */}
    <div className="flex-1 overflow-y-auto p-4 custom-scrollbar">
      {children}
    </div>
  </div>
);

const InventoryWindow = ({ onClose }) => (
  <WindowBase title="Backpack" icon={Backpack} onClose={onClose}>
    <div className="grid grid-cols-5 gap-3">
      {Array.from({ length: 25 }).map((_, i) => (
        <div key={i} className="aspect-square cursor-pointer rounded-lg border border-white/10 bg-white/5 p-2 transition-all hover:border-yellow-400/50 hover:bg-white/10 flex items-center justify-center text-2xl">
           {i < HOTBAR_ITEMS.length && HOTBAR_ITEMS[i].icon ? HOTBAR_ITEMS[i].icon : ''}
        </div>
      ))}
    </div>
  </WindowBase>
);

const PaintWindow = ({ onClose }) => (
  <WindowBase title="Paint Studio" icon={Paintbrush} onClose={onClose}>
    <div className="flex h-full gap-4">
      <div className="w-1/3 flex flex-col gap-2 border-r border-white/10 pr-4">
        <div className="text-xs font-bold uppercase text-white/40">Tools</div>
        {['Brush', 'Fill', 'Eraser', 'Picker'].map(tool => (
          <button key={tool} className="w-full rounded bg-white/5 px-3 py-2 text-left text-sm text-white/80 hover:bg-yellow-500/20 hover:text-yellow-400 transition-colors">
            {tool}
          </button>
        ))}
        <div className="mt-4 text-xs font-bold uppercase text-white/40">Palette</div>
        <div className="grid grid-cols-4 gap-1">
          {['#ef4444', '#f97316', '#eab308', '#22c55e', '#3b82f6', '#a855f7', '#ec4899', '#ffffff'].map(color => (
            <div key={color} className="aspect-square rounded border border-white/20" style={{backgroundColor: color}}></div>
          ))}
        </div>
      </div>
      <div className="flex-1 flex items-center justify-center bg-black/30 rounded-lg border border-white/5 border-dashed">
        <span className="text-white/30 text-sm">Canvas Preview</span>
      </div>
    </div>
  </WindowBase>
);

const CreationsWindow = ({ onClose }) => (
  <WindowBase title="My Creations" icon={FolderOpen} onClose={onClose}>
    <div className="flex flex-col gap-2">
      {CREATIONS.map((creation) => (
        <div key={creation.id} className="group flex items-center justify-between rounded-lg border border-white/5 bg-white/5 p-3 hover:border-white/20 hover:bg-white/10 transition-all">
          <div className="flex items-center gap-3">
            <div className="flex h-10 w-10 items-center justify-center rounded bg-gradient-to-br from-indigo-500 to-purple-600 text-lg shadow-inner">
              🏗️
            </div>
            <div>
              <div className="font-medium text-white">{creation.name}</div>
              <div className="flex gap-2 text-xs text-white/50">
                {creation.tags.map(tag => <span key={tag}>#{tag}</span>)}
              </div>
            </div>
          </div>
          <div className="flex items-center gap-1 text-xs text-pink-400 font-medium bg-pink-500/10 px-2 py-1 rounded-full">
            <Heart size={12} fill="currentColor" /> {creation.likes}
          </div>
        </div>
      ))}
      <button className="mt-2 w-full rounded border border-dashed border-white/20 py-3 text-sm text-white/50 hover:border-yellow-400 hover:text-yellow-400 transition-colors">
        + Save Current Build
      </button>
    </div>
  </WindowBase>
);

const WarpWindow = ({ onClose }) => (
  <WindowBase title="Warp Network" icon={Globe} onClose={onClose}>
    <div className="grid grid-cols-2 gap-3">
      {WARP_LOCATIONS.map((loc) => (
        <button key={loc.id} className="relative overflow-hidden rounded-xl border border-white/10 bg-gradient-to-b from-white/10 to-black/40 p-4 text-left hover:border-cyan-400/50 hover:shadow-[0_0_15px_rgba(34,211,238,0.2)] transition-all group">
          <div className="relative z-10">
            <div className="mb-1 text-xs font-bold uppercase tracking-wider text-cyan-400">{loc.type}</div>
            <div className="text-lg font-bold text-white">{loc.name}</div>
          </div>
          <Map className="absolute -bottom-2 -right-2 text-white/5 group-hover:text-cyan-400/20 transition-colors" size={64} />
        </button>
      ))}
    </div>
  </WindowBase>
);

// --- Main App Component ---

export default function App() {
  const [activeSlot, setActiveSlot] = useState(0);
  const [activeWindow, setActiveWindow] = useState(null); // 'inventory', 'paint', 'creations', 'warp'
  const [bgImage, setBgImage] = useState(null);

  const toggleWindow = (windowName) => {
    setActiveWindow(activeWindow === windowName ? null : windowName);
  };

  const handleImageUpload = (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => setBgImage(e.target.result);
      reader.readAsDataURL(file);
    }
  };

  return (
    <div className="relative h-screen w-screen overflow-hidden bg-[#2a2a2a] font-sans selection:bg-yellow-500/30">
      
      {/* Background Layer */}
      {bgImage ? (
        <div 
          className="absolute inset-0 bg-cover bg-center bg-no-repeat transition-opacity duration-500"
          style={{ backgroundImage: `url(${bgImage})` }}
        />
      ) : (
        <div className="absolute inset-0 flex flex-col items-center justify-center bg-gradient-to-br from-slate-800 to-slate-900 text-white/30">
          <div className="mb-4 text-6xl opacity-20">🎮</div>
          <p className="mb-6 max-w-md text-center">To see the UI overlay on your game, upload the screenshot you provided.</p>
          <label className="flex cursor-pointer items-center gap-2 rounded-full bg-yellow-500 px-6 py-3 font-bold text-black hover:bg-yellow-400 hover:scale-105 transition-all shadow-lg shadow-yellow-500/20">
            <Upload size={18} />
            <span>Upload Screenshot</span>
            <input type="file" accept="image/*" className="hidden" onChange={handleImageUpload} />
          </label>
        </div>
      )}

      {/* Overlay: Gradient for visibility */}
      <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-black/30" />

      {/* --- UI LAYER --- */}
      <div className="relative z-10 flex h-full flex-col justify-between p-6">
        
        {/* Top Bar */}
        <div className="flex items-start justify-between">
          
          {/* Top Left: Chat / Notifications Area Mockup */}
          <div className="pointer-events-auto flex flex-col gap-2 opacity-80 hover:opacity-100 transition-opacity">
            <div className="rounded bg-black/40 px-3 py-1 text-sm text-yellow-300 backdrop-blur-sm">
              <span className="font-bold">System:</span> Welcome to Chaos Town!
            </div>
            <div className="rounded bg-black/40 px-3 py-1 text-sm text-white backdrop-blur-sm">
              <span className="font-bold text-blue-400">Wizirdi:</span> anyone got extra wood?
            </div>
          </div>

          {/* Top Right: System Menu */}
          <div className="pointer-events-auto flex gap-2">
            <Tooltip text="Warp Network">
              <button 
                onClick={() => toggleWindow('warp')}
                className={`flex h-12 w-12 items-center justify-center rounded-full border border-white/10 bg-black/40 text-white shadow-lg backdrop-blur-md transition-all hover:scale-110 hover:border-cyan-400 hover:text-cyan-400 ${activeWindow === 'warp' ? 'border-cyan-400 text-cyan-400 bg-black/80' : ''}`}
              >
                <Globe size={20} />
              </button>
            </Tooltip>
            <Tooltip text="Settings">
              <button className="flex h-12 w-12 items-center justify-center rounded-full border border-white/10 bg-black/40 text-white shadow-lg backdrop-blur-md transition-all hover:rotate-90 hover:bg-white/10">
                <Settings size={20} />
              </button>
            </Tooltip>
          </div>
        </div>

        {/* Center Windows Area (Pointer events through) */}
        <div className="pointer-events-none relative flex-1">
            {activeWindow === 'inventory' && <InventoryWindow onClose={() => setActiveWindow(null)} />}
            {activeWindow === 'paint' && <PaintWindow onClose={() => setActiveWindow(null)} />}
            {activeWindow === 'creations' && <CreationsWindow onClose={() => setActiveWindow(null)} />}
            {activeWindow === 'warp' && <WarpWindow onClose={() => setActiveWindow(null)} />}
        </div>

        {/* Bottom Bar Area */}
        <div className="flex items-end justify-center gap-6">
          
          {/* Left Action Cluster */}
          <div className="pointer-events-auto mb-2 flex gap-2">
             <Tooltip text="My Creations">
              <button 
                onClick={() => toggleWindow('creations')}
                className={`group flex h-14 w-14 items-center justify-center rounded-2xl border border-white/10 bg-black/40 text-white shadow-lg backdrop-blur-md transition-all hover:-translate-y-1 hover:border-pink-500 hover:bg-black/60 ${activeWindow === 'creations' ? 'border-pink-500 bg-black/80' : ''}`}
              >
                <FolderOpen size={24} className="group-hover:text-pink-400 transition-colors" />
              </button>
            </Tooltip>
             <Tooltip text="Paint Studio">
              <button 
                onClick={() => toggleWindow('paint')}
                className={`group flex h-14 w-14 items-center justify-center rounded-2xl border border-white/10 bg-black/40 text-white shadow-lg backdrop-blur-md transition-all hover:-translate-y-1 hover:border-purple-500 hover:bg-black/60 ${activeWindow === 'paint' ? 'border-purple-500 bg-black/80' : ''}`}
              >
                <Paintbrush size={24} className="group-hover:text-purple-400 transition-colors" />
              </button>
            </Tooltip>
          </div>

          {/* Center: HOTBAR */}
          <div className="pointer-events-auto flex flex-col items-center gap-1">
            {/* Hotbar Slots */}
            <div className="flex items-end gap-2 rounded-2xl border border-white/10 bg-black/40 p-2 px-3 shadow-2xl backdrop-blur-xl">
              {HOTBAR_ITEMS.map((item, index) => {
                const isActive = index === activeSlot;
                return (
                  <button
                    key={index}
                    onClick={() => setActiveSlot(index)}
                    className={`
                      group relative flex h-16 w-16 flex-col items-center justify-center rounded-xl border-2 transition-all duration-200
                      ${isActive 
                        ? 'h-20 w-20 -translate-y-4 border-yellow-400 bg-yellow-500/20 shadow-[0_0_20px_rgba(234,179,8,0.3)] z-10' 
                        : 'border-white/5 bg-white/5 hover:border-white/30 hover:bg-white/10'}
                    `}
                  >
                    {/* Key Hint */}
                    <span className={`absolute top-1 right-2 text-[10px] font-bold ${isActive ? 'text-yellow-200' : 'text-white/30'}`}>
                      {index === 9 ? 0 : index + 1}
                    </span>

                    {/* Icon/Content */}
                    {item.icon ? (
                      <>
                        <span className={`text-2xl drop-shadow-md ${isActive ? 'scale-125' : 'scale-100'} transition-transform`}>
                          {item.icon}
                        </span>
                        <span className={`absolute bottom-1 right-2 text-xs font-bold text-white shadow-black drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)]`}>
                          {item.count}
                        </span>
                      </>
                    ) : (
                      <div className="h-2 w-2 rounded-full bg-white/5"></div>
                    )}
                    
                    {/* Hover Name Label */}
                    {item.name && (
                      <div className="absolute -top-10 left-1/2 hidden -translate-x-1/2 whitespace-nowrap rounded bg-black/90 px-2 py-1 text-xs text-white opacity-0 transition-opacity group-hover:block group-hover:opacity-100">
                        {item.name}
                      </div>
                    )}
                  </button>
                );
              })}
            </div>
            {/* XP / Level Thin Bar (Optional aesthetic) */}
             <div className="h-1 w-[90%] overflow-hidden rounded-full bg-white/10">
                <div className="h-full w-3/4 rounded-full bg-gradient-to-r from-yellow-600 to-yellow-400 shadow-[0_0_10px_rgba(250,204,21,0.5)]"></div>
             </div>
          </div>

          {/* Right Action Cluster */}
          <div className="pointer-events-auto mb-2 flex gap-2">
             <Tooltip text="Inventory">
              <button 
                onClick={() => toggleWindow('inventory')}
                className={`group flex h-14 w-14 items-center justify-center rounded-2xl border border-white/10 bg-black/40 text-white shadow-lg backdrop-blur-md transition-all hover:-translate-y-1 hover:border-green-500 hover:bg-black/60 ${activeWindow === 'inventory' ? 'border-green-500 bg-black/80' : ''}`}
              >
                <div className="relative">
                  <Backpack size={24} className="group-hover:text-green-400 transition-colors" />
                  <div className="absolute -right-2 -top-2 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[9px] font-bold">1</div>
                </div>
              </button>
            </Tooltip>
          </div>

        </div>
      </div>
    </div>
  );
}