import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { AppIcon } from "./PixelIcons";
import { Card, Tag, Loading } from "./ui";
import { api } from "../lib/api";

type Props = {
  symbol: string;
  scope: "stock" | "company" | "fund";
  title?: string;
  auto?: boolean;
  aiFocus: { symbol: string; subPage: string; label: string; cardTitle?: string };
};

function verdictTone(v?: string): "up" | "down" | "gold" {
  if (v === "偏正面") return "up";
  if (v === "謹慎") return "down";
  return "gold";
}

export default function AiSummaryCard({ symbol, scope, title = "AI 今日總結", auto = true, aiFocus }: Props) {
  const qc = useQueryClient();
  const q = useQuery({
    queryKey: ["ai-summary", symbol, scope],
    queryFn: () => api.aiSummary(symbol, scope, auto),
    enabled: !!symbol && auto,
    staleTime: 12 * 3600_000,
    retry: 1,
  });

  const syncMut = useMutation({
    mutationFn: () => api.syncAiSummary(symbol, scope),
    onSuccess: (data) => {
      qc.setQueryData(["ai-summary", symbol, scope], data);
    },
  });

  const summary = q.data?.summary;
  const loading = q.isLoading || syncMut.isPending;

  return (
    <Card
      className="mt"
      title={title}
      ico={<AppIcon name="scroll" size={22} framed variant="hero" />}
      ai
      aiFocus={{ ...aiFocus, cardTitle: title }}
      onRefresh={() => syncMut.mutate()}
      refreshing={loading}
      refreshLabel="重新分析"
    >
      <div className="ai-summary-toolbar">
        <span className="small muted">
          {q.data?.cached
            ? `今日已分析 · ${q.data?.summary?.day || ""} · 讀資料庫（省 token）`
            : q.data?.mcpUsed
              ? "MCP + 本機資料已送 AI 總結"
              : "整合本機財報／公司研究；可串 MCP 補充"}
        </span>
      </div>

      {loading && !summary ? (
        <Loading label="MCP 取資料並產生總結…" />
      ) : summary ? (
        <>
          <div className="fund-verdict-row">
            {summary.verdict ? <Tag tone={verdictTone(summary.verdict)}>{summary.verdict}</Tag> : null}
            {summary.provider ? <span className="small muted">via {summary.provider}</span> : null}
          </div>
          <div className="interpret-box">
            <div className="interpret-label">AI 總結</div>
            <p>{summary.summaryZh}</p>
            {summary.bullets?.length ? (
              <ul className="interpret-bullets">
                {summary.bullets.map((b, i) => (
                  <li key={i}>{b}</li>
                ))}
              </ul>
            ) : null}
          </div>
          {summary.risks?.length ? (
            <div className="ai-summary-risks mt-s">
              <h4 className="small" style={{ color: "var(--crimson)", margin: "0 0 6px" }}>
                風險／待確認
              </h4>
              <ul className="interpret-bullets">
                {summary.risks.map((r, i) => (
                  <li key={i}>{r}</li>
                ))}
              </ul>
            </div>
          ) : null}
          {summary.sources?.length ? (
            <p className="small muted mt-s">來源：{summary.sources.join(" · ")}</p>
          ) : null}
          {q.data?.skipReason ? <p className="small muted">{q.data.skipReason}</p> : null}
          {q.data?.aiError ? <p className="small muted">AI 略過：{q.data.aiError}（已用規則備援）</p> : null}
        </>
      ) : (
        <p className="muted">
          尚無今日總結。
          <button type="button" className="btn-primary" style={{ marginLeft: 8 }} disabled={loading} onClick={() => syncMut.mutate()}>
            產生 AI 總結
          </button>
        </p>
      )}
    </Card>
  );
}