"use client";

import { useState, useEffect, useCallback } from "react";
import { useSearchParams } from "next/navigation";
import { motion } from "motion/react";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  TrendingUp,
  TrendingDown,
  Users,
  Wallet,
  Download,
  Loader2,
  Sparkles,
  MessageSquare,
  Send,
  PiggyBank,
  Building2,
} from "lucide-react";
import {
  BarChart,
  Bar,
  PieChart,
  Pie,
  Cell,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  Legend,
} from "recharts";
import { api } from "@/lib/api/client";

interface CostSummary {
  total_cost: number;
  salary_cost: number;
  social_security_cost: number;
  fund_cost: number;
  employee_count: number;
}

interface DepartmentCost {
  department: string;
  employee_count: number;
  salary_cost: number;
  social_security_cost: number;
  fund_cost: number;
  total_cost: number;
}

interface ExpenseBreakdown {
  expense_type: string;
  amount: number;
}

interface FullAnalysis {
  summary: CostSummary;
  departments: DepartmentCost[];
  expenses: ExpenseBreakdown[];
  changes?: Record<string, any>;
  ai_summary?: string;
}

interface SuggestedQuestions {
  questions: string[];
}

interface QAResponse {
  answer: string;
  data_points: string[];
}

const COLORS = ["#6366f1", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6", "#06b6d4"];

const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.08 },
  },
};

const item = {
  hidden: { opacity: 0, y: 12 },
  show: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.4, ease: [0.16, 1, 0.3, 1] as const },
  },
};

function formatCurrency(value: number): string {
  return new Intl.NumberFormat("zh-CN", {
    style: "currency",
    currency: "CNY",
    minimumFractionDigits: 2,
  }).format(value);
}

function formatNumber(value: number): string {
  return new Intl.NumberFormat("zh-CN").format(value);
}

export default function AnalysisPage() {
  const searchParams = useSearchParams();
  const [analysis, setAnalysis] = useState<FullAnalysis | null>(null);
  const [loading, setLoading] = useState(true);
  const [taskId, setTaskId] = useState(searchParams.get("task_id") || "");
  const [prevTaskId, setPrevTaskId] = useState(searchParams.get("prev_task_id") || "");

  const [questions, setQuestions] = useState<string[]>([]);
  const [answer, setAnswer] = useState<string>("");
  const [askLoading, setAskLoading] = useState(false);
  const [customQuestion, setCustomQuestion] = useState("");

  const loadAnalysis = useCallback(async () => {
    if (!taskId) {
      setLoading(false);
      return;
    }
    setLoading(true);
    try {
      const params: Record<string, any> = {};
      if (prevTaskId) params.prev_task_id = prevTaskId;
      const res = await api.get<FullAnalysis>(
        `/api/analysis/labor-cost/${taskId}`,
        { params }
      );
      setAnalysis(res.data);
    } catch (error) {
      console.error("加载成本分析失败:", error);
    } finally {
      setLoading(false);
    }
  }, [taskId, prevTaskId]);

  const loadQuestions = useCallback(async () => {
    if (!taskId) return;
    try {
      const res = await api.get<SuggestedQuestions>(
        `/api/qa/suggested-questions`,
        { params: { task_id: taskId, context: "cost_analysis" } }
      );
      setQuestions(res.data.questions || []);
    } catch (error) {
      console.error("加载建议问题失败:", error);
    }
  }, [taskId]);

  useEffect(() => {
    loadAnalysis();
    loadQuestions();
  }, [loadAnalysis, loadQuestions]);

  async function askQuestion(question: string) {
    if (!question || !taskId) return;
    setAskLoading(true);
    setAnswer("");
    try {
      const res = await api.post<QAResponse>(`/api/qa/ask`, {
        task_id: Number(taskId),
        question,
        context: "cost_analysis",
      });
      setAnswer(res.data.answer);
    } catch (error) {
      console.error("提问失败:", error);
      setAnswer("暂时无法回答该问题，请稍后重试。");
    } finally {
      setAskLoading(false);
    }
  }

  function handleExport() {
    if (!taskId) return;
    const token = localStorage.getItem("auth_token");
    const companyId = localStorage.getItem("company_id");
    const url = `${process.env.NEXT_PUBLIC_API_URL}/api/analysis/labor-cost/${taskId}/export`;
    fetch(url, {
      headers: {
        Authorization: `Bearer ${token}`,
        "X-Company-ID": companyId || "",
      },
    })
      .then((res) => res.blob())
      .then((blob) => {
        const a = document.createElement("a");
        a.href = URL.createObjectURL(blob);
        a.download = `cost_analysis_${taskId}.xlsx`;
        a.click();
        URL.revokeObjectURL(a.href);
      });
  }

  const deptChartData = analysis?.departments.map((d) => ({
    name: d.department,
    工资: d.salary_cost,
    社保: d.social_security_cost,
    公积金: d.fund_cost,
  })) || [];

  const expenseChartData = analysis?.expenses.map((e) => ({
    name: e.expense_type,
    value: e.amount,
  })) || [];

  return (
    <div className="min-h-full p-6 lg:p-8 max-w-7xl mx-auto space-y-6">
      <motion.div
        initial={{ opacity: 0, y: -8 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
        className="flex items-center justify-between"
      >
        <div>
          <h1 className="text-heading-1 text-foreground">人工成本分析</h1>
          <p className="text-muted-foreground mt-1">基于对账数据的多维度成本分析</p>
        </div>
        {analysis && (
          <Button variant="outline" onClick={handleExport} className="btn-press">
            <Download className="w-4 h-4 mr-2" />
            导出 Excel
          </Button>
        )}
      </motion.div>

      <Card>
        <CardContent className="p-4">
          <div className="flex flex-wrap items-end gap-3">
            <div className="flex-1 min-w-[180px]">
              <label className="text-caption text-muted-foreground mb-1.5 block">任务ID</label>
              <Input
                placeholder="输入对账任务ID"
                value={taskId}
                onChange={(e) => setTaskId(e.target.value)}
                className="h-9"
              />
            </div>
            <div className="flex-1 min-w-[180px]">
              <label className="text-caption text-muted-foreground mb-1.5 block">上月任务ID（可选，用于环比）</label>
              <Input
                placeholder="输入上月任务ID"
                value={prevTaskId}
                onChange={(e) => setPrevTaskId(e.target.value)}
                className="h-9"
              />
            </div>
            <Button onClick={loadAnalysis} className="h-9 btn-press">
              分析
            </Button>
          </div>
        </CardContent>
      </Card>

      {loading ? (
        <div className="flex items-center justify-center py-20">
          <Loader2 className="w-8 h-8 animate-spin text-primary" />
        </div>
      ) : !analysis ? (
        <Card>
          <CardContent className="p-8 text-center">
            <div className="w-12 h-12 rounded-full bg-muted mx-auto mb-4 flex items-center justify-center">
              <Wallet className="w-6 h-6 text-muted-foreground" />
            </div>
            <p className="text-body text-muted-foreground mb-2">
              请输入任务ID开始成本分析
            </p>
          </CardContent>
        </Card>
      ) : (
        <>
          <motion.div
            variants={container}
            initial="hidden"
            animate="show"
            className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"
          >
            <motion.div variants={item}>
              <Card className="hover-lift">
                <CardContent className="p-5">
                  <div className="flex items-start justify-between">
                    <div>
                      <p className="text-caption text-muted-foreground uppercase tracking-wide mb-1">人工成本总额</p>
                      <p className="text-2xl font-semibold tracking-tight text-foreground">
                        {formatCurrency(analysis.summary.total_cost)}
                      </p>
                    </div>
                    <div className="p-2.5 rounded-lg bg-indigo-50 dark:bg-indigo-950/30">
                      <Wallet className="w-5 h-5 text-indigo-600" />
                    </div>
                  </div>
                </CardContent>
              </Card>
            </motion.div>

            <motion.div variants={item}>
              <Card className="hover-lift">
                <CardContent className="p-5">
                  <div className="flex items-start justify-between">
                    <div>
                      <p className="text-caption text-muted-foreground uppercase tracking-wide mb-1">工资成本</p>
                      <p className="text-2xl font-semibold tracking-tight text-foreground">
                        {formatCurrency(analysis.summary.salary_cost)}
                      </p>
                      <p className="text-caption text-muted-foreground mt-1">
                        占比 {((analysis.summary.salary_cost / analysis.summary.total_cost) * 100).toFixed(1)}%
                      </p>
                    </div>
                    <div className="p-2.5 rounded-lg bg-emerald-50 dark:bg-emerald-950/30">
                      <PiggyBank className="w-5 h-5 text-emerald-600" />
                    </div>
                  </div>
                </CardContent>
              </Card>
            </motion.div>

            <motion.div variants={item}>
              <Card className="hover-lift">
                <CardContent className="p-5">
                  <div className="flex items-start justify-between">
                    <div>
                      <p className="text-caption text-muted-foreground uppercase tracking-wide mb-1">社保+公积金</p>
                      <p className="text-2xl font-semibold tracking-tight text-foreground">
                        {formatCurrency(analysis.summary.social_security_cost + analysis.summary.fund_cost)}
                      </p>
                      <p className="text-caption text-muted-foreground mt-1">
                        占比 {(((analysis.summary.social_security_cost + analysis.summary.fund_cost) / analysis.summary.total_cost) * 100).toFixed(1)}%
                      </p>
                    </div>
                    <div className="p-2.5 rounded-lg bg-amber-50 dark:bg-amber-950/30">
                      <Building2 className="w-5 h-5 text-amber-600" />
                    </div>
                  </div>
                </CardContent>
              </Card>
            </motion.div>

            <motion.div variants={item}>
              <Card className="hover-lift">
                <CardContent className="p-5">
                  <div className="flex items-start justify-between">
                    <div>
                      <p className="text-caption text-muted-foreground uppercase tracking-wide mb-1">员工人数</p>
                      <p className="text-2xl font-semibold tracking-tight text-foreground">
                        {formatNumber(analysis.summary.employee_count)}
                      </p>
                      <p className="text-caption text-muted-foreground mt-1">
                        人均 {formatCurrency(analysis.summary.total_cost / (analysis.summary.employee_count || 1))}
                      </p>
                    </div>
                    <div className="p-2.5 rounded-lg bg-violet-50 dark:bg-violet-950/30">
                      <Users className="w-5 h-5 text-violet-600" />
                    </div>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          </motion.div>

          {analysis.ai_summary && (
            <motion.div
              initial={{ opacity: 0, y: 12 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.3 }}
            >
              <Card className="border-primary/20 bg-primary/5">
                <CardContent className="p-5">
                  <div className="flex items-start gap-3">
                    <div className="p-2 rounded-lg bg-primary/10">
                      <Sparkles className="w-5 h-5 text-primary" />
                    </div>
                    <div>
                      <h3 className="font-medium text-foreground mb-1">AI 成本分析摘要</h3>
                      <p className="text-body text-foreground/80">{analysis.ai_summary}</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          )}

          {analysis.changes && (
            <motion.div
              initial={{ opacity: 0, y: 12 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.35 }}
            >
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg font-medium">环比变化</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                    {[
                      { label: "总成本", data: analysis.changes.total_cost },
                      { label: "工资成本", data: analysis.changes.salary_cost },
                      { label: "社保成本", data: analysis.changes.social_security_cost },
                      { label: "公积金成本", data: analysis.changes.fund_cost },
                    ].map((item) => {
                      const change = item.data?.amount_change || 0;
                      const ratio = item.data?.ratio_change || 0;
                      const isUp = change > 0;
                      return (
                        <div key={item.label} className="p-4 rounded-lg bg-muted/50">
                          <p className="text-caption text-muted-foreground mb-1">{item.label}</p>
                          <p className="text-xl font-semibold text-foreground">
                            {formatCurrency(item.data?.current || 0)}
                          </p>
                          <div className="flex items-center gap-1 mt-2">
                            {isUp ? (
                              <TrendingUp className="w-3 h-3 text-red-500" />
                            ) : (
                              <TrendingDown className="w-3 h-3 text-emerald-500" />
                            )}
                            <span className={`text-sm ${isUp ? "text-red-500" : "text-emerald-500"}`}>
                              {isUp ? "+" : ""}{formatCurrency(change)} ({ratio}%)
                            </span>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          )}

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <motion.div
              initial={{ opacity: 0, y: 12 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.4 }}
            >
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg font-medium">部门成本拆分</CardTitle>
                </CardHeader>
                <CardContent>
                  {deptChartData.length > 0 ? (
                    <ResponsiveContainer width="100%" height={300}>
                      <BarChart data={deptChartData}>
                        <CartesianGrid strokeDasharray="3 3" className="opacity-30" />
                        <XAxis dataKey="name" tick={{ fontSize: 12 }} />
                        <YAxis tick={{ fontSize: 12 }} />
                        <Tooltip
                          formatter={(value: any) => formatCurrency(Number(value))}
                          contentStyle={{ borderRadius: "8px", border: "1px solid hsl(var(--border))" }}
                        />
                        <Legend />
                        <Bar dataKey="工资" stackId="a" fill="#6366f1" />
                        <Bar dataKey="社保" stackId="a" fill="#10b981" />
                        <Bar dataKey="公积金" stackId="a" fill="#f59e0b" />
                      </BarChart>
                    </ResponsiveContainer>
                  ) : (
                    <p className="text-muted-foreground text-center py-12">暂无部门数据</p>
                  )}
                </CardContent>
              </Card>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 12 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.45 }}
            >
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg font-medium">费用科目拆分</CardTitle>
                </CardHeader>
                <CardContent>
                  {expenseChartData.length > 0 ? (
                    <ResponsiveContainer width="100%" height={300}>
                      <PieChart>
                        <Pie
                          data={expenseChartData}
                          cx="50%"
                          cy="50%"
                          outerRadius={100}
                          dataKey="value"
                          label={(entry) => `${entry.name}: ${formatCurrency(entry.value)}`}
                        >
                          {expenseChartData.map((_, index) => (
                            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                          ))}
                        </Pie>
                        <Tooltip formatter={(value: any) => formatCurrency(Number(value))} />
                      </PieChart>
                    </ResponsiveContainer>
                  ) : (
                    <p className="text-muted-foreground text-center py-12">暂无费用科目数据</p>
                  )}
                </CardContent>
              </Card>
            </motion.div>
          </div>

          <motion.div
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.5 }}
          >
            <Card>
              <CardHeader>
                <CardTitle className="text-lg font-medium">部门明细表</CardTitle>
              </CardHeader>
              <CardContent className="p-0">
                <Table>
                  <TableHeader>
                    <TableRow className="hover:bg-transparent">
                      <TableHead>部门</TableHead>
                      <TableHead className="text-right">人数</TableHead>
                      <TableHead className="text-right">工资成本</TableHead>
                      <TableHead className="text-right">社保成本</TableHead>
                      <TableHead className="text-right">公积金成本</TableHead>
                      <TableHead className="text-right">合计</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {analysis.departments.map((dept) => (
                      <TableRow key={dept.department}>
                        <TableCell className="font-medium">{dept.department}</TableCell>
                        <TableCell className="text-right">{dept.employee_count}</TableCell>
                        <TableCell className="text-right font-mono">{formatCurrency(dept.salary_cost)}</TableCell>
                        <TableCell className="text-right font-mono">{formatCurrency(dept.social_security_cost)}</TableCell>
                        <TableCell className="text-right font-mono">{formatCurrency(dept.fund_cost)}</TableCell>
                        <TableCell className="text-right font-mono font-semibold">{formatCurrency(dept.total_cost)}</TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </CardContent>
            </Card>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.55 }}
          >
            <Card>
              <CardHeader>
                <div className="flex items-center gap-2">
                  <MessageSquare className="w-5 h-5 text-primary" />
                  <CardTitle className="text-lg font-medium">AI 问答</CardTitle>
                </div>
              </CardHeader>
              <CardContent className="space-y-4">
                {questions.length > 0 && (
                  <div className="flex flex-wrap gap-2">
                    {questions.map((q, i) => (
                      <Button
                        key={i}
                        variant="outline"
                        size="sm"
                        onClick={() => askQuestion(q)}
                        disabled={askLoading}
                        className="btn-press"
                      >
                        {q}
                      </Button>
                    ))}
                  </div>
                )}

                <div className="flex gap-2">
                  <Input
                    placeholder="输入您的问题..."
                    value={customQuestion}
                    onChange={(e) => setCustomQuestion(e.target.value)}
                    onKeyDown={(e) => {
                      if (e.key === "Enter" && customQuestion) {
                        askQuestion(customQuestion);
                        setCustomQuestion("");
                      }
                    }}
                  />
                  <Button
                    onClick={() => {
                      if (customQuestion) {
                        askQuestion(customQuestion);
                        setCustomQuestion("");
                      }
                    }}
                    disabled={askLoading || !customQuestion}
                    className="btn-press"
                  >
                    <Send className="w-4 h-4 mr-1" />
                    提问
                  </Button>
                </div>

                {askLoading && (
                  <div className="flex items-center gap-2 text-muted-foreground">
                    <Loader2 className="w-4 h-4 animate-spin" />
                    正在思考...
                  </div>
                )}

                {answer && !askLoading && (
                  <div className="p-4 rounded-lg bg-muted/50 border border-border">
                    <div className="flex items-start gap-2">
                      <Sparkles className="w-4 h-4 text-primary mt-0.5 shrink-0" />
                      <p className="text-body text-foreground/90">{answer}</p>
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>
          </motion.div>
        </>
      )}
    </div>
  );
}