'use client';

import { useMemo } from 'react';
import { cn, formatCurrency } from '@/lib/utils';
import type { BadgeVariant } from '@/components/ui/badge';
import type { OrderStatus } from '@/services/orders.service';

export function orderStatusVariant(status: string): BadgeVariant {
  switch (status) {
    case 'OPEN':
      return 'info';
    case 'PARTIALLY_MATCHED':
    case 'PAYMENT_PENDING':
    case 'PAYMENT_SUBMITTED':
    case 'MINIMUM_PENDING':
      return 'warning';
    case 'MATCHED':
      return 'primary';
    case 'PAYMENT_CONFIRMED':
      return 'info';
    case 'READY_FOR_SETTLEMENT':
      return 'primary';
    case 'COMPLETED':
      return 'success';
    case 'CANCELLED':
    case 'REJECTED':
    case 'EXPIRED':
      return 'neutral';
    case 'DISPUTED':
      return 'danger';
    default:
      return 'info';
  }
}

interface MatchingProgressProps {
  matchedAmount: number;
  totalAmount: number;
  minimumRequired: number;
  status: OrderStatus | string;
  className?: string;
  showLabels?: boolean;
}

export function MatchingProgress({
  matchedAmount,
  totalAmount,
  minimumRequired,
  status,
  className,
  showLabels = true,
}: MatchingProgressProps) {
  const matched = Number(matchedAmount) || 0;
  const total = Number(totalAmount) || 0;
  const min = Number(minimumRequired) || 0;

  const matchPct = useMemo(() => {
    if (total <= 0) return 0;
    return Math.min(100, (matched / total) * 100);
  }, [matched, total]);

  const minPct = useMemo(() => {
    if (min <= 0) return matched > 0 ? 100 : 0;
    return Math.min(100, (matched / min) * 100);
  }, [matched, min]);

  const remaining = Math.max(0, total - matched);
  const neededForMin = Math.max(0, min - matched);

  let statusText: string | null = null;
  if (status === 'PARTIALLY_MATCHED') {
    statusText = `Waiting for ${formatCurrency(neededForMin)} more to reach minimum purchase of ${formatCurrency(min)}`;
  } else if (status === 'MINIMUM_PENDING') {
    statusText = 'Minimum purchase pending - waiting for additional matches';
  } else if (status === 'READY_FOR_SETTLEMENT') {
    statusText = 'Ready for settlement';
  }

  const showMinBar = min > 0;

  return (
    <div className={cn('space-y-3', className)}>
      <div>
        <div className="flex items-center justify-between text-xs">
          <span className="font-medium text-ink-muted">Matching Progress</span>
          <span className="font-semibold text-ink">
            {formatCurrency(matched)} / {formatCurrency(total)}
          </span>
        </div>
        <div className="mt-1.5 h-2 w-full overflow-hidden rounded-full bg-surface-raised">
          <div
            className="h-full rounded-full bg-primary-500 transition-all"
            style={{ width: `${matchPct}%` }}
          />
        </div>
        {showLabels && (
          <p className="mt-1 text-xs text-ink-faint">
            {matchPct >= 100
              ? 'Fully matched'
              : `${matchPct.toFixed(0)}% matched${
                  remaining > 0 ? ` · ${formatCurrency(remaining)} remaining` : ''
                }`}
          </p>
        )}
      </div>

      {showMinBar && (
        <div>
          <div className="flex items-center justify-between text-xs">
            <span className="font-medium text-ink-muted">Minimum Purchase</span>
            <span className="font-semibold text-ink">
              {formatCurrency(matched)} / {formatCurrency(min)}
            </span>
          </div>
          <div className="mt-1.5 h-2 w-full overflow-hidden rounded-full bg-surface-raised">
            <div
              className={cn(
                'h-full rounded-full transition-all',
                minPct >= 100 ? 'bg-emerald-500' : 'bg-amber-500',
              )}
              style={{ width: `${minPct}%` }}
            />
          </div>
          {showLabels && (
            <p className="mt-1 text-xs text-ink-faint">
              {minPct >= 100
                ? 'Minimum purchase reached'
                : `${minPct.toFixed(0)}% · ${formatCurrency(neededForMin)} more needed`}
            </p>
          )}
        </div>
      )}

      {statusText && (
        <div
          className={cn(
            'rounded-lg px-3 py-2 text-xs font-medium',
            status === 'READY_FOR_SETTLEMENT'
              ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-300'
              : 'bg-amber-500/10 text-amber-600 dark:text-amber-300',
          )}
        >
          {statusText}
        </div>
      )}
    </div>
  );
}