'use client';

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

import type { DetectionResultItem } from '@/types';

function formatTimestamp(seconds: number) {
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = Math.floor(seconds % 60);
  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
}

export function useIssueColumns(): ColumnDef<DetectionResultItem>[] {
  return useMemo(
    () => [
      {
        id: 'detection_id',
        header: 'Detection ID',
        size: 140,
        cell: ({ row }) => `#${row.original.detection.id}`,
      },
      {
        id: 'issue_type',
        header: 'Issue Type',
        size: 180,
        cell: ({ row }) => row.original.detection.display_name,
      },
      {
        id: 'confidence',
        header: 'Confidence',
        size: 130,
        cell: ({ row }) =>
          `${Math.round(row.original.detection.confidence * 100)}%`,
      },
      {
        id: 'frame',
        header: 'Frame',
        size: 100,
        cell: ({ row }) => row.original.frame.number,
      },
      {
        id: 'timestamp',
        header: 'Timestamp',
        size: 130,
        cell: ({ row }) =>
          formatTimestamp(row.original.frame.timestamp_seconds),
      },
    ],
    [],
  );
}