import React, { useState, useEffect, useRef } from 'react';
import { 
  Wheat, 
  User, 
  LogOut, 
  Gamepad2, 
  Sprout, 
  Hand, 
  Terminal,
  Trophy,
  Users
} from 'lucide-react';

// --- SOUND EFFECTS ---
const useClickSound = () => {
  const playClick = () => {
    try {
      const audioCtx = new (window.AudioContext || (window as any).webkitAudioContext)();
      const oscillator = audioCtx.createOscillator();
      const gainNode = audioCtx.createGain();

      oscillator.type = 'sine';
      oscillator.frequency.setValueAtTime(800, audioCtx.currentTime);
      oscillator.frequency.exponentialRampToValueAtTime(100, audioCtx.currentTime + 0.1);
      
      gainNode.gain.setValueAtTime(0.3, audioCtx.currentTime);
      gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.1);

      oscillator.connect(gainNode);
      gainNode.connect(audioCtx.destination);

      oscillator.start();
      oscillator.stop(audioCtx.currentTime + 0.1);
    } catch (e) {
      // Ignore audio errors
    }
  };
  return playClick;
};

// --- DATA TYPES ---
interface UserData {
  username: string;
  cornbread: number;
  streak: number;
  lastClaim: number; // Timestamp
  pfpSeed: number;
  inventory: Record<string, number>;
  id: string;
}

interface ActivityLog {
  id: string;
  message: string;
  timestamp: number;
  type: 'poke' | 'claim' | 'gacha';
}

const CROPS = [
  { id: 'grass', name: 'Dry Grass', rarity: 'Common', color: 'text-green-600', chance: 0.40 },
  { id: 'corn_stalk', name: 'Corn Stalk', rarity: 'Common', color: 'text-green-600', chance: 0.35 },
  { id: 'wheat', name: 'Wild Wheat', rarity: 'Uncommon', color: 'text-blue-500', chance: 0.15 },
  { id: 'golden_corn', name: 'Golden Corn', rarity: 'Rare', color: 'text-purple-500', chance: 0.09 },
  { id: 'ancient_seed', name: 'Ancient Seed', rarity: 'Legendary', color: 'text-yellow-500', chance: 0.01 },
];

// --- FAKE NETWORK (SIMULATION) ---
// Since we have no server, we simulate other users doing things
const BOT_NAMES = ['~gl3bmon3y', '~milady', '~remilia_fan', '~beanstalk', '~corn_lord', '~bit_farmer'];
const BOT_ACTIONS = [
  'claimed daily rations!',
  'found Golden Corn!',
  'poked the server!',
  'is resting...',
  'harvested Dry Grass.',
  'lost their streak.'
];

// --- AUTH COMPONENT ---
const AuthScreen = ({ onLogin }: { onLogin: (user: UserData) => void }) => {
  const [username, setUsername] = useState('');
  const [isRegistering, setIsRegistering] = useState(false);
  const playClick = useClickSound();

  const handleAuth = (e: React.FormEvent) => {
    e.preventDefault();
    playClick();

    // Check Local Storage
    const existing = localStorage.getItem(`user_${username}`);
    
    if (isRegistering) {
      if (existing) {
        alert("User already exists locally. Please login.");
        return;
      }
      const newUser: UserData = {
        username,
        id: Math.random().toString(36).substr(2, 9),
        cornbread: 0,
        streak: 0,
        lastClaim: 0,
        pfpSeed: Math.floor(Math.random() * 1000),
        inventory: {}
      };
      localStorage.setItem(`user_${username}`, JSON.stringify(newUser));
      localStorage.setItem('currentUser', username);
      onLogin(newUser);
    } else {
      if (!existing) {
        alert("User not found on this device.");
        return;
      }
      localStorage.setItem('currentUser', username);
      onLogin(JSON.parse(existing));
    }
  };

  return (
    <div className="min-h-screen bg-[#2a1d15] flex items-center justify-center p-4 font-mono">
      <div className="w-full max-w-md bg-[#3e2b20] border-4 border-[#5c4030] p-8 shadow-[0_0_20px_rgba(0,0,0,0.5)]">
        <div className="text-center mb-8">
          <h1 className="text-4xl text-[#dccab6] font-bold mb-2 tracking-widest">REMILIA</h1>
          <p className="text-[#a68b75]">OFFLINE MODE v2.0</p>
        </div>

        <form onSubmit={handleAuth} className="space-y-6">
          <div>
            <label className="block text-[#8b7355] text-sm uppercase tracking-wider mb-1">Identity</label>
            <input 
              type="text" 
              className="w-full bg-[#1e140f] border border-[#5c4030] text-[#dccab6] p-3 focus:outline-none focus:border-[#8b7355]"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              placeholder="Enter Username"
              required
            />
          </div>

          <button 
            type="submit" 
            className="w-full bg-[#5c4030] hover:bg-[#70503c] text-[#dccab6] font-bold py-3 uppercase tracking-widest border-b-4 border-[#3a281e] active:border-b-0 active:translate-y-1 transition-all"
          >
            {isRegistering ? 'Initialize New User' : 'Access Local Profile'}
          </button>
        </form>

        <div className="mt-6 text-center">
          <button 
            onClick={() => { playClick(); setIsRegistering(!isRegistering); }}
            className="text-[#8b7355] hover:text-[#dccab6] text-xs underline"
          >
            {isRegistering ? 'Already have access? Login' : 'New User? Create Profile'}
          </button>
        </div>
      </div>
    </div>
  );
};

// --- MAIN APP COMPONENTS ---

const ProfileCard = ({ user }: { user: UserData }) => {
  const avatarUrl = `https://api.dicebear.com/7.x/pixel-art/svg?seed=${user.pfpSeed}&backgroundColor=3e2b20`;

  return (
    <div className="bg-[#3e2b20] border-2 border-[#5c4030] p-6 shadow-lg relative overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-b from-transparent to-[#00000010] pointer-events-none bg-[length:100%_4px]"></div>
      
      <div className="flex flex-col md:flex-row gap-6 relative z-10">
        <div className="shrink-0">
          <div className="w-32 h-32 bg-[#1e140f] border-4 border-[#5c4030] p-1">
            <img src={avatarUrl} alt="Avatar" className="w-full h-full object-cover" />
          </div>
          <div className="mt-2 text-center">
             <span className="inline-block bg-[#1e140f] text-[#dccab6] text-xs px-2 py-1 font-mono">ID: {user.id}</span>
          </div>
        </div>
        
        <div className="flex-1">
          <h2 className="text-3xl font-bold text-[#dccab6] tracking-tight">{user.username}</h2>
          <p className="text-[#8b7355] italic mb-4">~ Local Farmer</p>
          
          <div className="grid grid-cols-2 gap-4">
             <div className="bg-[#2a1d15] p-3 border border-[#5c4030]">
               <div className="text-[#8b7355] text-xs uppercase">Cornbread Balance</div>
               <div className="text-2xl text-[#e6c200] font-mono flex items-center gap-2">
                 <Wheat size={20} />
                 {user.cornbread}
               </div>
             </div>
             
             <div className="bg-[#2a1d15] p-3 border border-[#5c4030]">
               <div className="text-[#8b7355] text-xs uppercase">Current Streak</div>
               <div className="text-2xl text-orange-400 font-mono flex items-center gap-2">
                 <Trophy size={20} />
                 {user.streak} days
               </div>
             </div>
          </div>

          <div className="mt-4 p-3 bg-[#1e140f] border border-[#5c4030]">
            <div className="text-[#8b7355] text-xs uppercase mb-2">Inventory</div>
            <div className="flex flex-wrap gap-2">
              {Object.entries(user.inventory || {}).length === 0 && (
                <span className="text-gray-600 text-xs">Storage Empty. Go pick crops.</span>
              )}
              {Object.entries(user.inventory || {}).map(([key, count]) => (
                <div key={key} className="bg-[#3e2b20] px-2 py-1 text-xs text-[#dccab6] border border-[#5c4030]">
                  {key} x{count}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

const DailyConsole = ({ user, onUpdate }: { user: UserData, onUpdate: (u: UserData) => void }) => {
  const [status, setStatus] = useState<string>('System Ready...');
  const [loading, setLoading] = useState(false);
  const playClick = useClickSound();

  const handleClaim = async () => {
    setLoading(true);
    playClick();
    setStatus('Analyzing timestamp...');

    // Simulate network delay
    setTimeout(() => {
      const now = Date.now();
      const lastClaimTime = user.lastClaim || 0;
      const hoursSince = (now - lastClaimTime) / (1000 * 60 * 60);

      if (hoursSince < 24) {
        setStatus(`ERROR: Cool-down active. Wait ${Math.ceil(24 - hoursSince)} hours.`);
        setLoading(false);
        return;
      }

      let newStreak = user.streak;
      if (hoursSince > 48 && lastClaimTime !== 0) {
        newStreak = 1;
        setStatus('Streak Lost! Resetting to 1.');
      } else {
        newStreak += 1;
      }

      const reward = 50 + (newStreak * 5);
      
      const updatedUser = {
        ...user,
        cornbread: user.cornbread + reward,
        streak: newStreak,
        lastClaim: now
      };

      onUpdate(updatedUser);
      setStatus(`SUCCESS: Acquired ${reward} Cornbread. Streak: ${newStreak}`);
      setLoading(false);
    }, 1500);
  };

  return (
    <div className="max-w-2xl mx-auto">
      <div className="bg-[#8b4513] p-4 rounded-xl shadow-2xl border-b-8 border-r-8 border-[#5c2e0b]">
        {/* Console Screen */}
        <div className="bg-[#1a1a1a] p-8 rounded-lg mb-6 border-4 border-[#5c2e0b] relative overflow-hidden shadow-[inset_0_0_20px_rgba(0,0,0,1)]">
          <div className="absolute inset-0 bg-[linear-gradient(rgba(18,16,16,0)_50%,rgba(0,0,0,0.25)_50%),linear-gradient(90deg,rgba(255,0,0,0.06),rgba(0,255,0,0.02),rgba(0,0,255,0.06))] bg-[length:100%_2px,3px_100%] pointer-events-none z-10"></div>
          
          <div className="flex flex-col items-center justify-center min-h-[200px] font-mono z-20 relative">
            <h3 className="text-4xl text-[#dccab6] mb-4 drop-shadow-[0_0_10px_rgba(220,202,182,0.5)]">DAILY RATION</h3>
            <p className="text-green-500 mb-8 animate-pulse text-xl">
              {loading ? 'PROCESSING...' : status}
            </p>
            
            <div className="text-[#8b7355] text-sm">
              Current Supply: {user.cornbread} CB
            </div>
          </div>
        </div>

        {/* Controls */}
        <div className="bg-[#d2b48c] p-4 rounded-lg flex items-center justify-between border-t-4 border-[#c19a6b]">
          <div className="flex gap-2">
            <div className="w-3 h-3 rounded-full bg-red-500 animate-pulse"></div>
            <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
          </div>
          
          <button 
            onClick={handleClaim}
            disabled={loading}
            onMouseEnter={playClick}
            className="bg-[#e63946] active:bg-[#c1121f] text-white font-bold py-4 px-12 rounded-full shadow-[0_4px_0_rgb(150,0,0)] active:shadow-none active:translate-y-1 transition-all uppercase tracking-widest disabled:opacity-50 disabled:cursor-not-allowed"
          >
            CLAIM
          </button>
          
          <div className="grid grid-cols-3 gap-1">
            <div className="w-1 h-6 bg-[#8b6b4e]"></div>
            <div className="w-1 h-6 bg-[#8b6b4e]"></div>
            <div className="w-1 h-6 bg-[#8b6b4e]"></div>
          </div>
        </div>
      </div>
    </div>
  );
};

const CropPicker = ({ user, onUpdate }: { user: UserData, onUpdate: (u: UserData) => void }) => {
  const [logs, setLogs] = useState<string[]>([]);
  const [isGathering, setIsGathering] = useState(false);
  const playClick = useClickSound();
  const bottomRef = useRef<HTMLDivElement>(null);

  const COST = 20;

  const gatherCrops = () => {
    playClick();
    if (user.cornbread < COST) {
      setLogs(prev => [...prev, `> ERROR: Insufficient Cornbread. Need ${COST}.`]);
      return;
    }

    setIsGathering(true);
    setLogs(prev => [...prev, `> Initiating gathering sequence... (-${COST} CB)`]);

    setTimeout(() => {
      // 1. Determine yield (1-5 items)
      const yieldCount = Math.floor(Math.random() * 5) + 1;
      const foundItems: string[] = [];
      const newInventory = { ...user.inventory };

      for (let i = 0; i < yieldCount; i++) {
        const roll = Math.random();
        let cumulative = 0;
        let selectedCrop = CROPS[0];

        for (const crop of CROPS) {
          cumulative += crop.chance;
          if (roll <= cumulative) {
            selectedCrop = crop;
            break;
          }
        }
        
        foundItems.push(selectedCrop.name);
        newInventory[selectedCrop.name] = (newInventory[selectedCrop.name] || 0) + 1;
      }

      const updatedUser = {
        ...user,
        cornbread: user.cornbread - COST,
        inventory: newInventory
      };
      
      onUpdate(updatedUser);
      
      setLogs(prev => [
        ...prev, 
        `> Sequence complete. Found:`,
        ...foundItems.map(item => `  + ${item}`)
      ]);
      
      setIsGathering(false);
    }, 2000);
  };

  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [logs]);

  return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 h-[600px]">
      <div className="lg:col-span-2 bg-[#1a1a1a] border-4 border-[#5c4030] p-4 relative flex flex-col">
        <div className="absolute top-2 right-2 text-[#8b7355] font-mono text-xs">CAM_01 [LIVE]</div>
        <div className="flex-1 flex items-center justify-center border border-[#333] bg-[#0f0a08] overflow-hidden relative">
          <div className="absolute inset-0 opacity-20" style={{ 
            backgroundImage: 'radial-gradient(#2e2015 2px, transparent 2px)', 
            backgroundSize: '20px 20px' 
          }}></div>
          
          {isGathering ? (
             <div className="text-green-500 font-mono animate-bounce text-2xl">SCANNING FIELD...</div>
          ) : (
            <div className="text-[#8b7355] font-mono text-center">
              <Sprout size={64} className="mx-auto mb-4 opacity-50" />
              <div>SECTOR CLEAR</div>
              <div className="text-xs mt-2">Ready to gather</div>
            </div>
          )}
        </div>

        <button 
          onClick={gatherCrops}
          disabled={isGathering}
          onMouseEnter={playClick}
          className="mt-4 bg-[#5c4030] hover:bg-[#70503c] text-[#dccab6] font-mono p-4 w-full border border-[#8b7355] flex items-center justify-center gap-2"
        >
          <Hand size={20} />
          {isGathering ? 'GATHERING...' : `GATHER CROPS (${COST} CB)`}
        </button>
      </div>

      <div className="bg-[#000] border-4 border-[#333] p-4 font-mono text-xs overflow-hidden flex flex-col shadow-[inset_0_0_20px_rgba(0,0,0,1)]">
        <div className="text-green-700 border-b border-green-900 pb-2 mb-2 flex items-center gap-2">
          <Terminal size={14} /> 
          HARVEST LOG v1.0
        </div>
        <div className="flex-1 overflow-y-auto space-y-1 pr-2 scrollbar-thin scrollbar-thumb-green-900">
          {logs.length === 0 && <div className="text-gray-700">Waiting for input...</div>}
          {logs.map((log, i) => (
            <div key={i} className={`${log.includes('ERROR') ? 'text-red-500' : 'text-green-500'}`}>
              {log}
            </div>
          ))}
          <div ref={bottomRef} />
        </div>
      </div>
    </div>
  );
};

const ActivityFeed = ({ currentUser, addActivity }: { currentUser: UserData, addActivity: (msg: string) => void }) => {
  const [activities, setActivities] = useState<ActivityLog[]>([]);
  const playClick = useClickSound();

  // Initial fake history
  useEffect(() => {
    setActivities([
      { id: '1', message: '~system initialized', timestamp: Date.now() - 100000, type: 'poke' },
      { id: '2', message: '~gl3bmon3y joined the farm', timestamp: Date.now() - 50000, type: 'poke' },
    ]);
  }, []);

  // Bot Generator: Adds fake events to make it feel alive
  useEffect(() => {
    const interval = setInterval(() => {
      if (Math.random() > 0.7) {
        const botName = BOT_NAMES[Math.floor(Math.random() * BOT_NAMES.length)];
        const action = BOT_ACTIONS[Math.floor(Math.random() * BOT_ACTIONS.length)];
        
        const newLog: ActivityLog = {
          id: Math.random().toString(),
          message: `${botName} ${action}`,
          timestamp: Date.now(),
          type: 'poke'
        };
        setActivities(prev => [newLog, ...prev].slice(0, 50));
      }
    }, 5000); // New fake event every ~5 seconds

    return () => clearInterval(interval);
  }, []);

  const handlePoke = () => {
    playClick();
    const newLog: ActivityLog = {
      id: Math.random().toString(),
      message: `${currentUser.username} poked the server!`,
      timestamp: Date.now(),
      type: 'poke'
    };
    setActivities(prev => [newLog, ...prev].slice(0, 50));
    addActivity("Poked the server");
  };

  return (
    <div className="bg-[#2a1d15] border border-[#5c4030] h-full flex flex-col">
      <div className="bg-[#3e2b20] p-3 border-b border-[#5c4030] flex justify-between items-center">
        <h3 className="text-[#dccab6] font-bold flex items-center gap-2">
          <Users size={16} /> Global Net (SIM)
        </h3>
        <button 
          onClick={handlePoke}
          className="text-xs bg-[#5c4030] text-[#dccab6] px-2 py-1 rounded hover:bg-[#70503c]"
        >
          POKE SERVER
        </button>
      </div>
      
      <div className="flex-1 overflow-y-auto p-4 space-y-3">
        {activities.map(act => (
          <div key={act.id} className="text-sm border-l-2 border-[#5c4030] pl-3 py-1">
            <span className="text-[#8b7355] text-xs block">
              {new Date(act.timestamp).toLocaleTimeString()}
            </span>
            <span className="text-[#dccab6]">
              {act.message}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
};

// --- APP SHELL ---

export default function App() {
  const [user, setUser] = useState<UserData | null>(null);
  const [view, setView] = useState<'profile' | 'cornbread' | 'crops'>('profile');
  const playClick = useClickSound();

  // Initial load
  useEffect(() => {
    const savedName = localStorage.getItem('currentUser');
    if (savedName) {
      const savedUser = localStorage.getItem(`user_${savedName}`);
      if (savedUser) {
        setUser(JSON.parse(savedUser));
      }
    }
  }, []);

  // Save on update
  const handleUpdateUser = (updatedUser: UserData) => {
    setUser(updatedUser);
    localStorage.setItem(`user_${updatedUser.username}`, JSON.stringify(updatedUser));
  };

  const handleLogout = () => {
    localStorage.removeItem('currentUser');
    setUser(null);
  };

  if (!user) return <AuthScreen onLogin={setUser} />;

  return (
    <div className="min-h-screen bg-[#1a120b] text-[#dccab6] font-sans selection:bg-[#8b4513] selection:text-white">
      {/* Top Bar */}
      <nav className="bg-[#2a1d15] border-b-4 border-[#5c4030] p-4 flex justify-between items-center sticky top-0 z-50 shadow-xl">
        <div className="flex items-center gap-4">
          <div className="text-2xl font-bold tracking-widest text-[#dccab6]">REMILIA</div>
          <div className="hidden md:flex gap-2">
            {[
              { id: 'profile', icon: User, label: 'Profile' },
              { id: 'cornbread', icon: Gamepad2, label: 'Daily Ration' },
              { id: 'crops', icon: Sprout, label: 'Crop Picker' },
            ].map(item => (
              <button
                key={item.id}
                onClick={() => { playClick(); setView(item.id as any); }}
                className={`flex items-center gap-2 px-4 py-2 rounded text-sm font-bold uppercase transition-all
                  ${view === item.id 
                    ? 'bg-[#5c4030] text-white shadow-[inset_0_2px_4px_rgba(0,0,0,0.5)]' 
                    : 'hover:bg-[#3e2b20] text-[#8b7355]'
                  }`}
              >
                <item.icon size={16} />
                {item.label}
              </button>
            ))}
          </div>
        </div>

        <div className="flex items-center gap-4">
          <div className="text-right hidden sm:block">
            <div className="text-xs text-[#8b7355]">LOGGED IN AS</div>
            <div className="font-bold">{user.username}</div>
          </div>
          <button 
            onClick={handleLogout}
            onMouseEnter={playClick}
            className="p-2 bg-[#3e2b20] hover:bg-red-900 border border-[#5c4030] rounded"
          >
            <LogOut size={18} />
          </button>
        </div>
      </nav>

      {/* Main Layout */}
      <main className="container mx-auto p-4 md:p-8 grid grid-cols-1 lg:grid-cols-4 gap-8">
        
        {/* Left Column: Content */}
        <div className="lg:col-span-3 space-y-8">
          
          {/* Mobile Nav */}
          <div className="md:hidden flex gap-2 overflow-x-auto pb-2">
            {[
              { id: 'profile', icon: User, label: 'Profile' },
              { id: 'cornbread', icon: Gamepad2, label: 'Rations' },
              { id: 'crops', icon: Sprout, label: 'Crops' },
            ].map(item => (
              <button
                key={item.id}
                onClick={() => { playClick(); setView(item.id as any); }}
                className={`flex items-center gap-2 px-4 py-3 rounded text-sm font-bold uppercase whitespace-nowrap
                  ${view === item.id 
                    ? 'bg-[#5c4030] text-white' 
                    : 'bg-[#2a1d15] text-[#8b7355]'
                  }`}
              >
                <item.icon size={16} />
                {item.label}
              </button>
            ))}
          </div>

          {view === 'profile' && <ProfileCard user={user} />}
          {view === 'cornbread' && <DailyConsole user={user} onUpdate={handleUpdateUser} />}
          {view === 'crops' && <CropPicker user={user} onUpdate={handleUpdateUser} />}
        </div>

        {/* Right Column: Global Chat/Activity */}
        <div className="lg:col-span-1 h-[500px] lg:h-auto lg:sticky lg:top-24">
          <ActivityFeed currentUser={user} addActivity={() => {}} />
        </div>

      </main>
    </div>
  );
}