"use client";

import { useEffect, useState } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";

type Config = {
  llm?: {
    provider?: "gemini" | "openai";
    gemini?: { api_key?: string; base_url?: string };
    openai?: { api_key?: string; base_url?: string };
  };
  data_sources?: {
    tushare?: { api_key?: string };
    finnhub?: { api_key?: string };
    jp_source?: { api_key?: string };
  };
  database?: { url?: string };
  prompts?: { info?: string; finance?: string };
};

export default function ConfigPage() {
  const [cfg, setCfg] = useState<Config | null>(null);
  const [saving, setSaving] = useState(false);
  const [msg, setMsg] = useState<string | null>(null);
  const [health, setHealth] = useState<string>("unknown");

  // form inputs (敏感字段不回显，留空表示保持现有值)
  const [provider, setProvider] = useState<"gemini" | "openai">("gemini");
  const [geminiBaseUrl, setGeminiBaseUrl] = useState("");
  const [geminiKey, setGeminiKey] = useState(""); // 留空则保留
  const [openaiBaseUrl, setOpenaiBaseUrl] = useState("");
  const [openaiKey, setOpenaiKey] = useState(""); // 留空则保留
  const [tushareKey, setTushareKey] = useState(""); // 留空则保留
  const [finnhubKey, setFinnhubKey] = useState(""); // 留空则保留
  const [jpKey, setJpKey] = useState(""); // 留空则保留
  const [dbUrl, setDbUrl] = useState("");
  const [promptInfo, setPromptInfo] = useState("");
  const [promptFinance, setPromptFinance] = useState("");

  async function loadConfig() {
    try {
      const res = await fetch("/api/config");
      const data: Config = await res.json();
      setCfg(data);
      // 非敏感字段可回显
      setProvider((data.llm?.provider as any) ?? "gemini");
      setGeminiBaseUrl(data.llm?.gemini?.base_url ?? "");
      setOpenaiBaseUrl(data.llm?.openai?.base_url ?? "");
      setDbUrl(data.database?.url ?? "");
      setPromptInfo(data.prompts?.info ?? "");
      setPromptFinance(data.prompts?.finance ?? "");
    } catch {
      setMsg("加载配置失败");
    }
  }

  async function saveConfig() {
    if (!cfg) return;
    setSaving(true);
    setMsg(null);
    try {
      // 构造覆盖配置：敏感字段若为空则沿用现有值
      const next: Config = {
        llm: {
          provider,
          gemini: {
            base_url: geminiBaseUrl,
            api_key: geminiKey || cfg.llm?.gemini?.api_key || undefined,
          },
          openai: {
            base_url: openaiBaseUrl,
            api_key: openaiKey || cfg.llm?.openai?.api_key || undefined,
          },
        },
        data_sources: {
          tushare: { api_key: tushareKey || cfg.data_sources?.tushare?.api_key || undefined },
          finnhub: { api_key: finnhubKey || cfg.data_sources?.finnhub?.api_key || undefined },
          jp_source: { api_key: jpKey || cfg.data_sources?.jp_source?.api_key || undefined },
        },
        database: { url: dbUrl },
        prompts: { info: promptInfo, finance: promptFinance },
      };
      const res = await fetch("/api/config", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(next),
      });
      const ok = await res.json();
      if (ok?.status === "ok") {
        setMsg("保存成功");
        await loadConfig();
        // 清空敏感输入（避免页面存储）
        setGeminiKey("");
        setOpenaiKey("");
        setTushareKey("");
        setFinnhubKey("");
        setJpKey("");
      } else {
        setMsg("保存失败");
      }
    } catch {
      setMsg("保存失败");
    } finally {
      setSaving(false);
    }
  }

  async function testHealth() {
    try {
      const res = await fetch("/health");
      const h = await res.json();
      setHealth(h?.status ?? "unknown");
    } catch {
      setHealth("error");
    }
  }

  useEffect(() => {
    loadConfig();
    testHealth();
  }, []);

  return (
    <div className="space-y-6">
      <header className="space-y-2">
        <h1 className="text-2xl font-semibold">配置中心</h1>
        <p className="text-sm text-muted-foreground">
          切换 LLM、配置数据源与模板；不回显敏感密钥，留空表示保持现值。
        </p>
      </header>

      <Card>
        <CardHeader>
          <CardTitle>后端健康</CardTitle>
          <CardDescription>GET /health</CardDescription>
        </CardHeader>
        <CardContent className="flex items-center gap-2">
          <Badge variant={health === "ok" ? "secondary" : "outline"}>{health}</Badge>
          <Button variant="outline" onClick={testHealth}>重新测试</Button>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>LLM 设置</CardTitle>
          <CardDescription>Gemini / OpenAI</CardDescription>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="flex gap-2">
            <label className="text-sm w-28">Provider</label>
            <select
              className="border rounded px-2 py-1 bg-background"
              value={provider}
              onChange={(e) => setProvider(e.target.value as any)}
            >
              <option value="gemini">Gemini</option>
              <option value="openai">OpenAI</option>
            </select>
          </div>
          <div className="flex gap-2">
            <label className="text-sm w-28">Gemini Base URL</label>
            <Input placeholder="可留空" value={geminiBaseUrl} onChange={(e) => setGeminiBaseUrl(e.target.value)} />
          </div>
          <div className="flex gap-2 items-center">
            <label className="text-sm w-28">Gemini Key</label>
            <Input type="password" placeholder="留空=保持现值" value={geminiKey} onChange={(e) => setGeminiKey(e.target.value)} />
          </div>
          <div className="flex gap-2">
            <label className="text-sm w-28">OpenAI Base URL</label>
            <Input placeholder="可留空" value={openaiBaseUrl} onChange={(e) => setOpenaiBaseUrl(e.target.value)} />
          </div>
          <div className="flex gap-2 items-center">
            <label className="text-sm w-28">OpenAI Key</label>
            <Input type="password" placeholder="留空=保持现值" value={openaiKey} onChange={(e) => setOpenaiKey(e.target.value)} />
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>数据源密钥</CardTitle>
          <CardDescription>TuShare / Finnhub / JP</CardDescription>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="flex gap-2 items-center">
            <label className="text-sm w-28">TuShare</label>
            <Input type="password" placeholder="留空=保持现值" value={tushareKey} onChange={(e) => setTushareKey(e.target.value)} />
          </div>
          <div className="flex gap-2 items-center">
            <label className="text-sm w-28">Finnhub</label>
            <Input type="password" placeholder="留空=保持现值" value={finnhubKey} onChange={(e) => setFinnhubKey(e.target.value)} />
          </div>
          <div className="flex gap-2 items-center">
            <label className="text-sm w-28">JP Source</label>
            <Input type="password" placeholder="留空=保持现值" value={jpKey} onChange={(e) => setJpKey(e.target.value)} />
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>数据库与模板</CardTitle>
          <CardDescription>非敏感配置可回显</CardDescription>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="flex gap-2">
            <label className="text-sm w-28">DB URL</label>
            <Input placeholder="postgresql+asyncpg://..." value={dbUrl} onChange={(e) => setDbUrl(e.target.value)} />
          </div>
          <div className="flex gap-2">
            <label className="text-sm w-28">Prompt Info</label>
            <Input placeholder="模板：info" value={promptInfo} onChange={(e) => setPromptInfo(e.target.value)} />
          </div>
          <div className="flex gap-2">
            <label className="text-sm w-28">Prompt Finance</label>
            <Input placeholder="模板：finance" value={promptFinance} onChange={(e) => setPromptFinance(e.target.value)} />
          </div>
          <div className="flex gap-2">
            <Button onClick={saveConfig} disabled={saving}>{saving ? "保存中…" : "保存配置"}</Button>
            {msg && <span className="text-xs text-muted-foreground">{msg}</span>}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}