'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { validateSectorInput } from '@/lib/utils/validation';

interface SectorInputFormProps {
  loading?: boolean;
}

export function SectorInputForm({ loading }: SectorInputFormProps) {
  const router = useRouter();
  const [sector, setSector] = useState('');
  const [error, setError] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setError('');

    const validation = validateSectorInput(sector);
    if (!validation.valid) {
      setError(validation.error || 'Invalid input');
      return;
    }

    setIsSubmitting(true);
    router.push(`/analyze?sector=${encodeURIComponent(validation.value!)}`);
  };

  return (
    <div className="flex items-center justify-center min-h-screen">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle>Competitive Intelligence</CardTitle>
          <CardDescription>Analyze any market sector to get instant competitive insights</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="sector">Sector or Market</Label>
              <Input
                id="sector"
                type="text"
                placeholder="e.g., FinTech, Plant-Based Protein"
                value={sector}
                onChange={(e) => {
                  setSector(e.target.value);
                  setError('');
                }}
                disabled={isSubmitting || loading}
              />
              {error && <p className="text-sm text-destructive">{error}</p>}
            </div>

            <Button
              type="submit"
              disabled={isSubmitting || loading || sector.trim().length === 0}
              className="w-full"
            >
              {isSubmitting || loading ? 'Analyzing...' : 'Analyze Sector'}
            </Button>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}