'use client'

import { format } from 'date-fns'
import { getHealthColor } from './lib/progress'
import { INDENT_WIDTH } from './hooks/useGanttState'
import type { UseGanttStateReturn } from './hooks/useGanttState'

export interface GanttListViewProps {
  listItems: UseGanttStateReturn['listItems']
  focusedRowIndex: UseGanttStateReturn['focusedRowIndex']
  categoryColors: UseGanttStateReturn['categoryColors']
  handleItemClick: UseGanttStateReturn['handleItemClick']
}

export function GanttListView({
  listItems,
  focusedRowIndex,
  categoryColors,
  handleItemClick,
}: GanttListViewProps) {
  return (
    <div className="gantt-list">
      <div className="gantt-list-header">
        <span className="gantt-list-col-title">Title</span>
        <span className="gantt-list-col-status">Status</span>
        <span className="gantt-list-col-category">Category</span>
        <span className="gantt-list-col-dates">Dates</span>
        <span className="gantt-list-col-progress">Progress</span>
      </div>
      {listItems.map((task, idx) => (
        <div
          key={task.item.id}
          className={`gantt-list-row ${focusedRowIndex === idx ? 'gantt-row-focused' : ''}`}
          onClick={() => handleItemClick(task.item)}
        >
          <span className="gantt-list-col-title">
            {task.depth > 0 && <span style={{ width: task.depth * INDENT_WIDTH, display: 'inline-block' }} />}
            {task.item.title}
          </span>
          <span className="gantt-list-col-status">
            <span className={`gantt-status-badge gantt-status-${task.item.status}`}>{task.item.status.replace(/_/g, ' ')}</span>
          </span>
          <span className="gantt-list-col-category">
            {task.item.category && (
              <span className="gantt-category-badge" style={{ backgroundColor: categoryColors[task.item.category] || categoryColors.other || '#6b7280' }}>
                {task.item.category}
              </span>
            )}
          </span>
          <span className="gantt-list-col-dates">
            {format(task.start, 'MMM d')} \u2013 {format(task.end, 'MMM d')}
          </span>
          <span className="gantt-list-col-progress">
            <div className="gantt-list-progress-bar">
              <div className="gantt-list-progress-fill" style={{ width: `${task.progress}%`, backgroundColor: getHealthColor(task.healthStatus) }} />
            </div>
            <span>{task.progress}%</span>
          </span>
        </div>
      ))}
    </div>
  )
}