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) {
                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 '>
                <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={(e) => setCity(e.target.value)}
                            placeholder="请输入城市名称"
                            disabled={isLoading}
                            className={cn('pl-10 pr-4 py-2 w-full', inputError && 'border-red-500')}
                        />
                    </div>
                    {inputError && (
                        <div className="text-red-500 text-sm mt-1">
                            <AlertCircle className="inline w-4 h-4 mr-1" />
                            <p className="inline-block">{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>



        )
    }

}