'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

export default function StockInputForm() {
  const [symbol, setSymbol] = useState('');
  const [market, setMarket] = useState('china');
  const router = useRouter();

  const handleSearch = () => {
    if (symbol.trim()) {
      router.push(`/report/${symbol.trim()}?market=${market}`);
    }
  };

  return (
    <div className="flex justify-center items-center h-full">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle>基本面分析报告</CardTitle>
          <CardDescription>输入股票代码和市场，生成综合分析报告。</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <label>股票代码</label>
            <Input 
              placeholder="例如: 600519.SH 或 AAPL"
              value={symbol}
              onChange={(e) => setSymbol(e.target.value)}
            />
          </div>
          <div className="space-y-2">
            <label>交易市场</label>
            <Select value={market} onValueChange={setMarket}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="china">中国</SelectItem>
                <SelectItem value="hongkong">香港</SelectItem>
                <SelectItem value="usa">美国</SelectItem>
                <SelectItem value="japan">日本</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <Button onClick={handleSearch} className="w-full">生成报告</Button>
        </CardContent>
      </Card>
    </div>
  );
}