import { AlertTriangle, RefreshCw } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

/**
 * Shared failure state for data-driven pages.
 *
 * Previously these pages rendered "404 Not Found" (or an empty state) when a
 * relay query failed, which told users the content had been deleted — false and
 * unactionable. This keeps the failure honest and gives a retry path.
 */
export function ErrorState({
  title = 'Couldn’t load this',
  description = 'The network request failed. Check your connection and try again.',
  onRetry,
  className,
}: {
  title?: string;
  description?: string;
  onRetry?: () => void;
  className?: string;
}) {
  return (
    <Card className={cn('border-2 border-dashed border-red-500/30 bg-black/50', className)}>
      <CardContent className="py-12 text-center">
        <AlertTriangle className="mx-auto mb-4 h-12 w-12 text-red-500/60" />
        <p className="mb-1 font-bold uppercase tracking-wide text-white">{title}</p>
        <p className="mx-auto mb-5 max-w-sm text-sm text-gray-400">{description}</p>
        {onRetry && (
          <Button onClick={onRetry} className="gap-2 bg-white/10 font-bold uppercase hover:bg-white/20">
            <RefreshCw className="h-4 w-4" />
            Try again
          </Button>
        )}
      </CardContent>
    </Card>
  );
}

/** Full-page failure state (with app chrome) for route-level data errors. */
export function PageError(props: {
  title?: string;
  description?: string;
  onRetry?: () => void;
}) {
  return (
    <>
      <div className="container mx-auto max-w-4xl px-4 py-8">
        <ErrorState {...props} />
      </div>
    </>
  );
}