import { Card } from '@/components/ui/Card';
import { Input } from '@/components/ui/Input';
import { Button } from '@/components/ui/Button';
import { useAuth } from '@/context/AuthContext';
import { useToast } from '@/context/ToastContext';

export function SettingsPage() {
  const { token, serverUrl, setToken, setServerUrl } = useAuth();
  const { toast } = useToast();

  return (
    <div className="max-w-2xl space-y-6">
      <h1 className="text-2xl font-bold">设置</h1>

      {/* Server Connection */}
      <Card>
        <h2 className="text-sm font-semibold text-dark-muted uppercase tracking-wider mb-4">服务器连接</h2>
        <div className="space-y-4">
          <Input
            label="服务器地址"
            value={serverUrl}
            onChange={(e) => setServerUrl(e.target.value)}
            placeholder="留空则使用同源地址（默认）"
          />
          <p className="text-xs text-dark-muted">
            当 Dashboard 由同一个 Express 服务器提供时留空。设置为例如{' '}
            <code className="text-dark-accent">http://192.168.1.100:3000</code> 用于远程服务器。
          </p>
        </div>
      </Card>

      {/* Authentication */}
      <Card>
        <h2 className="text-sm font-semibold text-dark-muted uppercase tracking-wider mb-4">认证</h2>
        <div className="space-y-4">
          <Input
            label="Bearer Token"
            type="password"
            value={token}
            onChange={(e) => setToken(e.target.value)}
            placeholder="输入 API Token"
          />
          <p className="text-xs text-dark-muted">
            Token 来自环境变量 <code className="text-dark-accent">BEARER_TOKEN</code> 或文件{' '}
            <code className="text-dark-accent">.social-mcp/bearer-token</code>。
          </p>
          <div className="flex gap-2">
            <Button
              variant="secondary"
              size="sm"
              onClick={() => {
                toast('success', '设置已保存');
              }}
            >
              保存
            </Button>
            <Button
              variant="ghost"
              size="sm"
              onClick={() => {
                setToken('');
                setServerUrl('');
                toast('info', '设置已清除');
              }}
            >
              全部清除
            </Button>
          </div>
        </div>
      </Card>

      {/* About */}
      <Card>
        <h2 className="text-sm font-semibold text-dark-muted uppercase tracking-wider mb-4">关于</h2>
        <div className="space-y-2 text-sm text-dark-muted">
          <p><span className="text-dark-text">Social MCP</span> — 多平台社交媒体自动化</p>
          <p>版本：0.1.0</p>
          <p>技术栈：React 19 + TypeScript + Tailwind CSS</p>
        </div>
      </Card>
    </div>
  );
}