"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { cn } from "@/lib/utils";
import { TrendingUp, TrendingDown, Minus, AlertTriangle } from "lucide-react";
import { PlatformScoreWithCompetitor, PLATFORM_LABELS, PLATFORM_ICONS } from "@/types/dashboard-health";
import { getHealthLevel, calculateCompetitorGap, getHealthLevelClassName } from "@/lib/dashboard-health";

interface PlatformScoreListProps {
  platforms: PlatformScoreWithCompetitor[];
  className?: string;
}

export function PlatformScoreList({ platforms, className }: PlatformScoreListProps) {
  return (
    <Card className={className}>
      <CardHeader>
        <CardTitle className="text-lg">平台评分详情</CardTitle>
      </CardHeader>
      <CardContent className="space-y-3">
        {platforms.length === 0 ? (
          <div className="flex h-[120px] flex-col items-center justify-center text-muted-foreground">
            <p>暂无平台数据</p>
          </div>
        ) : (
          platforms.map((item) => (
            <PlatformScoreItem key={item.platform} platform={item} />
          ))
        )}
      </CardContent>
    </Card>
  );
}

interface PlatformScoreItemProps {
  platform: PlatformScoreWithCompetitor;
}

function PlatformScoreItem({ platform }: PlatformScoreItemProps) {
  const level = getHealthLevel(platform.score);
  const levelClass = getHealthLevelClassName(level);
  const gap = calculateCompetitorGap(platform.score, platform.competitorScore);
  const isDanger = level === "danger";

  const label = PLATFORM_LABELS[platform.platform] || platform.platform;
  const icon = PLATFORM_ICONS[platform.platform] || "📊";

  // 进度条颜色
  const progressColor = level === "excellent" ? "bg-emerald-500" :
    level === "good" ? "bg-yellow-500" :
    level === "pass" ? "bg-orange-500" : "bg-red-500";

  return (
    <div
      className={cn(
        "flex items-center justify-between rounded-lg border p-4 transition-colors",
        isDanger && "border-red-200 bg-red-50/50",
      )}
    >
      <div className="flex items-center gap-3">
        {/* 平台图标 */}
        <div className={cn("rounded-md p-2 text-xl", levelClass.bg)}>
          <span role="img" aria-label={label}>{icon}</span>
        </div>

        {/* 平台名称 */}
        <div className="flex flex-col">
          <div className="flex items-center gap-2">
            <span className="font-medium">{label}</span>
            {isDanger && (
              <AlertTriangle className="h-4 w-4 text-red-600" />
            )}
          </div>
          <span className="text-sm text-muted-foreground">
            {platform.competitorName ? `vs ${platform.competitorName}` : "暂无竞品"}
          </span>
        </div>
      </div>

      <div className="flex items-center gap-4">
        {/* 进度条 */}
        <div className="hidden sm:block">
          <div className="w-32 sm:w-40">
            <div className="h-2.5 w-full overflow-hidden rounded-full bg-gray-100">
              <div
                className={cn("h-full rounded-full transition-all", progressColor)}
                style={{ width: `${Math.max(platform.score, 5)}%` }}
              />
            </div>
          </div>
        </div>

        {/* 分数 */}
        <div className="flex items-center gap-2">
          <span className={cn("w-12 text-right font-semibold", levelClass.text)}>
            {platform.score.toFixed(0)}
          </span>
          <span className="text-sm text-muted-foreground">/100</span>
        </div>

        {/* 竞品对比 */}
        <div className="flex items-center gap-1 min-w-[80px] justify-end">
          {gap.ahead ? (
            <>
              <TrendingUp className="h-4 w-4 text-emerald-600" />
              <span className="text-sm text-emerald-600">领先{gap.gap}分</span>
            </>
          ) : gap.behind ? (
            <>
              <TrendingDown className={cn("h-4 w-4", isDanger ? "text-red-600" : "text-red-500")} />
              <span className={cn("text-sm", isDanger ? "text-red-600 font-medium" : "text-red-500")}>
                落后{gap.gap}分
              </span>
            </>
          ) : (
            <>
              <Minus className="h-4 w-4 text-gray-400" />
              <span className="text-sm text-gray-400">持平</span>
            </>
          )}
        </div>
      </div>
    </div>
  );
}
