import Link from "next/link";
import { formatInteger, formatPercent } from "@/lib/utils";

type Row = {
  approved_document_name: string;
  friendly_title: string;
  total_emails_sent: number;
  total_opened: number;
  total_clicked: number;
  total_thumbs_up: number;
  total_thumbs_down: number;
  open_rate: number;
  ctr: number;
  brand: string;
  country_scope: string;
  thumbnail_url: string | null;
};

function hasDistinctSecondaryTitle(friendlyTitle: string, approvedDocumentName: string) {
  return friendlyTitle.trim().toLowerCase() !== approvedDocumentName.trim().toLowerCase();
}

export function DocumentTable({ rows }: { rows: Row[] }) {
  if (rows.length === 0) {
    return (
      <div className="rounded-3xl border border-[#d8e4f3] bg-[linear-gradient(165deg,#ffffff_0%,#f5faff_100%)] p-5">
        <div className="rounded-2xl border border-dashed border-slate-300 bg-white/80 px-4 py-5 text-sm text-slate-500">
          No document-level metrics are available yet.
        </div>
      </div>
    );
  }

  return (
    <div className="min-w-0 overflow-hidden rounded-3xl border border-[#d8e4f3] bg-[linear-gradient(170deg,#ffffff_0%,#f5faff_72%,#fff9f3_100%)] shadow-[0_22px_35px_-30px_rgba(38,99,172,0.75)]">
      <div className="flex items-center justify-between gap-3 border-b border-[#dbe7f5] px-5 py-3">
        <div>
          <p className="text-sm font-semibold text-slate-900">Email cards</p>
          <p className="text-xs text-slate-500">Performance metrics and engagement data for each approved email in your current filter.</p>
        </div>
        <p className="caption rounded-full border border-[#2663AC]/15 bg-[#2663AC]/10 px-2.5 py-1 text-[10px] uppercase tracking-[0.18em] text-[#2663AC]">
          {rows.length} records
        </p>
      </div>

      <div className="max-h-[640px] overflow-auto px-4 pt-6 pb-4">
        <div className="grid gap-4 md:grid-cols-2 2xl:grid-cols-3">
          {rows.map((row, index) => (
            <article
              key={row.approved_document_name}
              className="rounded-[24px] border border-[#dbe7f5] bg-white/92 p-4 shadow-[0_18px_30px_-26px_rgba(38,99,172,0.45)]"
            >
              <div className="flex items-start justify-between gap-3">
                <div className="min-w-0">
                  <p className="caption text-[10px] uppercase tracking-[0.16em] text-slate-400">Email #{index + 1}</p>
                  <Link
                    href={`/emails/${encodeURIComponent(row.approved_document_name)}`}
                    className="mt-1 block whitespace-normal break-words text-base font-semibold leading-6 text-[#2663AC] hover:text-[#1f5697] hover:underline"
                  >
                    {row.friendly_title}
                  </Link>
                  {hasDistinctSecondaryTitle(row.friendly_title, row.approved_document_name) ? (
                    <p className="mt-2 rounded-xl border border-[#edf1f6] bg-[#f8fafc] px-2.5 py-1.5 font-mono text-[11px] leading-4 text-slate-500">
                      {row.approved_document_name}
                    </p>
                  ) : null}
                </div>
                {row.thumbnail_url ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img
                    src={row.thumbnail_url}
                    alt={row.friendly_title}
                    className="h-16 w-24 shrink-0 rounded-xl border border-[#d6e3f2] object-cover shadow-[0_8px_22px_-18px_rgba(38,99,172,0.8)]"
                  />
                ) : null}
              </div>

              <div className="mt-4 flex flex-wrap gap-2">
                <span className="inline-flex max-w-full break-words rounded-full border border-[#d7e3f1] bg-[#f7fbff] px-2.5 py-1 text-xs text-[#2663AC]">
                  {row.brand || "Unspecified"}
                </span>
                <span className="inline-flex max-w-full break-words rounded-full border border-[#ece6dc] bg-[#fff8ef] px-2.5 py-1 text-xs text-[#b87432]">
                  {row.country_scope || "N/A"}
                </span>
              </div>

              <div className="mt-4 grid grid-cols-2 gap-2">
                <div className="rounded-xl border border-[#e2ebf7] bg-[#f8fbff] px-3 py-2">
                  <p className="caption text-[9px] uppercase tracking-[0.12em] text-slate-500">Sent</p>
                  <p className="mt-1 text-sm font-semibold text-slate-900">{formatInteger(row.total_emails_sent)}</p>
                </div>
                <div className="rounded-xl border border-[#e2ebf7] bg-[#f8fbff] px-3 py-2">
                  <p className="caption text-[9px] uppercase tracking-[0.12em] text-slate-500">Opened</p>
                  <p className="mt-1 text-sm font-semibold text-slate-900">{formatInteger(row.total_opened)}</p>
                </div>
                <div className="rounded-xl border border-[#e2ebf7] bg-[#f8fbff] px-3 py-2">
                  <p className="caption text-[9px] uppercase tracking-[0.12em] text-slate-500">Clicked</p>
                  <p className="mt-1 text-sm font-semibold text-slate-900">{formatInteger(row.total_clicked)}</p>
                </div>
                <div className="rounded-xl border border-[#e2ebf7] bg-[#f8fbff] px-3 py-2">
                  <p className="caption text-[9px] uppercase tracking-[0.12em] text-slate-500">Open / CTR</p>
                  <p className="mt-1 text-sm font-semibold text-slate-900">
                    <span className="text-[#2663AC]">{formatPercent(row.open_rate)}</span>
                    <span className="mx-1 text-slate-300">/</span>
                    <span className="text-[#c36e1e]">{formatPercent(row.ctr)}</span>
                  </p>
                </div>
                <div className="rounded-xl border border-[#e2ebf7] bg-[#f8fbff] px-3 py-2">
                  <p className="caption text-[9px] uppercase tracking-[0.12em] text-slate-500">Positive</p>
                  <p className="mt-1 text-sm font-semibold text-[#6E9FD3]">{formatInteger(row.total_thumbs_up)}</p>
                </div>
                <div className="rounded-xl border border-[#e2ebf7] bg-[#f8fbff] px-3 py-2">
                  <p className="caption text-[9px] uppercase tracking-[0.12em] text-slate-500">Negative</p>
                  <p className="mt-1 text-sm font-semibold text-[#d28c57]">{formatInteger(row.total_thumbs_down)}</p>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </div>
  );
}