"use client";

import Link from "next/link";
import { cn } from "@/lib/utils";
import type { BdrMetricsKpiLeadRow } from "@/api/rtk/bdr-metrics-api";

const PREVIEW_LIMIT = 6;

function getStageBadgeClass(stage: string): string {
  const s = (stage || "").toLowerCase();
  if (s.includes("sql") || s.includes("qualify") || s.includes("qualified")) {
    return "bg-purple-50 text-purple-700 border-purple-100/80";
  }
  if (s.includes("meet") || s.includes("book") || s.includes("sched")) {
    return "bg-emerald-50 text-emerald-700 border-emerald-100/80";
  }
  return "bg-gray-50 text-gray-600 border-gray-100/80";
}

export type BdrMetricsKpiLeadsPreviewProps = {
  title: string;
  leads: BdrMetricsKpiLeadRow[];
  emptyMessage: string;
  highlight?: (lead: BdrMetricsKpiLeadRow) => boolean;
  className?: string;
};

export function BdrMetricsKpiLeadsPreview({
  title,
  leads,
  emptyMessage,
  highlight,
  className,
}: BdrMetricsKpiLeadsPreviewProps) {
  const preview = leads.slice(0, PREVIEW_LIMIT);
  const remaining = leads.length - preview.length;

  return (
    <div className={cn("mt-3 border-t border-black/[0.06] pt-3", className)}>
      <p className="font-['Lexend_Deca'] text-[10px] font-bold uppercase tracking-[0.12em] text-gray-400">
        {title}
      </p>
      {leads.length === 0 ? (
        <p className="mt-2 font-['Lexend_Deca'] text-[11px] leading-relaxed text-gray-500">
          {emptyMessage}
        </p>
      ) : (
        <ul className="mt-2 space-y-1.5" aria-label={title}>
          {preview.map((lead) => {
            const isHighlight = highlight?.(lead) ?? false;
            return (
              <li
                key={lead.id}
                className={cn(
                  "flex items-center justify-between gap-2 rounded-lg px-2 py-1.5 transition-colors",
                  isHighlight
                    ? "bg-indigo-50/80 ring-1 ring-indigo-100/80"
                    : "hover:bg-white/60",
                )}
              >
                <Link
                  href={`/leads/${lead.id}`}
                  className="min-w-0 flex-1 truncate font-['Lexend_Deca'] text-[11px] font-semibold text-indigo-600 hover:underline"
                  title={lead.customerName ?? "Unnamed lead"}
                >
                  {lead.customerName ?? "Unnamed lead"}
                </Link>
                <span
                  className={cn(
                    "max-w-[48%] shrink-0 truncate rounded-md border px-1.5 py-0.5 font-['Lexend_Deca'] text-[10px] font-bold",
                    getStageBadgeClass(lead.stageLabel),
                  )}
                  title={lead.stageLabel}
                >
                  {lead.stageLabel}
                </span>
              </li>
            );
          })}
        </ul>
      )}
      {remaining > 0 && (
        <p className="mt-1.5 font-['Lexend_Deca'] text-[10px] font-semibold text-gray-400">
          +{remaining} more in drill-down →
        </p>
      )}
    </div>
  );
}