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

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="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-end border-b border-[#dbe7f5] px-5 py-3">
        <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-[560px] overflow-auto">
        <table className="w-full text-left">
          <thead className="sticky top-0 z-10 bg-[linear-gradient(120deg,#eef5ff_0%,#f6faff_70%,#fff7ed_100%)] text-[11px] uppercase tracking-[0.16em] text-slate-500">
            <tr>
              <th className="px-4 py-3">Item</th>
              <th className="px-4 py-3">Country Scope</th>
              <th className="px-4 py-3">Brand</th>
              <th className="px-4 py-3">Sent</th>
              <th className="px-4 py-3">Opened</th>
              <th className="px-4 py-3">Clicked</th>
              <th className="px-4 py-3">Thumbs Up</th>
              <th className="px-4 py-3">Thumbs Down</th>
              <th className="px-4 py-3">Open Rate</th>
              <th className="px-4 py-3">CTR</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((row, index) => (
              <tr
                key={row.approved_document_name}
                className="border-t border-[#e2ebf7] text-sm transition duration-200 hover:bg-[#f3f9ff]"
              >
                <td className="px-4 py-3 align-top">
                  <div className="flex items-start gap-3">
                    {row.thumbnail_url ? (
                      // eslint-disable-next-line @next/next/no-img-element
                      <img
                        src={row.thumbnail_url}
                        alt={row.friendly_title}
                        className="h-12 w-20 rounded-lg border border-[#d6e3f2] object-cover shadow-[0_8px_22px_-18px_rgba(38,99,172,0.8)]"
                      />
                    ) : (
                      <div className="flex h-12 w-20 items-center justify-center rounded-lg border border-[#d6e3f2] bg-[linear-gradient(130deg,#f5f9ff_0%,#eef4fd_100%)]">
                        <span className="caption text-[10px] uppercase tracking-[0.16em] text-[#2663AC]">No Img</span>
                      </div>
                    )}
                    <div className="space-y-1">
                      <p className="font-medium text-slate-800">
                        <Link
                          href={`/emails/${encodeURIComponent(row.approved_document_name)}`}
                          className="text-[#2663AC] hover:text-[#1f5697] hover:underline"
                        >
                          {row.friendly_title}
                        </Link>
                      </p>
                      <p className="text-xs text-slate-500">{row.approved_document_name}</p>
                      <p className="caption text-[10px] uppercase tracking-[0.13em] text-slate-400">
                        Row {index + 1}
                      </p>
                    </div>
                  </div>
                </td>
                <td className="px-4 py-3 text-xs text-slate-600">{row.country_scope || "N/A"}</td>
                <td className="px-4 py-3 text-slate-600">
                  <span className="inline-flex rounded-full border border-[#d7e3f1] bg-[#f7fbff] px-2 py-0.5 text-xs">
                    {row.brand || "Unspecified"}
                  </span>
                </td>
                <td className="px-4 py-3 text-slate-800">{formatInteger(row.total_emails_sent)}</td>
                <td className="px-4 py-3 text-slate-800">{formatInteger(row.total_opened)}</td>
                <td className="px-4 py-3 text-slate-800">{formatInteger(row.total_clicked)}</td>
                <td className="px-4 py-3 text-emerald-700">{formatInteger(row.total_thumbs_up)}</td>
                <td className="px-4 py-3 text-rose-700">{formatInteger(row.total_thumbs_down)}</td>
                <td className="px-4 py-3">
                  <span className="inline-flex rounded-full bg-[#e9f2ff] px-2 py-0.5 text-[#2663AC]">
                    {formatPercent(row.open_rate)}
                  </span>
                </td>
                <td className="px-4 py-3">
                  <span className="inline-flex rounded-full bg-[#fff4e8] px-2 py-0.5 text-[#c36e1e]">
                    {formatPercent(row.ctr)}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
