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 { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { Info } from 'lucide-react';
import { configSchema } from './store/schema';
import { toast } from 'sonner';
import { useLayoutStore } from '../auth/store';
import { useShallow } from 'zustand/shallow';
import { queryLogin } from '@/modules/query';

export const ConfigPage = () => {
  const { config, setConfig, resetConfig } = useConfigStore();
  const layoutStore = useLayoutStore(useShallow(state => ({ me: state.me })))
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const result = configSchema.safeParse(config);
    if (result.success) {
      toast.success('配置已保存')
      setTimeout(() => {
        location.reload()
      }, 400)
    } else {
      console.error('验证错误:', result.error.format());
    }
  };

  const handleChange = (field: keyof typeof config, value: string | boolean) => {
    setConfig({ [field]: value });
  };
  const saveToRemote = async () => {
    const _config = config;
    const res = await queryLogin.post({
      path: 'config',
      key: 'update',
      data: {
        key: 'cnb_center_config.json',
        data: _config,
      }
    });
    if (res.code === 200) {
      toast.success('保存到远端成功')
    } else {
      toast.error('保存到远端失败')
    }
  }

  const loadFromRemote = async () => {
    const res = await queryLogin.post({
      path: 'config',
      key: 'get',
      data: {
        key: 'cnb_center_config.json',
      }
    })
    if (res.code === 404) {
      toast.error('远端配置不存在')
      return;
    }
    if (res.code === 200) {
      const config = res.data?.data as typeof config;
      setConfig(config);
      toast.success('获取远端配置成功')
    }
  }


  return (
    <TooltipProvider>
      <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">
                <div className="flex items-center gap-2">
                  <Label htmlFor="api-key">API 密钥</Label>
                  <Tooltip>
                    <TooltipTrigger>
                      <Info className="h-4 w-4 text-muted-foreground cursor-help" />
                    </TooltipTrigger>
                    <TooltipContent>
                      <p>
                        用于访问 CNB API 的密钥。
                        <a
                          href="https://cnb.cool/profile/token"
                          target="_blank"
                          rel="noopener noreferrer"
                          className="underline ml-1 hover:text-blue-400"
                        >
                          点击获取
                        </a>
                      </p>
                    </TooltipContent>
                  </Tooltip>
                </div>
                <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">
                <div className="flex items-center gap-2">
                  <Label htmlFor="cookie">Cookie</Label>
                  <Tooltip>
                    <TooltipTrigger>
                      <Info className="h-4 w-4 text-muted-foreground cursor-help" />
                    </TooltipTrigger>
                    <TooltipContent>
                      <p>
                        用于身份验证的 Cookie 信息。
                        <a
                          href="https://cnb.cool/kevisual/cnb-live-extension"
                          target="_blank"
                          rel="noopener noreferrer"
                          className="underline ml-1 hover:text-blue-400"
                        >
                          前往获取
                        </a>
                      </p>
                    </TooltipContent>
                  </Tooltip>
                </div>
                <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">
                <div className="flex items-center gap-2">
                  <Label htmlFor="ai-api-key">AI 密钥</Label>
                  <Tooltip>
                    <TooltipTrigger>
                      <Info className="h-4 w-4 text-muted-foreground cursor-help" />
                    </TooltipTrigger>
                    <TooltipContent>
                      <p>
                        如果使用 CNB 的 AI，密钥和 API 密钥一样即可
                      </p>
                    </TooltipContent>
                  </Tooltip>
                </div>
                <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>
                {layoutStore.me && <>
                  <Button type="button" variant="outline" onClick={loadFromRemote}>
                    获取远端配置
                  </Button>
                  <Button type="button" variant="outline" onClick={saveToRemote}>
                    保存到远端
                  </Button>
                </>
                }
              </div>
            </form>
          </CardContent>
        </Card>
      </div>
    </TooltipProvider>
  );
};

export default ConfigPage;