'use client';

import { AlertTriangle } from 'lucide-react';
import { StatusBadge } from './StatusBadge';
import { CategoryChip } from './CategoryChip';
import { formatHours } from '@/lib/dev-task';
import type { DevTask } from '@/lib/dev-task';
import type { TaskCategory } from '@/lib/task-category';

interface Props {
  task: DevTask;
  category?: TaskCategory;
  onClick?: () => void;
}

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

export function DevTaskRow({ task, category, onClick }: Props) {
  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[task.priority] || 'bg-zinc-300'}`} title={task.priority} />
      <span className="text-[11px] font-mono text-[var(--ink-muted)] w-16 shrink-0">{task.taskNo}</span>
      <div className="flex-1 min-w-0 flex items-center gap-1.5">
        <span className="text-[13px] text-[var(--ink)] truncate">{task.title}</span>
        {task.isBlocked && (
          <span className="flex items-center gap-0.5 text-[10px] text-red-500 bg-red-50 px-1.5 py-0.5 rounded shrink-0" title={task.blockReason}>
            <AlertTriangle className="h-2.5 w-2.5" />阻塞
          </span>
        )}
      </div>
      <CategoryChip category={category} />
      <StatusBadge status={task.status} />
      <span className="text-[11px] text-[var(--ink-muted)] w-24 text-right tabular-nums">
        {task.actualHours > 0 && <span className="text-[var(--ink-soft)]">{task.actualHours}h</span>}
        {task.actualHours > 0 && ' / '}
        {formatHours(task.estimateHours).split('（')[0]}
      </span>
      <span className="text-[11px] text-[var(--ink-soft)] w-14 text-right truncate">{task.assigneeId}</span>
    </div>
  );
}