import Link from 'next/link';
import type { SellerDashboardMetrics } from '@alqove/api-client';
import { EmptyState } from './empty-state';
import { cn } from '@/lib/utils';

interface Row {
  label: string;
  count: number;
  tone: 'urgent' | 'warn' | 'calm';
  bucket: 'overdue' | 'today' | 'week';
}

const TONE_CLASS: Record<Row['tone'], string> = {
  urgent: 'text-terracotta',
  warn:   'text-ink',
  calm:   'text-forest/70',
};

export function OrdersActionList({ counts }: { counts: SellerDashboardMetrics['action_counts'] }) {
  const rows: Row[] = [
    { label: 'Overdue',   count: counts.orders_overdue,   tone: 'urgent', bucket: 'overdue' },
    { label: 'Today',     count: counts.orders_today,     tone: 'warn',   bucket: 'today' },
    { label: 'This week', count: counts.orders_this_week, tone: 'calm',   bucket: 'week' },
  ];

  const totalUrgent = rows.reduce((sum, r) => sum + r.count, 0);

  if (totalUrgent === 0) {
    return (
      <div className="rounded-md border border-forest/20 bg-white p-4">
        <div className="mb-2 text-xs uppercase tracking-wide text-forest/70">Orders needing action</div>
        <EmptyState title="Nothing urgent" description="All paid orders are shipped or still have time." />
      </div>
    );
  }

  return (
    <div className="rounded-md border border-forest/20 bg-white p-4">
      <div className="mb-2 text-xs uppercase tracking-wide text-forest/70">Orders needing action</div>
      <ul className="divide-y divide-forest/10">
        {rows.map((row) => (
          <li key={row.bucket}>
            <Link
              href={`/seller/orders?status=paid&bucket=${row.bucket}`}
              className="flex items-center justify-between py-2 text-sm hover:bg-bone/50"
            >
              <span className={cn('font-medium', TONE_CLASS[row.tone])}>{row.label}</span>
              <span className={cn('rounded-full px-2 py-0.5 text-xs font-semibold',
                row.count > 0 && row.tone === 'urgent' ? 'bg-terracotta/10 text-terracotta' :
                row.count > 0 ? 'bg-forest/10 text-forest' : 'bg-ink/5 text-ink/50')}>
                {row.count}
              </span>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}