"use client";

import { useState, useEffect, useCallback, Suspense } from "react";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { Card, CardContent } from "@/components/ui/card";

interface ReviewItem {
  id: number;
  overall: number;
  capability: number;
  devExp: number;
  costLicense: number;
  community: number;
  performance: number;
  reviews?: Record<string, { score: number; summary: string; detail: string }>;
  skill: {
    id: number;
    name: string;
    slug: string;
    description: string;
    sourceUrl: string;
    category: { name: string; slug: string } | null;
  };
  reviewedAt: string;
}

const dimLabels: Record<string, string> = {
  capability: "能力",
  devExp: "体验",
  costLicense: "成本",
  community: "社区",
  performance: "性能",
};

function getScoreColor(score: number): string {
  if (score >= 4) return "text-emerald-700";
  if (score >= 3) return "text-amber-700";
  return "text-red-600";
}

function getScoreBg(score: number): string {
  if (score >= 4) return "bg-emerald-50";
  if (score >= 3) return "bg-amber-50";
  return "bg-red-50";
}

function getOverallLabel(score: number): string {
  if (score >= 4.5) return "卓越";
  if (score >= 4) return "优秀";
  if (score >= 3.5) return "良好";
  if (score >= 3) return "中等";
  return "一般";
}

function MiniRadar({ scores }: { scores: number[] }) {
  const size = 80;
  const cx = size / 2;
  const cy = size / 2;
  const r = 30;
  const angles = scores.map((_, i) => (Math.PI * 2 * i) / scores.length - Math.PI / 2);

  const points = scores.map((s, i) => {
    const val = (s / 5) * r;
    return `${cx + val * Math.cos(angles[i])},${cy + val * Math.sin(angles[i])}`;
  }).join(" ");

  const gridRings = [1, 2, 3, 4, 5].map((level) => {
    const gridPoints = angles.map((a) => {
      const val = (level / 5) * r;
      return `${cx + val * Math.cos(a)},${cy + val * Math.sin(a)}`;
    }).join(" ");
    return <polygon key={level} points={gridPoints} fill="none" stroke="rgba(0,0,0,0.06)" strokeWidth="0.5" />;
  });

  const axisLines = angles.map((a, i) => (
    <line key={i} x1={cx} y1={cy} x2={cx + r * Math.cos(a)} y2={cy + r * Math.sin(a)} stroke="rgba(0,0,0,0.06)" strokeWidth="0.5" />
  ));

  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      {gridRings}
      {axisLines}
      <polygon points={points} fill="rgba(139,92,246,0.15)" stroke="rgba(139,92,246,0.7)" strokeWidth="1.5" />
      {scores.map((s, i) => (
        <circle key={i} cx={cx + (s / 5) * r * Math.cos(angles[i])} cy={cy + (s / 5) * r * Math.sin(angles[i])} r="2.5" fill={s >= 4 ? "#10b981" : s >= 3 ? "#f59e0b" : "#ef4444"} />
      ))}
    </svg>
  );
}

function ReviewCard({ review }: { review: ReviewItem }) {
  const scores = [review.capability, review.devExp, review.costLicense, review.community, review.performance];
  const reviewEntries = review.reviews
    ? (Object.entries(review.reviews).filter(
        ([, v]) => v && typeof v === "object" && "score" in v
      ) as [string, { score: number; summary: string; detail: string }][])
    : [];

  return (
    <Link href={`/skills/${review.skill.slug}`} className="block group">
      <Card className="border-border/60 bg-white overflow-hidden shadow-[0_1px_3px_rgba(0,0,0,0.06),0_1px_2px_rgba(0,0,0,0.04)] transition-all duration-200 hover:shadow-md hover:border-primary/30 h-full">
        <CardContent className="p-5">
          <div className="flex items-start justify-between gap-3 mb-4">
            <div className="flex-1 min-w-0">
              <h3 className="text-base font-semibold text-foreground group-hover:text-primary transition-colors truncate">
                {review.skill.name}
              </h3>
              {review.skill.category && (
                <span className="inline-block mt-1 text-xs text-muted-foreground bg-muted/50 px-2 py-0.5 rounded-md">
                  {review.skill.category.name}
                </span>
              )}
            </div>
            <div className={`flex-shrink-0 flex flex-col items-center justify-center rounded-xl px-3 py-2 ${getScoreBg(review.overall)}`}>
              <span className={`text-xl font-bold ${getScoreColor(review.overall)}`}>
                {review.overall}
              </span>
              <span className="text-[10px] text-muted-foreground">{getOverallLabel(review.overall)}</span>
            </div>
          </div>

          <div className="flex items-center gap-4 mb-4">
            <MiniRadar scores={scores} />
            <div className="flex-1 grid grid-cols-5 gap-1">
              {scores.map((s, i) => (
                <div key={i} className="flex flex-col items-center">
                  <span className="text-[10px] text-muted-foreground mb-0.5">{dimLabels[Object.keys(dimLabels)[i]]}</span>
                  <div className="w-full bg-muted/50 rounded-full h-1.5 overflow-hidden">
                    <div
                      className={`h-full rounded-full ${s >= 4 ? "bg-emerald-500" : s >= 3 ? "bg-amber-500" : "bg-red-500"}`}
                      style={{ width: `${(s / 5) * 100}%` }}
                    />
                  </div>
                  <span className="text-[10px] font-medium text-foreground/70 mt-0.5">{s}</span>
                </div>
              ))}
            </div>
          </div>

          {reviewEntries.length > 0 && (
            <div className="space-y-1.5">
              {reviewEntries.slice(0, 3).map(([key, dim]) => (
                <div key={key} className="flex items-center gap-2 text-xs">
                  <span className="text-muted-foreground w-10 flex-shrink-0">{dimLabels[key]}</span>
                  <span className="text-foreground/80 truncate">{dim.summary}</span>
                </div>
              ))}
            </div>
          )}

          {review.skill.description && (
            <p className="mt-3 text-xs text-muted-foreground/70 line-clamp-2">
              {review.skill.description}
            </p>
          )}
        </CardContent>
      </Card>
    </Link>
  );
}

function ReviewsContent() {
  const searchParams = useSearchParams();
  const [reviews, setReviews] = useState<ReviewItem[]>([]);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(true);
  const [page, setPage] = useState(1);
  const pageSize = 12;

  const fetchReviews = useCallback(async () => {
    setLoading(true);
    try {
      const res = await fetch(`/api/skill-reviews?page=${page}&pageSize=${pageSize}`);
      if (res.ok) {
        const data = await res.json();
        setReviews(data.reviews || []);
        setTotal(data.total || 0);
      }
    } catch {}
    setLoading(false);
  }, [page]);

  useEffect(() => {
    fetchReviews();
  }, [fetchReviews]);

  const totalPages = Math.ceil(total / pageSize);

  return (
    <div className="mx-auto max-w-[1440px] px-4 sm:px-6 lg:px-8 py-8">
      <div className="mb-8">
        <h1 className="text-2xl font-bold text-foreground flex items-center gap-3">
          <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-violet-100">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-violet-600">
              <path strokeLinecap="round" strokeLinejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
            </svg>
          </div>
          AI评测
        </h1>
        <p className="mt-2 text-sm text-muted-foreground">
          基于五维模型的AI技能深度评测，涵盖场景能力、开发体验、成本许可、社区健康、性能稳定
        </p>
        <div className="mt-3 flex items-center gap-4 text-xs text-muted-foreground">
          <span>共 <strong className="text-foreground">{total}</strong> 项评测</span>
          <span className="h-3 w-px bg-border/60" />
          <span>按综合评分排序</span>
        </div>
      </div>

      {loading ? (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
          {Array.from({ length: 6 }).map((_, i) => (
            <Card key={i} className="border-border/60 bg-white animate-pulse">
              <CardContent className="p-5">
                <div className="h-5 bg-muted/50 rounded w-2/3 mb-3" />
                <div className="h-3 bg-muted/50 rounded w-1/3 mb-4" />
                <div className="h-20 bg-muted/30 rounded" />
              </CardContent>
            </Card>
          ))}
        </div>
      ) : reviews.length === 0 ? (
        <div className="text-center py-20">
          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="mx-auto text-muted-foreground/40 mb-4">
            <path strokeLinecap="round" strokeLinejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
          </svg>
          <p className="text-muted-foreground">暂无评测数据</p>
          <p className="text-xs text-muted-foreground/60 mt-1">评测正在生成中，请稍后再来</p>
        </div>
      ) : (
        <>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
            {reviews.map((review) => (
              <ReviewCard key={review.id} review={review} />
            ))}
          </div>

          {totalPages > 1 && (
            <div className="mt-8 flex items-center justify-center gap-2">
              <button
                onClick={() => setPage(Math.max(1, page - 1))}
                disabled={page === 1}
                className="px-3 py-1.5 text-sm rounded-lg border border-border/60 bg-white text-muted-foreground hover:bg-accent disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
              >
                上一页
              </button>
              <span className="text-sm text-muted-foreground px-2">
                {page} / {totalPages}
              </span>
              <button
                onClick={() => setPage(Math.min(totalPages, page + 1))}
                disabled={page === totalPages}
                className="px-3 py-1.5 text-sm rounded-lg border border-border/60 bg-white text-muted-foreground hover:bg-accent disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
              >
                下一页
              </button>
            </div>
          )}
        </>
      )}
    </div>
  );
}

export default function ReviewsPage() {
  return (
    <Suspense fallback={
      <div className="flex min-h-screen items-center justify-center">
        <p className="text-muted-foreground">加载中...</p>
      </div>
    }>
      <ReviewsContent />
    </Suspense>
  );
}