"use client";

import { useCallback, useEffect, useState } from "react";
import { useDropzone } from "react-dropzone";
import {
  AlertTriangle,
  CheckCircle2,
  Download,
  FileCode,
  FileText,
  Loader2,
  Play,
  Upload,
} from "lucide-react";
import DashboardLayout from "@/components/layout/dashboard-layout";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
import { useToast } from "@/components/ui/use-toast";
import {
  ConsistencyReport,
  downloadJson,
  loadConsistencyDraft,
  mockAnalyzeConsistency,
  saveConsistencyDraft,
} from "@/lib/document-mock";
import { cn } from "@/lib/utils";

const severityVariant: Record<string, "default" | "secondary" | "destructive"> =
  {
    高: "destructive",
    中: "default",
    低: "secondary",
  };

export default function ConsistencyAnalysisPage() {
  const [requirementFile, setRequirementFile] = useState<File | null>(null);
  const [codeFile, setCodeFile] = useState<File | null>(null);
  const [report, setReport] = useState<ConsistencyReport | null>(null);
  const [isAnalyzing, setIsAnalyzing] = useState(false);
  const { toast } = useToast();

  useEffect(() => {
    const draft = loadConsistencyDraft();
    if (!draft) {
      return;
    }
    setReport(draft);
  }, []);

  const requirementDropzone = useDropzone({
    onDrop: useCallback((acceptedFiles: File[]) => {
      const file = acceptedFiles[0];
      if (!file) {
        return;
      }
      setRequirementFile(file);
    }, []),
    maxFiles: 1,
    accept: {
      "application/pdf": [".pdf"],
      "application/msword": [".doc"],
      "application/vnd.openxmlformats-officedocument.wordprocessingml.document": [
        ".docx",
      ],
      "application/json": [".json"],
      "text/plain": [".txt", ".md"],
    },
  });

  const codeDropzone = useDropzone({
    onDrop: useCallback((acceptedFiles: File[]) => {
      const file = acceptedFiles[0];
      if (!file) {
        return;
      }
      setCodeFile(file);
    }, []),
    maxFiles: 1,
    accept: {
      "text/plain": [
        ".py",
        ".js",
        ".ts",
        ".tsx",
        ".java",
        ".go",
        ".cs",
        ".cpp",
        ".c",
        ".md",
        ".json",
      ],
    },
  });

  const handleAnalyze = async () => {
    if (!requirementFile || !codeFile) {
      toast({
        title: "缺少输入文件",
        description: "请同时上传需求文档和代码文件。",
        variant: "destructive",
      });
      return;
    }

    setIsAnalyzing(true);
    try {
      const result = await mockAnalyzeConsistency(requirementFile, codeFile);
      setReport(result);
      saveConsistencyDraft(result);
      toast({
        title: "分析完成",
        description: `发现 ${result.issues.length} 项待处理问题。`,
      });
    } catch {
      toast({
        title: "分析失败",
        description: "前端模拟分析失败，请重试。",
        variant: "destructive",
      });
    } finally {
      setIsAnalyzing(false);
    }
  };

  const handleExportReport = () => {
    if (!report) {
      return;
    }

    const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
    downloadJson(`consistency-report-${timestamp}.json`, report);
    toast({
      title: "导出成功",
      description: "一致性分析报告已下载。",
    });
  };

  return (
    <DashboardLayout>
      <div className="space-y-6">
        <Card>
          <CardHeader>
            <CardTitle className="text-2xl">一致性分析</CardTitle>
            <CardDescription>
              上传需求文档与代码文件，比较需求-代码一致性并输出问题清单。
            </CardDescription>
          </CardHeader>
          <CardContent className="grid gap-4 lg:grid-cols-2">
            <div
              {...requirementDropzone.getRootProps()}
              className={cn(
                "rounded-lg border-2 border-dashed p-6 transition-colors",
                requirementDropzone.isDragActive
                  ? "border-primary bg-primary/5"
                  : "border-border hover:border-primary/40"
              )}
            >
              <input {...requirementDropzone.getInputProps()} />
              <div className="flex items-start gap-3">
                <FileText className="h-5 w-5 mt-0.5 text-muted-foreground" />
                <div>
                  <p className="text-sm font-medium">需求文档</p>
                  <p className="text-xs text-muted-foreground mt-1">
                    支持 Word、PDF、JSON、TXT/MD
                  </p>
                  {requirementFile && (
                    <p className="text-xs mt-3 inline-flex items-center gap-1 rounded-full border px-3 py-1">
                      <Upload className="h-3.5 w-3.5" />
                      {requirementFile.name}
                    </p>
                  )}
                </div>
              </div>
            </div>

            <div
              {...codeDropzone.getRootProps()}
              className={cn(
                "rounded-lg border-2 border-dashed p-6 transition-colors",
                codeDropzone.isDragActive
                  ? "border-primary bg-primary/5"
                  : "border-border hover:border-primary/40"
              )}
            >
              <input {...codeDropzone.getInputProps()} />
              <div className="flex items-start gap-3">
                <FileCode className="h-5 w-5 mt-0.5 text-muted-foreground" />
                <div>
                  <p className="text-sm font-medium">代码文件</p>
                  <p className="text-xs text-muted-foreground mt-1">
                    支持 py/js/ts/tsx/java/go/cs/cpp/c 等文本代码文件
                  </p>
                  {codeFile && (
                    <p className="text-xs mt-3 inline-flex items-center gap-1 rounded-full border px-3 py-1">
                      <Upload className="h-3.5 w-3.5" />
                      {codeFile.name}
                    </p>
                  )}
                </div>
              </div>
            </div>

            <div className="lg:col-span-2 flex flex-wrap gap-3">
              <Button onClick={handleAnalyze} disabled={isAnalyzing}>
                {isAnalyzing ? (
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                ) : (
                  <Play className="mr-2 h-4 w-4" />
                )}
                开始分析
              </Button>
              <Button variant="outline" onClick={handleExportReport} disabled={!report}>
                <Download className="mr-2 h-4 w-4" />
                导出分析 JSON
              </Button>
            </div>
          </CardContent>
        </Card>

        {report && (
          <>
            <div className="grid gap-4 md:grid-cols-3">
              <Card>
                <CardContent className="pt-6">
                  <p className="text-sm text-muted-foreground">总体一致性</p>
                  <p className="mt-2 text-3xl font-bold">{report.consistencyScore}%</p>
                  <Progress value={report.consistencyScore} className="mt-3" />
                </CardContent>
              </Card>
              <Card>
                <CardContent className="pt-6">
                  <p className="text-sm text-muted-foreground">需求覆盖率</p>
                  <p className="mt-2 text-3xl font-bold">{report.coverage}%</p>
                  <Progress value={report.coverage} className="mt-3" />
                </CardContent>
              </Card>
              <Card>
                <CardContent className="pt-6">
                  <p className="text-sm text-muted-foreground">问题数量</p>
                  <p className="mt-2 text-3xl font-bold">{report.issues.length}</p>
                  <p className="mt-3 text-xs text-muted-foreground inline-flex items-center gap-1">
                    <AlertTriangle className="h-3.5 w-3.5" />
                    需优先处理高严重度问题
                  </p>
                </CardContent>
              </Card>
            </div>

            <Card>
              <CardHeader>
                <CardTitle className="text-lg">问题清单</CardTitle>
                <CardDescription>
                  来源: {report.requirementFileName} vs {report.codeFileName}
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-3 max-h-[520px] overflow-y-auto pr-1">
                  {report.issues.map((issue) => (
                    <div
                      key={issue.id}
                      className="rounded-lg border p-4 space-y-3 bg-card"
                    >
                      <div className="flex flex-wrap items-center justify-between gap-3">
                        <div className="flex items-center gap-2">
                          <CheckCircle2 className="h-4 w-4 text-primary" />
                          <p className="text-sm font-medium">
                            {issue.id} · {issue.type}
                          </p>
                        </div>
                        <Badge variant={severityVariant[issue.severity]}>
                          严重度 {issue.severity}
                        </Badge>
                      </div>

                      <p className="text-sm text-muted-foreground">{issue.summary}</p>

                      <div className="grid gap-3 md:grid-cols-2">
                        <div className="rounded-md border p-2 text-xs text-muted-foreground">
                          关联需求: {issue.requirementRef}
                        </div>
                        <div className="rounded-md border p-2 text-xs text-muted-foreground">
                          关联代码: {issue.codeRef}
                        </div>
                      </div>

                      <div className="rounded-md border border-primary/30 bg-primary/5 p-3 text-sm">
                        建议处理: {issue.suggestion}
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </>
        )}
      </div>
    </DashboardLayout>
  );
}