import { useDroppable } from '@dnd-kit/core';
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
import OrderCard from './OrderCard';

const STATUS_COLORS = {
  'новая': '#f59e0b',
  'замер': '#0ea5e9',
  'согласование': '#8b5cf6',
  'монтаж': '#f97316',
  'закрыт': '#22c55e',
};

const KanbanColumn = ({ status, orders, onCardClick, isMobile }) => {
  const { setNodeRef, isOver } = useDroppable({ id: status });

  return (
    <div style={{
      flex: isMobile ? '0 0 260px' : '1 1 200px',
      minWidth: isMobile ? '260px' : '215px',
      maxWidth: isMobile ? '260px' : '270px',
      display: 'flex', flexDirection: 'column', gap: '10px',
    }}>
      {/* Header */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: '8px',
        padding: '10px 13px',
        background: '#fff', borderRadius: '10px',
        border: '1px solid var(--border-light)',
        borderTop: `3px solid ${STATUS_COLORS[status]}`,
      }}>
        <span style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: '0.85rem', flex: 1, textTransform: 'capitalize' }}>
          {status}
        </span>
        <span style={{
          background: STATUS_COLORS[status], color: '#fff',
          borderRadius: '50px', padding: '1px 8px',
          fontSize: '0.72rem', fontWeight: 700,
        }}>
          {orders.length}
        </span>
      </div>

      {/* Drop zone */}
      <div
        ref={setNodeRef}
        style={{
          flex: 1, minHeight: '180px',
          display: 'flex', flexDirection: 'column', gap: '8px',
          padding: '6px',
          borderRadius: '10px',
          background: isOver ? 'rgba(67, 97, 238, 0.05)' : 'transparent',
          border: isOver ? '2px dashed rgba(67, 97, 238, 0.3)' : '2px dashed transparent',
          transition: 'all 0.15s',
        }}
      >
        <SortableContext items={orders.map((o) => o.id)} strategy={verticalListSortingStrategy}>
          {orders.map((order) => (
            <OrderCard key={order.id} order={order} onClick={() => onCardClick(order)} />
          ))}
        </SortableContext>
      </div>
    </div>
  );
};

export default KanbanColumn;
