"use client";

import Link from "next/link";
import { useRecentDrivers } from "@/features/dashboard/overview-data";
import { DriverStatusBadge } from "@/components/shared/status-badges";
import { ErrorState, TableSkeleton } from "@/components/shared/states";
import { useT } from "@/i18n";
import { friendlyErrorMessage } from "@/lib/errors";

export function RecentCaptainsWidget() {
  const t = useT();
  const recentCaptains = useRecentDrivers({ page: 1, rows: 5 });

  return (
    <div>
      {recentCaptains.isLoading ? (
        <TableSkeleton rows={4} cols={2} />
      ) : recentCaptains.isError ? (
        <ErrorState message={friendlyErrorMessage(recentCaptains.error, t)} onRetry={() => recentCaptains.refetch()} />
      ) : (recentCaptains.data?.Model ?? []).length === 0 ? (
        <ErrorState message={t("drivers.empty")} />
      ) : (
        <ul className="grid min-w-0 gap-3 sm:grid-cols-2">
          {(recentCaptains.data?.Model ?? []).map((driver) => (
            <li key={driver.uuid} className="min-w-0">
              <Link
                href={`/captains/${driver.uuid}`}
                className="flex items-center gap-2.5 rounded-lg border p-3 transition-colors hover:bg-muted/40"
              >
                <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-primary-soft text-primary" aria-hidden>
                  {driver.name.slice(0, 1).toUpperCase()}
                </span>
                <div className="min-w-0 flex-1">
                  <p className="truncate text-sm font-semibold text-foreground">{driver.name}</p>
                  <p className="truncate text-xs text-muted-foreground">{driver.phone}</p>
                </div>
                <DriverStatusBadge
                  status={driver.status}
                  label={driver.status_label}
                  className="max-w-[45%] shrink-0 truncate"
                />
              </Link>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}