"use client";

import { useState, useCallback, useRef, useEffect } from "react";
import { TestTube, Loader2, Download, CheckCircle2, AlertCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { toast } from "sonner";

const API_PREFIX = "/api/testcase-generator";

interface GenerateRequest {
  title: string;
  englishName: string;
  description: string;
  standardCode: string;
  serviceLevel: string;
  testCaseCount: number;
}

interface TaskStatusResponse {
  task_id: string;
  status: "pending" | "running" | "completed" | "failed";
  progress?: number;
  title?: string;
  english_name?: string;
  test_case_count?: number;
  generated_cases?: number;
  error_message?: string;
  currentMessage?: string;
}

interface CompletedResult {
  title?: string;
  english_name?: string;
  test_case_count?: number;
  file_size?: string;
}

export default function TestcaseGeneratorPage() {
  const [problemTitle, setProblemTitle] = useState("");
  const [problemSlug, setProblemSlug] = useState("");
  const [problemDescription, setProblemDescription] = useState("");
  const [stdProgram, setStdProgram] = useState("");
  const [serviceLevel, setServiceLevel] = useState<"standard" | "pro">("standard");
  const [testCaseCount, setTestCaseCount] = useState(10);

  const [isGenerating, setIsGenerating] = useState(false);
  const [progressOpen, setProgressOpen] = useState(false);
  const [progressTitle, setProgressTitle] = useState("正在生成测试数据");
  const [progressMessage, setProgressMessage] = useState("请稍候...");
  const [progressPercent, setProgressPercent] = useState(0);
  const [progressTaskId, setProgressTaskId] = useState("");
  const [progressGenerated, setProgressGenerated] = useState(0);
  const [progressTotal, setProgressTotal] = useState(0);
  const [progressRunningTime, setProgressRunningTime] = useState(0);
  const pollTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const startTimeRef = useRef(0);

  const [resultModalOpen, setResultModalOpen] = useState(false);
  const [resultData, setResultData] = useState<CompletedResult & { task_id?: string } | null>(null);
  const [errorBlock, setErrorBlock] = useState<{ title: string; message: string } | null>(null);

  const slugPattern = /^[a-z][a-z0-9_]*$/;

  const showProgress = useCallback(() => {
    setProgressOpen(true);
    setProgressPercent(0);
    setProgressGenerated(0);
    setProgressTotal(0);
    setProgressRunningTime(0);
    setProgressTaskId("");
    startTimeRef.current = Date.now();
  }, []);

  const hideProgress = useCallback(() => {
    setProgressOpen(false);
    if (pollTimerRef.current) {
      clearTimeout(pollTimerRef.current);
      pollTimerRef.current = null;
    }
  }, []);

  const updateProgress = useCallback(
    (opts: {
      title?: string;
      message?: string;
      progress?: number;
      taskId?: string;
      generatedCount?: number;
      totalCount?: number;
    }) => {
      if (opts.title !== undefined) setProgressTitle(opts.title);
      if (opts.message !== undefined) setProgressMessage(opts.message);
      if (opts.progress !== undefined) setProgressPercent(Math.min(100, Math.max(0, opts.progress)));
      if (opts.taskId !== undefined) setProgressTaskId(opts.taskId);
      if (opts.generatedCount !== undefined) setProgressGenerated(opts.generatedCount);
      if (opts.totalCount !== undefined) setProgressTotal(opts.totalCount);
    },
    []
  );

  const pollTaskStatus = useCallback(
    async (taskId: string, problemTitle: string, estimatedTimeSec: number) => {
      const tick = () => {
        setProgressRunningTime(Math.floor((Date.now() - startTimeRef.current) / 1000));
      };
      const interval = setInterval(tick, 1000);

      const check = async () => {
        try {
          const res = await fetch(`${API_PREFIX}/task_status/${taskId}`);
          const data: TaskStatusResponse = await res.json();
          updateProgress({
            progress: data.progress ?? 0,
            generatedCount: data.generated_cases ?? 0,
            totalCount: data.test_case_count ?? 0,
            message: data.currentMessage || "正在处理...",
          });

          if (data.status === "completed") {
            clearInterval(interval);
            hideProgress();
            setIsGenerating(false);
            setResultData({
              title: data.title ?? problemTitle,
              english_name: data.english_name,
              test_case_count: data.test_case_count,
              file_size: "计算中...",
              task_id: taskId,
            });
            setResultModalOpen(true);
            setErrorBlock(null);
            toast.success("测试数据生成完成！");
            return;
          }

          if (data.status === "failed") {
            clearInterval(interval);
            hideProgress();
            setIsGenerating(false);
            setErrorBlock({
              title: "测试数据生成失败",
              message: data.error_message || "未知错误",
            });
            toast.error("测试数据生成失败");
            return;
          }

          pollTimerRef.current = setTimeout(check, 2000);
        } catch (err) {
          clearInterval(interval);
          hideProgress();
          setIsGenerating(false);
          const msg = err instanceof Error ? err.message : String(err);
          toast.error("获取任务状态失败: " + msg);
        }
      };

      await check();
    },
    [updateProgress, hideProgress]
  );

  const handleGenerate = useCallback(async () => {
    const title = problemTitle.trim();
    const slug = problemSlug.trim();
    const description = problemDescription.trim();
    const code = stdProgram.trim();

    if (!title || !slug || !description || !code) {
      toast.error("请填写所有必填字段");
      return;
    }
    if (!slugPattern.test(slug)) {
      toast.error("题目英文名只能包含小写字母、数字和下划线，且必须以字母开头");
      return;
    }
    const count = Math.min(50, Math.max(1, testCaseCount));
    if (count !== testCaseCount) setTestCaseCount(count);

    setIsGenerating(true);
    setErrorBlock(null);
    showProgress();
    updateProgress({ title: "正在生成测试数据", message: "正在初始化...", taskId: "" });

    try {
      const body: GenerateRequest = {
        title,
        englishName: slug,
        description,
        standardCode: code,
        serviceLevel,
        testCaseCount: count,
      };
      const res = await fetch(`${API_PREFIX}/generate`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });
      const result = await res.json();

      if (!res.ok) {
        throw new Error(result.error || result.message || "生成请求失败");
      }

      if (result.success && result.task_id) {
        const estimatedTime = result.estimated_time ?? 60;
        updateProgress({
          taskId: result.task_id,
          title: `正在生成「${title}」的测试数据`,
          message: `预计需要 ${Math.ceil(estimatedTime / 60)} 分钟，请耐心等待...`,
          totalCount: count,
        });
        await pollTaskStatus(result.task_id, title, estimatedTime);
      } else {
        throw new Error(result.error || "未返回任务 ID");
      }
    } catch (err) {
      hideProgress();
      setIsGenerating(false);
      const msg = err instanceof Error ? err.message : String(err);
      toast.error("生成失败: " + msg);
    }
  }, [
    problemTitle,
    problemSlug,
    problemDescription,
    stdProgram,
    serviceLevel,
    testCaseCount,
    showProgress,
    updateProgress,
    hideProgress,
    pollTaskStatus,
  ]);

  const handleCancelGeneration = useCallback(() => {
    hideProgress();
    setIsGenerating(false);
    toast.info("生成已取消");
  }, [hideProgress]);

  const handleDownload = useCallback((taskId: string) => {
    if (!taskId) return;
    const url = `${API_PREFIX}/download/${taskId}`;
    window.open(url, "_blank");
    toast.success("开始下载测试数据");
  }, []);

  const handleCloseResultModal = useCallback(() => {
    setResultModalOpen(false);
    setResultData(null);
  }, []);

  useEffect(() => {
    return () => {
      if (pollTimerRef.current) clearTimeout(pollTimerRef.current);
    };
  }, []);

  const runningTimeStr =
    progressRunningTime >= 60
      ? `${Math.floor(progressRunningTime / 60)}分${progressRunningTime % 60}秒`
      : `${progressRunningTime}秒`;

  return (
    <div className="space-y-8 max-w-3xl mx-auto">
      <div className="text-center space-y-2">
        <h1 className="text-3xl font-bold flex items-center justify-center gap-2">
          <TestTube className="h-8 w-8 text-purple-500" />
          测试数据生成
        </h1>
        <p className="text-muted-foreground">
          为信息学奥林匹克竞赛生成高质量测试数据
        </p>
      </div>

      {/* 题目信息 */}
      <Card>
        <CardHeader>
          <CardTitle>题目信息</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="space-y-2">
            <Label>
              题目标题 <span className="text-destructive">*</span>
            </Label>
            <Input
              placeholder="例如：A+B Problem"
              value={problemTitle}
              onChange={(e) => setProblemTitle(e.target.value)}
            />
            <p className="text-xs text-muted-foreground">简短描述题目名称</p>
          </div>
          <div className="space-y-2">
            <Label>
              题目英文名 <span className="text-destructive">*</span>
            </Label>
            <Input
              placeholder="例如：aplusb"
              value={problemSlug}
              onChange={(e) => setProblemSlug(e.target.value.toLowerCase())}
            />
            <p className="text-xs text-muted-foreground">
              用作文件名前缀，只能包含小写字母、数字和下划线，必须以字母开头
            </p>
          </div>
          <div className="space-y-2">
            <Label>
              题目描述 <span className="text-destructive">*</span>
            </Label>
            <Textarea
              placeholder={`请输入完整的题目描述，包括：
- 题目背景和要求
- 输入格式
- 输出格式
- 数据范围和约束条件
- 样例输入输出`}
              className="min-h-[200px] resize-y"
              value={problemDescription}
              onChange={(e) => setProblemDescription(e.target.value)}
            />
            <p className="text-xs text-muted-foreground">
              详细描述题目要求，包括输入输出格式、数据范围等
            </p>
          </div>
        </CardContent>
      </Card>

      {/* 标准程序 */}
      <Card>
        <CardHeader>
          <CardTitle>
            标准程序 (C++) <span className="text-destructive">*</span>
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <Label>C++ 标准程序代码</Label>
          <Textarea
            placeholder={`请输入 C++ 标准程序代码，例如：

#include <iostream>
using namespace std;

int main() {
    int a, b;
    cin >> a >> b;
    cout << a + b << endl;
    return 0;
}

注意：从标准输入读取数据，结果输出到标准输出。`}
            className="min-h-[280px] font-mono text-sm resize-y"
            value={stdProgram}
            onChange={(e) => setStdProgram(e.target.value)}
          />
          <div className="rounded-lg border border-blue-200 bg-blue-50 dark:bg-blue-950/30 dark:border-blue-800 p-4 text-sm text-blue-900 dark:text-blue-200">
            <p className="font-semibold mb-2">标程说明</p>
            <ul className="list-disc list-inside space-y-1 opacity-90">
              <li>标程用于为生成的输入数据 (.in) 生成正确的输出数据 (.out)</li>
              <li>请确保代码逻辑正确，能处理边界情况</li>
              <li>系统将使用 g++ 编译您的代码</li>
              <li>运行限制：内存 512MB，栈 512MB，时间 30 秒/测试点</li>
            </ul>
          </div>
        </CardContent>
      </Card>

      {/* 生成配置 */}
      <Card>
        <CardHeader>
          <CardTitle>生成配置</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="space-y-2">
            <Label>测试点数量</Label>
            <div className="flex items-center gap-4 flex-wrap">
              <Input
                type="number"
                min={1}
                max={50}
                value={testCaseCount}
                onChange={(e) =>
                  setTestCaseCount(parseInt(e.target.value, 10) || 10)
                }
                className="w-28"
              />
              <p className="text-sm text-muted-foreground">
                建议 1–50 个测试点，数量越多生成时间越长
              </p>
            </div>
          </div>
          <div className="space-y-2">
            <Label>生成模式</Label>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <button
                type="button"
                onClick={() => setServiceLevel("standard")}
                className={`flex items-start gap-3 rounded-xl border-2 p-5 text-left transition-all ${
                  serviceLevel === "standard"
                    ? "border-primary bg-primary/5"
                    : "border-border hover:border-muted-foreground/50"
                }`}
              >
                <input
                  type="radio"
                  name="service_level"
                  checked={serviceLevel === "standard"}
                  readOnly
                  className="mt-1"
                />
                <div>
                  <p className="font-semibold">标准版</p>
                  <p className="text-sm text-muted-foreground">基础测试数据生成</p>
                </div>
              </button>
              <button
                type="button"
                onClick={() => setServiceLevel("pro")}
                className={`flex items-start gap-3 rounded-xl border-2 p-5 text-left transition-all ${
                  serviceLevel === "pro"
                    ? "border-primary bg-primary/5"
                    : "border-border hover:border-muted-foreground/50"
                }`}
              >
                <input
                  type="radio"
                  name="service_level"
                  checked={serviceLevel === "pro"}
                  readOnly
                  className="mt-1"
                />
                <div>
                  <p className="font-semibold">专业版</p>
                  <p className="text-sm text-muted-foreground">高质量智能生成</p>
                </div>
              </button>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 提交 */}
      <div className="flex justify-center">
        <Button
          size="lg"
          onClick={handleGenerate}
          disabled={isGenerating}
          className="gap-2"
        >
          {isGenerating ? (
            <>
              <Loader2 className="h-5 w-5 animate-spin" />
              生成中...
            </>
          ) : (
            "开始生成"
          )}
        </Button>
      </div>

      {/* 错误信息块 */}
      {errorBlock && (
        <Card className="border-destructive/50 bg-destructive/5">
          <CardContent className="pt-6">
            <div className="flex items-start gap-4">
              <div className="rounded-full bg-destructive/10 p-3">
                <AlertCircle className="h-6 w-6 text-destructive" />
              </div>
              <div className="flex-1">
                <h4 className="font-semibold text-destructive">{errorBlock.title}</h4>
                <p className="text-sm text-muted-foreground mt-1">{errorBlock.message}</p>
                <p className="text-sm text-amber-700 dark:text-amber-400 mt-4">
                  建议：检查题目描述与标准程序是否完整正确，稍后重试或联系技术支持。
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
      )}

      {/* 进度遮罩 */}
      {progressOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
          <Card className="w-full max-w-md shadow-xl">
            <CardContent className="pt-6">
              <div className="flex items-center gap-3 mb-4">
                <div className="rounded-full bg-primary/10 p-3">
                  <Loader2 className="h-6 w-6 text-primary animate-spin" />
                </div>
                <div>
                  <h3 className="font-semibold">{progressTitle}</h3>
                  <p className="text-sm text-muted-foreground">{progressMessage}</p>
                </div>
              </div>
              <div className="space-y-2 mb-4">
                <div className="flex justify-between text-sm">
                  <span>进度</span>
                  <span>{Math.round(progressPercent)}%</span>
                </div>
                <div className="h-2 rounded-full bg-muted overflow-hidden">
                  <div
                    className="h-full bg-primary transition-all duration-300"
                    style={{ width: `${progressPercent}%` }}
                  />
                </div>
              </div>
              <div className="text-xs text-muted-foreground space-y-1 mb-4">
                <div className="flex justify-between">
                  <span>任务 ID</span>
                  <span className="font-mono">{progressTaskId || "-"}</span>
                </div>
                <div className="flex justify-between">
                  <span>已生成</span>
                  <span>
                    {progressGenerated}/{progressTotal}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span>运行时间</span>
                  <span>{runningTimeStr}</span>
                </div>
              </div>
              <Button variant="outline" className="w-full" onClick={handleCancelGeneration}>
                取消生成
              </Button>
            </CardContent>
          </Card>
        </div>
      )}

      {/* 结果弹窗 */}
      <Dialog open={resultModalOpen} onOpenChange={(open) => !open && handleCloseResultModal()}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>生成完成</DialogTitle>
          </DialogHeader>
          {resultData && (
            <div className="space-y-4">
              <div className="flex items-center gap-3 rounded-lg border border-green-200 bg-green-50 dark:bg-green-950/30 dark:border-green-800 p-4">
                <CheckCircle2 className="h-10 w-10 text-green-600 shrink-0" />
                <div>
                  <p className="font-semibold text-green-800 dark:text-green-200">
                    测试数据已成功生成并打包为 ZIP 文件
                  </p>
                </div>
              </div>
              <div className="grid grid-cols-2 gap-2 text-sm">
                <span className="text-muted-foreground">题目名称</span>
                <span className="font-medium">{resultData.title ?? "—"}</span>
                <span className="text-muted-foreground">测试点数量</span>
                <span className="font-medium">{resultData.test_case_count ?? "—"} 个</span>
                <span className="text-muted-foreground">生成时间</span>
                <span className="font-medium">{new Date().toLocaleString("zh-CN")}</span>
                <span className="text-muted-foreground">文件大小</span>
                <span className="font-medium">{resultData.file_size ?? "—"}</span>
              </div>
              <div className="flex gap-2">
                <Button
                  className="gap-2 flex-1"
                  onClick={() => resultData.task_id && handleDownload(resultData.task_id)}
                >
                  <Download className="h-4 w-4" />
                  下载测试数据
                </Button>
                <Button variant="outline" onClick={handleCloseResultModal}>
                  关闭
                </Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  );
}