'use client'

import { format } from 'date-fns'
import type { TimelineItem } from './types'
import type { UseGanttStateReturn } from './hooks/useGanttState'

export interface GanttBoardViewProps {
  boardColumns: UseGanttStateReturn['boardColumns']
  boardDragItem: UseGanttStateReturn['boardDragItem']
  setBoardDragItem: UseGanttStateReturn['setBoardDragItem']
  onStatusChange: UseGanttStateReturn['onStatusChange']
  categoryColors: UseGanttStateReturn['categoryColors']
  handleItemClick: UseGanttStateReturn['handleItemClick']
}

export function GanttBoardView({
  boardColumns,
  boardDragItem,
  setBoardDragItem,
  onStatusChange,
  categoryColors,
  handleItemClick,
}: GanttBoardViewProps) {
  return (
    <div className="gantt-board">
      {boardColumns.map((col) => (
        <div
          key={col.status}
          className={`gantt-board-column ${boardDragItem ? 'gantt-board-drop-target' : ''}`}
          onDragOver={(e) => { e.preventDefault(); e.currentTarget.classList.add('gantt-board-drag-over') }}
          onDragLeave={(e) => { e.currentTarget.classList.remove('gantt-board-drag-over') }}
          onDrop={(e) => {
            e.preventDefault()
            e.currentTarget.classList.remove('gantt-board-drag-over')
            if (boardDragItem && onStatusChange) {
              onStatusChange(boardDragItem, col.status)
            }
            setBoardDragItem(null)
          }}
        >
          <div className="gantt-board-column-header">
            <span className={`gantt-status-badge gantt-status-${col.status}`}>{col.status.replace(/_/g, ' ')}</span>
            <span className="gantt-board-count">{col.items.length}</span>
          </div>
          <div className="gantt-board-cards">
            {col.items.map((item) => (
              <div
                key={item.id}
                className="gantt-board-card"
                draggable={!!onStatusChange}
                onDragStart={() => setBoardDragItem(item.id)}
                onDragEnd={() => setBoardDragItem(null)}
                onClick={() => handleItemClick(item)}
              >
                <div className="gantt-board-card-title">{item.title}</div>
                {item.category && (
                  <span className="gantt-category-badge" style={{ backgroundColor: categoryColors[item.category] || categoryColors.other || '#6b7280' }}>
                    {item.category}
                  </span>
                )}
                {item.endDate && (
                  <span className="gantt-board-card-date">{format(new Date(item.endDate), 'MMM d')}</span>
                )}
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  )
}