// Mobile card view for a single order
import { CheckSquare, Square } from 'lucide-react';

const MKT_BADGE = {
  Etsy: 'bg-orange-100 text-orange-700',
  Square: 'bg-green-100 text-green-700',
  eBay: 'bg-blue-100 text-blue-700',
};

const STATUS_PILL = {
  Pending: 'bg-yellow-100 text-yellow-700',
  Delivered: 'bg-green-100 text-green-700',
  Cancelled: 'bg-red-100 text-red-700',
};

export default function OrderCard({ order, onView, onEdit, onShip, selectMode, selected, onToggleSelect }) {
  return (
    <div
      className={`bg-white rounded-xl border shadow-sm p-4 space-y-2 ${selectMode ? 'cursor-pointer' : 'cursor-pointer active:bg-gray-50'} ${
        selected ? 'border-orange-400 bg-orange-50/50' : 'border-gray-100'
      }`}
      onClick={() => selectMode ? onToggleSelect?.() : onView(order)}
    >
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          {selectMode && (
            <button onClick={e => { e.stopPropagation(); onToggleSelect?.(); }} className="text-gray-400 hover:text-orange-500">
              {selected
                ? <CheckSquare size={16} className="text-orange-500" />
                : <Square size={16} />}
            </button>
          )}
          <span className="font-mono text-xs text-gray-600">{order.order_number}</span>
        </div>
        <div className="flex gap-1.5">
          <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${MKT_BADGE[order.marketplace] || 'bg-gray-100 text-gray-600'}`}>
            {order.marketplace}
          </span>
          <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${STATUS_PILL[order.status] || 'bg-gray-100 text-gray-600'}`}>
            {order.status}
          </span>
        </div>
      </div>

      <p className="text-sm font-semibold text-gray-900 truncate">{order.customer_name}</p>
      <p className="text-xs text-gray-500 truncate">{order.product_title || '—'}</p>

      <div className="flex items-center justify-between pt-1">
        <span className="text-sm font-bold text-gray-800">${(order.total || 0).toFixed(2)}</span>
        <div className="flex gap-1">
          <button
            onClick={e => { e.stopPropagation(); onView(order); }}
            className="p-1.5 rounded hover:bg-gray-100 text-gray-500"
          >
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
          </button>
          <button
            onClick={e => { e.stopPropagation(); onEdit(order); }}
            className="p-1.5 rounded hover:bg-gray-100 text-gray-500"
          >
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
          </button>
          {onShip && (
            <button
              onClick={e => { e.stopPropagation(); onShip(order); }}
              className="p-1.5 rounded hover:bg-blue-50 text-blue-400"
              title="Get shipping quote"
            >
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
            </button>
          )}
        </div>
      </div>

      {order.order_date && (
        <p className="text-xs text-gray-400">{order.order_date}</p>
      )}
    </div>
  );
}