import { useConfigStore } from './store';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { configSchema } from './store/schema';

export const ConfigPage = () => {
  const { config, setConfig, resetConfig } = useConfigStore();

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const result = configSchema.safeParse(config);
    if (result.success) {
      console.log('配置已保存:', config);
      // 可以在此处添加 toast 通知
    } else {
      console.error('验证错误:', result.error.format());
    }
  };

  const handleChange = (field: keyof typeof config, value: string | boolean) => {
    setConfig({ [field]: value });
  };

  return (
    <div className="container mx-auto max-w-2xl py-8">
      <Card>
        <CardHeader>
          <CardTitle>CNB 配置</CardTitle>
          <CardDescription>
            配置您的 CNB API 设置。这些设置会保存在浏览器的本地存储中。
          </CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-6">
            <div className="space-y-2">
              <Label htmlFor="api-key">API 密钥</Label>
              <Input
                id="api-key"
                type="text"
                value={config.CNB_API_KEY}
                onChange={(e) => handleChange('CNB_API_KEY', e.target.value)}
                placeholder="请输入您的 CNB API 密钥"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="cookie">Cookie</Label>
              <Input
                id="cookie"
                type="text"
                value={config.CNB_COOKIE}
                onChange={(e) => handleChange('CNB_COOKIE', e.target.value)}
                placeholder="请输入您的 CNB Cookie"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="cors-url">跨域地址</Label>
              <Input
                id="cors-url"
                type="url"
                value={config.CNB_CORS_URL}
                onChange={(e) => handleChange('CNB_CORS_URL', e.target.value)}
                placeholder="https://cors.example.com"
              />
            </div>

            <div className="flex items-center space-x-2">
              <Checkbox
                id="enable-cors"
                checked={config.ENABLE_CORS}
                onCheckedChange={(checked) => handleChange('ENABLE_CORS', checked === true)}
              />
              <Label htmlFor="enable-cors" className="cursor-pointer">
                启用跨域
              </Label>
            </div>

            <div className="space-y-2">
              <Label htmlFor="ai-base-url">AI 基础地址</Label>
              <Input
                id="ai-base-url"
                type="url"
                value={config.AI_BASE_URL}
                onChange={(e) => handleChange('AI_BASE_URL', e.target.value)}
                placeholder="请输入 AI 基础地址"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="ai-model">AI 模型</Label>
              <Input
                id="ai-model"
                type="text"
                value={config.AI_MODEL}
                onChange={(e) => handleChange('AI_MODEL', e.target.value)}
                placeholder="请输入 AI 模型名称"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="ai-api-key">AI 密钥</Label>
              <Input
                id="ai-api-key"
                type="password"
                value={config.AI_API_KEY}
                onChange={(e) => handleChange('AI_API_KEY', e.target.value)}
                placeholder="请输入您的 AI API 密钥"
              />
            </div>

            <div className="flex gap-4">
              <Button type="submit">保存配置</Button>
              <Button type="button" variant="outline" onClick={resetConfig}>
                重置为默认值
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  );
};

export default ConfigPage;