hanarang-dashboard/frontend/components/projects/TaskTable.tsx

'use client';

import React, { useState } from 'react';
import styled from 'styled-components';
import TaskBadge from '../common/TaskBadge';
import { theme } from '@/styles/theme';

interface Task {
  id: number;
  taskId: string;
  title: string;
  assignee: string;
  status: string;
  iteration: number;
  createdAt: string;
}

const ALL_STATUSES = ['all', 'pending', 'in_progress', 'review', 'done', 'failed', 'blocked', 'escalated'];

const Wrapper = styled.div``;

const Filters = styled.div`
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
`;

const FilterBtn = styled.button<{ $active: boolean }>`
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid ${({ $active }) => $active ? theme.colors.accent : theme.colors.border};
  background: ${({ $active }) => $active ? 'rgba(88,166,255,0.12)' : 'transparent'};
  color: ${({ $active }) => $active ? theme.colors.accent : theme.colors.textSecondary};
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;

  &:hover { border-color: ${theme.colors.accent}; color: ${theme.colors.accent}; }
`;

const Table = styled.table`
  width: 100%;
  border-collapse: collapse;
`;

const Th = styled.th`
  text-align: left;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: ${theme.colors.textSecondary};
  border-bottom: 1px solid ${theme.colors.border};
  text-transform: uppercase;
  letter-spacing: 0.05em;
`;

const Td = styled.td`
  padding: 10px 12px;
  font-size: 13px;
  border-bottom: 1px solid ${theme.colors.border};
  color: ${theme.colors.textPrimary};
`;

const Tr = styled.tr`
  &:last-child td { border-bottom: none; }
  &:hover td { background: rgba(240,246,252,0.03); }
`;

const TaskIdCell = styled.code`
  color: ${theme.colors.accent};
  font-family: monospace;
  font-size: 12px;
`;

const IterationCell = styled.span<{ $count: number }>`
  color: ${({ $count }) => $count > 0 ? '#FF9800' : theme.colors.textSecondary};
`;

const Empty = styled.div`
  padding: 32px;
  text-align: center;
  color: ${theme.colors.textSecondary};
  font-size: 13px;
`;

export default function TaskTable({ tasks }: { tasks: Task[] }) {
  const [filter, setFilter] = useState('all');

  const filtered = filter === 'all' ? tasks : tasks.filter((t) => t.status === filter);

  return (
    <Wrapper>
      <Filters>
        {ALL_STATUSES.map((s) => (
          <FilterBtn key={s} $active={filter === s} onClick={() => setFilter(s)}>
            {s === 'all' ? '전체' : s}
          </FilterBtn>
        ))}
      </Filters>
      {filtered.length === 0 ? (
        <Empty>해당 상태의 태스크 없음</Empty>
      ) : (
        <Table>
          <thead>
            <tr>
              <Th>ID</Th>
              <Th>제목</Th>
              <Th>담당</Th>
              <Th>상태</Th>
              <Th>반복</Th>
            </tr>
          </thead>
          <tbody>
            {filtered.map((task) => (
              <Tr key={task.id}>
                <Td><TaskIdCell>{task.taskId}</TaskIdCell></Td>
                <Td>{task.title}</Td>
                <Td>{task.assignee}</Td>
                <Td><TaskBadge status={task.status as any} /></Td>
                <Td><IterationCell $count={task.iteration}>{task.iteration || '-'}</IterationCell></Td>
              </Tr>
            ))}
          </tbody>
        </Table>
      )}
    </Wrapper>
  );
}