import { useState } from 'react'
import { useLanguage } from '../i18n/LanguageContext'

export default function KanbanBoard({ columns, items, renderCard, getItemId, onMove, emptyLabel }) {
  const { t } = useLanguage()
  const [draggedItem, setDraggedItem] = useState(null)
  const [dragOverCol, setDragOverCol] = useState(null)

  const handleDragStart = (e, item) => {
    setDraggedItem(item)
    e.dataTransfer.effectAllowed = 'move'
    if (e.target) {
      setTimeout(() => e.target.style.opacity = '0.4', 0)
    }
  }

  const handleDragEnd = (e) => {
    e.target.style.opacity = '1'
    setDraggedItem(null)
    setDragOverCol(null)
  }

  const handleDragOver = (e, colId) => {
    e.preventDefault()
    e.dataTransfer.dropEffect = 'move'
    setDragOverCol(colId)
  }

  const handleDragLeave = (e) => {
    if (!e.currentTarget.contains(e.relatedTarget)) {
      setDragOverCol(null)
    }
  }

  const handleDrop = (e, colId) => {
    e.preventDefault()
    setDragOverCol(null)
    if (draggedItem && draggedItem.status !== colId) {
      onMove(getItemId(draggedItem), colId)
    }
    setDraggedItem(null)
  }

  return (
    <div className="flex gap-4 overflow-x-auto pb-4">
      {columns.map((col) => {
        const colItems = items.filter((item) => item.status === col.id)
        const isOver = dragOverCol === col.id && draggedItem?.status !== col.id

        return (
          <div key={col.id} className="min-w-[240px] flex-1">
            {/* Column header */}
            <div className="flex items-center gap-2 mb-3">
              <div className={`w-2.5 h-2.5 rounded-full ${col.color}`} />
              <h4 className="text-sm font-semibold text-text-primary">{col.label}</h4>
              <span className="text-xs font-medium text-text-tertiary bg-surface-tertiary px-2 py-0.5 rounded-full">
                {colItems.length}
              </span>
            </div>

            {/* Column body — drop zone */}
            <div
              className={`rounded-xl p-2 space-y-2 border-2 transition-colors min-h-[200px] ${
                isOver
                  ? 'bg-brand-primary/5 border-brand-primary/40 border-dashed'
                  : 'bg-surface-secondary border-border-light border-solid'
              }`}
              onDragOver={(e) => handleDragOver(e, col.id)}
              onDragLeave={handleDragLeave}
              onDrop={(e) => handleDrop(e, col.id)}
            >
              {colItems.length === 0 ? (
                <div className={`py-8 text-center text-xs ${isOver ? 'text-brand-primary font-medium' : 'text-text-tertiary'}`}>
                  {isOver ? t('posts.dropHere') : (emptyLabel || t('posts.noPosts'))}
                </div>
              ) : (
                colItems.map((item) => (
                  <div
                    key={getItemId(item)}
                    draggable
                    onDragStart={(e) => handleDragStart(e, item)}
                    onDragEnd={handleDragEnd}
                    className="cursor-grab active:cursor-grabbing"
                  >
                    {renderCard(item)}
                  </div>
                ))
              )}
            </div>
          </div>
        )
      })}
    </div>
  )
}
