"use client";

import {
  AlertTriangle,
  CheckCircle2,
  Clock,
  TrendingUp,
  UserCheck,
} from "lucide-react";

import type { QaVerificationStats } from "@/api/rtk/deals-api";
import { KPICard } from "@/components/ui/kpi-card";
import { Skeleton } from "@/components/ui/skeleton";

const kpiCardClass =
  "bg-white/50 dark:bg-white/10 backdrop-blur-[15px] border border-white/40 shadow-[0px_2px_20px_0px_rgba(0,0,0,0.06)] py-4";

const EMPTY_STATS: QaVerificationStats = {
  pendingCount: 0,
  verifiedTodayCount: 0,
  verifiedTodayShowupCount: 0,
  verifiedTodayNoShowCount: 0,
  verifiedByYouTodayCount: 0,
  showUpRateTodayPct: null,
  oldestPendingDays: null,
};

function formatShowUpRate(pct: number | null): string {
  if (pct == null) return "—";
  return `${pct}%`;
}

function formatOldestDays(days: number | null): string {
  if (days == null) return "—";
  if (days === 0) return "Today";
  if (days === 1) return "1 day";
  return `${days} days`;
}

export function QaVerifyKpiStrip({
  stats,
  filteredTotal,
  isLoading,
  isUpdating,
  hasSearch,
}: {
  stats?: QaVerificationStats;
  /** Pending count after search filter (from paginated list `total`). */
  filteredTotal: number;
  isLoading?: boolean;
  isUpdating?: boolean;
  hasSearch?: boolean;
}) {
  const s = stats ?? EMPTY_STATS;
  const updatingSuffix = isUpdating ? " · updating" : "";

  if (isLoading) {
    return (
      <div
        className="grid grid-cols-2 gap-3.5 lg:grid-cols-4"
        aria-label="QA verification summary"
        aria-busy="true"
      >
        {Array.from({ length: 4 }).map((_, i) => (
          <div key={i} className="flex flex-col gap-2 rounded-xl border border-border p-4">
            <Skeleton className="h-3 w-24 rounded bg-border/70" />
            <Skeleton className="h-6 w-16 rounded bg-border/60" />
            <Skeleton className="h-3 w-28 rounded bg-border/50" />
          </div>
        ))}
      </div>
    );
  }

  const pendingSubtext = hasSearch
    ? `${filteredTotal} match search${updatingSuffix}`
    : s.pendingCount === 0
      ? `queue clear${updatingSuffix}`
      : `awaiting verification${updatingSuffix}`;

  const verifiedSubtext =
    s.verifiedTodayCount === 0
      ? `no verifications yet today${updatingSuffix}`
      : `${s.verifiedTodayShowupCount} showed up · ${s.verifiedTodayNoShowCount} no-show${updatingSuffix}`;

  const showUpSubtext =
    s.showUpRateTodayPct == null
      ? `verified today${updatingSuffix}`
      : `of ${s.verifiedTodayCount} verified today${updatingSuffix}`;

  const oldestSubtext =
    s.oldestPendingDays == null
      ? `no pending leads${updatingSuffix}`
      : s.oldestPendingDays >= 3
        ? `review backlog${updatingSuffix}`
        : `longest wait in queue${updatingSuffix}`;

  return (
    <section aria-label="QA verification summary">
      <div className="grid grid-cols-2 gap-3.5 lg:grid-cols-4">
        <KPICard
          label="Pending queue"
          value={hasSearch ? filteredTotal.toString() : s.pendingCount.toString()}
          subtext={pendingSubtext}
          icon={<Clock size={16} aria-hidden />}
          className={kpiCardClass}
        />
        <KPICard
          label="Verified today"
          value={s.verifiedTodayCount.toString()}
          subtext={verifiedSubtext}
          icon={<CheckCircle2 size={16} aria-hidden />}
          className={kpiCardClass}
        />
        <KPICard
          label="Show-up rate (today)"
          value={formatShowUpRate(s.showUpRateTodayPct)}
          subtext={showUpSubtext}
          icon={<TrendingUp size={16} aria-hidden />}
          className={kpiCardClass}
        />
        <KPICard
          label="Oldest pending"
          value={formatOldestDays(s.oldestPendingDays)}
          subtext={oldestSubtext}
          icon={
            s.oldestPendingDays != null && s.oldestPendingDays >= 3 ? (
              <AlertTriangle size={16} aria-hidden className="text-amber-600" />
            ) : (
              <UserCheck size={16} aria-hidden />
            )
          }
          className={kpiCardClass}
        />
      </div>
      {s.verifiedByYouTodayCount > 0 && (
        <p className="mt-2 text-xs text-muted-foreground">
          You verified {s.verifiedByYouTodayCount} lead
          {s.verifiedByYouTodayCount === 1 ? "" : "s"} today.
        </p>
      )}
    </section>
  );
}