import { useState } from 'react';

interface HeroProps {
  onAnalyze: (source: string) => void;
  isLoading: boolean;
}

const Hero = ({ onAnalyze, isLoading }: HeroProps) => {
  const [source, setSource] = useState('');
  
  const exampleRepos = [
    { name: 'requests', url: 'psf/requests' },
    { name: 'FastAPI', url: 'fastapi/fastapi' },
    { name: 'Flask', url: 'pallets/flask' },
    { name: 'Black', url: 'psf/black' },
    { name: 'Poetry', url: 'python-poetry/poetry' },
  ];

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (source.trim()) {
      onAnalyze(source.trim());
    }
  };

  const handleExample = (url: string) => {
    setSource(url);
    onAnalyze(url);
  };

  return (
    <section className="py-12 px-4">
      <div className="max-w-4xl mx-auto">
        <div className="text-center mb-10">
          <div className="flex justify-center items-center gap-4 mb-6">
            <span className="text-6xl">⚡</span>
            <h1 className="text-5xl font-bold">
              <span className="text-gray-100">Python Environment</span>
              <br />
              <span className="bg-gradient-to-r from-uvify-blue to-uvify-purple bg-clip-text text-transparent">
                Simplified
              </span>
            </h1>
            <span className="text-6xl">🐍</span>
          </div>
          <p className="text-xl text-gray-400 mb-2">
            Turn any Python repository into a uv environment oneliner.
          </p>
          <p className="text-lg text-gray-500">
            Analyze dependencies from requirements.txt, pyproject.toml, and setup.py files.
          </p>
        </div>

        <div className="bg-gray-800 rounded-2xl p-8 shadow-2xl border border-gray-700">
          <form onSubmit={handleSubmit} className="space-y-6">
            <div className="flex gap-3">
              <input
                type="text"
                value={source}
                onChange={(e) => setSource(e.target.value)}
                placeholder="https://github.com/owner/repo or owner/repo"
                className="flex-1 px-4 py-3 bg-gray-900 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-uvify-blue focus:ring-1 focus:ring-uvify-blue"
                disabled={isLoading}
              />
              <button
                type="submit"
                disabled={isLoading || !source.trim()}
                className="px-8 py-3 bg-gradient-to-r from-uvify-blue to-uvify-purple text-white font-semibold rounded-lg hover:shadow-lg transform hover:-translate-y-0.5 transition-all disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
              >
                {isLoading ? 'Analyzing...' : 'Analyze'}
              </button>
            </div>
          </form>

          <div className="mt-6">
            <p className="text-sm text-gray-500 mb-3">Try these example repositories:</p>
            <div className="flex flex-wrap gap-2">
              {exampleRepos.map((repo) => (
                <button
                  key={repo.name}
                  onClick={() => handleExample(repo.url)}
                  className="px-4 py-2 bg-gray-700 hover:bg-gray-600 text-gray-300 rounded-md text-sm transition-colors"
                  disabled={isLoading}
                >
                  {repo.name}
                </button>
              ))}
            </div>
          </div>
        </div>

        <p className="text-center text-gray-500 text-sm mt-6">
          Supports GitHub repositories and local directories
        </p>
      </div>
    </section>
  );
};

export default Hero;