"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { MetricCard, StageProgress } from "@/components/business";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  Sparkles,
  Search,
  FileText,
  Send,
  BarChart3,
  Target,
  Plus,
  ArrowRight,
  Zap,
  Lock,
  Loader2,
  CheckCircle2,
  XCircle,
  Clock,
} from "lucide-react";
import { type GeoProject, type LifecycleStats } from "@/lib/api";
import { agentsApi, type AgentTask } from "@/lib/api/agents";
import { useSession } from "next-auth/react";
import { useApi } from "@/lib/hooks/use-api";
import {
  LoadingState,
  ErrorState,
  EmptyState,
} from "@/components/ui/api-states";
import { SubscriptionStatus } from "@/components/subscription/SubscriptionStatus";
import { UsageProgress } from "@/components/subscription/UsageProgress";
import { ROICard } from "@/components/dashboard/ROICard";

/* ─── Helpers ─────────────────────────────────────────────────────────────────*/

const STAGE_CONFIG = [
  { id: "diagnosis", label: "诊断分析" },
  { id: "strategy", label: "策略制定" },
  { id: "content", label: "内容生产" },
  { id: "publishing", label: "分发执行" },
  { id: "monitoring", label: "监测优化" },
];

function buildStages(currentStage: GeoProject["current_stage"]) {
  const currentIndex = STAGE_CONFIG.findIndex((s) => s.id === currentStage);
  return STAGE_CONFIG.map((stage, idx) => {
    let status: "completed" | "active" | "pending" | "error" = "pending";
    if (idx < currentIndex) status = "completed";
    else if (idx === currentIndex) status = "active";
    return { id: stage.id, label: stage.label, status };
  });
}

function getRecommendation(stage: GeoProject["current_stage"]) {
  const map: Record<
    GeoProject["current_stage"],
    { title: string; description: string; icon: React.ReactNode; href: string }
  > = {
    diagnosis: {
      title: "开始诊断分析",
      description: "诊断您品牌在AI搜索中的可见性现状",
      icon: <Search className="h-5 w-5" />,
      href: "/dashboard/diagnosis",
    },
    strategy: {
      title: "生成优化策略",
      description: "基于诊断结果制定GEO+SEO优化方案",
      icon: <Target className="h-5 w-5" />,
      href: "/dashboard/strategy",
    },
    content: {
      title: "创建新内容",
      description: "使用AI Agent批量生成优化内容",
      icon: <FileText className="h-5 w-5" />,
      href: "/dashboard/content",
    },
    publishing: {
      title: "配置分发渠道",
      description: "将内容分发到各大AI平台和搜索引擎",
      icon: <Send className="h-5 w-5" />,
      href: "/dashboard/publishing",
    },
    monitoring: {
      title: "查看监测报告",
      description: "分析内容分发后的引用和排名数据",
      icon: <BarChart3 className="h-5 w-5" />,
      href: "/dashboard/monitoring",
    },
  };
  return map[stage];
}

/* ─── Agent Activity Component ───────────────────────────────────────────────*/

const TASK_STATUS_CONFIG: Record<
  string,
  { label: string; icon: React.ReactNode; color: string }
> = {
  pending: {
    label: "等待中",
    icon: <Clock className="h-3 w-3" />,
    color: "bg-gray-100 text-gray-600",
  },
  running: {
    label: "运行中",
    icon: <Loader2 className="h-3 w-3 animate-spin" />,
    color: "bg-blue-100 text-blue-600",
  },
  completed: {
    label: "已完成",
    icon: <CheckCircle2 className="h-3 w-3" />,
    color: "bg-emerald-100 text-emerald-600",
  },
  failed: {
    label: "失败",
    icon: <XCircle className="h-3 w-3" />,
    color: "bg-red-100 text-red-600",
  },
  cancelled: {
    label: "已取消",
    icon: <Clock className="h-3 w-3" />,
    color: "bg-yellow-100 text-yellow-600",
  },
};

function formatDuration(startedAt?: string, completedAt?: string): string {
  if (!startedAt) return "-";
  const start = new Date(startedAt).getTime();
  const end = completedAt ? new Date(completedAt).getTime() : Date.now();
  const seconds = Math.round((end - start) / 1000);
  if (seconds < 60) return `${seconds}s`;
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = seconds % 60;
  return `${minutes}m ${remainingSeconds}s`;
}

function formatRelativeTime(dateStr: string): string {
  const now = Date.now();
  const then = new Date(dateStr).getTime();
  const diffMs = now - then;
  const diffMin = Math.floor(diffMs / 60000);
  if (diffMin < 1) return "刚刚";
  if (diffMin < 60) return `${diffMin}分钟前`;
  const diffHour = Math.floor(diffMin / 60);
  if (diffHour < 24) return `${diffHour}小时前`;
  const diffDay = Math.floor(diffHour / 24);
  return `${diffDay}天前`;
}

function AgentActivity() {
  const { data: session } = useSession();
  const token = (session as { accessToken?: string })?.accessToken;
  const [tasks, setTasks] = useState<AgentTask[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!token) return;
    agentsApi
      .listTasks(token, { limit: 5 })
      .then((result) => setTasks(result.items ?? []))
      .catch(() => setTasks([]))
      .finally(() => setLoading(false));
  }, [token]);

  return (
    <div className="bg-white rounded-xl border border-gray-200 p-6">
      <div className="flex items-center justify-between mb-4">
        <p className="text-sm font-medium text-gray-500">Agent活动</p>
        <Link
          href="/dashboard/agents"
          className="text-xs text-primary hover:underline"
        >
          查看全部
        </Link>
      </div>
      {loading ? (
        <div className="flex items-center justify-center py-8">
          <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
        </div>
      ) : tasks.length === 0 ? (
        <div className="flex flex-col items-center justify-center py-8 text-center">
          <Zap className="h-8 w-8 text-muted-foreground mb-3" />
          <p className="text-sm font-medium text-muted-foreground">
            暂无执行记录
          </p>
        </div>
      ) : (
        <div className="space-y-2">
          {tasks.map((task) => {
            const cfg = TASK_STATUS_CONFIG[task.status] ?? {
              label: task.status,
              icon: <Clock className="h-3 w-3" />,
              color: "bg-gray-100 text-gray-600",
            };
            return (
              <div
                key={task.id}
                className="flex items-center gap-3 rounded-lg border border-gray-100 bg-gray-50 px-3 py-2"
              >
                <span className="text-sm font-medium text-gray-700 truncate flex-1 min-w-0">
                  {task.task_type}
                </span>
                <Badge
                  variant="secondary"
                  className={`text-xs shrink-0 ${cfg.color}`}
                >
                  {cfg.icon}
                  <span className="ml-1">{cfg.label}</span>
                </Badge>
                <span className="text-xs text-gray-400 shrink-0">
                  {formatDuration(task.started_at, task.completed_at)}
                </span>
                <span className="text-xs text-gray-400 shrink-0">
                  {task.created_at ? formatRelativeTime(task.created_at) : ""}
                </span>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

/* ─── Component ───────────────────────────────────────────────────────────────*/

export default function DashboardPage() {
  const router = useRouter();

  const {
    data: projects,
    isLoading: projectsLoading,
    error: projectsError,
    refresh: refreshProjects,
  } = useApi<GeoProject[]>("/api/v1/lifecycle/projects/");

  const {
    data: stats,
    isLoading: statsLoading,
    error: statsError,
    refresh: refreshStats,
  } = useApi<LifecycleStats>("/api/v1/lifecycle/projects/stats");

  const loading = projectsLoading || statsLoading;

  // "用户未关联组织" 类错误视为空状态
  const isOrgError = (err: Error | undefined) =>
    err?.message.includes("未关联组织") ||
    err?.message.includes("No organization");

  const hasOrgError = isOrgError(projectsError) || isOrgError(statsError);
  const error =
    !hasOrgError && (projectsError || statsError)
      ? projectsError || statsError
      : undefined;

  const safeProjects: GeoProject[] = hasOrgError ? [] : (projects ?? []);
  const safeStats: LifecycleStats | null = hasOrgError ? null : (stats ?? null);

  const handleRetry = () => {
    refreshProjects();
    refreshStats();
  };

  /* ─── Loading State ────────────────────────────────────────────────────────*/
  if (loading) {
    return (
      <div className="space-y-6">
        <div className="mb-8">
          <LoadingState rows={1} rowHeight="h-8" />
          <div className="mt-2">
            <LoadingState rows={1} rowHeight="h-4" />
          </div>
        </div>
        <LoadingState rows={4} grid cols={4} rowHeight="h-24" />
        <LoadingState rows={1} rowHeight="h-28" />
        <LoadingState rows={2} grid cols={2} rowHeight="h-48" />
      </div>
    );
  }

  /* ─── Error State ──────────────────────────────────────────────────────────*/
  if (error) {
    return (
      <div className="space-y-6">
        <div className="mb-8">
          <h1 className="text-2xl font-bold text-gray-900">品牌健康中心</h1>
        </div>
        <ErrorState error={error} onRetry={handleRetry} />
      </div>
    );
  }

  /* ─── Empty State ──────────────────────────────────────────────────────────*/
  if (safeProjects.length === 0) {
    return (
      <div className="space-y-6">
        <div className="mb-8">
          <h1 className="text-2xl font-bold text-gray-900">品牌健康中心</h1>
          <p className="mt-1 text-sm text-gray-500">
            GEO和SEO是AI营销时代的共生体
          </p>
        </div>
        <EmptyState
          icon={<Sparkles className="h-6 w-6 text-gray-400" />}
          message="开始优化您的AI可见性"
          description="创建第一个项目，系统将自动引导您完成从诊断分析到监测优化的全生命周期管理。"
          action={
            <Link href="/dashboard/lifecycle/new">
              <Button>
                <Plus className="mr-2 h-4 w-4" />
                创建项目
              </Button>
            </Link>
          }
        />
      </div>
    );
  }

  /* ─── Active Dashboard ─────────────────────────────────────────────────────*/
  const project = safeProjects[0];
  const stages = buildStages(project.current_stage);
  const recommendation = getRecommendation(project.current_stage);

  const citationRate =
    safeStats?.avg_ai_citation_rate != null
      ? `${(safeStats.avg_ai_citation_rate * 100).toFixed(1)}%`
      : "—";

  const userPlan = "free";
  const planExpiresAt = undefined;
  const usageData = {
    queries: { current: 2, limit: 3 },
    brands: { current: 1, limit: 1 },
    alerts: { current: 0, limit: 0 },
  };
  const roiData = {
    roiPercentage: 0,
    valueGenerated: 0,
    subscriptionCost: 0,
  };
  const isFreePlan = userPlan === "free";

  return (
    <div className="space-y-6">
      {/* Subscription Status Bar */}
      <div className="flex items-center justify-between bg-white rounded-xl border border-gray-200 px-6 py-3">
        <SubscriptionStatus plan={userPlan} expiresAt={planExpiresAt} />
        <div className="flex items-center gap-6">
          <UsageProgress
            label="查询次数"
            current={usageData.queries.current}
            limit={usageData.queries.limit}
            className="w-40"
          />
          <UsageProgress
            label="品牌监控"
            current={usageData.brands.current}
            limit={usageData.brands.limit}
            className="w-40"
          />
          <UsageProgress
            label="告警"
            current={usageData.alerts.current}
            limit={usageData.alerts.limit}
            className="w-40"
          />
        </div>
      </div>

      {/* 1. Page Title */}
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between mb-8">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">品牌健康中心</h1>
          <p className="mt-1 text-sm text-gray-500">
            {project.brand_name} — {project.name}
          </p>
        </div>
        <Link href="/dashboard/lifecycle/new">
          <Button variant="outline" className="shrink-0">
            <Plus className="mr-2 h-4 w-4" />
            创建项目
          </Button>
        </Link>
      </div>

      {/* 2. KPI Cards */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <MetricCard
          label="活跃项目数"
          value={safeStats?.active_projects ?? 0}
          trend="neutral"
          trendLabel={`共 ${safeStats?.total_projects ?? 0} 个项目`}
          size="default"
        />
        <MetricCard
          label="内容产出统计"
          value={safeStats?.contents_produced ?? 0}
          trend="up"
          trendLabel="全部内容"
          size="default"
        />
        <MetricCard
          label="AI引用率"
          value={citationRate}
          trend={safeStats?.avg_ai_citation_rate ? "up" : "neutral"}
          trendLabel="平均引用率"
          size="default"
        />
        <MetricCard
          label="已完成项目"
          value={safeStats?.completed_projects ?? 0}
          trend="neutral"
          trendLabel={`活跃 ${safeStats?.active_projects ?? 0} 个`}
          size="default"
        />
      </div>

      {/* ROI Card + Feature Lock */}
      <div className="grid gap-4 lg:grid-cols-2">
        <ROICard
          roiPercentage={roiData.roiPercentage}
          valueGenerated={roiData.valueGenerated}
          subscriptionCost={roiData.subscriptionCost}
        />
        {isFreePlan && (
          <div className="bg-white rounded-xl border border-gray-200 p-6">
            <p className="text-sm font-medium text-gray-500 mb-4">
              解锁更多功能
            </p>
            <div className="space-y-3">
              {[
                { label: "多品牌监控", desc: "同时监控3个以上品牌" },
                { label: "无限告警", desc: "不限制告警通知数量" },
                { label: "竞品对比", desc: "完整的竞品雷达图分析" },
                { label: "AI优化建议", desc: "基于DeepSeek的个性化建议" },
              ].map((feature) => (
                <div
                  key={feature.label}
                  className="flex items-center gap-3 rounded-lg border border-gray-100 bg-gray-50 p-3 opacity-60"
                >
                  <Lock className="h-4 w-4 text-gray-400 shrink-0" />
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium text-gray-700">
                      {feature.label}
                    </p>
                    <p className="text-xs text-gray-400">{feature.desc}</p>
                  </div>
                </div>
              ))}
            </div>
            <Link href="/dashboard/subscription">
              <Button className="w-full mt-4" size="sm">
                升级解锁全部功能
                <ArrowRight className="ml-1 h-3.5 w-3.5" />
              </Button>
            </Link>
          </div>
        )}
      </div>

      {/* 3. Stage Progress */}
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <div className="flex items-center justify-between mb-4">
          <p className="text-sm font-medium text-gray-500">生命周期进度</p>
          <Badge variant="secondary" className="text-xs">
            当前阶段：
            {STAGE_CONFIG.find((s) => s.id === project.current_stage)?.label}
          </Badge>
        </div>
        <StageProgress
          stages={stages}
          onStageClick={(stage) => {
            router.push(`/dashboard/${stage.id}`);
          }}
        />
      </div>

      {/* 4. Two-column: Recommendation + Agent Activity */}
      <div className="grid gap-4 lg:grid-cols-2">
        {/* Recommendation */}
        <div className="bg-white rounded-xl border border-gray-200 p-6">
          <p className="text-sm font-medium text-gray-500 mb-4">推荐下一步</p>
          <div className="flex items-center gap-4 rounded-lg border border-gray-100 bg-gray-50 p-4">
            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
              {recommendation.icon}
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-sm font-semibold text-gray-900">
                {recommendation.title}
              </p>
              <p className="text-xs text-gray-500 mt-0.5">
                {recommendation.description}
              </p>
            </div>
            <Button
              size="sm"
              className="shrink-0"
              onClick={() => router.push(recommendation.href)}
            >
              执行
              <ArrowRight className="ml-1 h-3.5 w-3.5" />
            </Button>
          </div>
          <div className="mt-3 grid grid-cols-2 gap-3">
            <Button
              variant="outline"
              size="sm"
              className="justify-start"
              onClick={() => router.push("/dashboard/agents")}
            >
              <Zap className="mr-2 h-3.5 w-3.5" />
              管理Agent
            </Button>
            <Button
              variant="outline"
              size="sm"
              className="justify-start"
              onClick={() => router.push("/dashboard/lifecycle")}
            >
              <BarChart3 className="mr-2 h-3.5 w-3.5" />
              项目详情
            </Button>
          </div>
        </div>

        {/* Agent Activity */}
        <AgentActivity />
      </div>
    </div>
  );
}