"use client";

import { Download, FileText } from "lucide-react";
import { useTranslation } from "@/lib/hooks/use-translation";

export interface ArticleCardData {
  titleHi?: string | null;
  titleEn?: string | null;
  authorsHi?: string | null;
  authorsEn?: string | null;
  abstractHi?: string | null;
  abstractEn?: string | null;
  pageRange?: string | null;
  pdfSizeBytes?: number | null;
  volume?: number | null;
  issueLabel?: string | null;
  downloadCount?: number;
}

function formatSize(bytes?: number | null) {
  if (!bytes || bytes <= 0) return null;
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
}

/**
 * Bilingual archive/article card: badges, title in the active language
 * (falling back to the other), authors, expandable abstract, download action.
 */
export function ArticleCard({
  article,
  onDownload,
}: {
  article: ArticleCardData;
  onDownload?: () => void;
}) {
  const { language } = useTranslation("JOURNALS");
  const hi = language === "hi";

  const title = (hi ? article.titleHi : article.titleEn) || article.titleEn || article.titleHi;
  const authors = (hi ? article.authorsHi : article.authorsEn) || article.authorsEn || article.authorsHi;
  const abstract = (hi ? article.abstractHi : article.abstractEn) || article.abstractEn || article.abstractHi;
  const size = formatSize(article.pdfSizeBytes);

  return (
    <article className="rounded-lg border border-gray-200 bg-white p-5 shadow-sm transition-shadow hover:shadow-md">
      <div className="mb-3 flex flex-wrap items-center gap-2">
        {article.volume != null && (
          <span className="rounded-full bg-indigo-800 px-2.5 py-0.5 text-[11px] font-semibold text-white">
            {hi ? "खंड" : "Vol."} {article.volume}
            {article.issueLabel ? `, ${hi ? "अंक" : "Issue"} ${article.issueLabel}` : ""}
          </span>
        )}
        {article.pageRange && (
          <span className="rounded-full bg-gray-100 px-2.5 py-0.5 text-[11px] font-medium text-gray-600">
            {hi ? "पृष्ठ" : "pp."} {article.pageRange}
          </span>
        )}
        {size && (
          <span className="rounded-full bg-gray-100 px-2.5 py-0.5 text-[11px] font-medium text-gray-600">
            {size}
          </span>
        )}
      </div>

      <h3 className="mb-1 text-base font-semibold leading-snug text-gray-900">
        {title}
      </h3>
      {authors && (
        <p className="mb-2 flex items-center gap-1.5 text-sm text-gray-600">
          <FileText className="h-3.5 w-3.5 shrink-0 text-gray-400" />
          {authors}
        </p>
      )}

      {abstract && (
        <details className="mb-3">
          <summary className="cursor-pointer text-xs font-semibold text-indigo-600 hover:text-indigo-700">
            {hi ? "सारांश देखें" : "View abstract"}
          </summary>
          <p className="mt-2 text-sm leading-relaxed text-gray-600">{abstract}</p>
        </details>
      )}

      {onDownload && (
        <button
          onClick={onDownload}
          className="inline-flex items-center gap-1.5 rounded-md bg-indigo-600 px-3.5 py-2 text-xs font-semibold text-white transition-colors hover:bg-indigo-700"
        >
          <Download className="h-3.5 w-3.5" />
          {hi ? "PDF डाउनलोड करें" : "Download PDF"}
          {typeof article.downloadCount === "number" && article.downloadCount > 0 && (
            <span className="ml-1 rounded-full bg-white/20 px-1.5 text-[10px]">
              {article.downloadCount}
            </span>
          )}
        </button>
      )}
    </article>
  );
}