'use client';

import { memo } from 'react';
import { TestCaseStatusBadge } from './TestCaseStatusBadge';
import { getTestCaseActualHours } from '@/lib/test-case';
import { formatWorkHours } from '@/lib/work-hours';
import type { TestCase } from '@/lib/test-case';

interface Props {
  testCase: TestCase;
  bugCount: number;
  onClick?: () => void;
}

const PRIORITY_DOT: Record<string, string> = {
  P0: 'bg-red-500',
  P1: 'bg-orange-400',
  P2: 'bg-blue-400',
  P3: 'bg-zinc-300',
};

function TestCaseRowImpl({ testCase, bugCount, onClick }: Props) {
  const actualHours = getTestCaseActualHours(testCase);
  return (
    <div onClick={onClick} className="flex items-center gap-3 px-4 py-2.5 border-b border-[var(--line)] hover:bg-[var(--bg-subtle)] cursor-pointer transition-colors last:border-b-0">
      <span className={`h-2 w-2 rounded-full shrink-0 ${PRIORITY_DOT[testCase.priority] || 'bg-zinc-300'}`} />
      <span className="text-[11px] font-mono text-[var(--ink-muted)] w-14 shrink-0">{testCase.caseNo}</span>
      <span className="text-[13px] text-[var(--ink)] flex-1 truncate">{testCase.title}</span>
      <TestCaseStatusBadge status={testCase.status} />
      {actualHours > 0 && (
        <span className="text-[11px] text-[var(--ink-muted)] tabular-nums w-28 text-right shrink-0 whitespace-nowrap">{formatWorkHours(actualHours)}</span>
      )}
      {bugCount > 0 && (
        <span className="text-[10px] text-red-500 bg-red-50 px-1.5 py-0.5 rounded shrink-0">{bugCount} Bug</span>
      )}
      <span className="text-[11px] text-[var(--ink-soft)] w-14 text-right truncate shrink-0">{testCase.assigneeId || '-'}</span>
    </div>
  );
}

export const TestCaseRow = memo(TestCaseRowImpl);