'use client';

import { useMemo } from 'react';
import type { ColumnDef } from '@tanstack/react-table';

import { UploadActionsMenu } from './UploadActionsMenu';
import { UploadThumbnail } from './UploadThumbnail';
import { formatUploadedAt, getUploadStatus } from './uploadUtils';
import { Badge } from '@/components/ui/badge';
import type { UploadVideo } from '@/types';

interface UseUploadColumnsProps {
  onViewVideo: (upload: UploadVideo) => void;
  onViewDetails: (upload: UploadVideo) => void;
}

export function useUploadColumns({
  onViewVideo,
  onViewDetails,
}: UseUploadColumnsProps) {
  return useMemo<ColumnDef<UploadVideo>[]>(
    () => [
      {
        id: 'thumbnail',
        header: 'Thumbnail',
        size: 140,
        minSize: 120,
        enableSorting: false,
        meta: { disableTruncate: true },
        cell: ({ row }) => (
          <UploadThumbnail upload={row.original} className="w-28" />
        ),
      },
      {
        accessorKey: 'filename',
        header: 'Filename',
        cell: ({ row }) => (
          <span className="font-medium">{row.original.filename}</span>
        ),
      },
      {
        id: 'status',
        header: 'Status',
        size: 130,
        cell: ({ row }) => (
          <Badge className="rounded-full">
            {getUploadStatus(row.original)}
          </Badge>
        ),
      },
      {
        accessorKey: 'uploaded_at',
        header: 'Uploaded At',
        cell: ({ row }) => formatUploadedAt(row.original.uploaded_at),
      },
      {
        id: 'actions',
        header: () => <span className="sr-only">Actions</span>,
        size: 56,
        minSize: 56,
        enableSorting: false,
        enableHiding: false,
        meta: { disableTruncate: true },
        cell: ({ row }) => (
          <div className="flex justify-center">
            <UploadActionsMenu
              upload={row.original}
              onViewVideo={onViewVideo}
              onViewDetails={onViewDetails}
            />
          </div>
        ),
      },
    ],
    [onViewDetails, onViewVideo],
  );
}