import Link from "next/link";
import { DashboardSection } from "./DashboardSection";
import { DashboardEmptyState } from "./DashboardEmptyState";

type ApprovalItem = {
  approval_id: string;
  board_id: string;
  board_name: string;
  task_title?: string | null;
  confidence: number;
  created_at: string;
};

interface PendingApprovalsSectionProps {
  items: ApprovalItem[];
  total: number;
  isLoading: boolean;
  hasError: boolean;
  formatCount: (n: number) => string;
  formatRelative: (ts: string) => string;
}

export function PendingApprovalsSection({
  items,
  total,
  isLoading,
  hasError,
  formatCount,
  formatRelative,
}: PendingApprovalsSectionProps) {
  return (
    <DashboardSection
      title="Pending Approvals"
      action={{ label: "Open global approvals", href: "/approvals" }}
    >
      {isLoading ? (
        <DashboardEmptyState message="Loading pending approvals..." />
      ) : hasError ? (
        <DashboardEmptyState
          tone="warning"
          message="Pending approvals are temporarily unavailable."
        />
      ) : items.length > 0 ? (
        <div className="space-y-2">
          <div className="divide-y divide-[color:var(--border)] rounded-lg surface-muted overflow-hidden">
            {items.map((item) => (
              <Link
                key={item.approval_id}
                href={`/boards/${item.board_id}/approvals`}
                className="flex items-center justify-between gap-3 px-3 py-2 transition hover:bg-[color:var(--surface-strong)]"
              >
                <span className="min-w-0 text-sm">
                  <span className="block truncate font-medium text-strong">
                    {item.task_title || "Pending approval"}
                  </span>
                  <span className="block truncate text-xs text-muted">
                    {item.board_name} · {item.confidence}% score
                  </span>
                </span>
                <span className="shrink-0 text-xs text-muted">
                  {formatRelative(item.created_at)}
                </span>
              </Link>
            ))}
          </div>
          {total > items.length && (
            <p className="text-xs text-muted">
              Showing latest {formatCount(items.length)} of {formatCount(total)} pending approvals.
            </p>
          )}
        </div>
      ) : (
        <DashboardEmptyState
          tone="success"
          message="No pending approvals across your boards."
        />
      )}
    </DashboardSection>
  );
}
