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;
};

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

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

export function RankedDocuments({ title, rows, emptyMessage, tone }: Props) {
  const accent = tone === "top" ? "#2663AC" : "#F7993A";
  const chipLabel = tone === "top" ? "Top" : "Low";

  return (
    <Card className="overflow-hidden bg-[linear-gradient(160deg,#ffffff_0%,#f6fbff_76%,#fff9f2_100%)] p-4">
      <div className="flex items-center justify-between gap-3">
        <h3 className="text-sm font-semibold text-slate-900">{title}</h3>
        <span
          className="caption rounded-full px-2.5 py-1 text-[10px] uppercase tracking-[0.16em]"
          style={{
            border: `1px solid ${accent}33`,
            backgroundColor: `${accent}14`,
            color: accent,
          }}
        >
          {chipLabel}
        </span>
      </div>

      {rows.length === 0 ? (
        <div className="mt-4 rounded-2xl border border-dashed border-slate-300 bg-white/80 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-[302px] rounded-2xl border border-[#dbe7f5] bg-white shadow-[0_18px_30px_-26px_rgba(38,99,172,0.65)] transition duration-300 hover:-translate-y-0.5 hover:border-[#bfd4ea]"
                >
                  <div className="relative h-[108px] overflow-hidden rounded-t-2xl border-b border-[#e3ebf7] bg-[linear-gradient(140deg,#edf5ff_0%,#f6fbff_58%,#fff4e6_100%)]">
                    {thumbnailUrl ? (
                      // eslint-disable-next-line @next/next/no-img-element
                      <img
                        src={thumbnailUrl}
                        alt={row.friendly_title}
                        className="h-full w-full object-cover"
                      />
                    ) : (
                      <div className="flex h-full w-full items-center justify-center text-xs font-semibold uppercase tracking-[0.14em] text-slate-500">
                        No Thumbnail
                      </div>
                    )}
                    <span
                      className="absolute right-2 top-2 rounded-lg px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.12em]"
                      style={{
                        border: `1px solid ${accent}55`,
                        backgroundColor: "rgba(255,255,255,0.9)",
                        color: accent,
                      }}
                    >
                      #{index + 1}
                    </span>
                  </div>

                  <div className="space-y-2 p-3">
                    <div>
                      <Link
                        href={`/emails/${encodeURIComponent(row.approved_document_name)}`}
                        className="text-sm font-semibold leading-snug text-[#2663AC] hover:text-[#1f5697] hover:underline"
                      >
                        {row.friendly_title}
                      </Link>
                      <p className="mt-1 truncate text-xs text-slate-500">{row.approved_document_name}</p>
                    </div>

                    <div className="flex flex-wrap gap-1.5">
                      <span className="rounded-full bg-[#edf4ff] px-2 py-0.5 text-[11px] font-medium text-[#2663AC]">
                        {row.brand || "Unspecified"}
                      </span>
                      <span className="rounded-full bg-[#f5f7fb] px-2 py-0.5 text-[11px] font-medium text-slate-600">
                        {row.country_scope || "N/A"}
                      </span>
                    </div>

                    <div className="grid grid-cols-3 gap-1.5">
                      <div className="rounded-lg border border-[#e2ebf7] bg-[#f8fbff] px-2 py-1.5">
                        <p className="caption text-[9px] uppercase tracking-[0.12em] text-slate-500">Sent</p>
                        <p className="mt-0.5 text-xs font-semibold text-slate-800">
                          {formatInteger(toNumber(row.total_emails_sent))}
                        </p>
                      </div>
                      <div className="rounded-lg border border-[#e2ebf7] bg-[#f8fbff] px-2 py-1.5">
                        <p className="caption text-[9px] uppercase tracking-[0.12em] text-slate-500">Open</p>
                        <p className="mt-0.5 text-xs font-semibold text-[#2663AC]">
                          {formatPercent(toNumber(row.open_rate))}
                        </p>
                      </div>
                      <div className="rounded-lg border border-[#e2ebf7] bg-[#f8fbff] px-2 py-1.5">
                        <p className="caption text-[9px] uppercase tracking-[0.12em] text-slate-500">CTR</p>
                        <p className="mt-0.5 text-xs font-semibold text-[#F7993A]">
                          {formatPercent(toNumber(row.ctr))}
                        </p>
                      </div>
                    </div>
                  </div>
                </article>
              );
            })}
          </div>
        </div>
      )}
    </Card>
  );
}
