"use client";

import Link from "next/link";
import { useQuery } from "@tanstack/react-query";
import { FileText, ArrowRight } from "lucide-react";
import { paperApi } from "@/lib/api/client";
import { useTranslation } from "@/lib/hooks/use-translation";
import { cn } from "@/lib/utils/cn";
import type { Paper, PageResponse } from "@/types";

const statusColors: Record<string, string> = {
  PUBLISHED: "bg-green-100 text-green-700",
  ACCEPTED: "bg-blue-100 text-blue-700",
  UNDER_REVIEW: "bg-amber-100 text-amber-700",
};

export function LatestPapers() {
  const { t, language } = useTranslation("LANDING");

  const { data, isLoading } = useQuery<Paper[]>({
    queryKey: ["published-papers"],
    queryFn: async () => {
      const res = await paperApi.published({ page: 0, size: 6 });
      const payload = res.data;
      return (payload as PageResponse<Paper>).content ?? (payload as Paper[]);
    },
    staleTime: 5 * 60 * 1000,
  });

  const papers = data ?? [];

  return (
    <section className="bg-gray-50 py-16">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between">
          <h2 className="text-2xl font-bold text-gray-900">
            {t("latest_papers.heading", "Latest Published Papers")}
          </h2>
          <Link
            href="/journals"
            className="flex items-center gap-1 text-sm font-medium text-indigo-600 hover:text-indigo-700 transition-colors"
          >
            {t("latest_papers.view_all", "View All")}
            <ArrowRight className="h-4 w-4" />
          </Link>
        </div>

        {isLoading ? (
          <div className="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {Array.from({ length: 6 }).map((_, i) => (
              <div
                key={i}
                className="animate-pulse rounded-lg border border-gray-200 bg-white p-5"
              >
                <div className="h-4 w-3/4 rounded bg-gray-200" />
                <div className="mt-2 h-3 w-1/2 rounded bg-gray-200" />
                <div className="mt-4 h-3 w-1/3 rounded bg-gray-200" />
              </div>
            ))}
          </div>
        ) : papers.length === 0 ? (
          <div className="mt-12 flex flex-col items-center gap-3 text-center">
            <FileText className="h-12 w-12 text-gray-300" />
            <p className="text-gray-500">
              {t("latest_papers.no_papers", "No papers published yet")}
            </p>
          </div>
        ) : (
          <div className="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {papers.map((paper) => (
              <Link
                key={paper.id}
                href="/journals"
                className="group rounded-lg border border-gray-200 bg-white p-5 shadow-sm transition-shadow hover:shadow-md"
              >
                <div className="flex items-start justify-between gap-2">
                  <h3 className="text-base font-semibold text-gray-900 group-hover:text-indigo-600 transition-colors line-clamp-2">
                    {language === "hi" ? paper.titleHi : paper.titleEn}
                  </h3>
                  <span
                    className={cn(
                      "shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase",
                      statusColors[paper.status] ?? "bg-gray-100 text-gray-600"
                    )}
                  >
                    {paper.status}
                  </span>
                </div>

                <p className="mt-1 text-sm text-gray-500 line-clamp-1">
                  {language === "hi" ? paper.titleEn : paper.titleHi}
                </p>

                {(paper.categoryNameHi || paper.categoryNameEn) && (
                  <div className="mt-3 flex items-center gap-1.5">
                    <span className="rounded bg-indigo-50 px-2 py-0.5 text-xs font-medium text-indigo-600">
                      {language === "hi"
                        ? paper.categoryNameHi
                        : paper.categoryNameEn}
                    </span>
                  </div>
                )}

                {paper.publishedAt && (
                  <p className="mt-3 text-xs text-gray-400">
                    {t("latest_papers.published_label", "Published:")}{" "}
                    {new Date(paper.publishedAt).toLocaleDateString(
                      language === "hi" ? "hi-IN" : "en-IN"
                    )}
                  </p>
                )}
              </Link>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}