import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { GripVertical } from 'lucide-react';

const OBJECT_TYPE_LABELS = {
  industrial: 'Промышленный',
  commercial: 'Коммерческий',
  infrastructure: 'Инфраструктура',
  residential: 'Частный',
  other: 'Другое',
};

const OrderCard = ({ order, onClick }) => {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
    id: order.id,
  });

  return (
    <div
      ref={setNodeRef}
      style={{
        transform: CSS.Transform.toString(transform),
        transition,
        opacity: isDragging ? 0.45 : 1,
        background: '#fff',
        border: '1px solid var(--border-light)',
        borderRadius: '10px',
        padding: '13px',
        cursor: 'pointer',
        boxShadow: isDragging ? '0 12px 32px rgba(0,0,0,0.14)' : '0 1px 6px rgba(0,0,0,0.04)',
        display: 'flex',
        gap: '9px',
        userSelect: 'none',
      }}
      onClick={onClick}
    >
      <div
        {...attributes}
        {...listeners}
        style={{ color: 'var(--text-muted)', cursor: 'grab', paddingTop: '2px', flexShrink: 0 }}
        onClick={(e) => e.stopPropagation()}
      >
        <GripVertical size={15} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <p style={{
          fontWeight: 700, fontFamily: 'var(--font-heading)',
          fontSize: '0.9rem', marginBottom: '6px',
          overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
        }}>
          {order.name}
        </p>
        <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap', alignItems: 'center', marginBottom: '6px' }}>
          {order.object_type && (
            <span style={{
              fontSize: '0.72rem',
              background: 'rgba(67, 97, 238, 0.08)',
              color: 'var(--accent-blue)',
              padding: '2px 7px', borderRadius: '50px', fontWeight: 600,
            }}>
              {OBJECT_TYPE_LABELS[order.object_type] || order.object_type}
            </span>
          )}
          {order.area_sqm && (
            <span style={{ fontSize: '0.72rem', color: 'var(--text-muted)' }}>{order.area_sqm} м²</span>
          )}
        </div>
        {(order.final_cost || order.estimated_cost) && (
          <p style={{ fontSize: '0.82rem', fontWeight: 700, color: 'var(--accent-orange)' }}>
            {Number(order.final_cost || order.estimated_cost).toLocaleString('ru-RU')} ₽
          </p>
        )}
        <p style={{ fontSize: '0.72rem', color: 'var(--text-muted)', marginTop: '5px' }}>
          {new Date(order.created_at).toLocaleDateString('ru-RU')}
        </p>
      </div>
    </div>
  );
};

export default OrderCard;
