import { useConfigStore } from './store';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { Info } from 'lucide-react';
import { SidebarLayout } from '../sidebar/components';
export const ConfigPage = () => {
  const { config, setConfig, saveToRemote, loadFromRemote } = useConfigStore();
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    saveToRemote();
  };

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

  return (
    <SidebarLayout>
      <div className="container mx-auto max-w-2xl py-4 md:py-8 px-4">
        <div className="bg-white md:rounded-lg md:border md:shadow-sm">
          <div className="p-4 md:p-6 border-b">
            <h1 className="text-xl md:text-2xl font-bold">CNB 配置</h1>
            <p className="text-sm text-muted-foreground mt-1">
              配置您的 CNB API 设置。
            </p>
          </div>
          <div className="p-4 md:p-6">
            <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 信息，有效期7天。
                        <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="flex flex-col sm:flex-row gap-2 sm:gap-4">
                <Button type="button" variant="outline" onClick={loadFromRemote} className="w-full sm:w-auto">
                  获取远端配置
                </Button>
                <Button type="button" variant="outline" onClick={saveToRemote} className="w-full sm:w-auto">
                  保存到远端
                </Button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </SidebarLayout>
  );
};

export default ConfigPage;