"use client";

import Link from "next/link";
import { useOrdersData } from "@/features/dashboard/overview-data";
import { OrderStatusBadge } from "@/components/shared/status-badges";
import { ErrorState, TableSkeleton } from "@/components/shared/states";
import { formatDateTime, truncate } from "@/lib/format";
import { useI18n, useT } from "@/i18n";
import { friendlyErrorMessage } from "@/lib/errors";

export function RecentOrdersWidget() {
  const t = useT();
  const { locale } = useI18n();
  const recentOrders = useOrdersData({ page: 1, rows: 5 });

  return (
    <div>
      {recentOrders.isLoading ? (
        <TableSkeleton rows={4} cols={2} />
      ) : recentOrders.isError ? (
        <ErrorState message={friendlyErrorMessage(recentOrders.error, t)} onRetry={() => recentOrders.refetch()} />
      ) : (recentOrders.data?.Model ?? []).length === 0 ? (
        <ErrorState message={t("orders.empty")} />
      ) : (
        <ul className="divide-y">
          {(recentOrders.data?.Model ?? []).map((order) => (
            <li key={order.uuid}>
              <Link
                href={`/orders/${order.uuid}`}
                className="flex items-center justify-between gap-3 py-3 transition-colors first:pt-0 hover:bg-muted/40"
              >
                <div className="min-w-0">
                  <p className="truncate text-sm font-semibold text-foreground">
                    {order.order_number}
                    <span className="ms-2 font-normal text-muted-foreground">{order.customer_name}</span>
                  </p>
                  <p className="mt-0.5 truncate text-xs text-muted-foreground">
                    {truncate(order.dropoff_address, 44)}
                  </p>
                </div>
                <div className="flex shrink-0 flex-col items-end gap-1">
                  <OrderStatusBadge status={order.status} label={order.status_label} />
                  <span className="text-[11px] text-muted-foreground">
                    {formatDateTime(order.created_at, locale)}
                  </span>
                </div>
              </Link>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}