'use client'

import type { ComponentRenderProps } from '@json-render/react'
import { useActions } from '@json-render/react'

type KanbanCard = {
  id: string; title: string; subtitle?: string; value?: string
  status?: string; statusVariant?: string; date?: string; avatarInitials?: string
}
type KanbanColumn = {
  id: string; title: string; count?: number; totalValue?: string
  color?: string; cards: KanbanCard[]
}

const statusClasses: Record<string, string> = {
  open: 'bg-blue-100 text-blue-700',
  won: 'bg-green-100 text-green-700',
  lost: 'bg-red-100 text-red-700',
  abandoned: 'bg-gray-100 text-gray-500',
}

export function KanbanBoard({ element }: ComponentRenderProps) {
  const { columns } = element.props as { columns: KanbanColumn[] }
  const { execute } = useActions()

  return (
    <div className="p-2 overflow-x-auto overflow-y-auto" style={{ maxHeight: 'calc(100vh - 80px)' }}>
      <div className="flex gap-2" style={{ minWidth: 'max-content' }}>
        {columns.map(col => (
          <div key={col.id} className="bg-white rounded-lg shadow-sm flex flex-col" style={{ width: 210, minWidth: 210, maxHeight: 'calc(100vh - 100px)' }}>
            {/* Column header */}
            <div className="px-3 py-2 border-b border-gray-200 sticky top-0 bg-white rounded-t-lg">
              <div className="flex items-center justify-between">
                <span className="font-semibold text-xs text-gray-800">{col.title}</span>
                <span className="bg-gray-200 text-gray-600 px-1.5 py-0.5 rounded-full text-[10px] font-medium">
                  {col.count ?? col.cards.length}
                </span>
              </div>
              {col.totalValue && (
                <div className="text-[10px] text-gray-500 mt-0.5">{col.totalValue}</div>
              )}
            </div>

            {/* Cards */}
            <div className="p-1.5 overflow-y-auto flex-1 kanban-scroll" style={{ minHeight: 60, maxHeight: 320 }}>
              {col.cards.length === 0 ? (
                <div className="text-center py-4 text-gray-400 text-[10px]">No items</div>
              ) : (
                col.cards.map(card => (
                  <div
                    key={card.id}
                    className="bg-gray-50 border border-gray-200 rounded-md px-2.5 py-2 mb-1.5 cursor-grab hover:shadow-md hover:border-indigo-500 transition-all relative pl-3"
                    onClick={() => execute({
                      name: 'move_opportunity',
                      params: { opportunityId: card.id, stage: col.id }
                    })}
                  >
                    {/* Drag handle hint */}
                    <div className="absolute left-0.5 top-1/2 -translate-y-1/2 w-[3px] h-4 opacity-0 hover:opacity-100 transition-opacity"
                      style={{ background: 'repeating-linear-gradient(0deg, #d1d5db, #d1d5db 2px, transparent 2px, transparent 4px)' }}
                    />
                    <div className="font-semibold text-[11px] text-gray-900 leading-tight mb-1">{card.title}</div>
                    {card.subtitle && (
                      <div className="flex items-center gap-1 text-[10px] text-gray-500 mb-1">
                        {card.avatarInitials && (
                          <div className="w-4 h-4 bg-gray-200 rounded-full flex items-center justify-center text-[7px] font-bold text-gray-600">
                            {card.avatarInitials}
                          </div>
                        )}
                        {card.subtitle}
                      </div>
                    )}
                    {card.value && (
                      <div className="text-xs font-bold text-emerald-600 mb-1">{card.value}</div>
                    )}
                    <div className="flex items-center justify-between text-[9px] text-gray-400">
                      {card.date && <span>{card.date}</span>}
                      {card.status && (
                        <span className={`px-1.5 py-0.5 rounded text-[8px] font-medium uppercase ${statusClasses[card.statusVariant || 'open'] || statusClasses.open}`}>
                          {card.status}
                        </span>
                      )}
                    </div>
                  </div>
                ))
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
