"use client";

import { useEffect, useState } from "react";
import { useSession } from "next-auth/react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { ScoreCard } from "@/components/dashboard/ScoreCard";
import { CompetitorRadarChart } from "@/components/charts/CompetitorRadarChart";
import { api } from "@/lib/api";
import { Star, TrendingUp, TrendingDown, Minus, BarChart3 } from "lucide-react";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  BrandListItem,
  BrandListResponse,
  CompareResponse,
  CompareItem,
} from "@/types/brand";
import { NextActionCard } from "@/components/dashboard/NextActionCard";
import type { ActionContext } from "@/types/next-action";

// 趋势图标组件
function TrendIcon({ trend, value }: { trend: string; value: number }) {
  if (trend === "up") {
    return (
      <span className="inline-flex items-center gap-0.5 text-emerald-600">
        <TrendingUp className="h-3 w-3" />
        {value > 0 && <span className="text-xs">+{value.toFixed(1)}</span>}
      </span>
    );
  }
  if (trend === "down") {
    return (
      <span className="inline-flex items-center gap-0.5 text-red-600">
        <TrendingDown className="h-3 w-3" />
        {value < 0 && <span className="text-xs">{value.toFixed(1)}</span>}
      </span>
    );
  }
  return (
    <span className="inline-flex items-center gap-0.5 text-muted-foreground">
      <Minus className="h-3 w-3" />
    </span>
  );
}

// V1兼容指标配置
const METRICS = [
  { key: "overall_score", label: "综合评分", description: "综合表现得分" },
  {
    key: "mention_rate_score",
    label: "提及率得分",
    description: "品牌被提及的频率",
  },
  { key: "sov_score", label: "SOV得分", description: "品牌声量占比" },
  {
    key: "quality_score",
    label: "引用质量得分",
    description: "引用文本的质量",
  },
  { key: "citation_count", label: "引用次数", description: "被引用的总次数" },
] as const;

export default function ComparePage() {
  const { data: session } = useSession();
  const [brands, setBrands] = useState<BrandListItem[]>([]);
  const [selectedBrandId, setSelectedBrandId] = useState<string>("");
  const [compareData, setCompareData] = useState<CompareResponse | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // 加载品牌列表
  useEffect(() => {
    const token = session?.accessToken;
    if (!token) return;

    async function loadBrands() {
      if (!token) return;
      try {
        setLoading(true);
        const response = (await api.brands.list(token)) as BrandListResponse;
        const brandItems = response.items || [];
        setBrands(brandItems);
        if (brandItems.length > 0 && !selectedBrandId) {
          setSelectedBrandId(brandItems[0].id);
        }
      } catch (err) {
        setError(err instanceof Error ? err.message : "加载品牌列表失败");
      } finally {
        setLoading(false);
      }
    }

    loadBrands();
  }, [session?.accessToken, selectedBrandId]);

  // 加载对比数据
  useEffect(() => {
    const token = session?.accessToken;
    if (!token || !selectedBrandId) return;

    async function loadCompareData() {
      if (!token || !selectedBrandId) return;
      try {
        setLoading(true);
        const data = (await api.brands.getCompare(
          token,
          selectedBrandId,
        )) as CompareResponse;
        setCompareData(data);
      } catch (err) {
        setError(err instanceof Error ? err.message : "加载对比数据失败");
      } finally {
        setLoading(false);
      }
    }

    loadCompareData();
  }, [session?.accessToken, selectedBrandId]);

  if (loading) {
    return (
      <div className="space-y-6">
        <div>
          <h2 className="text-2xl font-bold tracking-tight">竞品对比</h2>
          <p className="text-muted-foreground">对比品牌与竞品的各项评分指标</p>
        </div>
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          {Array.from({ length: 4 }).map((_, i) => (
            <Card key={i}>
              <CardHeader className="flex flex-row items-center justify-between pb-2">
                <Skeleton className="h-4 w-24" />
              </CardHeader>
              <CardContent>
                <Skeleton className="h-8 w-16" />
              </CardContent>
            </Card>
          ))}
        </div>
        <Card>
          <CardHeader>
            <Skeleton className="h-4 w-32" />
          </CardHeader>
          <CardContent>
            <Skeleton className="h-[400px] w-full" />
          </CardContent>
        </Card>
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex h-[60vh] flex-col items-center justify-center gap-2">
        <p className="text-destructive">{error}</p>
      </div>
    );
  }

  const brandItem = compareData?.items.find(
    (item) => item.entity_type === "brand",
  );
  const competitorItems =
    compareData?.items.filter((item) => item.entity_type === "competitor") ||
    [];

  // 判断某项指标是否优于品牌（用于竞品行）
  const isBetterThanBrand = (
    competitorItem: CompareItem,
    metricKey: string,
  ) => {
    if (!brandItem) return false;
    const brandValue = brandItem[metricKey as keyof CompareItem] as number;
    const competitorValue = competitorItem[
      metricKey as keyof CompareItem
    ] as number;
    return competitorValue > brandValue;
  };

  // 判断某项指标是否弱于品牌（用于竞品行）
  const isWorseThanBrand = (competitorItem: CompareItem, metricKey: string) => {
    if (!brandItem) return false;
    const brandValue = brandItem[metricKey as keyof CompareItem] as number;
    const competitorValue = competitorItem[
      metricKey as keyof CompareItem
    ] as number;
    return competitorValue < brandValue;
  };

  // 判断品牌某项指标是否优于所有竞品
  const isBrandBest = (metricKey: string) => {
    if (!brandItem || competitorItems.length === 0) return false;
    return competitorItems.every((comp) => isBetterThanBrand(comp, metricKey));
  };

  // 判断品牌某项指标是否弱于所有竞品
  const isBrandWorst = (metricKey: string) => {
    if (!brandItem || competitorItems.length === 0) return false;
    return competitorItems.every((comp) => isWorseThanBrand(comp, metricKey));
  };

  // 构建雷达图竞品配置
  const radarCompetitors = competitorItems.map((comp, index) => ({
    name: comp.entity_name,
    color: [
      "hsl(346.8 77.2% 49.8%)",
      "hsl(24.6 95% 53.1%)",
      "hsl(142.1 76.2% 36.3%)",
      "hsl(262.1 83.3% 57.8%)",
    ][index % 4],
  }));

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold tracking-tight">竞品对比</h2>
          <p className="text-muted-foreground">对比品牌与竞品的各项评分指标</p>
        </div>
        <div className="flex items-center gap-2">
          <Star className="h-4 w-4 text-muted-foreground" />
          <Select value={selectedBrandId} onValueChange={setSelectedBrandId}>
            <SelectTrigger className="w-[160px]">
              <SelectValue placeholder="选择品牌" />
            </SelectTrigger>
            <SelectContent>
              {brands.map((brand) => (
                <SelectItem key={brand.id} value={brand.id}>
                  {brand.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>

      {/* 评分概览 */}
      {brandItem && (
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          <ScoreCard
            title="综合评分"
            score={brandItem.overall_score}
            icon={<BarChart3 className="h-4 w-4" />}
          />
          <ScoreCard
            title="提及率得分"
            score={brandItem.mention_rate_score}
            icon={<TrendingUp className="h-4 w-4" />}
          />
          <ScoreCard
            title="SOV得分"
            score={brandItem.sov_score}
            icon={<BarChart3 className="h-4 w-4" />}
          />
          <ScoreCard
            title="引用次数"
            score={brandItem.citation_count}
            icon={<Star className="h-4 w-4" />}
          />
        </div>
      )}

      {/* 雷达图 */}
      {compareData &&
        compareData.radar_data &&
        compareData.radar_data.length > 0 && (
          <Card>
            <CardHeader>
              <CardTitle className="text-base">多维度对比雷达图</CardTitle>
            </CardHeader>
            <CardContent>
              <CompetitorRadarChart
                data={compareData.radar_data}
                brandName={brandItem?.entity_name || ""}
                competitors={radarCompetitors}
              />
            </CardContent>
          </Card>
        )}

      {/* V2 五维度详细对比表 */}
      {compareData &&
        compareData.items.length > 0 &&
        compareData.items[0].dimensions &&
        compareData.items[0].dimensions.length > 0 && (
          <Card>
            <CardHeader>
              <CardTitle className="text-base">五维度评分对比</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="overflow-x-auto">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead className="w-[140px]">品牌/竞品</TableHead>
                      {compareData.items[0].dimensions.map((dim) => (
                        <TableHead
                          key={dim.name}
                          className="text-right min-w-[120px]"
                        >
                          <div className="flex flex-col items-end">
                            <span>{dim.name}</span>
                            <span className="text-xs font-normal text-muted-foreground">
                              满分 {dim.max_score}
                            </span>
                          </div>
                        </TableHead>
                      ))}
                      <TableHead className="text-right min-w-[100px]">
                        <div className="flex flex-col items-end">
                          <span>综合评分</span>
                          <span className="text-xs font-normal text-muted-foreground">
                            满分 100
                          </span>
                        </div>
                      </TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {compareData.items.map((item) => (
                      <TableRow
                        key={item.entity_id}
                        className={
                          item.entity_type === "brand" ? "bg-primary/5" : ""
                        }
                      >
                        <TableCell className="font-medium">
                          <div className="flex items-center gap-2">
                            {item.entity_type === "brand" && (
                              <span className="flex h-2 w-2 rounded-full bg-primary" />
                            )}
                            {item.entity_name}
                            {item.entity_type === "brand" && (
                              <span className="ml-1 text-xs text-muted-foreground">
                                (己方)
                              </span>
                            )}
                          </div>
                        </TableCell>
                        {item.dimensions.map((dim) => {
                          // 判断该维度是否最优
                          const allDimScores = compareData.items
                            .map((i) => {
                              const d = i.dimensions?.find(
                                (dd) => dd.name === dim.name,
                              );
                              return d?.score ?? 0;
                            })
                            .filter((s) => s > 0);
                          const isMax =
                            allDimScores.length > 0 &&
                            dim.score === Math.max(...allDimScores) &&
                            dim.score > 0;
                          const isMin =
                            allDimScores.length > 0 &&
                            dim.score === Math.min(...allDimScores) &&
                            dim.score > 0 &&
                            allDimScores.length > 1;

                          return (
                            <TableCell key={dim.name} className="text-right">
                              <div className="flex items-center justify-end gap-1">
                                <span
                                  className={`font-medium ${
                                    isMax
                                      ? "text-emerald-600"
                                      : isMin
                                        ? "text-red-600"
                                        : ""
                                  }`}
                                >
                                  {dim.score.toFixed(1)}
                                </span>
                                <TrendIcon
                                  trend={dim.trend}
                                  value={dim.trend_value}
                                />
                              </div>
                              <div className="mt-0.5 h-1.5 w-full rounded-full bg-muted overflow-hidden">
                                <div
                                  className={`h-full rounded-full transition-all ${
                                    isMax
                                      ? "bg-emerald-500"
                                      : isMin
                                        ? "bg-red-400"
                                        : "bg-primary/60"
                                  }`}
                                  style={{
                                    width: `${dim.percentage}%`,
                                  }}
                                />
                              </div>
                            </TableCell>
                          );
                        })}
                        <TableCell className="text-right">
                          <div className="flex items-center justify-end gap-1">
                            <span className="font-bold text-base">
                              {item.overall_score.toFixed(1)}
                            </span>
                            <TrendIcon
                              trend={item.overall_trend}
                              value={item.overall_trend_value}
                            />
                          </div>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>

              {/* 图例说明 */}
              <div className="mt-4 flex flex-wrap gap-4 text-sm text-muted-foreground">
                <div className="flex items-center gap-2">
                  <span className="flex h-3 w-3 rounded-full bg-primary" />
                  <span>己方品牌</span>
                </div>
                <div className="flex items-center gap-1">
                  <TrendingUp className="h-3 w-3 text-emerald-600" />
                  <span className="text-emerald-600">上升趋势</span>
                </div>
                <div className="flex items-center gap-1">
                  <TrendingDown className="h-3 w-3 text-red-600" />
                  <span className="text-red-600">下降趋势</span>
                </div>
                <div className="flex items-center gap-1">
                  <Minus className="h-3 w-3 text-muted-foreground" />
                  <span>持平</span>
                </div>
              </div>
            </CardContent>
          </Card>
        )}

      {/* V1兼容对比表格 */}
      {compareData && compareData.items.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle className="text-base">评分对比表</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="overflow-x-auto">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-[140px]">品牌/竞品</TableHead>
                    {METRICS.map((metric) => (
                      <TableHead
                        key={metric.key}
                        className="text-right min-w-[100px]"
                      >
                        <div className="flex flex-col items-end">
                          <span>{metric.label}</span>
                          <span className="text-xs font-normal text-muted-foreground">
                            {metric.description}
                          </span>
                        </div>
                      </TableHead>
                    ))}
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {compareData.items.map((item) => (
                    <TableRow
                      key={item.entity_id}
                      className={
                        item.entity_type === "brand" ? "bg-primary/5" : ""
                      }
                    >
                      <TableCell className="font-medium">
                        <div className="flex items-center gap-2">
                          {item.entity_type === "brand" && (
                            <span className="flex h-2 w-2 rounded-full bg-primary" />
                          )}
                          {item.entity_name}
                          {item.entity_type === "brand" && (
                            <span className="ml-1 text-xs text-muted-foreground">
                              (己方)
                            </span>
                          )}
                          <TrendIcon
                            trend={item.overall_trend}
                            value={item.overall_trend_value}
                          />
                        </div>
                      </TableCell>
                      {METRICS.map((metric) => {
                        const value = item[
                          metric.key as keyof CompareItem
                        ] as number;
                        const isBest =
                          item.entity_type === "brand" &&
                          isBrandBest(metric.key);
                        const isWorst =
                          item.entity_type === "brand" &&
                          isBrandWorst(metric.key);
                        const isBetter =
                          item.entity_type === "competitor" &&
                          isBetterThanBrand(item, metric.key);
                        const isWorse =
                          item.entity_type === "competitor" &&
                          isWorseThanBrand(item, metric.key);

                        let cellClass = "text-right font-medium";
                        if (isBest) {
                          cellClass += " text-emerald-600 bg-emerald-50";
                        } else if (isWorst) {
                          cellClass += " text-red-600 bg-red-50";
                        } else if (isBetter) {
                          cellClass += " text-emerald-600";
                        } else if (isWorse) {
                          cellClass += " text-red-600";
                        }

                        return (
                          <TableCell key={metric.key} className={cellClass}>
                            <div className="flex items-center justify-end gap-1">
                              {isBest && (
                                <TrendingUp className="h-3 w-3 text-emerald-600" />
                              )}
                              {isWorst && (
                                <TrendingDown className="h-3 w-3 text-red-600" />
                              )}
                              {metric.key === "overall_score" ||
                              metric.key === "mention_rate_score" ||
                              metric.key === "sov_score" ||
                              metric.key === "quality_score"
                                ? value.toFixed(1)
                                : value}
                            </div>
                          </TableCell>
                        );
                      })}
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>

            {/* 图例说明 */}
            <div className="mt-4 flex flex-wrap gap-4 text-sm text-muted-foreground">
              <div className="flex items-center gap-2">
                <span className="flex h-3 w-3 rounded-full bg-primary" />
                <span>己方品牌</span>
              </div>
              <div className="flex items-center gap-1">
                <TrendingUp className="h-3 w-3 text-emerald-600" />
                <span className="text-emerald-600">优于竞品</span>
              </div>
              <div className="flex items-center gap-1">
                <TrendingDown className="h-3 w-3 text-red-600" />
                <span className="text-red-600">弱于竞品</span>
              </div>
            </div>
          </CardContent>
        </Card>
      )}

      {/* 无数据提示 */}
      {compareData && compareData.items.length === 0 && (
        <Card>
          <CardContent className="flex flex-col items-center justify-center py-12">
            <p className="text-muted-foreground">暂无对比数据</p>
            <p className="mt-2 text-sm text-muted-foreground">
              请先选择品牌并确保有竞品数据
            </p>
          </CardContent>
        </Card>
      )}

      {/* 无品牌提示 */}
      {brands.length === 0 && (
        <Card>
          <CardContent className="flex flex-col items-center justify-center py-12">
            <p className="text-muted-foreground">暂无品牌数据</p>
            <p className="mt-2 text-sm text-muted-foreground">
              请先创建品牌后查看对比分析
            </p>
          </CardContent>
        </Card>
      )}

      {/* 下一步行动建议 */}
      <NextActionCard
        context={
          {
            hasData: !!compareData,
            hasBrands: brands.length > 0,
            brandCount: brands.length,
            overallScore: brandItem?.overall_score ?? 0,
            scoreChange: brandItem?.overall_trend_value ?? 0,
            competitorCount: competitorItems.length,
            hasQueryHistory: true,
            currentPage: "compare",
            brandId: selectedBrandId,
          } as ActionContext
        }
      />
    </div>
  );
}
