import { useState } from 'react';

interface Props {
  onComplete: (name: string) => void;
  isCompact?: boolean;
}

export default function WelcomeScreen({ onComplete, isCompact = false }: Props) {
  const [name, setName] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const trimmed = name.trim();
    if (trimmed) onComplete(trimmed);
  };

  const content = (
    <>
      {/* Avatar preview */}
      <div className="flex justify-center">
        <div className="w-20 h-20 rounded-full bg-gradient-to-br from-kira-pink via-kira-lav to-kira-mint p-1 animate-pulse-glow">
          <div className="w-full h-full rounded-full bg-white flex items-center justify-center">
            <span className="text-3xl">🌸</span>
          </div>
        </div>
      </div>

      <div className="space-y-2">
        <h1 className="text-2xl font-extrabold text-kira-plum">Welcome to Kira!</h1>
        <p className="text-sm text-kira-violet/60 leading-relaxed">
          I'm your focus bestie. I'm here to body-double with you — 
          keep you company, cheer you on, and help you get things done. 
          Lo-fi beats, timers, cats, the whole deal.
        </p>
      </div>

      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label className="block text-sm font-semibold text-kira-plum/70 mb-1.5 text-left">
            What should I call you?
          </label>
          <input
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="Your name..."
            className="w-full bg-white/60 rounded-xl px-4 py-3 text-sm text-kira-plum placeholder-kira-plum/30 border border-kira-pink/20 focus:outline-none focus:border-kira-pink/50 transition-all"
            autoFocus
            maxLength={30}
          />
        </div>

        <button
          type="submit"
          disabled={!name.trim()}
          className="btn-kira w-full py-3 text-base disabled:opacity-40 disabled:cursor-not-allowed transition-all"
        >
          Let's Go! ✨
        </button>
      </form>

      <p className="text-[10px] text-kira-plum/30">
        everything stays between us — your name, your preferences, your focus vibes
      </p>
    </>
  );

  if (isCompact) {
    return (
      <div className="max-w-md w-full p-8 text-center space-y-6">
        {content}
      </div>
    );
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-kira-bg via-kira-glow to-kira-pink/20 p-4">
      <div className="max-w-md w-full p-8 text-center space-y-6">
        {content}
      </div>
      <style>{`
        @keyframes pulse-glow {
          0%, 100% { box-shadow: 0 0 12px rgba(255,182,193,0.3); }
          50% { box-shadow: 0 0 28px rgba(216,180,254,0.5); }
        }
        .animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
      `}</style>
    </div>
  );
}
