import { useState } from 'react';
import { Sparkles } from 'lucide-react';
import { useGameStore } from '@/store';

const SUGGESTED_NAMES = [
  'Nexus AI', 'Cortex Labs', 'Synapse Technologies',
  'Prometheus AI', 'Athena Research', 'Cognitron',
  'Neural Forge', 'DeepMind+', 'Cerebral Systems',
];

export function NewGameScreen() {
  const [name, setName] = useState('');
  const startNewGame = useGameStore((s) => s.startNewGame);

  const handleStart = () => {
    const companyName = name.trim() || SUGGESTED_NAMES[Math.floor(Math.random() * SUGGESTED_NAMES.length)];
    startNewGame(companyName);
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-surface-950 to-surface-900">
      <div className="max-w-md w-full mx-4">
        <div className="text-center mb-8">
          <div className="inline-flex items-center gap-2 mb-4">
            <Sparkles className="text-accent-light" size={32} />
            <h1 className="text-4xl font-bold bg-gradient-to-r from-accent-light to-accent bg-clip-text text-transparent">
              Token Empire
            </h1>
          </div>
          <p className="text-surface-400 text-sm">
            Build the world's most powerful AI company. From startup to AGI.
          </p>
        </div>

        <div className="bg-surface-900 border border-surface-700 rounded-xl p-6 space-y-6">
          <div>
            <label className="block text-sm font-medium text-surface-300 mb-2">
              Name your AI company
            </label>
            <input
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              onKeyDown={(e) => e.key === 'Enter' && handleStart()}
              placeholder={SUGGESTED_NAMES[0]}
              className="w-full bg-surface-800 border border-surface-600 rounded-lg px-4 py-3 text-surface-100 placeholder:text-surface-500 focus:outline-none focus:ring-2 focus:ring-accent/50 focus:border-accent"
              autoFocus
              maxLength={30}
            />
          </div>

          <div>
            <p className="text-xs text-surface-500 mb-2">Or pick one:</p>
            <div className="flex flex-wrap gap-2">
              {SUGGESTED_NAMES.slice(0, 6).map((suggestion) => (
                <button
                  key={suggestion}
                  onClick={() => setName(suggestion)}
                  className="text-xs px-3 py-1.5 rounded-full bg-surface-800 text-surface-300 hover:bg-surface-700 hover:text-surface-100 transition-colors border border-surface-700"
                >
                  {suggestion}
                </button>
              ))}
            </div>
          </div>

          <button
            onClick={handleStart}
            className="w-full bg-accent hover:bg-accent-dark text-white font-semibold py-3 rounded-lg transition-colors"
          >
            Found Your Company
          </button>
        </div>

        <p className="text-center text-xs text-surface-600 mt-6">
          Manage data centers, train models, serve millions of users, and achieve AGI.
        </p>
      </div>
    </div>
  );
}