// @design-system: domain/admin/AdminTableToolbar

'use client';

import { useT } from '@/lib/i18n/react';
import { interpolate } from '@/lib/i18n/interpolate';
import { cn } from '@/lib/cn';
import { Button } from '@/components/ui/primitives/Button';
import { Checkbox } from '@/components/ui/primitives/Checkbox';
import { SegmentedControl } from '@/components/ui/primitives/SegmentedControl';
import { Icon } from '@/components/ui/icons/Icon/Icon';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  DropdownMenuSeparator,
  DropdownMenuLabel,
} from '@/components/ui/overlays/DropdownMenu';
import type { AdminTableLayoutApi } from '../AdminTable/useAdminTableLayout';
import type { ColumnDef } from '../AdminTable/AdminTable';

export interface AdminTableToolbarProps<T> {
  layout: AdminTableLayoutApi<T>;
  columns: ColumnDef<T>[];
  total: number;
  page: number;
  limit: number;
  isLoading?: boolean;
  onExportPageCsv?: () => void;
  onExportAllCsv?: () => void;
  onExportPageJson?: () => void;
  onPrint?: () => void;
  className?: string;
  /** Override default admin_list showing_range label. */
  rangeLabel?: string | null;
}

export function AdminTableToolbar<T>({
  layout,
  columns: _columns,
  total,
  page,
  limit,
  isLoading = false,
  onExportPageCsv,
  onExportAllCsv,
  onExportPageJson,
  onPrint,
  className,
  rangeLabel: rangeLabelOverride,
}: AdminTableToolbarProps<T>) {
  const t = useT('admin_list');

  const from = total > 0 ? (page - 1) * limit + 1 : 0;
  const to = Math.min(page * limit, total);
  const rangeLabel =
    rangeLabelOverride !== undefined
      ? rangeLabelOverride
      : total > 0
        ? interpolate(t('showing_range'), { from, to, total })
        : null;

  const hideableColumns = layout.orderedColumns.filter((c) => c.hideable !== false);

  return (
    <div className={cn('flex flex-wrap items-center justify-between gap-3', className)}>
      {rangeLabel && !isLoading && (
        <p className="text-text-secondary text-sm" aria-live="polite">
          {rangeLabel}
        </p>
      )}

      <div className="ms-auto flex flex-wrap items-center gap-2">
        <SegmentedControl
          aria-label={t('density_label')}
          value={layout.density}
          onChange={(v) => layout.setDensity(v as 'compact' | 'comfortable')}
          options={[
            { value: 'comfortable', label: t('density_comfortable') },
            { value: 'compact', label: t('density_compact') },
          ]}
        />

        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="secondary" size="sm" type="button">
              {t('columns_menu')}
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="min-w-56">
            <DropdownMenuLabel>{t('columns_menu')}</DropdownMenuLabel>
            {hideableColumns.map((col) => {
              const checked = !layout.hiddenKeys.includes(col.key);
              const orderIdx = layout.orderedColumns.findIndex((c) => c.key === col.key);
              const isFirst = orderIdx <= 0;
              const isLast = orderIdx < 0 || orderIdx === layout.orderedColumns.length - 1;
              return (
                <DropdownMenuItem
                  key={col.key}
                  className="flex items-center gap-2"
                  onSelect={(e) => e.preventDefault()}
                >
                  <Checkbox
                    checked={checked}
                    onCheckedChange={() => layout.toggleColumnHidden(col.key)}
                    aria-label={col.label}
                  />
                  <span className="flex-1">{col.label}</span>
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
                    className="h-7 w-7 shrink-0 p-0"
                    disabled={isFirst}
                    onClick={() => layout.moveColumn(col.key, 'left')}
                    aria-label={`${t('move_column_left')} ${col.label}`}
                  >
                    <Icon name="ChevronLeft" size="xs" mirror aria-hidden />
                  </Button>
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
                    className="h-7 w-7 shrink-0 p-0"
                    disabled={isLast}
                    onClick={() => layout.moveColumn(col.key, 'right')}
                    aria-label={`${t('move_column_right')} ${col.label}`}
                  >
                    <Icon name="ChevronRight" size="xs" mirror aria-hidden />
                  </Button>
                </DropdownMenuItem>
              );
            })}
            <DropdownMenuSeparator />
            <DropdownMenuItem onSelect={() => layout.resetColumns()}>
              {t('columns_reset')}
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>

        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="secondary" size="sm" type="button" disabled={isLoading || total === 0}>
              {t('export_menu')}
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            {onExportPageCsv && (
              <DropdownMenuItem onSelect={onExportPageCsv}>{t('export_page_csv')}</DropdownMenuItem>
            )}
            {onExportAllCsv && (
              <DropdownMenuItem onSelect={onExportAllCsv}>{t('export_all_csv')}</DropdownMenuItem>
            )}
            {onExportPageJson && (
              <DropdownMenuItem onSelect={onExportPageJson}>{t('export_json')}</DropdownMenuItem>
            )}
            {onPrint && <DropdownMenuItem onSelect={onPrint}>{t('print_table')}</DropdownMenuItem>}
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </div>
  );
}