import React, { useState, useRef, useEffect } from 'react';
import { 
  Coins, 
  ShoppingBag, 
  Utensils, 
  Bike,
  ChefHat,
  BellRing,
  Play,
  Zap,
  Grid,
  Hammer,
  Eraser,
  TrendingUp,
  CheckCircle2,
  Box,
  RotateCcw,
  Trash2,
  Move,
  Hand,
  MousePointer2
} from 'lucide-react';

// --- CONFIG ---

const UPGRADES = [
  { id: 'neon', name: 'Neon Sign', cost: 250, icon: '✨', desc: 'x1.5 Tip Multiplier', effect: { type: 'mult', value: 1.5 } },
  { id: 'scooter_red', name: 'Turbo Scooter', cost: 350, icon: '🛵', desc: 'Speed Bonus (+20)', effect: { type: 'flat', value: 20 } },
  { id: 'jukebox', name: 'Jukebox', cost: 300, icon: '🎵', desc: 'Party Bonus (+10)', effect: { type: 'flat', value: 10 } },
];

const BLOCKS = [
  { id: 'brick', name: 'Red Brick', cost: 10, color: '#ef4444', side: '#b91c1c', top: '#f87171' },
  { id: 'wood', name: 'Oak Wood', cost: 10, color: '#d97706', side: '#92400e', top: '#fbbf24' },
  { id: 'stone', name: 'Stone', cost: 10, color: '#94a3b8', side: '#64748b', top: '#cbd5e1' },
  { id: 'grass', name: 'Grass', cost: 10, color: '#22c55e', side: '#15803d', top: '#4ade80' },
  { id: 'water', name: 'Water', cost: 10, color: '#3b82f6', side: '#1d4ed8', top: '#60a5fa' },
  { id: 'gold', name: 'Gold', cost: 50, color: '#eab308', side: '#a16207', top: '#facc15' },
  { id: 'glass', name: 'Ice/Glass', cost: 15, color: 'rgba(56, 189, 248, 0.4)', side: 'rgba(2, 132, 199, 0.4)', top: 'rgba(125, 211, 252, 0.4)' },
  { id: 'leaves', name: 'Leaves', cost: 10, color: '#16a34a', side: '#14532d', top: '#22c55e' },
];

const INGREDIENTS = [
  { id: 'dough', icon: '🍘', name: 'Dough' },
  { id: 'sauce', icon: '🍅', name: 'Sauce' },
  { id: 'cheese', icon: '🧀', name: 'Cheese' },
  { id: 'pep', icon: '🍕', name: 'Pepperoni' },
  { id: 'mush', icon: '🍄', name: 'Mushroom' },
  { id: 'basil', icon: '🌿', name: 'Basil' },
];

const RECIPES = [
  { name: 'Cheese Pizza', req: ['dough', 'sauce', 'cheese'] },
  { name: 'Pepperoni', req: ['dough', 'sauce', 'cheese', 'pep'] },
  { name: 'Veggie', req: ['dough', 'sauce', 'cheese', 'mush', 'basil'] },
];

const GRID_SIZE = 10;
const BLOCK_SIZE = 40; 
const DRAG_THRESHOLD = 5; // Pixels mouse must move to count as "Rotation"

export default function PizzaTimeDash() {
  // --- STATE ---
  const [coins, setCoins] = useState(0); 
  const [mode, setMode] = useState('kitchen'); 
  const [phase, setPhase] = useState('IDLE'); 
  
  // Inventory
  const [upgrades, setUpgrades] = useState([]);
  const [blockInventory, setBlockInventory] = useState({ brick: 20, wood: 20, grass: 20 }); 
  
  // 3D Building Data
  const [voxels, setVoxels] = useState({});
  const [selectedBlockId, setSelectedBlockId] = useState('brick');
  const [isEraser, setIsEraser] = useState(false);
  
  // Camera & Interaction State
  const [viewRot, setViewRot] = useState({ x: 60, z: 45 });
  
  // Drag vs Click Tracking
  const dragStartPos = useRef({ x: 0, y: 0 });
  const isRotating = useRef(false);

  // Game Data
  const [currentOrder, setCurrentOrder] = useState(null);
  const [cookedIngredients, setCookedIngredients] = useState([]);
  const [targetTime, setTargetTime] = useState({ h: 12, m: 0 });
  const [playerTime, setPlayerTime] = useState({ h: 12, m: 0 });
  const [message, setMessage] = useState("Welcome! Serve pizzas to earn blocks.");
  const [streak, setStreak] = useState(0);
  const [lastRewardDetails, setLastRewardDetails] = useState(null);

  // --- ACTIONS ---
  const startOrder = () => {
    const randomRecipe = RECIPES[Math.floor(Math.random() * RECIPES.length)];
    const h = Math.floor(Math.random() * 12) + 1;
    const m = Math.floor(Math.random() * 12) * 5;
    
    setCurrentOrder({ recipe: randomRecipe, due: { h, m } });
    setTargetTime({ h, m });
    setPlayerTime({ h: 12, m: 0 });
    setCookedIngredients([]);
    setPhase('NOTIFICATION');
    setMessage("New Online Order Received!");
    setMode('kitchen');
  };

  const acceptOrder = () => {
    setPhase('COOKING');
    setMessage(`Cook a ${currentOrder.recipe.name}!`);
  };

  const addIngredient = (ingId) => {
    const neededIngredient = currentOrder.recipe.req[cookedIngredients.length];
    
    if (ingId === neededIngredient) {
      const newList = [...cookedIngredients, ingId];
      setCookedIngredients(newList);
      
      if (newList.length === currentOrder.recipe.req.length) {
        setTimeout(() => {
          setPhase('CLOCK');
          setMessage(`Set delivery time to ${formatTime(targetTime)}!`);
        }, 500);
      }
    } else {
      setMessage("Wrong ingredient!");
      setTimeout(() => setMessage(`Cook a ${currentOrder.recipe.name}!`), 1000);
    }
  };

  const attemptDelivery = () => {
    if (playerTime.h === targetTime.h && playerTime.m === targetTime.m) {
      setPhase('DELIVERING');
      setMessage("Order on the way!");
      
      setTimeout(() => {
        let base = 20 + (streak * 2);
        let bonus = 0;
        let multiplier = 1;
        let bonusBreakdown = [];

        UPGRADES.forEach(item => {
          if (upgrades.includes(item.id)) {
            if (item.effect.type === 'flat') {
              bonus += item.effect.value;
              bonusBreakdown.push({ name: item.name, val: `+${item.effect.value}` });
            }
            if (item.effect.type === 'mult') {
              multiplier *= item.effect.value;
              bonusBreakdown.push({ name: item.name, val: `x${item.effect.value}` });
            }
          }
        });

        const total = Math.floor((base + bonus) * multiplier);
        setLastRewardDetails({ base, bonusBreakdown, total, multiplier });
        setCoins(prev => prev + total);
        setStreak(prev => prev + 1);
        setPhase('SUMMARY'); 
        setMessage(`Delivered! Earned ${total} Coins!`);
      }, 2500); 
    } else {
      setStreak(0);
      setMessage("Time is wrong!");
    }
  };

  const buyBlock = (blockId, amount = 5) => {
    const block = BLOCKS.find(b => b.id === blockId);
    const totalCost = block.cost * amount;
    
    if (coins >= totalCost) {
      setCoins(prev => prev - totalCost);
      setBlockInventory(prev => ({ ...prev, [blockId]: (prev[blockId] || 0) + amount }));
    }
  };

  const buyUpgrade = (item) => {
    if (coins >= item.cost && !upgrades.includes(item.id)) {
      setCoins(prev => prev - item.cost);
      setUpgrades(prev => [...prev, item.id]);
    }
  };

  // --- 3D INTERACTION LOGIC ---

  const handlePointerDown = (e) => {
    if (mode !== 'build') return;
    
    // Start tracking drag
    dragStartPos.current = { x: e.clientX, y: e.clientY };
    isRotating.current = false;
  };

  const handlePointerMove = (e) => {
    if (mode !== 'build') return;
    
    // Calculate distance moved
    const deltaX = e.clientX - dragStartPos.current.x;
    const deltaY = e.clientY - dragStartPos.current.y;
    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);

    // If we are holding down the button (e.buttons === 1 means left click is held)
    if (e.buttons === 1) {
      if (distance > DRAG_THRESHOLD) {
        isRotating.current = true; // We moved enough to count as a drag/rotate
      }

      if (isRotating.current) {
        // Apply rotation
        setViewRot(prev => ({
          x: Math.max(10, Math.min(85, prev.x - (e.movementY * 0.5))),
          z: prev.z - (e.movementX * 0.5)
        }));
      }
    }
  };

  const handlePointerUp = () => {
    // Reset drag state handled by the individual block clicks
    // but we can clean up here if needed
  };

  const placeVoxel = (x, y, z) => {
    // CRITICAL: If we were just rotating the camera, DO NOT PLACE A BLOCK
    if (isRotating.current) return;

    const key = `${x},${y},${z}`;
    // Bounds check
    if (x < 0 || x >= GRID_SIZE || y < 0 || y >= GRID_SIZE || z < 0 || z > 12) return;

    if (isEraser) {
      if (voxels[key]) {
        const blockId = voxels[key].id;
        setBlockInventory(prev => ({...prev, [blockId]: (prev[blockId] || 0) + 1}));
        const newVoxels = { ...voxels };
        delete newVoxels[key];
        setVoxels(newVoxels);
      }
    } else {
      if (voxels[key]) return; // Already a block there
      if ((blockInventory[selectedBlockId] || 0) > 0) {
        setVoxels(prev => ({ ...prev, [key]: { id: selectedBlockId } }));
        setBlockInventory(prev => ({ ...prev, [selectedBlockId]: prev[selectedBlockId] - 1 }));
      }
    }
  };

  const clearAll = () => { if (window.confirm("Clear all blocks?")) setVoxels({}); };
  const closeSummary = () => { setPhase('IDLE'); setLastRewardDetails(null); };
  
  const adjustMinutes = (amount) => {
    let newM = playerTime.m + amount;
    let newH = playerTime.h;
    if (newM >= 60) { newM = 0; newH = newH === 12 ? 1 : newH + 1; } 
    else if (newM < 0) { newM = 55; newH = newH === 1 ? 12 : newH - 1; }
    setPlayerTime({ h: newH, m: newM });
  };
  const adjustHours = (amount) => {
    let newH = playerTime.h + amount;
    if (newH > 12) newH = 1;
    if (newH < 1) newH = 12;
    setPlayerTime({ ...playerTime, h: newH });
  };
  const formatTime = (t) => {
    const m = t.m < 10 ? `0${t.m}` : t.m;
    return `${t.h}:${m}`;
  };
  const hourRotation = (playerTime.h % 12) * 30 + (playerTime.m * 0.5); 
  const minuteRotation = playerTime.m * 6;

  // --- RENDER ---

  return (
    <div 
      className="min-h-screen bg-neutral-100 font-sans text-slate-800 flex flex-col md:flex-row overflow-hidden select-none"
      onPointerUp={handlePointerUp}
      onPointerMove={handlePointerMove}
    >
      
      {/* LEFT SIDE: 3D SCENE */}
      <div 
        className={`flex-1 relative bg-sky-200 overflow-hidden flex flex-col items-center touch-none transition-cursor duration-200 cursor-move`}
        onPointerDown={handlePointerDown}
      >
        <div className="absolute inset-0 pointer-events-none bg-gradient-to-b from-sky-400 to-sky-100"></div>
        <div className="absolute bottom-0 w-full h-1/2 bg-green-200 opacity-50 blur-3xl translate-y-20"></div>

        <div className="absolute inset-0 flex items-center justify-center perspective-container">
          <div 
            className="scene-3d"
            style={{ transform: `rotateX(${viewRot.x}deg) rotateZ(${viewRot.z}deg) translateZ(-50px)` }}
          >
            {/* GRID BASE */}
            <div className="grid-base">
              {Array.from({ length: GRID_SIZE * GRID_SIZE }).map((_, i) => {
                const x = i % GRID_SIZE;
                const y = Math.floor(i / GRID_SIZE);
                return (
                  <div 
                    key={`grid-${i}`} 
                    className="grid-cell"
                    onPointerUp={(e) => { 
                      // Only build if we didn't drag
                      if (!isRotating.current && mode === 'build') { 
                        e.stopPropagation(); 
                        placeVoxel(x, y, 0); 
                      }
                    }}
                  ></div>
                );
              })}
            </div>

            {/* VOXELS */}
            {Object.entries(voxels).map(([key, data]) => {
              const [x, y, z] = key.split(',').map(Number);
              const blockDef = BLOCKS.find(b => b.id === data.id);
              if (!blockDef) return null;

              return (
                <div 
                  key={key} 
                  className="voxel-cube"
                  style={{
                    '--x': x,
                    '--y': y,
                    '--z': z,
                    '--color-main': blockDef.color,
                    '--color-side': blockDef.side,
                    '--color-top': blockDef.top,
                  }}
                  onPointerUp={(e) => { 
                    if (!isRotating.current && isEraser && mode === 'build') { 
                      e.stopPropagation(); 
                      placeVoxel(x, y, z); 
                    }
                  }}
                >
                  <div className="face face-top" onPointerUp={(e) => { if (!isEraser && !isRotating.current && mode === 'build') { e.stopPropagation(); placeVoxel(x, y, z + 1); }}}></div>
                  <div className="face face-front" onPointerUp={(e) => { if (!isEraser && !isRotating.current && mode === 'build') { e.stopPropagation(); placeVoxel(x, y + 1, z); }}}></div>
                  <div className="face face-right" onPointerUp={(e) => { if (!isEraser && !isRotating.current && mode === 'build') { e.stopPropagation(); placeVoxel(x + 1, y, z); }}}></div>
                  <div className="face face-left" onPointerUp={(e) => { if (!isEraser && !isRotating.current && mode === 'build') { e.stopPropagation(); placeVoxel(x - 1, y, z); }}}></div>
                  <div className="face face-back" onPointerUp={(e) => { if (!isEraser && !isRotating.current && mode === 'build') { e.stopPropagation(); placeVoxel(x, y - 1, z); }}}></div>
                </div>
              );
            })}
          </div>
        </div>
        
        {mode === 'build' && (
          <div className="absolute bottom-6 left-1/2 -translate-x-1/2 z-30 bg-black/60 text-white px-6 py-2 rounded-full text-sm font-bold backdrop-blur-md pointer-events-none flex items-center gap-3 animate-fade-in border border-white/20 shadow-xl">
            <Move size={16}/> Click to Build • Drag to Rotate
          </div>
        )}
        
        {/* GAME OVERLAYS */}
        {phase === 'DELIVERING' && (
          <div className="absolute inset-0 z-50 flex items-end pb-10 bg-black/10 backdrop-blur-[2px] pointer-events-none">
            <div className={`text-[8rem] animate-drive-across ${upgrades.includes('scooter_red') ? 'speed-fast' : ''}`}>
               {upgrades.includes('scooter_red') ? '🏎️' : '🛵'}
            </div>
            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
               <h2 className="text-6xl font-black text-white drop-shadow-lg animate-ping">DELIVERING!</h2>
            </div>
          </div>
        )}

        {phase === 'SUMMARY' && lastRewardDetails && (
          <div className="absolute inset-0 z-50 bg-black/60 flex items-center justify-center backdrop-blur-sm p-4 pointer-events-auto">
             <div className="bg-white rounded-3xl shadow-2xl p-6 max-w-sm w-full animate-pop-in">
               <h2 className="text-2xl font-black text-center text-slate-800 mb-4">Delivery Complete!</h2>
               <div className="space-y-2 mb-6 bg-slate-50 p-4 rounded-xl">
                 <div className="flex justify-between text-slate-500"><span>Base Reward</span><span>+{lastRewardDetails.base}</span></div>
                 {lastRewardDetails.bonusBreakdown.map((b, i) => (
                   <div key={i} className="flex justify-between text-green-600 font-medium"><span className="flex items-center gap-1"><Zap size={14}/> {b.name}</span><span>{b.val}</span></div>
                 ))}
                 <div className="h-px bg-slate-200 my-2"></div>
                 <div className="flex justify-between text-xl font-black text-slate-800"><span>Total</span><span className="text-yellow-600 flex items-center gap-1">+{lastRewardDetails.total} <Coins size={20}/></span></div>
               </div>
               <button onClick={closeSummary} className="w-full py-3 bg-indigo-600 text-white rounded-xl font-bold hover:bg-indigo-700">Next Order</button>
             </div>
          </div>
        )}

        {phase === 'NOTIFICATION' && (
          <div className="absolute inset-0 z-40 bg-black/40 flex items-center justify-center pointer-events-auto">
            <div className="bg-white p-6 rounded-3xl shadow-2xl flex flex-col items-center animate-bounce-in max-w-sm w-full mx-4">
              <BellRing className="w-16 h-16 text-orange-500 mb-4 animate-wiggle" />
              <h2 className="text-2xl font-bold mb-2">New Online Order!</h2>
              <div className="bg-orange-100 p-4 rounded-xl w-full text-center mb-4">
                <p className="font-black text-xl text-orange-800">{currentOrder.recipe.name}</p>
                <p className="text-sm text-orange-600">Due at {formatTime(targetTime)}</p>
              </div>
              <button onClick={acceptOrder} className="w-full bg-green-500 hover:bg-green-600 text-white font-bold py-3 rounded-xl transition-all active:scale-95">Accept Order</button>
            </div>
          </div>
        )}

        {phase === 'IDLE' && mode !== 'build' && (
          <div className="absolute inset-0 z-30 flex items-center justify-center pointer-events-none">
             <button onClick={startOrder} className="pointer-events-auto bg-orange-500 hover:bg-orange-600 text-white text-2xl font-black py-6 px-12 rounded-full shadow-xl transform transition hover:scale-105 active:scale-95 flex items-center gap-4 border-4 border-white"><Play fill="white" /> Start Service</button>
          </div>
        )}

        {mode !== 'build' && (
          <div className={`absolute bottom-10 left-10 md:left-1/3 transition-all duration-500 pointer-events-none z-20 ${phase === 'COOKING' ? 'scale-110' : 'scale-100'}`}>
            <div className="text-9xl relative drop-shadow-xl">👨‍🍳{phase === 'COOKING' && <div className="absolute -top-4 -right-4 text-4xl animate-bounce">🔪</div>}</div>
          </div>
        )}
      </div>

      {/* RIGHT SIDE: DASHBOARD */}
      <div className="w-full md:w-[480px] bg-slate-50 flex flex-col border-l border-slate-200 shadow-xl z-20">
        <div className="p-4 bg-white border-b flex justify-between items-center shadow-sm">
          <div className="flex items-center gap-2 bg-yellow-100 px-4 py-2 rounded-full border border-yellow-300 shadow-inner">
            <Coins className="text-yellow-600 w-5 h-5" />
            <span className="font-bold text-yellow-800 text-lg">{coins}</span>
          </div>
          <div className="flex gap-2">
            <button onClick={() => { setMode('build'); setViewRot({x:60, z:45}); }} className={`p-2 px-3 rounded-xl font-bold flex items-center gap-2 transition-all ${mode === 'build' ? 'bg-blue-600 text-white shadow-lg scale-105' : 'bg-slate-200 text-slate-600 hover:bg-slate-300'}`}><Box size={18}/> 3D</button>
            <button onClick={() => setMode('kitchen')} className={`p-2 px-3 rounded-xl font-bold flex items-center gap-2 transition-all ${mode === 'kitchen' ? 'bg-orange-500 text-white shadow-lg scale-105' : 'bg-slate-200 text-slate-600 hover:bg-slate-300'}`}><Utensils size={18}/> Work</button>
            <button onClick={() => setMode('shop')} className={`p-2 px-3 rounded-xl font-bold flex items-center gap-2 transition-all ${mode === 'shop' ? 'bg-indigo-600 text-white shadow-lg scale-105' : 'bg-slate-200 text-slate-600 hover:bg-slate-300'}`}><ShoppingBag size={18}/> Shop</button>
          </div>
        </div>

        <div className="flex-1 p-6 overflow-y-auto bg-slate-50/50">
          {mode === 'build' && (
            <div className="flex flex-col h-full animate-fade-in">
              <div className="bg-blue-100 border border-blue-200 p-4 rounded-xl mb-4 text-blue-800 shadow-sm">
                <div className="flex justify-between items-start">
                  <div>
                    <h2 className="font-bold flex items-center gap-2"><Box size={20}/> 3D Builder</h2>
                    <p className="text-xs mt-1">1. Click grid to place block.<br/>2. Click block side to stack.<br/>3. Drag background to rotate.</p>
                  </div>
                  <button onClick={() => setViewRot({x:60, z:45})} className="p-2 bg-white rounded-lg shadow-sm hover:bg-blue-50 text-blue-600 text-xs font-bold flex items-center gap-1"><RotateCcw size={14}/> Reset View</button>
                </div>
              </div>
              <div className="flex-1 overflow-y-auto mb-4">
                <div className="grid grid-cols-4 gap-2">
                  <button onClick={() => setIsEraser(true)} className={`aspect-square rounded-xl border-2 flex flex-col items-center justify-center transition-all ${isEraser ? 'bg-red-100 border-red-500 ring-2 ring-red-200' : 'bg-white border-slate-200 hover:border-red-300'}`}>
                    <Eraser className="text-red-500 mb-1" /><span className="text-[10px] font-bold text-red-500">REMOVE</span>
                  </button>
                  {BLOCKS.map(block => (
                    <button key={block.id} onClick={() => { setSelectedBlockId(block.id); setIsEraser(false); }}
                      className={`aspect-square rounded-xl border-4 flex flex-col items-center justify-center transition-all relative ${!isEraser && selectedBlockId === block.id ? 'ring-2 ring-blue-400 scale-105 z-10' : 'hover:scale-105'} ${(blockInventory[block.id]||0) === 0 ? 'opacity-50' : ''}`}
                      style={{ backgroundColor: block.color, borderColor: block.side }}
                    >
                       <span className="bg-black/20 text-white text-xs font-bold px-1.5 rounded-full absolute bottom-1 right-1 shadow-sm">{blockInventory[block.id] || 0}</span>
                    </button>
                  ))}
                </div>
              </div>
              <div className="flex gap-2 mt-auto">
                 <button onClick={clearAll} className="p-3 bg-red-100 text-red-600 rounded-xl font-bold hover:bg-red-200"><Trash2 size={20}/></button>
                 <button onClick={() => setMode('shop')} className="flex-1 py-3 bg-slate-800 text-white rounded-xl font-bold hover:bg-slate-900 flex items-center justify-center gap-2"><ShoppingBag size={18}/> Buy Blocks</button>
              </div>
            </div>
          )}

          {mode === 'shop' && (
            <div className="flex flex-col gap-6 animate-fade-in">
               <div>
                 <h2 className="font-black text-slate-700 mb-2 flex items-center gap-2"><Box size={20}/> Voxel Packs (x5)</h2>
                 <div className="grid grid-cols-2 gap-3">
                   {BLOCKS.map(block => (
                     <button key={block.id} onClick={() => buyBlock(block.id, 5)} className="p-2 rounded-xl border border-slate-200 bg-white hover:border-blue-400 hover:shadow-md transition-all flex items-center gap-3 group active:scale-95">
                       <div className="w-10 h-10 rounded border-b-4 shadow-sm group-hover:scale-110 transition-transform" style={{ backgroundColor: block.color, borderColor: block.side }}></div>
                       <div className="text-left flex-1"><div className="font-bold text-sm text-slate-700">{block.name}</div><div className="text-xs font-bold text-yellow-600">{block.cost * 5} Coins</div></div>
                     </button>
                   ))}
                 </div>
               </div>
               <div>
                 <h2 className="font-black text-slate-700 mb-2 flex items-center gap-2"><TrendingUp size={20}/> Kitchen Upgrades</h2>
                 <div className="space-y-3">
                   {UPGRADES.map(item => (
                     <button key={item.id} disabled={upgrades.includes(item.id) || coins < item.cost} onClick={() => buyUpgrade(item)} className={`w-full p-3 rounded-xl border-2 flex items-center gap-4 text-left transition-all ${upgrades.includes(item.id) ? 'bg-green-50 border-green-200 opacity-70' : 'bg-white border-slate-200 hover:border-indigo-400 hover:shadow-md'}`}>
                       <div className="text-3xl">{item.icon}</div>
                       <div className="flex-1"><div className="font-bold text-slate-800">{item.name}</div><div className="text-xs text-indigo-600 font-semibold">{item.desc}</div></div>
                       <div className="font-bold text-sm">{upgrades.includes(item.id) ? <span className="text-green-600 flex items-center gap-1"><CheckCircle2 size={14}/> Owned</span> : <span className="text-yellow-600">{item.cost} 🟡</span>}</div>
                     </button>
                   ))}
                 </div>
               </div>
            </div>
          )}

          {mode === 'kitchen' && (
            <div className="flex flex-col items-center h-full animate-fade-in">
              <div className={`w-full p-3 rounded-xl mb-6 text-center font-bold transition-colors ${phase === 'COOKING' ? 'bg-orange-100 text-orange-700' : phase === 'CLOCK' ? 'bg-indigo-100 text-indigo-700' : 'bg-slate-100 text-slate-500'}`}>{message}</div>
              {phase === 'COOKING' && (
                <div className="w-full flex flex-col items-center">
                  <div className="w-full bg-orange-50 border-2 border-orange-200 rounded-2xl p-4 mb-6 relative min-h-[120px] flex items-center justify-center">
                    <span className="absolute top-2 left-3 text-xs font-bold text-orange-300 uppercase">Prep Station</span>
                    <div className="flex items-center gap-1">{cookedIngredients.map((ing, i) => <div key={i} className="text-4xl animate-pop-in -ml-3 first:ml-0 drop-shadow-md">{INGREDIENTS.find(x => x.id === ing).icon}</div>)}</div>
                  </div>
                  <div className="grid grid-cols-3 gap-2 w-full">{INGREDIENTS.map(ing => <button key={ing.id} onClick={() => addIngredient(ing.id)} className="bg-white border-b-4 border-slate-200 active:border-b-0 active:translate-y-1 hover:bg-orange-50 p-2 rounded-xl flex flex-col items-center gap-1 transition-all"><span className="text-2xl">{ing.icon}</span><span className="text-[10px] font-bold text-slate-600 uppercase">{ing.name}</span></button>)}</div>
                  <div className="mt-4 text-xs font-bold text-slate-400 w-full text-center">RECIPE: <span className="text-slate-600">{currentOrder.recipe.req.join(' + ')}</span></div>
                </div>
              )}
              {(phase === 'CLOCK' || phase === 'DELIVERING' || phase === 'SUMMARY') && (
                <div className="w-full flex flex-col items-center">
                  <div className="bg-slate-800 text-green-400 px-6 py-2 rounded-lg font-mono text-xl w-full text-center mb-6 shadow-inner border-2 border-slate-600">DUE: {formatTime(targetTime)}</div>
                  <div className="relative w-48 h-48 mb-6">
                    <div className="absolute inset-0 bg-slate-100 rounded-full border-8 border-slate-300 shadow-xl flex items-center justify-center">
                      {[...Array(12)].map((_, i) => {
                        const num = i + 1; const angle = num * 30; const rad = angle * (Math.PI / 180); const x = 50 + 38 * Math.sin(rad); const y = 50 - 38 * Math.cos(rad);
                        return <div key={num} className="absolute w-4 h-4 flex items-center justify-center font-bold text-slate-400 text-xs" style={{ left: `${x}%`, top: `${y}%`, transform: 'translate(-50%, -50%)' }}>{num}</div>;
                      })}
                      <div className="absolute bg-slate-800 w-1.5 rounded-full origin-bottom z-10" style={{ height: '25%', bottom: '50%', left: 'calc(50% - 3px)', transform: `rotate(${hourRotation}deg)` }} />
                      <div className="absolute bg-red-500 w-1 rounded-full origin-bottom z-20" style={{ height: '38%', bottom: '50%', left: 'calc(50% - 2px)', transform: `rotate(${minuteRotation}deg)` }} />
                      <div className="absolute w-3 h-3 bg-slate-800 rounded-full z-30 border-2 border-white"></div>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4 w-full mb-6">
                    <div className="flex gap-1 justify-center"><button onClick={() => adjustHours(-1)} className="w-10 h-10 bg-white border rounded font-bold hover:bg-slate-50">-</button><span className="flex items-center text-xs font-bold px-2 text-slate-400">HR</span><button onClick={() => adjustHours(1)} className="w-10 h-10 bg-white border rounded font-bold hover:bg-slate-50">+</button></div>
                    <div className="flex gap-1 justify-center"><button onClick={() => adjustMinutes(-5)} className="w-10 h-10 bg-white border border-red-200 text-red-500 rounded font-bold hover:bg-red-50">-</button><span className="flex items-center text-xs font-bold px-2 text-red-300">MIN</span><button onClick={() => adjustMinutes(5)} className="w-10 h-10 bg-white border border-red-200 text-red-500 rounded font-bold hover:bg-red-50">+</button></div>
                  </div>
                  <button onClick={attemptDelivery} disabled={phase !== 'CLOCK'} className="w-full py-4 bg-slate-800 text-white font-black text-lg rounded-xl shadow-lg hover:bg-slate-900 transition-all active:scale-95 flex items-center justify-center gap-3 disabled:opacity-50"><Bike /> DELIVER!</button>
                </div>
              )}
              {phase === 'IDLE' && <div className="flex flex-col items-center justify-center h-full text-slate-400 text-center px-8 opacity-50"><ChefHat className="w-16 h-16 mb-4" /><p>Check the left screen to start!</p></div>}
            </div>
          )}
        </div>
      </div>
      
      <style>{`
        .perspective-container { perspective: 1200px; transform-style: preserve-3d; }
        .scene-3d { 
          position: relative; width: 400px; height: 400px; 
          transform-style: preserve-3d; 
          transition: transform 0.1s ease-out; /* Smooth transition for rotation */
        }
        
        .grid-base {
          position: absolute; width: ${GRID_SIZE * BLOCK_SIZE}px; height: ${GRID_SIZE * BLOCK_SIZE}px;
          display: grid; grid-template-columns: repeat(${GRID_SIZE}, 1fr);
          background-color: rgba(255, 255, 255, 0.4);
          transform: translateZ(0); box-shadow: 0 20px 50px rgba(0,0,0,0.1); border: 4px solid rgba(255,255,255,0.6);
        }
        .grid-cell { border: 0.5px solid rgba(0,0,0,0.05); transition: background 0.1s; }
        .grid-cell:hover { background-color: rgba(56, 189, 248, 0.4); cursor: crosshair; }

        .voxel-cube {
          position: absolute; width: ${BLOCK_SIZE}px; height: ${BLOCK_SIZE}px;
          transform-style: preserve-3d;
          transform: translate3d(
            calc(var(--x) * ${BLOCK_SIZE}px), 
            calc(var(--y) * ${BLOCK_SIZE}px), 
            calc(var(--z) * ${BLOCK_SIZE}px + ${BLOCK_SIZE/2}px)
          );
          transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          pointer-events: none;
        }

        .face {
          position: absolute; width: ${BLOCK_SIZE}px; height: ${BLOCK_SIZE}px;
          backface-visibility: hidden; pointer-events: auto; cursor: crosshair; transition: filter 0.1s;
        }
        .face:hover { filter: brightness(1.2); }

        .face-top   { background-color: var(--color-top); transform: rotateX(0deg) translateZ(20px); }
        .face-front { background-color: var(--color-side); transform: rotateX(-90deg) translateZ(20px); filter: brightness(0.9); }
        .face-back  { background-color: var(--color-side); transform: rotateX(90deg) translateZ(20px); filter: brightness(0.9); }
        .face-right { background-color: var(--color-main); transform: rotateY(90deg) translateZ(20px); filter: brightness(0.7); }
        .face-left  { background-color: var(--color-main); transform: rotateY(-90deg) translateZ(20px); filter: brightness(0.7); }

        @keyframes drive-across { 0% { transform: translateX(-100vw); } 100% { transform: translateX(100vw); } }
        .animate-drive-across { animation: drive-across 2.5s linear forwards; }
        .speed-fast { animation-duration: 1.5s !important; }
        @keyframes pop-in { 0% { transform: scale(0); } 80% { transform: scale(1.1); } 100% { transform: scale(1); } }
        .animate-pop-in { animation: pop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
        @keyframes wiggle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
        .animate-wiggle { animation: wiggle 0.2s ease-in-out infinite; }
        .animate-fade-in { animation: pop-in 0.2s ease-out; }
        .animate-spin-slow { animation: wiggle 1s ease-in-out infinite; }
      `}</style>
    </div>
  );
}