"use client";

import { useState, useEffect } from "react";
import { useSession } from "next-auth/react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Skeleton } from "@/components/ui/skeleton";
import {
  Loader2,
  Activity,
  TrendingUp,
  TrendingDown,
  Minus,
  ArrowRight,
  ArrowLeft,
  BarChart3,
  Trophy,
  AlertTriangle,
} from "lucide-react";
import { api } from "@/lib/api";
import { PLATFORM_MAP } from "@/lib/platforms";
import {
  getHealthLevel,
  HEALTH_LEVELS,
  type BrandHealthReport,
} from "@/types/onboarding";

interface Step4HealthReportProps {
  brandId: string;
  brandName: string;
  competitors: string[];
  platforms: string[];
  onNext: (report: BrandHealthReport) => void;
  onBack: () => void;
}

export function Step4HealthReport({
  brandId,
  brandName,
  competitors: _competitors,
  platforms,
  onNext,
  onBack,
}: Step4HealthReportProps) {
  const { data: session } = useSession();
  const [report, setReport] = useState<BrandHealthReport | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const fetchReport = async () => {
    if (!session?.accessToken) return;

    try {
      setLoading(true);
      setError(null);
      const data = (await api.onboarding.getHealthReport(
        session.accessToken,
        brandId,
      )) as BrandHealthReport;
      setReport(data);
    } catch (err) {
      console.error("获取健康报告失败:", err);
      setError("获取健康报告失败，请重试");
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchReport();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [session?.accessToken, brandId]);

  if (loading) {
    return (
      <div className="flex flex-col items-center justify-center py-8">
        <div className="mb-6 text-center">
          <div className="mb-4 inline-flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
            <Activity className="h-8 w-8 text-primary animate-pulse" />
          </div>
          <h2 className="mb-2 text-2xl font-bold">正在生成健康报告...</h2>
          <p className="text-muted-foreground">
            系统正在分析您的品牌在AI搜索中的表现
          </p>
        </div>

        <Card className="w-full max-w-2xl">
          <CardContent className="pt-6 space-y-4">
            <div className="flex items-center justify-center py-8">
              <Loader2 className="h-8 w-8 animate-spin text-primary" />
            </div>
            <Skeleton className="h-32 w-full" />
            <Skeleton className="h-24 w-full" />
            <Skeleton className="h-24 w-full" />
          </CardContent>
        </Card>
      </div>
    );
  }

  if (error || (!loading && !report)) {
    return (
      <div className="flex flex-col items-center justify-center py-8">
        <div className="mb-6 text-center">
          <div className="mb-4 inline-flex h-16 w-16 items-center justify-center rounded-full bg-red-50">
            <AlertTriangle className="h-8 w-8 text-red-600" />
          </div>
          <h2 className="mb-2 text-2xl font-bold">生成报告失败</h2>
          <p className="text-muted-foreground">
            {error || "无法生成健康报告，请稍后重试"}
          </p>
        </div>

        <div className="flex gap-3">
          <Button variant="outline" onClick={onBack}>
            <ArrowLeft className="mr-2 h-4 w-4" />
            上一步
          </Button>
          <Button variant="outline" onClick={fetchReport}>重试</Button>
          <Button variant="ghost" onClick={() => onNext({
            brand_id: brandId,
            brand_name: brandName,
            overall_score: 0,
            platform_scores: {},
            competitor_scores: [],
            strengths: [],
            weaknesses: [],
          })}>跳过此步骤</Button>
        </div>
      </div>
    );
  }

  // TypeScript 类型守卫：经过 loading 和 error 检查后，report 必定存在
  if (!report) return null;

  const healthLevel = getHealthLevel(report.overall_score);
  const healthConfig = HEALTH_LEVELS[healthLevel];

  // 计算领先/落后竞品数量
  const leadingCount = report.competitor_scores.filter(
    (c) => c.is_leading,
  ).length;
  const laggingCount = report.competitor_scores.length - leadingCount;

  return (
    <div className="flex flex-col items-center justify-center py-8">
      <div className="mb-6 text-center">
        <div className="mb-4 inline-flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
          <Activity className="h-8 w-8 text-primary" />
        </div>
        <h2 className="mb-2 text-2xl font-bold">
          <span className="font-semibold">{brandName}</span> 健康报告
        </h2>
        <p className="text-muted-foreground">
          以下是您的品牌在AI搜索中的综合表现
        </p>
      </div>

      {/* 综合评分卡片 */}
      <Card className={`w-full max-w-md ${healthConfig.borderColor} border-2`}>
        <CardContent className="pt-6">
          <div className="flex flex-col items-center">
            {/* 评分大数字 */}
            <div className="relative mb-4">
              <span className="text-7xl font-bold">{report.overall_score}</span>
              <span className="absolute top-2 text-2xl text-muted-foreground">
                /100
              </span>
            </div>

            {/* 健康等级标签 */}
            <Badge
              variant="secondary"
              className={`${healthConfig.bgColor} ${healthConfig.color} border ${healthConfig.borderColor} text-base px-4 py-1 mb-4`}
            >
              {healthConfig.label}
            </Badge>

            {/* 趋势指示 */}
            <div className="flex items-center gap-2 text-sm">
              <TrendingUp className="h-4 w-4 text-emerald-600" />
              <span className="text-emerald-600">
                领先 {leadingCount} 个竞品
              </span>
              <span className="mx-1 text-muted-foreground">|</span>
              <TrendingDown className="h-4 w-4 text-red-600" />
              <span className="text-red-600">落后 {laggingCount} 个竞品</span>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 平台评分 */}
      <Card className="mt-4 w-full max-w-2xl">
        <CardHeader className="pb-3">
          <CardTitle className="flex items-center gap-2 text-lg">
            <BarChart3 className="h-5 w-5" />
            各平台评分
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            {Object.entries(report.platform_scores)
              .filter(([key]) => platforms.includes(key))
              .map(([platform, score]) => {
                const level = getHealthLevel(score);
                const config = HEALTH_LEVELS[level];
                const platformName = PLATFORM_MAP[platform] || platform;

                return (
                  <div key={platform} className="flex items-center gap-3">
                    <span className="w-24 text-sm truncate">
                      {platformName}
                    </span>
                    <div className="flex-1">
                      <div className="h-2 w-full overflow-hidden rounded-full bg-gray-100">
                        <div
                          className={`h-full rounded-full ${config.bgColor.replace("50", "500")}`}
                          style={{ width: `${score}%` }}
                        />
                      </div>
                    </div>
                    <span
                      className={`w-12 text-right font-semibold ${config.color}`}
                    >
                      {score}
                    </span>
                  </div>
                );
              })}
          </div>
        </CardContent>
      </Card>

      {/* 竞品对比 */}
      {report.competitor_scores.length > 0 && (
        <Card className="mt-4 w-full max-w-2xl">
          <CardHeader className="pb-3">
            <CardTitle className="flex items-center gap-2 text-lg">
              <Trophy className="h-5 w-5 text-amber-500" />
              竞品对比
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {report.competitor_scores.map((competitor, index) => (
                <div
                  key={index}
                  className="flex items-center justify-between rounded-lg border p-3"
                >
                  <div className="flex items-center gap-3">
                    <div
                      className={`flex h-8 w-8 items-center justify-center rounded-full ${
                        competitor.is_leading
                          ? "bg-emerald-100 text-emerald-600"
                          : "bg-gray-100 text-gray-600"
                      }`}
                    >
                      {competitor.is_leading ? (
                        <TrendingUp className="h-4 w-4" />
                      ) : (
                        <Minus className="h-4 w-4" />
                      )}
                    </div>
                    <span className="font-medium">{competitor.name}</span>
                  </div>
                  <div className="flex items-center gap-3">
                    <span
                      className={`font-semibold ${
                        competitor.score >= 70
                          ? "text-emerald-600"
                          : competitor.score >= 40
                            ? "text-amber-600"
                            : "text-red-600"
                      }`}
                    >
                      {competitor.score}分
                    </span>
                    {competitor.is_leading && (
                      <Badge variant="default" className="bg-emerald-600">
                        领先
                      </Badge>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      )}

      {/* 优劣势分析 */}
      <Card className="mt-4 w-full max-w-2xl">
        <CardHeader className="pb-3">
          <CardTitle className="text-lg">优劣势分析</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid gap-4 sm:grid-cols-2">
            <div>
              <h4 className="font-medium text-emerald-600 mb-2 flex items-center gap-1">
                <TrendingUp className="h-4 w-4" />
                优势
              </h4>
              <ul className="space-y-1 text-sm text-muted-foreground">
                {report.strengths.map((strength, index) => (
                  <li key={index} className="flex items-start gap-2">
                    <span className="text-emerald-500">+</span>
                    {strength}
                  </li>
                ))}
              </ul>
            </div>
            <div>
              <h4 className="font-medium text-amber-600 mb-2 flex items-center gap-1">
                <TrendingDown className="h-4 w-4" />
                劣势
              </h4>
              <ul className="space-y-1 text-sm text-muted-foreground">
                {report.weaknesses.map((weakness, index) => (
                  <li key={index} className="flex items-start gap-2">
                    <span className="text-amber-500">-</span>
                    {weakness}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </CardContent>
      </Card>

      <div className="mt-6 flex flex-col gap-3 sm:flex-row">
        <Button
          type="button"
          variant="outline"
          onClick={onBack}
          className="flex-1"
        >
          <ArrowLeft className="mr-2 h-4 w-4" />
          上一步
        </Button>
        <Button type="button" onClick={() => onNext(report)} className="flex-1">
          查看行动建议
          <ArrowRight className="ml-2 h-4 w-4" />
        </Button>
      </div>
    </div>
  );
}