pn-new-crm/src/components/documents/aggregated-section.tsx

'use client';

import { Loader2 } from 'lucide-react';

import type { AggregatedGroup } from '@/hooks/use-aggregated-listing';

interface AggregatedSectionProps<T> {
  title: string;
  icon?: React.ReactNode;
  groups: AggregatedGroup<T>[];
  renderRow: (item: T, group: AggregatedGroup<T>) => React.ReactNode;
  emptyMessage?: string;
  loading?: boolean;
  onShowAll?: (group: AggregatedGroup<T>) => void;
}

/**
 * Renders a Signing or Files section with one labelled subsection per
 * owner-source group. Each group shows up to 20 rows; a `Show all (N)`
 * link drills into the source-scoped flat list. Hidden when groups is
 * empty.
 */
export function AggregatedSection<T>({
  title,
  icon,
  groups,
  renderRow,
  emptyMessage = 'Nothing here yet.',
  loading,
  onShowAll,
}: AggregatedSectionProps<T>) {
  const total = groups.reduce((sum, g) => sum + g.total, 0);

  if (loading) {
    return (
      <section className="rounded-md border bg-white p-3">
        <h3 className="flex items-center gap-2 text-sm font-semibold text-foreground">
          {icon}
          {title}
          <Loader2 className="ml-1 h-3.5 w-3.5 animate-spin text-muted-foreground" />
        </h3>
      </section>
    );
  }

  if (groups.length === 0) {
    return (
      <section className="rounded-md border bg-white p-3 text-sm text-muted-foreground">
        <h3 className="flex items-center gap-2 text-sm font-semibold text-foreground">
          {icon}
          {title}
          <span className="ml-1 text-xs text-muted-foreground tabular-nums">· 0</span>
        </h3>
        <p className="mt-2">{emptyMessage}</p>
      </section>
    );
  }

  return (
    <section className="rounded-md border bg-white">
      <h3 className="flex items-center gap-2 border-b px-3 py-2 text-sm font-semibold text-foreground">
        {icon}
        {title}
        <span className="ml-1 text-xs text-muted-foreground tabular-nums">· {total}</span>
      </h3>
      <div className="divide-y">
        {groups.map((g) => (
          <GroupBlock
            key={`${g.source}-${g.label}`}
            group={g}
            renderRow={renderRow}
            onShowAll={onShowAll}
          />
        ))}
      </div>
    </section>
  );
}

function GroupBlock<T>({
  group,
  renderRow,
  onShowAll,
}: {
  group: AggregatedGroup<T>;
  renderRow: (item: T, group: AggregatedGroup<T>) => React.ReactNode;
  onShowAll?: (group: AggregatedGroup<T>) => void;
}) {
  const items = (group.files ?? group.workflows ?? []) as T[];
  return (
    <div className="px-3 py-2">
      <header className="mb-1 text-[0.7rem] font-medium uppercase tracking-wide text-muted-foreground">
        {group.label}
        <span className="ml-1.5 text-muted-foreground/70 tabular-nums">· {group.total}</span>
      </header>
      <ul className="space-y-1">
        {items.map((item) => (
          <li key={(item as { id: string }).id}>{renderRow(item, group)}</li>
        ))}
      </ul>
      {group.total > items.length ? (
        <button
          type="button"
          className="mt-1 text-xs text-brand hover:underline"
          onClick={() => onShowAll?.(group)}
        >
          Show all ({group.total})
        </button>
      ) : null}
    </div>
  );
}