"use client";

import { useRouter } from "next/navigation";
import { WifiOff, ServerCrash, Wrench, AlertCircle, RefreshCw } from "lucide-react";
import { Button } from "@/components/ui";
import { describeError } from "@/lib/use-api";
import { ApiClientError } from "@/lib/api";
import { cn } from "@/lib/utils";

/** Polished error state for connection loss, server outage and maintenance. */
export function ApiErrorState({ error, retry, className, compact }: { error: unknown; retry?: () => void; className?: string; compact?: boolean }) {
  const d = describeError(error);
  const Icon = d.kind === "network" ? WifiOff : d.kind === "maintenance" ? Wrench : d.kind === "server" ? ServerCrash : AlertCircle;
  return (
    <div className={cn("surface rounded-lg text-center", compact ? "px-4 py-6" : "px-6 py-12", className)} role="alert">
      <div className={cn("mx-auto grid place-items-center rounded-full bg-surface-2 text-fg-2", compact ? "mb-3 h-10 w-10" : "mb-4 h-14 w-14", d.kind === "maintenance" && "text-accent")}>
        <Icon className={compact ? "h-5 w-5" : "h-6 w-6"} />
      </div>
      <h3 className={cn("font-semibold tracking-tight", compact ? "text-base" : "text-lg")}>{d.title}</h3>
      <p className="mx-auto mt-1.5 max-w-sm text-sm text-fg-3">{d.description}</p>
      {retry ? (
        <Button variant="secondary" size={compact ? "sm" : "md"} className="mt-5" onClick={retry}>
          <RefreshCw className="h-4 w-4" /> Try again
        </Button>
      ) : null}
    </div>
  );
}

/** Server components can't retry in place — this reloads the route from the client. */
export function ServerUnavailable({ className, compact }: { className?: string; compact?: boolean }) {
  const router = useRouter();
  return <ApiErrorState error={new ApiClientError(503, "UNAVAILABLE", "Server unavailable. Please try again shortly.")} retry={() => router.refresh()} className={className} compact={compact} />;
}