import Link from 'next/link';
import { Icon } from '@/components/marketing/icons';
import { Badge, orderStatusTone } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { EmptyState } from '@/components/ui/empty-state';

export type RecentOrder = {
  id: string;
  reference: string;
  customerName: string;
  productSummary: string;
  totalLabel: string;
  status: keyof typeof orderStatusTone | string;
  whenLabel: string;
};

export function RecentOrders({ orders }: { orders: RecentOrder[] }) {
  return (
    <Card>
      <CardHeader className="flex-row items-center justify-between gap-3 space-y-0">
        <CardTitle>Recent Orders</CardTitle>
        <Link href="/dashboard/orders" className="text-sm font-semibold text-primary hover:underline">
          View all
        </Link>
      </CardHeader>
      <CardContent>
        {orders.length === 0 ? (
          <EmptyState
            className="border-0 bg-transparent px-0 py-6 shadow-none"
            icon={<Icon name="orders" size={22} />}
            title="No orders yet"
            description="Orders from your customers will appear here."
          />
        ) : (
          <>
            <ul className="space-y-3 lg:hidden">
              {orders.map(order => (
                <li key={order.id}>
                  <Link href={`/dashboard/orders/${order.id}`} className="block rounded-[var(--radius-md)] border border-border p-3.5 transition-colors hover:bg-muted/60">
                    <div className="flex items-start justify-between gap-3">
                      <div className="min-w-0">
                        <p className="text-sm font-bold text-navy">{order.reference}</p>
                        <p className="mt-0.5 truncate text-sm text-muted-foreground">{order.customerName}</p>
                      </div>
                      <Badge tone={orderStatusTone[order.status] ?? 'neutral'}>{order.status}</Badge>
                    </div>
                    <p className="mt-2 truncate text-sm text-navy">{order.productSummary}</p>
                    <div className="mt-2 flex items-center justify-between text-sm">
                      <strong>{order.totalLabel}</strong>
                      <span className="text-xs text-muted-foreground">{order.whenLabel}</span>
                    </div>
                  </Link>
                </li>
              ))}
            </ul>
            <div className="hidden overflow-x-auto lg:block">
              <table className="w-full min-w-[36rem] text-left text-sm">
                <thead className="border-b border-border text-xs uppercase tracking-wide text-muted-foreground">
                  <tr>
                    <th className="pb-2 font-semibold">Order</th>
                    <th className="pb-2 font-semibold">Customer</th>
                    <th className="pb-2 font-semibold">Items</th>
                    <th className="pb-2 font-semibold">Total</th>
                    <th className="pb-2 font-semibold">Status</th>
                    <th className="pb-2 font-semibold">When</th>
                  </tr>
                </thead>
                <tbody>
                  {orders.map(order => (
                    <tr key={order.id} className="border-b border-border/70 last:border-0">
                      <td className="py-3 font-semibold text-navy">
                        <Link href={`/dashboard/orders/${order.id}`} className="hover:underline">{order.reference}</Link>
                      </td>
                      <td className="py-3">{order.customerName}</td>
                      <td className="py-3 text-muted-foreground">{order.productSummary}</td>
                      <td className="py-3 font-semibold">{order.totalLabel}</td>
                      <td className="py-3"><Badge tone={orderStatusTone[order.status] ?? 'neutral'}>{order.status}</Badge></td>
                      <td className="py-3 text-muted-foreground">{order.whenLabel}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </>
        )}
      </CardContent>
    </Card>
  );
}