import React, { useState, type FormEvent, type ChangeEvent } from 'react';
import { Search, Loader2, AlertCircle, RefreshCw } from 'lucide-react';
import { Button } from '@/ui/button';
import { Input } from '@/ui/input';
import { cn } from '@/lib/utils';
import { useWeatherStore } from '@/store/weatherStore';


export function WeatherSearchForm() {
    const {isLoading, currentWeather, searchWeather, refreshWeather} = useWeatherStore();
    const [city, setCity] = useState('');
    const [inputError, setInputError] = useState('');
    const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
        setCity(e.target.value);
        if (inputError) {
            setInputError('');
        }

    const handleFormSubmit = async (e: FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        const trimmedCity = city.trim();
        if (!trimmedCity) {
            setInputError('请输入城市名称');
            return;
        }
         if (trimmedCity.length < 2) {
             setInputError('请输入至少2个字符');
             return;
         }
         if (!/^[a-zA-Z\s]+$/.test(trimmedCity)) {
             setInputError('请输入字母和空格');
             return;
         }
         await searchWeather(trimmedCity);
        
    return (
         <div className='p-6 border-6 border-b-slate-200/50 '>
             <form onSubmit={handleFormSubmit} className="space-by-3">
                 <div className="relative">
                     <div className="absolute inset-y-0 left-4 flex items-center pl-3 pointer-events-none">
                         <Search className="w-5 h-5 text-gray-500 dark:text-gray-400" />
                     </div>
                     <Input
                         type="text"
                         value={city}
                         onChange={handleInputChange}
                         placeholder="请输入城市名称"
                         disabled={isLoading}
                         className={cn('pl-10 pr-4 py-2 w-full text-base rounded-xl bg-slate-50/50 focus:bg-white transition-all', inputError && 'border-red-500') }
                     />
                 </div>
                 {inputError && (
                     <div className=" flex items-center gap-2 px-3 py-2 rounded-lg bg-red-50/80 animated-in slide-in-from-top-1 fade-in">
                         <AlertCircle className="inline w-4 h-4 text-red-500 mt-0.5" />
                         <p className="text-red-500 text-xs">{inputError}</p>
                     </div>
                 )
                 }
                 <div className='flex gap-2'>
                     <Button type="submit" disabled={isLoading || !city.trim()} className="mt-4 w-full">
                         {isLoading ? <>
                             <Loader2 className="animate-spin w-5 h-5 text-white" />
                             <span>搜索中...</span>
                         </> : (<>
                             <Search className="w-5 h-5 text-white" />
                             <span>搜索天气</span>
                         </>)}
                     </Button>
                     {currentWeather && (
                         <Button type="button" variant="outline" onClick={refreshWeather} disabled={isLoading} className="mt-4 w-full" title='刷新数据'>
                             <RefreshCw className={cn("w-5 h-5", isLoading && "animate-spin")} />
                         </Button>
                     )}
                 </div>
             </form>
         </div>
        )
    }
}
}