"use client";

import { useState, useEffect, useCallback } from "react";
import { useSearchParams } from "next/navigation";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Skeleton } from "@/components/ui/skeleton";
import {
  Activity,
  Search,
  TrendingUp,
  TrendingDown,
  AlertTriangle,
  ArrowRight,
  Lock,
  Share2,
  Download,
} from "lucide-react";
import { healthScoreApi, type HealthScoreResponse } from "@/lib/api/health-score";

const HEALTH_COLORS: Record<string, { bg: string; text: string; border: string; label: string }> = {
  excellent: { bg: "bg-emerald-50", text: "text-emerald-600", border: "border-emerald-200", label: "优秀" },
  good: { bg: "bg-yellow-50", text: "text-yellow-600", border: "border-yellow-200", label: "良好" },
  pass: { bg: "bg-orange-50", text: "text-orange-600", border: "border-orange-200", label: "及格" },
  danger: { bg: "bg-red-50", text: "text-red-600", border: "border-red-200", label: "危险" },
};

function getHealthLevel(score: number): string {
  if (score >= 80) return "excellent";
  if (score >= 60) return "good";
  if (score >= 40) return "pass";
  return "danger";
}

function getPriorityConfig(priority: string) {
  switch (priority) {
    case "high":
      return { color: "text-red-600", bg: "bg-red-50", label: "高" };
    case "medium":
      return { color: "text-orange-600", bg: "bg-orange-50", label: "中" };
    default:
      return { color: "text-yellow-600", bg: "bg-yellow-50", label: "低" };
  }
}

function LoadingState() {
  return (
    <div className="flex flex-col items-center py-12">
      <div className="mb-6 text-center">
        <div className="mb-4 inline-flex h-16 w-16 items-center justify-center rounded-full bg-emerald-50">
          <Activity className="h-8 w-8 text-emerald-600 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="space-y-4 pt-6">
          <div className="flex items-center justify-center py-8">
            <div className="h-8 w-8 animate-spin rounded-full border-2 border-gray-200 border-t-emerald-500" />
          </div>
          <Skeleton className="h-32 w-full" />
          <Skeleton className="h-24 w-full" />
          <Skeleton className="h-24 w-full" />
        </CardContent>
      </Card>
    </div>
  );
}

function ErrorState({ message, onRetry }: { message: string; onRetry: () => void }) {
  return (
    <div className="flex flex-col items-center py-12">
      <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">{message}</p>
      </div>
      <Button variant="outline" onClick={onRetry}>
        重新检测
      </Button>
    </div>
  );
}

function ResultView({
  data,
  onShowRegisterModal,
  onShare,
  onDownload,
}: {
  data: HealthScoreResponse;
  onShowRegisterModal: () => void;
  onShare: () => void;
  onDownload: () => void;
}) {
  const level = getHealthLevel(data.overall_score);
  const colors = HEALTH_COLORS[level];
  const topRecommendations = data.recommendations.slice(0, 3);

  return (
    <div className="flex flex-col items-center py-8">
      <div className="mb-6 text-center">
        <h2 className="mb-2 text-2xl font-bold">
          <span className="font-semibold">{data.brand_name}</span> 健康分报告
        </h2>
        <p className="text-muted-foreground">以下是该品牌在AI搜索中的综合表现</p>
      </div>

      <Card className={`w-full max-w-md ${colors.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">{data.overall_score}</span>
              <span className="absolute top-2 text-2xl text-muted-foreground">/100</span>
            </div>
            <Badge
              variant="secondary"
              className={`${colors.bg} ${colors.text} border ${colors.border} text-base px-4 py-1 mb-4`}
            >
              {colors.label}
            </Badge>
            {data.cached && (
              <p className="text-xs text-muted-foreground">数据来自缓存</p>
            )}
          </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">
            <Activity className="h-5 w-5" />
            维度评分
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {data.dimensions.map((dim) => {
              const dimLevel = getHealthLevel(dim.percentage);
              const dimColors = HEALTH_COLORS[dimLevel];
              return (
                <div key={dim.name} className="space-y-1.5">
                  <div className="flex items-center justify-between">
                    <span className="text-sm font-medium">{dim.name}</span>
                    <span className={`text-sm font-semibold ${dimColors.text}`}>
                      {dim.score}/{dim.max_score}
                    </span>
                  </div>
                  <div className="h-2.5 w-full overflow-hidden rounded-full bg-gray-100">
                    <div
                      className={`h-full rounded-full ${dimColors.bg.replace("50", "500")}`}
                      style={{ width: `${dim.percentage}%` }}
                    />
                  </div>
                </div>
              );
            })}
          </div>
        </CardContent>
      </Card>

      {topRecommendations.length > 0 && (
        <Card className="mt-4 w-full max-w-2xl">
          <CardHeader className="pb-3">
            <CardTitle className="flex items-center gap-2 text-lg">
              <AlertTriangle className="h-5 w-5 text-orange-500" />
              关键问题
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {topRecommendations.map((rec, idx) => {
                const priorityConfig = getPriorityConfig(rec.priority);
                return (
                  <div key={idx} className="flex items-start gap-3 rounded-lg border p-3">
                    <span className={`mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-xs font-medium ${priorityConfig.bg} ${priorityConfig.color}`}>
                      {priorityConfig.label}
                    </span>
                    <div className="min-w-0 flex-1">
                      <p className="text-sm font-medium">{rec.title}</p>
                      <p className="mt-0.5 text-xs text-muted-foreground">{rec.description}</p>
                    </div>
                  </div>
                );
              })}
            </div>
          </CardContent>
        </Card>
      )}

      <div className="mt-6 flex flex-col gap-3 sm:flex-row">
        <Button onClick={onShowRegisterModal} className="flex-1">
          查看详细修复建议
          <ArrowRight className="ml-2 h-4 w-4" />
        </Button>
        <Button variant="outline" onClick={onShare} className="flex-1">
          <Share2 className="mr-2 h-4 w-4" />
          分享报告
        </Button>
        <Button variant="outline" onClick={onDownload} className="flex-1">
          <Download className="mr-2 h-4 w-4" />
          下载PDF
        </Button>
      </div>
    </div>
  );
}

function RegisterModal({ open, onClose }: { open: boolean; onClose: () => void }) {
  if (!open) return null;
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
      <div className="mx-4 w-full max-w-md rounded-lg bg-white p-6 shadow-xl" onClick={(e) => e.stopPropagation()}>
        <div className="mb-4 flex flex-col items-center text-center">
          <div className="mb-3 inline-flex h-14 w-14 items-center justify-center rounded-full bg-emerald-50">
            <Lock className="h-7 w-7 text-emerald-600" />
          </div>
          <h3 className="text-lg font-bold">注册后查看完整报告</h3>
          <p className="mt-2 text-sm text-muted-foreground">
            注册 GEO 平台账户，即可解锁完整健康报告、详细修复建议和持续监控功能
          </p>
        </div>
        <div className="flex flex-col gap-2">
          <Link href="/register">
            <Button className="w-full">立即注册</Button>
          </Link>
          <Button variant="ghost" onClick={onClose} className="w-full">
            稍后再说
          </Button>
        </div>
      </div>
    </div>
  );
}

export default function HealthScorePage() {
  const searchParams = useSearchParams();
  const brandFromUrl = searchParams.get("brand") || "";

  const [brand, setBrand] = useState(brandFromUrl);
  const [competitorsInput, setCompetitorsInput] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [result, setResult] = useState<HealthScoreResponse | null>(null);
  const [registerModalOpen, setRegisterModalOpen] = useState(false);
  const [toast, setToast] = useState<string | null>(null);

  useEffect(() => {
    if (brandFromUrl) {
      setBrand(brandFromUrl);
    }
  }, [brandFromUrl]);

  useEffect(() => {
    if (toast) {
      const timer = setTimeout(() => setToast(null), 2500);
      return () => clearTimeout(timer);
    }
  }, [toast]);

  const handleCheck = useCallback(async () => {
    const trimmedBrand = brand.trim();
    if (!trimmedBrand) return;

    const competitors = competitorsInput
      .split(/[,，]/)
      .map((s) => s.trim())
      .filter(Boolean)
      .slice(0, 3);

    setLoading(true);
    setError(null);
    setResult(null);

    try {
      const data = await healthScoreApi.getHealthScore(trimmedBrand, competitors);
      setResult(data);
    } catch (err) {
      setError(err instanceof Error ? err.message : "检测失败，请稍后重试");
    } finally {
      setLoading(false);
    }
  }, [brand, competitorsInput]);

  const handleShare = useCallback(async () => {
    const url = `${window.location.origin}/health-score?brand=${encodeURIComponent(brand.trim())}`;
    try {
      await navigator.clipboard.writeText(url);
      setToast("链接已复制到剪贴板");
    } catch {
      setToast("复制失败，请手动复制链接");
    }
  }, [brand]);

  const handleDownload = useCallback(() => {
    setToast("PDF 下载功能即将推出");
  }, []);

  return (
    <div className="mx-auto max-w-6xl px-4 py-8 sm:px-6 sm:py-12">
      {toast && (
        <div className="fixed left-1/2 top-6 z-50 -translate-x-1/2 rounded-lg bg-gray-900 px-4 py-2.5 text-sm text-white shadow-lg">
          {toast}
        </div>
      )}

      <div className="mb-10 text-center">
        <div className="mb-4 inline-flex h-14 w-14 items-center justify-center rounded-xl bg-emerald-50">
          <Activity className="h-7 w-7 text-emerald-600" />
        </div>
        <h1 className="mb-2 text-3xl font-bold text-gray-900 sm:text-4xl">
          品牌健康分检测
        </h1>
        <p className="mx-auto max-w-xl text-muted-foreground">
          免费检测您的品牌在AI搜索引擎中的表现，了解品牌可见度、推荐排名和情感倾向
        </p>
      </div>

      {!result && !loading && !error && (
        <Card className="mx-auto max-w-xl">
          <CardContent className="pt-6">
            <div className="space-y-4">
              <div className="space-y-2">
                <label className="text-sm font-medium text-gray-700">品牌名称</label>
                <div className="flex gap-2">
                  <Input
                    placeholder="输入品牌名称，如：华为"
                    value={brand}
                    onChange={(e) => setBrand(e.target.value)}
                    onKeyDown={(e) => {
                      if (e.key === "Enter") handleCheck();
                    }}
                    className="h-12 text-base"
                  />
                  <Button
                    onClick={handleCheck}
                    disabled={!brand.trim() || loading}
                    size="lg"
                    className="h-12 shrink-0 px-6"
                  >
                    <Search className="mr-2 h-4 w-4" />
                    开始检测
                  </Button>
                </div>
              </div>
              <div className="space-y-2">
                <label className="text-sm font-medium text-gray-700">
                  竞品名称
                  <span className="ml-1 text-xs text-muted-foreground">（可选，最多3个，逗号分隔）</span>
                </label>
                <Input
                  placeholder="如：小米, OPPO, vivo"
                  value={competitorsInput}
                  onChange={(e) => setCompetitorsInput(e.target.value)}
                  onKeyDown={(e) => {
                    if (e.key === "Enter") handleCheck();
                  }}
                  className="h-10"
                />
              </div>
            </div>
          </CardContent>
        </Card>
      )}

      {loading && <LoadingState />}
      {error && !loading && (
        <ErrorState message={error} onRetry={handleCheck} />
      )}
      {result && !loading && (
        <ResultView
          data={result}
          onShowRegisterModal={() => setRegisterModalOpen(true)}
          onShare={handleShare}
          onDownload={handleDownload}
        />
      )}

      <div className="mt-12 text-center">
        <p className="text-sm text-muted-foreground">
          已有账户？{" "}
          <Link href="/login" className="font-medium text-emerald-600 hover:underline">
            登录
          </Link>
        </p>
      </div>

      <RegisterModal open={registerModalOpen} onClose={() => setRegisterModalOpen(false)} />
    </div>
  );
}
