"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,
  Lock,
} from "lucide-react";
import { api } from "@/lib/api";
import { PLATFORM_MAP } from "@/lib/platforms";
import {
  getHealthLevel,
  HEALTH_LEVELS,
  type BrandHealthReport,
} from "@/types/onboarding";
import { UpgradePrompt } from "@/components/subscription/UpgradePrompt";
import {
  round,
  getStatusColor,
  getProgressBg,
  DIMENSION_ICONS,
} from "@/lib/utils/health-score";

interface HealthDimension {
  name: string;
  score: number;
  max_score: number;
  percentage: number;
  status: string;
}

interface HealthRecommendation {
  priority: string;
  dimension: string;
  title: string;
  description: string;
}

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

const LOCKED_DIMENSIONS = ["结构化数据", "语义一致性", "技术可访问性"];

export function Step4HealthReport({
  brandId,
  brandName,
  competitors: _competitors,
  platforms,
  onNext,
  onBack,
}: Step4HealthReportProps) {
  const { data: session } = useSession();
  const [report, setReport] = useState<BrandHealthReport | null>(null);
  const [dimensions, setDimensions] = useState<HealthDimension[]>([]);
  const [recommendations, setRecommendations] = useState<
    HealthRecommendation[]
  >([]);
  const [isFullReport, setIsFullReport] = useState(false);
  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 & {
        dimensions?: HealthDimension[];
        recommendations?: HealthRecommendation[];
        is_full_report?: boolean;
        health_level?: string;
        health_level_label?: string;
      };
      setReport(data);
      setDimensions(data.dimensions || []);
      setRecommendations(data.recommendations || []);
      setIsFullReport(data.is_full_report || false);
    } catch (err) {
      setError("获取健康报告失败，请重试");
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchReport();
  }, [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" />
          </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>
    );
  }

  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.color.border} 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.color.bg} ${healthConfig.color.text} border ${healthConfig.color.border} text-base px-4 py-1 mb-4`}
            >
              {healthConfig.label}
            </Badge>

            {report.competitor_scores.length > 0 && (
              <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>

      {dimensions.length > 0 && (
        <Card className="mt-4 w-full max-w-2xl">
          <CardHeader className="pb-3">
            <div className="flex items-center justify-between">
              <CardTitle className="flex items-center gap-2 text-lg">
                <BarChart3 className="h-5 w-5" />
                维度评分
              </CardTitle>
              {!isFullReport && (
                <UpgradePrompt variant="badge" feature="完整6维度诊断" />
              )}
            </div>
          </CardHeader>
          <CardContent className="space-y-4">
            {dimensions.map((dim) => {
              const Icon = DIMENSION_ICONS[dim.name] || Activity;
              return (
                <div key={dim.name} className="space-y-2">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <Icon className="h-4 w-4 text-muted-foreground" />
                      <span className="text-sm font-medium">{dim.name}</span>
                    </div>
                    <span
                      className={`text-sm font-semibold ${getStatusColor(dim.percentage)}`}
                    >
                      {round(dim.percentage, 1)}%
                    </span>
                  </div>
                  <div className="h-2 w-full overflow-hidden rounded-full bg-gray-100">
                    <div
                      className={`h-full rounded-full transition-all ${getProgressBg(dim.percentage)}`}
                      style={{ width: `${Math.max(dim.percentage, 2)}%` }}
                    />
                  </div>
                </div>
              );
            })}

            {!isFullReport && (
              <>
                {LOCKED_DIMENSIONS.map((dimName) => (
                  <div key={dimName} className="space-y-2 opacity-50">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <Lock className="h-4 w-4 text-amber-500" />
                        <span className="text-sm font-medium">{dimName}</span>
                      </div>
                      <Badge
                        variant="outline"
                        className="border-amber-300 bg-amber-50 text-amber-700 text-xs"
                      >
                        Pro
                      </Badge>
                    </div>
                    <div className="h-2 w-full overflow-hidden rounded-full bg-gray-100">
                      <div
                        className="h-full rounded-full bg-gray-300"
                        style={{ width: "0%" }}
                      />
                    </div>
                  </div>
                ))}
              </>
            )}
          </CardContent>
        </Card>
      )}

      {recommendations.length > 0 && (
        <Card className="mt-4 w-full max-w-2xl">
          <CardHeader className="pb-3">
            <CardTitle className="text-lg">关键问题</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              {recommendations.map((rec, i) => (
                <div
                  key={i}
                  className="flex items-start gap-2 rounded-lg border p-3"
                >
                  <span className="mt-0.5 h-1.5 w-1.5 shrink-0 rounded-full bg-amber-500" />
                  <div>
                    <p className="text-sm font-medium">{rec.title}</p>
                    <p className="text-xs text-muted-foreground mt-0.5">
                      {rec.description}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      )}

      {Object.keys(report.platform_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">
              <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.color.bg.replace("50", "500")}`}
                            style={{ width: `${score}%` }}
                          />
                        </div>
                      </div>
                      <span
                        className={`w-12 text-right font-semibold ${config.color.text}`}
                      >
                        {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>

      {!isFullReport && (
        <div className="mt-4 w-full max-w-2xl">
          <UpgradePrompt
            variant="inline"
            feature="完整6维度诊断报告"
            description="免费版仅展示3个核心维度。升级Pro可查看完整6维度诊断、深度竞品分析和AI优化方案。"
          />
        </div>
      )}

      <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>
  );
}