"use client";

/**
 * 研究资料查询：自然语言问题 → 生成检索式 → 在选定来源检索 → 总结 / 生成引用。
 */

import { useState } from "react";
import { Search } from "lucide-react";

import { CredibilityBadge, InfoRow, RawDetails } from "@/components/display";
import { ErrorBanner, Loading, PageHeading } from "@/components/feedback";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Textarea } from "@/components/ui/textarea";
import { UsageGuide } from "@/components/usage-guide";
import { ApiError } from "@/lib/api";
import { researchApi } from "@/lib/services";
import type { Citation, SearchQuery, Summary } from "@/lib/types";
import { cn } from "@/lib/utils";

/* eslint-disable @typescript-eslint/no-explicit-any */

const SOURCES: { value: string; label: string }[] = [
  { value: "PUBMED", label: "PubMed" },
  { value: "CNKI", label: "中国知网" },
  { value: "WANFANG", label: "万方数据" },
  { value: "UPTODATE", label: "UpToDate" },
  { value: "COCHRANE", label: "Cochrane" },
];

/** 证据分级 → 配色（越强越绿）。 */
function evidenceVariant(
  level: string,
): "success" | "info" | "warning" | "muted" {
  if (level.startsWith("1")) return "success";
  if (level.startsWith("2")) return "info";
  if (level.startsWith("3") || level === "4") return "warning";
  return "muted";
}

export default function ResearchPage() {
  const [question, setQuestion] = useState("");
  const [searchQuery, setSearchQuery] = useState<SearchQuery | null>(null);
  const [selectedSources, setSelectedSources] = useState<string[]>(["PUBMED"]);
  const [results, setResults] = useState<any>(null);
  const [summary, setSummary] = useState<Summary | null>(null);
  const [citations, setCitations] = useState<Citation[] | null>(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function run<T>(fn: () => Promise<T>, after?: (v: T) => void) {
    setError(null);
    setBusy(true);
    try {
      after?.(await fn());
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "操作失败");
    } finally {
      setBusy(false);
    }
  }

  const items: any[] = results?.page?.items ?? results?.items ?? [];

  function toggleSource(val: string) {
    setSelectedSources((prev) =>
      prev.includes(val) ? prev.filter((x) => x !== val) : [...prev, val],
    );
  }

  return (
    <div className="space-y-6">
      <PageHeading
        icon={<Search className="size-5" />}
        title="循证检索"
        description="按 PICO 框架将临床问题转为专业检索式，检索医学数据库、总结证据并生成规范引用。"
      />

      <UsageGuide
        steps={[
          { title: "描述研究问题", detail: "用自然语言输入问题，系统按 PICO 生成专业检索式。" },
          { title: "选择来源检索", detail: "勾选 PubMed / 中国知网等数据库，点击「检索」获取文献。" },
          { title: "生成总结", detail: "对检索结果一键总结，结论标注是否已核验与证据分级。" },
          { title: "生成引用", detail: "按温哥华格式等导出规范引用，便于写作。" },
        ]}
        tip="标注「未验证」的结论务必回到原文核对；证据等级越高（1 类）可信度越强。"
      />

      <Card>
        <CardHeader>
          <CardTitle>① 生成检索式</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            <Textarea
              rows={2}
              value={question}
              onChange={(e) => setQuestion(e.target.value)}
              placeholder="用自然语言描述研究问题，如：他汀类药物对老年冠心病患者二级预防的疗效"
            />
            <Button
              disabled={!question || busy}
              onClick={() =>
                run(
                  () => researchApi.generateSearchQuery({ question }),
                  (v: any) => {
                    setSearchQuery(v?.query ?? v);
                    setResults(null);
                    setSummary(null);
                    setCitations(null);
                  },
                )
              }
            >
              生成检索式
            </Button>

            {searchQuery && (
              <div className="rounded-lg border border-border bg-muted/50 p-4">
                <p className="mb-2 font-mono text-sm text-primary">
                  {searchQuery.expression}
                </p>
                {searchQuery.meshTerms?.length > 0 && (
                  <div className="mb-2 flex flex-wrap gap-1.5">
                    {searchQuery.meshTerms.map((m) => (
                      <Badge key={m} variant="info">
                        MeSH: {m}
                      </Badge>
                    ))}
                  </div>
                )}
                {searchQuery.pico && (
                  <div className="mt-2 grid grid-cols-2 gap-x-4 text-xs sm:grid-cols-4">
                    {searchQuery.pico.population && (
                      <InfoRow label="P 人群">
                        {searchQuery.pico.population}
                      </InfoRow>
                    )}
                    {searchQuery.pico.intervention && (
                      <InfoRow label="I 干预">
                        {searchQuery.pico.intervention}
                      </InfoRow>
                    )}
                    {searchQuery.pico.comparison && (
                      <InfoRow label="C 对照">
                        {searchQuery.pico.comparison}
                      </InfoRow>
                    )}
                    {searchQuery.pico.outcome && (
                      <InfoRow label="O 结局">{searchQuery.pico.outcome}</InfoRow>
                    )}
                  </div>
                )}
                {searchQuery.rationale && (
                  <p className="mt-2 text-xs text-muted-foreground">
                    {searchQuery.rationale}
                  </p>
                )}
              </div>
            )}
          </div>
        </CardContent>
      </Card>

      {searchQuery && (
        <Card>
          <CardHeader>
            <CardTitle>② 检索资料</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="mb-3 flex flex-wrap gap-2">
              {SOURCES.map((s) => (
                <button
                  key={s.value}
                  type="button"
                  onClick={() => toggleSource(s.value)}
                  className={cn(
                    "rounded-lg border px-3 py-1.5 text-xs transition",
                    selectedSources.includes(s.value)
                      ? "border-primary bg-primary/10 text-primary"
                      : "border-input text-muted-foreground hover:bg-muted",
                  )}
                >
                  {s.label}
                </button>
              ))}
            </div>
            <Button
              disabled={busy || selectedSources.length === 0}
              onClick={() =>
                run(
                  () =>
                    researchApi.search({
                      query: searchQuery,
                      sources: selectedSources,
                    }),
                  (v: any) => setResults(v),
                )
              }
            >
              检索
            </Button>

            {results?.empty && (
              <p className="mt-4 rounded-lg bg-warning/15 px-4 py-3 text-sm text-warning-foreground">
                {results.notice ?? "未找到匹配资料"}
              </p>
            )}

            {items.length > 0 && (
              <ul className="mt-4 space-y-2">
                {items.map((it: any, i: number) => (
                  <li key={it.id ?? i} className="rounded-lg border border-border p-3">
                    <div className="flex items-start justify-between gap-3">
                      <a
                        href={it.url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-sm font-medium text-primary hover:underline"
                      >
                        {it.title}
                      </a>
                      {it.source && <Badge variant="info">{it.source}</Badge>}
                    </div>
                    {it.authors && (
                      <p className="mt-1 text-xs text-muted-foreground">
                        {Array.isArray(it.authors)
                          ? it.authors.join(", ")
                          : it.authors}
                        {it.publishedAt && ` · ${it.publishedAt}`}
                      </p>
                    )}
                    {it.abstract && (
                      <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">
                        {it.abstract}
                      </p>
                    )}
                  </li>
                ))}
              </ul>
            )}
          </CardContent>
        </Card>
      )}

      {items.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle>③ 总结与引用</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex gap-3">
              <Button
                variant="outline"
                disabled={busy}
                onClick={() =>
                  run(
                    () => researchApi.summarize({ items }),
                    (v: Summary) => setSummary(v),
                  )
                }
              >
                生成总结
              </Button>
              <Button
                variant="outline"
                disabled={busy}
                onClick={() =>
                  run(
                    () =>
                      researchApi.generateCitation({
                        items,
                        format: "VANCOUVER",
                      }),
                    (v: Citation[]) => setCitations(v),
                  )
                }
              >
                生成引用（温哥华格式）
              </Button>
            </div>

            {summary && <SummaryView summary={summary} />}

            {citations && citations.length > 0 && (
              <div className="mt-5">
                <h3 className="mb-2 text-sm font-semibold text-foreground">
                  引用（{citations.length}）
                </h3>
                <ol className="list-inside list-decimal space-y-1.5 text-sm text-foreground/80">
                  {citations.map((c, i) => (
                    <li key={c.itemId ?? i}>{c.text}</li>
                  ))}
                </ol>
              </div>
            )}
          </CardContent>
        </Card>
      )}

      {busy && <Loading />}
      {error && <ErrorBanner message={error} />}
    </div>
  );
}

/** 资料总结：结论（含可追溯/未验证）+ 证据分级 + 提示 + 可信度。 */
function SummaryView({ summary }: { summary: Summary }) {
  return (
    <div className="mt-5">
      <p className="mb-3 rounded-lg bg-warning/15 px-3 py-2 text-xs text-warning-foreground">
        ⚠️ {summary.notice}
      </p>

      <h3 className="mb-2 text-sm font-semibold text-foreground">总结结论</h3>
      <ul className="space-y-2">
        {summary.conclusions?.map((c) => (
          <li key={c.id} className="rounded-lg border border-border p-3 text-sm">
            <p className="text-foreground">{c.statement}</p>
            <div className="mt-1.5 flex flex-wrap items-center gap-2">
              {c.verified ? (
                <Badge variant="success">已核验</Badge>
              ) : (
                <Badge variant="destructive">{c.unverifiedLabel ?? "未验证"}</Badge>
              )}
              {c.citations?.map((s, i) => (
                <span key={i} className="text-xs text-muted-foreground">
                  [{s.title ?? s.id}]
                </span>
              ))}
            </div>
          </li>
        ))}
      </ul>

      {summary.gradedItems?.length > 0 && (
        <div className="mt-4">
          <h3 className="mb-2 text-sm font-semibold text-foreground">证据分级</h3>
          <ul className="space-y-1.5">
            {summary.gradedItems.map((g) => (
              <li
                key={g.itemId}
                className="flex items-center justify-between gap-3 text-sm"
              >
                <a
                  href={g.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="truncate text-foreground/80 hover:text-primary hover:underline"
                >
                  {g.title}
                </a>
                <Badge variant={evidenceVariant(g.evidenceLevel)}>
                  证据等级 {g.evidenceLevel}
                </Badge>
              </li>
            ))}
          </ul>
        </div>
      )}

      <div className="mt-4">
        <CredibilityBadge annotation={summary.annotation} />
      </div>

      <RawDetails data={summary} />
    </div>
  );
}