import Link from "next/link";
import { Card } from "@/components/ui/card";
import { getPublicThumbnailUrl } from "@/lib/storage";
import { formatInteger, formatPercent } from "@/lib/utils";

type RankedRow = {
  approved_document_name: string;
  friendly_title: string;
  total_emails_sent: number | string;
  open_rate: number | string;
  ctr: number | string;
  brand: string;
  country_scope: string;
  thumbnail_path: string | null;
  campaign_group?: string | null;
};

type Props = {
  title: string;
  rows: RankedRow[];
  emptyMessage: string;
  tone: "top" | "low";
};

function toNumber(value: number | string) {
  return Number(value ?? 0);
}

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

export function RankedDocuments({ title, rows, emptyMessage, tone }: Props) {
  const isTop = tone === "top";
  const cardBg = isTop
    ? "bg-[linear-gradient(160deg,#ffffff_0%,#f0f7ff_100%)]"
    : "bg-[linear-gradient(160deg,#ffffff_0%,#fffaf5_100%)]";
  const headerBg = isTop
    ? "bg-[linear-gradient(160deg,#f0f7ff_0%,#e6f1fd_100%)] border-[#d4e6f8]"
    : "bg-[linear-gradient(160deg,#fff8f0_0%,#fff1e2_100%)] border-[#f3d9b8]";
  const rankColor = isTop ? "#2663AC" : "#c47727";
  const rankBorder = isTop ? "#bfd4ea" : "#f3cfa0";
  const chipLabel = isTop ? "Highest" : "Lowest";
  const chipClass = isTop
    ? "border-[#bfd4ea] bg-[#edf4ff] text-[#2663AC]"
    : "border-[#f3cfa0] bg-[#fff5e6] text-[#c47727]";
  const titleClass = isTop ? "text-[#1e5090]" : "text-[#a35e1c]";

  return (
    <div className={`overflow-hidden rounded-[26px] border border-[#d8e4f3]/90 p-4 ${cardBg}`}>
      <div className="flex items-start justify-between gap-3">
        <h3 className={`min-w-0 break-words text-sm font-semibold ${titleClass}`}>{title}</h3>
        <span className={`caption rounded-full border px-2.5 py-1 text-[10px] uppercase tracking-[0.16em] ${chipClass}`}>
          {chipLabel}
        </span>
      </div>

      {rows.length === 0 ? (
        <div className="mt-4 rounded-2xl border border-dashed border-slate-200 bg-white/70 px-4 py-5 text-sm text-slate-500">
          {emptyMessage}
        </div>
      ) : (
        <div className="mt-4 overflow-x-auto pb-2">
          <div className="flex min-w-max gap-3">
            {rows.map((row, index) => {
              const thumbnailUrl = getPublicThumbnailUrl(row.thumbnail_path);
              return (
                <article
                  key={row.approved_document_name}
                  className={`w-[300px] sm:w-[316px] rounded-[20px] border bg-white shadow-[0_14px_28px_-22px_rgba(38,99,172,0.45)] transition duration-300 hover:-translate-y-0.5 ${isTop ? "border-[#d4e6f8] hover:border-[#b8d4f0]" : "border-[#f3d9b8] hover:border-[#e8c090]"}`}
                >
                  {thumbnailUrl ? (
                    <div className={`relative overflow-hidden rounded-t-[20px] border-b ${headerBg} px-4 py-3`}>
                      {/* eslint-disable-next-line @next/next/no-img-element */}
                      <img
                        src={thumbnailUrl}
                        alt=""
                        className="h-24 w-full rounded-xl border border-white/60 object-cover"
                      />
                      <span
                        className="absolute right-2 top-2 rounded-lg border px-2 py-1 text-[10px] font-bold"
                        style={{ borderColor: `${rankBorder}`, backgroundColor: "rgba(255,255,255,0.92)", color: rankColor }}
                      >
                        #{index + 1}
                      </span>
                    </div>
                  ) : (
                    <div className={`relative flex items-center gap-3 rounded-t-[20px] border-b px-4 py-3 ${headerBg}`}>
                      <span
                        className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border text-sm font-black"
                        style={{ borderColor: rankBorder, backgroundColor: "rgba(255,255,255,0.85)", color: rankColor }}
                      >
                        {index + 1}
                      </span>
                      <p className="min-w-0 break-words text-sm font-semibold leading-snug text-slate-800">
                        {row.friendly_title}
                      </p>
                    </div>
                  )}

                  <div className="space-y-3 p-4">
                    <div className="min-w-0">
                      <Link
                        href={`/emails/${encodeURIComponent(row.approved_document_name)}`}
                        className="block whitespace-normal break-words text-sm font-semibold leading-snug 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>

                    <div className="flex flex-wrap gap-1.5">
                      <span className="max-w-full break-words rounded-full bg-[#edf4ff] px-2 py-0.5 text-[11px] font-medium text-[#2663AC]">
                        {row.brand || "Unspecified"}
                      </span>
                      {row.campaign_group ? (
                        <span className="max-w-full break-words rounded-full bg-[#fff5ea] px-2 py-0.5 text-[11px] font-medium text-[#c47727]">
                          {row.campaign_group}
                        </span>
                      ) : null}
                      <span className="max-w-full break-words rounded-full bg-[#f5f7fb] px-2 py-0.5 text-[11px] font-medium text-slate-500">
                        {row.country_scope || "N/A"}
                      </span>
                    </div>

                    <div className="grid grid-cols-3 gap-2">
                      <div className="rounded-xl border border-[#e8eef6] bg-[#f8fbff] px-2.5 py-2">
                        <p className="caption text-[9px] uppercase tracking-[0.12em] text-slate-400">Sent</p>
                        <p className="mt-0.5 text-xs font-semibold text-slate-700">
                          {formatInteger(toNumber(row.total_emails_sent))}
                        </p>
                      </div>
                      <div className="rounded-xl border border-[#e8eef6] bg-[#f8fbff] px-2.5 py-2">
                        <p className="caption text-[9px] uppercase tracking-[0.12em] text-slate-400">Open Rate</p>
                        <p className="mt-0.5 text-xs font-semibold text-[#2663AC]">
                          {formatPercent(toNumber(row.open_rate))}
                        </p>
                      </div>
                      <div className="rounded-xl border border-[#e8eef6] bg-[#f8fbff] px-2.5 py-2">
                        <p className="caption text-[9px] uppercase tracking-[0.12em] text-slate-400">CTR</p>
                        <p className="mt-0.5 text-xs font-semibold text-[#c47727]">
                          {formatPercent(toNumber(row.ctr))}
                        </p>
                      </div>
                    </div>
                  </div>
                </article>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
}