'use client';

import { AlertTriangle } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';

export function isBackendMissing(error: unknown): boolean {
  const status = (
    error as { response?: { status?: number }; status?: number } | null
  )?.response?.status;
  return status === 404 || status === 501;
}

export function isUnauthorized(error: unknown): boolean {
  const status = (
    error as { response?: { status?: number } } | null
  )?.response?.status;
  return status === 401 || status === 403;
}

export function getErrorMessage(error: unknown, fallback = 'Request failed') {
  return (
    (error as { response?: { data?: { message?: string } } } | null)?.response
      ?.data?.message ?? fallback
  );
}

export function EndpointPending({
  title = 'Backend endpoint not yet deployed',
  description,
}: {
  title?: string;
  description?: string;
}) {
  return (
    <Card className="border-dashed border-amber-300 bg-amber-50/40">
      <CardContent className="py-10">
        <div className="mx-auto flex max-w-xl flex-col items-center gap-3 text-center">
          <div className="rounded-full bg-amber-100 p-3 text-amber-700">
            <AlertTriangle className="size-6" />
          </div>
          <h3 className="text-base font-semibold text-amber-900">{title}</h3>
          <p className="text-sm text-amber-800/80">
            {description ??
              'This page is fully wired to the spec, but the backend endpoint has not shipped yet. The page will start showing live data automatically once the backend is deployed.'}
          </p>
        </div>
      </CardContent>
    </Card>
  );
}

export function FetchError({
  error,
  fallback = 'Could not load data',
}: {
  error: unknown;
  fallback?: string;
}) {
  if (isBackendMissing(error)) return <EndpointPending />;
  return (
    <Card className="border-dashed border-red-300 bg-red-50/40">
      <CardContent className="py-10">
        <div className="mx-auto flex max-w-xl flex-col items-center gap-3 text-center">
          <div className="rounded-full bg-red-100 p-3 text-red-700">
            <AlertTriangle className="size-6" />
          </div>
          <h3 className="text-base font-semibold text-red-900">{fallback}</h3>
          <p className="text-sm text-red-800/80">{getErrorMessage(error)}</p>
        </div>
      </CardContent>
    </Card>
  );
}