import React from 'react';
import { Link } from 'react-router-dom';
import { ChevronRight } from 'lucide-react';
import { __ } from '@/lib/i18n';
import { formatMoney } from '@/lib/currency';
import { formatRelativeOrDate } from '@/lib/dates';
import { Checkbox } from '@/components/ui/checkbox';

const statusStyle: Record<string, { bg: string; text: string }> = {
  pending: { bg: 'bg-amber-100 dark:bg-amber-900/30', text: 'text-amber-800 dark:text-amber-300' },
  processing: { bg: 'bg-blue-100 dark:bg-blue-900/30', text: 'text-blue-800 dark:text-blue-300' },
  completed: { bg: 'bg-emerald-100 dark:bg-emerald-900/30', text: 'text-emerald-800 dark:text-emerald-300' },
  'on-hold': { bg: 'bg-slate-200 dark:bg-slate-800', text: 'text-slate-800 dark:text-slate-300' },
  cancelled: { bg: 'bg-zinc-200 dark:bg-zinc-800', text: 'text-zinc-800 dark:text-zinc-300' },
  refunded: { bg: 'bg-purple-100 dark:bg-purple-900/30', text: 'text-purple-800 dark:text-purple-300' },
  failed: { bg: 'bg-rose-100 dark:bg-rose-900/30', text: 'text-rose-800 dark:text-rose-300' },
};

interface OrderCardProps {
  order: any;
  selected?: boolean;
  onSelect?: (id: number) => void;
  currencyConfig: any;
}

export function OrderCard({ order, selected, onSelect, currencyConfig }: OrderCardProps) {
  const status = order.status?.toLowerCase() || 'pending';
  const statusColors = statusStyle[status] || statusStyle.pending;
  
  return (
    <Link 
      to={`/orders/${order.id}`}
      className="block bg-card border border-border rounded-xl p-3 hover:bg-accent/50 transition-colors active:scale-[0.98] active:transition-transform shadow-sm"
    >
      <div className="flex items-center gap-3">
        {/* Checkbox */}
        {onSelect && (
          <div 
            onClick={(e) => {
              e.preventDefault();
              e.stopPropagation();
              onSelect(order.id);
            }}
          >
            <Checkbox
              checked={selected}
              aria-label={__('Select order')}
              className="w-5 h-5"
            />
          </div>
        )}

        {/* Content */}
        <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 mb-2">

                {/* Order ID Badge with Status Color */}
                <div className={`flex-shrink-0 p-2 rounded-xl ${statusColors.bg} ${statusColors.text} flex items-center justify-center font-bold text-base`}>
                #{order.number}
                </div>
                {/* Line 1: Date (small) */}
                <div className="text-xs text-muted-foreground leading-tight mb-0.5">
                    {formatRelativeOrDate(order.date_ts)}
                </div>
            </div>

          {/* Line 2: Customer */}
          <h3 className="font-bold text-base leading-tight mb-1">
            {order.customer || __('Guest')}
          </h3>

          {/* Line 3: Items */}
          {order.items_brief && (
            <div className="text-sm text-muted-foreground truncate mb-2">
              {order.items_count} {order.items_count === 1 ? __('item') : __('items')} · {order.items_brief}
            </div>
          )}

          {/* Line 4: Total */}
          <div className="font-bold text-lg tabular-nums text-primary">
            {formatMoney(order.total, {
              currency: order.currency || currencyConfig.currency,
              symbol: order.currency_symbol || currencyConfig.symbol,
              thousandSep: currencyConfig.thousand_sep,
              decimalSep: currencyConfig.decimal_sep,
              position: currencyConfig.position,
              decimals: currencyConfig.decimals,
            })}
          </div>
        </div>

        {/* Chevron */}
        <ChevronRight className="w-5 h-5 text-muted-foreground flex-shrink-0" />
      </div>
    </Link>
  );
}
