"use client";

import Link from "next/link";
import { useQuery } from "@tanstack/react-query";
import {
  FileText,
  Clock,
  Search,
  CheckCircle2,
  Users,
  PenTool,
  UserCheck,
  FolderOpen,
  AlertCircle,
  Wallet,
} from "lucide-react";
import { cn } from "@/lib/utils/cn";
import { useTranslation } from "@/lib/hooks/use-translation";
import { adminApi } from "@/lib/api/client";
import type { DashboardStats } from "@/types";

export default function AdminDashboard() {
  const { t: cms } = useTranslation(["ADMIN", "COMMON"]);

  /**
   * Payments waiting on a decision. Surfaced on the landing page, not only in
   * the payments screen, because an author who has paid and heard nothing
   * cannot tell "being checked" from "ignored" — and the editor may never think
   * to open a page that has nothing on it most days.
   */
  const payments = useQuery({
    queryKey: ["admin", "payments", "summary"],
    queryFn: async () =>
      (await adminApi.paymentSummary()).data as {
        awaitingCount: number;
        staleCount: number;
        staleAfterDays: number;
      },
    refetchInterval: 60_000,
  });

  const { data: stats, isLoading, error } = useQuery<DashboardStats>({
    queryKey: ["admin-dashboard-stats"],
    queryFn: async () => {
      const res = await adminApi.dashboardStats();
      return res.data;
    },
  });

  if (isLoading) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <p className="text-gray-500 text-lg">{cms("COMMON.labels.loading", "Loading...")}</p>
      </div>
    );
  }

  if (error || !stats) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <div className="text-center">
          <AlertCircle className="mx-auto h-10 w-10 text-red-400 mb-2" />
          <p className="text-red-600">{cms("COMMON.labels.error_loading", "Error loading data")}</p>
        </div>
      </div>
    );
  }

  const cards: {
    label: string;
    value: number;
    icon: typeof FileText;
    color: string;
    bgColor: string;
  }[] = [
    {
      label: cms("ADMIN.admin_stats.total_papers", "Total Papers"),
      value: stats.totalPapers,
      icon: FileText,
      color: "text-indigo-600",
      bgColor: "bg-indigo-50",
    },
    {
      label: cms("ADMIN.admin_stats.pending_papers", "Pending Papers"),
      value: stats.pendingPapers,
      icon: Clock,
      color: "text-amber-600",
      bgColor: "bg-amber-50",
    },
    {
      label: cms("ADMIN.admin_stats.under_review", "Under Review"),
      value: stats.underReviewPapers,
      icon: Search,
      color: "text-indigo-600",
      bgColor: "bg-indigo-50",
    },
    {
      label: cms("ADMIN.admin_stats.published", "Published"),
      value: stats.publishedPapers,
      icon: CheckCircle2,
      color: "text-green-600",
      bgColor: "bg-green-50",
    },
    {
      label: cms("ADMIN.admin_stats.total_users", "Total Users"),
      value: stats.totalUsers,
      icon: Users,
      color: "text-indigo-600",
      bgColor: "bg-indigo-50",
    },
    {
      label: cms("ADMIN.admin_stats.authors", "Authors"),
      value: stats.totalAuthors,
      icon: PenTool,
      color: "text-indigo-600",
      bgColor: "bg-indigo-50",
    },
    {
      label: cms("ADMIN.admin_stats.reviewers", "Reviewers"),
      value: stats.totalReviewers,
      icon: UserCheck,
      color: "text-indigo-600",
      bgColor: "bg-indigo-50",
    },
    {
      label: cms("ADMIN.admin_stats.active_categories", "Active Categories"),
      value: stats.activeCategories,
      icon: FolderOpen,
      color: "text-amber-600",
      bgColor: "bg-amber-50",
    },
  ];

  return (
    <div className="max-w-7xl mx-auto px-4 py-8">
      <div className="mb-8">
        <h1 className="text-2xl font-bold text-gray-900">
          {cms("ADMIN.admin_header.title", "Admin Dashboard")}
        </h1>
        <p className="text-gray-500 text-sm mt-1">{cms("ADMIN.admin_header.subtitle", "Platform overview")}</p>
      </div>

      {(payments.data?.awaitingCount ?? 0) > 0 && (
        <Link
          href="/admin/payments"
          className="mb-6 flex items-center justify-between gap-4 rounded-lg border border-amber-300 bg-amber-50 p-4 transition hover:bg-amber-100"
        >
          <div className="flex items-start gap-3">
            <Wallet className="mt-0.5 h-5 w-5 shrink-0 text-amber-700" />
            <div className="text-sm">
              <div className="font-semibold text-amber-900">
                {payments.data!.awaitingCount} भुगतान आपकी पुष्टि की प्रतीक्षा में
                {" / "}
                {payments.data!.awaitingCount} payment
                {payments.data!.awaitingCount === 1 ? "" : "s"} awaiting your confirmation
              </div>
              <div className="mt-0.5 text-amber-800">
                लेखकों ने भुगतान की सूचना दी है। बैंक विवरण से मिलान करने तक ये शोधपत्र
                समीक्षा में नहीं जाएँगे।
                <br />
                <span className="text-amber-700">
                  Authors have declared payments. Their papers do not enter review until
                  you match these against the bank statement.
                </span>
              </div>
              {(payments.data!.staleCount ?? 0) > 0 && (
                <div className="mt-1 font-medium text-red-700">
                  इनमें से {payments.data!.staleCount} {payments.data!.staleAfterDays} दिन से
                  अधिक प्रतीक्षा में हैं / {payments.data!.staleCount} of these have been
                  waiting more than {payments.data!.staleAfterDays} days
                </div>
              )}
            </div>
          </div>
          <span className="shrink-0 rounded-md bg-amber-600 px-3 py-2 text-sm font-semibold text-white">
            देखें / Review
          </span>
        </Link>
      )}

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {cards.map((card) => (
          <div
            key={card.label}
            className="rounded-lg border border-gray-200 bg-white p-5 shadow-sm hover:shadow-md transition"
          >
            <div className="flex items-center gap-3">
              <div className={cn("rounded-lg p-2.5", card.bgColor, card.color)}>
                <card.icon className="h-5 w-5" />
              </div>
              <div>
                <p className="text-sm text-gray-500">{card.label}</p>
                <p className="text-2xl font-bold text-gray-900">{card.value}</p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}