AI/ontology_platform/web/frontend/src/pages/ResearchPage.tsx

import { useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { toast } from "sonner";
import {
  AlertCircle,
  ArrowLeft,
  Brain,
  CheckCircle2,
  History,
  Loader2,
  Sparkles,
  Target,
} from "lucide-react";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { Badge, BadgeProps } from "@/components/ui/badge";
import { Skeleton } from "@/components/ui/skeleton";
import { useProject } from "@/hooks/useProjects";
import {
  useResearchSessions,
  useStartResearch,
} from "@/hooks/useResearch";
import { ResearchRunResult } from "@/lib/api/research";

const startResearchSchema = z.object({
  source_name: z.string().min(1, "소스를 선택하세요"),
  url: z
    .string()
    .url("올바른 URL 형식이 아닙니다")
    .or(z.literal(""))
    .optional(),
  goal: z
    .string()
    .min(3, "최소 3자")
    .max(500, "최대 500자"),
  max_depth: z.number().int().min(0).max(10),
  max_steps: z.number().int().min(1).max(50),
  max_branch: z.number().int().min(1).max(30),
  min_relevance: z.number().min(0).max(1),
  same_domain_only: z.boolean(),
  extraction_mode: z.enum(["rule_only", "llm_only", "hybrid", "compare"]),
  extractor_provider: z.enum(["lm_studio", "openai", "ollama"]),
  extractor_model: z.string().optional(),
  extractor_base_url: z.string().optional(),
  fallback_to_rules: z.boolean(),
});

type StartResearchFormValues = z.infer<typeof startResearchSchema>;

function sessionStatusVariant(status?: string | null): BadgeProps["variant"] {
  switch (status) {
    case "completed":
      return "success";
    case "failed":
      return "destructive";
    case "canceled":
      return "secondary";
    case "running":
    case "pending":
      return "default";
    default:
      return "outline";
  }
}

export default function ResearchPage() {
  const navigate = useNavigate();
  const { projectId } = useParams<{ projectId: string }>();
  const { t } = useTranslation();
  const projectName = projectId ?? "";

  const { data: project, isLoading: projectLoading, isError, error, refetch } =
    useProject(projectName);
  const sessions = useResearchSessions(projectName);
  const startResearch = useStartResearch(projectName);

  const [lastResult, setLastResult] = useState<ResearchRunResult | null>(null);

  const {
    register,
    handleSubmit,
    setValue,
    watch,
    formState: { errors, isSubmitting },
  } = useForm<StartResearchFormValues>({
    resolver: zodResolver(startResearchSchema),
    defaultValues: {
      source_name: "",
      url: "",
      goal: "Semantic ontology exploration",
      max_depth: 2,
      max_steps: 12,
      max_branch: 8,
      min_relevance: 0.35,
      same_domain_only: true,
      extraction_mode: "hybrid",
      extractor_provider: "lm_studio",
      extractor_model: "",
      extractor_base_url: "http://localhost:1234/v1",
      fallback_to_rules: true,
    },
  });

  const onSubmit = async (values: StartResearchFormValues) => {
    try {
      setLastResult(null);
      const usesLlm = values.extraction_mode !== "rule_only";
      const res = await startResearch.mutateAsync({
        project_name: projectName,
        source_name: values.source_name,
        url: values.url || undefined,
        goal: values.goal,
        max_depth: values.max_depth,
        max_steps: values.max_steps,
        max_branch: values.max_branch,
        min_relevance: values.min_relevance,
        same_domain_only: values.same_domain_only,
        extraction_mode: values.extraction_mode,
        extractor_provider: values.extractor_provider,
        extractor_model: usesLlm ? values.extractor_model || null : null,
        extractor_base_url: usesLlm ? values.extractor_base_url || null : null,
        fallback_to_rules: values.fallback_to_rules,
      });
      setLastResult(res);
      toast.success(t("research.completed", "자율 연구가 완료되었습니다"));
    } catch (e) {
      toast.error(
        t("research.failed", "실패: {{msg}}", {
          msg: (e as Error).message,
        }),
      );
    }
  };

  const sources = project?.sources ?? [];
  const extractionMode = watch("extraction_mode");
  const usesLlm = extractionMode !== "rule_only";

  return (
    <div className="mx-auto max-w-6xl px-6 py-10">
      <div className="mb-6 flex items-center gap-3">
        <Button
          variant="ghost"
          size="icon"
          onClick={() => navigate(`/sources/${projectName}`)}
          aria-label={t("common.back", "이전")}
        >
          <ArrowLeft className="h-4 w-4" />
        </Button>
        <div className="flex-1">
          <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight">
            <Brain className="h-6 w-6 text-primary" />
            {t("research.title", "자율 연구")}
          </h1>
          {project && (
            <p className="text-sm text-muted-foreground">
              {project.name}
              <span className="capitalize text-muted-foreground/70">
                {" "}
                · {project.domain}
              </span>
            </p>
          )}
        </div>
      </div>

      {isError && (
        <Card className="mb-6 border-destructive">
          <CardContent className="flex items-center justify-between gap-3 py-4">
            <div className="flex items-center gap-2 text-sm text-destructive">
              <AlertCircle className="h-4 w-4" />
              <span>{(error as Error).message}</span>
            </div>
            <Button
              variant="outline"
              size="sm"
              type="button"
              onClick={() => refetch()}
            >
              {t("common.retry", "다시 시도")}
            </Button>
          </CardContent>
        </Card>
      )}

      <div className="grid gap-6 lg:grid-cols-[460px_1fr]">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Target className="h-5 w-5" />
              {t("research.formTitle", "자율 연구 설정")}
            </CardTitle>
            <CardDescription>
              {t(
                "research.formDesc",
                "AI가 시드에서 시작해 스스로 링크를 따라가며 온톨로지를 확장합니다",
              )}
            </CardDescription>
          </CardHeader>
          <CardContent>
            <form
              onSubmit={handleSubmit(onSubmit)}
              className="space-y-4"
              noValidate
            >
              <div className="space-y-1.5">
                <Label htmlFor="source_name">
                  {t("research.source", "참고 소스")}
                </Label>
                {projectLoading ? (
                  <Skeleton className="h-10" />
                ) : (
                  <Select
                    id="source_name"
                    {...register("source_name")}
                    onChange={(e) =>
                      setValue("source_name", e.target.value, {
                        shouldValidate: true,
                      })
                    }
                  >
                    <option value="">
                      {t("research.pickSource", "소스를 선택하세요...")}
                    </option>
                    {sources.map((s) => (
                      <option key={s.id} value={s.name}>
                        {s.name} ({s.type})
                      </option>
                    ))}
                  </Select>
                )}
                {errors.source_name && (
                  <p className="text-xs text-destructive">
                    {errors.source_name.message}
                  </p>
                )}
              </div>

              <div className="space-y-1.5">
                <Label htmlFor="goal">{t("research.goal", "목표")}</Label>
                <Textarea
                  id="goal"
                  rows={2}
                  placeholder={t(
                    "research.goalPlaceholder",
                    "예: 인기 브랜드 향수의 노트 구성과 시즌 추천 정보 수집",
                  )}
                  {...register("goal")}
                />
                {errors.goal && (
                  <p className="text-xs text-destructive">
                    {errors.goal.message}
                  </p>
                )}
              </div>

              <div className="space-y-1.5">
                <Label htmlFor="url">
                  {t("research.seedUrl", "시드 URL")}{" "}
                  <span className="text-xs text-muted-foreground">
                    ({t("research.optional", "선택")})
                  </span>
                </Label>
                <Input
                  id="url"
                  placeholder="https://example.com/start"
                  {...register("url")}
                />
                {errors.url && (
                  <p className="text-xs text-destructive">
                    {errors.url.message}
                  </p>
                )}
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div className="space-y-1.5">
                  <Label htmlFor="max_steps">
                    {t("research.maxSteps", "최대 단계")}
                  </Label>
                  <Input
                    id="max_steps"
                    type="number"
                    min={1}
                    max={50}
                    {...register("max_steps", { valueAsNumber: true })}
                  />
                  {errors.max_steps && (
                    <p className="text-xs text-destructive">
                      {errors.max_steps.message}
                    </p>
                  )}
                </div>
                <div className="space-y-1.5">
                  <Label htmlFor="max_branch">
                    {t("research.maxBranch", "분기 폭")}
                  </Label>
                  <Input
                    id="max_branch"
                    type="number"
                    min={1}
                    max={30}
                    {...register("max_branch", { valueAsNumber: true })}
                  />
                  {errors.max_branch && (
                    <p className="text-xs text-destructive">
                      {errors.max_branch.message}
                    </p>
                  )}
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div className="space-y-1.5">
                  <Label htmlFor="max_depth">
                    {t("research.maxDepth", "최대 깊이")}
                  </Label>
                  <Input
                    id="max_depth"
                    type="number"
                    min={0}
                    max={10}
                    {...register("max_depth", { valueAsNumber: true })}
                  />
                </div>
                <div className="space-y-1.5">
                  <Label htmlFor="min_relevance">
                    {t("research.minRelevance", "최소 관련도")}
                  </Label>
                  <Input
                    id="min_relevance"
                    type="number"
                    step="0.05"
                    min={0}
                    max={1}
                    {...register("min_relevance", { valueAsNumber: true })}
                  />
                </div>
              </div>

              <label className="flex items-center gap-2 text-sm">
                <input
                  type="checkbox"
                  className="h-4 w-4 rounded border-input"
                  {...register("same_domain_only")}
                />
                <span>
                  {t("research.sameDomainOnly", "동일 도메인만 탐색")}
                </span>
              </label>

              <div className="space-y-3 rounded-md border bg-background-subtle p-3">
                <div className="grid grid-cols-2 gap-3">
                  <div className="space-y-1.5">
                    <Label htmlFor="extraction_mode">Extraction mode</Label>
                    <Select id="extraction_mode" {...register("extraction_mode")}>
                      <option value="hybrid">Hybrid</option>
                      <option value="rule_only">Rule only</option>
                      <option value="llm_only">LLM only</option>
                      <option value="compare">Compare</option>
                    </Select>
                  </div>
                  <div className="space-y-1.5">
                    <Label htmlFor="extractor_provider">Provider</Label>
                    <Select
                      id="extractor_provider"
                      disabled={!usesLlm}
                      {...register("extractor_provider")}
                    >
                      <option value="lm_studio">LM Studio</option>
                      <option value="openai">OpenAI</option>
                      <option value="ollama">Ollama</option>
                    </Select>
                  </div>
                </div>
                {usesLlm && (
                  <>
                    <div className="space-y-1.5">
                      <Label htmlFor="extractor_model">Model</Label>
                      <Input
                        id="extractor_model"
                        placeholder="deepseek-r1-distill-qwen-7b"
                        {...register("extractor_model")}
                      />
                    </div>
                    <div className="space-y-1.5">
                      <Label htmlFor="extractor_base_url">Base URL</Label>
                      <Input
                        id="extractor_base_url"
                        placeholder="http://localhost:1234/v1"
                        {...register("extractor_base_url")}
                      />
                    </div>
                    <label className="flex items-center gap-2 text-sm">
                      <input
                        type="checkbox"
                        className="h-4 w-4 rounded border-input"
                        {...register("fallback_to_rules")}
                      />
                      <span>Fallback to rules</span>
                    </label>
                  </>
                )}
              </div>

              <Button
                type="submit"
                className="w-full"
                disabled={isSubmitting || startResearch.isPending}
              >
                {startResearch.isPending ? (
                  <Loader2 className="h-4 w-4 animate-spin" />
                ) : (
                  <Sparkles className="h-4 w-4" />
                )}
                {t("research.start", "자율 연구 시작")}
              </Button>
              {startResearch.isPending && (
                <p className="text-xs text-muted-foreground">
                  {t(
                    "research.runningHint",
                    "장시간 걸릴 수 있습니다. 완료될 때까지 페이지를 닫지 마세요.",
                  )}
                </p>
              )}
            </form>
          </CardContent>
        </Card>

        <div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>{t("research.resultTitle", "최근 결과")}</CardTitle>
              <CardDescription>
                {t(
                  "research.resultDesc",
                  "이번 세션에서 실행된 연구의 결과",
                )}
              </CardDescription>
            </CardHeader>
            <CardContent>
              {!lastResult && !startResearch.isPending && (
                <p className="py-8 text-center text-sm text-muted-foreground">
                  {t(
                    "research.idleHint",
                    "왼쪽에서 자율 연구를 시작하면 결과가 여기에 표시됩니다",
                  )}
                </p>
              )}
              {startResearch.isPending && (
                <div className="flex flex-col items-center gap-3 py-8 text-center text-muted-foreground">
                  <Loader2 className="h-8 w-8 animate-spin text-primary" />
                  <p>{t("research.runningTitle", "AI가 연구 중입니다...")}</p>
                </div>
              )}
              {lastResult && !startResearch.isPending && (
                <div className="space-y-4">
                  <div className="flex items-center gap-2 text-sm text-green-700">
                    <CheckCircle2 className="h-4 w-4" />
                    {t("research.doneHint", "완료")}
                  </div>
                  <div className="grid grid-cols-2 gap-3 text-sm sm:grid-cols-4">
                    <Stat
                      label={t("research.stepsTaken", "단계")}
                      value={lastResult.steps_taken}
                    />
                    <Stat
                      label={t("research.pagesVisited", "페이지")}
                      value={lastResult.pages_visited}
                    />
                    <Stat
                      label={t("research.entitiesFound", "엔티티")}
                      value={lastResult.entities_found}
                    />
                    <Stat
                      label={t("research.claimsAdded", "클레임")}
                      value={lastResult.claims_added}
                    />
                  </div>
                  {lastResult.error && (
                    <div className="flex items-start gap-2 rounded-md border border-destructive bg-destructive/5 px-3 py-2 text-sm text-destructive">
                      <AlertCircle className="mt-0.5 h-4 w-4 flex-shrink-0" />
                      <span>{lastResult.error}</span>
                    </div>
                  )}
                  <details className="rounded-md border bg-background">
                    <summary className="cursor-pointer px-3 py-2 text-sm font-medium">
                      {t("research.rawResult", "원시 응답 JSON")}
                    </summary>
                    <pre className="max-h-64 overflow-auto px-4 py-2 text-xs text-muted-foreground">
                      {JSON.stringify(lastResult, null, 2)}
                    </pre>
                  </details>
                </div>
              )}
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <History className="h-5 w-5" />
                {t("research.historyTitle", "세션 이력")}
              </CardTitle>
              <CardDescription>
                {t(
                  "research.historyDesc",
                  "이 프로젝트의 자율 연구 세션 기록",
                )}
              </CardDescription>
            </CardHeader>
            <CardContent>
              {sessions.isLoading && (
                <div className="space-y-2">
                  {Array.from({ length: 3 }).map((_, i) => (
                    <Skeleton key={i} className="h-12" />
                  ))}
                </div>
              )}
              {sessions.data && sessions.data.length === 0 && (
                <p className="py-6 text-center text-sm text-muted-foreground">
                  {t("research.historyEmpty", "아직 실행된 세션이 없습니다")}
                </p>
              )}
              {sessions.data && sessions.data.length > 0 && (
                <ul className="divide-y">
                  {sessions.data.map((s) => (
                    <li
                      key={s.job_id}
                      className="flex items-center justify-between gap-3 py-3 text-sm"
                    >
                      <div className="min-w-0 flex-1">
                        <div className="flex items-center gap-2">
                          <span className="font-medium">#{s.job_id}</span>
                          {s.status && (
                            <Badge variant={sessionStatusVariant(s.status)}>
                              {s.status}
                            </Badge>
                          )}
                        </div>
                        {s.goal && (
                          <p className="mt-0.5 truncate text-xs text-muted-foreground">
                            {s.goal}
                          </p>
                        )}
                      </div>
                      <div className="text-right text-xs text-muted-foreground">
                        {typeof s.pages_visited === "number" && (
                          <div>
                            {s.pages_visited}{" "}
                            {t("research.pages", "페이지")}
                          </div>
                        )}
                        {s.started_at && (
                          <div>{new Date(s.started_at).toLocaleString()}</div>
                        )}
                      </div>
                    </li>
                  ))}
                </ul>
              )}
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}

function Stat({
  label,
  value,
}: {
  label: string;
  value: number | undefined | null;
}) {
  return (
    <div className="rounded-md border bg-background px-3 py-2">
      <div className="text-xs text-muted-foreground">{label}</div>
      <div className="mt-1 text-xl font-semibold">
        {typeof value === "number" ? value : "—"}
      </div>
    </div>
  );
}