'use client';

import { useEffect } from 'react';
import Link from 'next/link';
import { AlertCircle, RotateCcw } from 'lucide-react';

import { Button } from '@/components/ui/button';

interface ErrorProps {
  error: Error & { digest?: string };
  reset: () => void;
}

export default function DashboardError({ error, reset }: ErrorProps) {
  useEffect(() => {
    // Forward to the browser console so the dev sees the stack while the
    // user sees the friendly UI. The server already wrote an error_events
    // row through the page-level error pipeline.

    console.error('Dashboard render error:', error);
  }, [error]);

  return (
    <div className="flex items-start justify-center min-h-[60vh] p-6">
      <div className="max-w-md w-full bg-background border rounded-lg p-6 shadow-sm">
        <div className="flex items-center gap-3 mb-4">
          <div className="rounded-full bg-red-100 p-2">
            <AlertCircle className="h-5 w-5 text-red-600" />
          </div>
          <h1 className="text-lg font-semibold">Something went wrong</h1>
        </div>

        <p className="text-sm text-muted-foreground mb-4">
          The page hit an unexpected error. The team has been notified
          {error.digest ? ' (ref: ' : '.'}
          {error.digest ? <code className="font-mono text-xs">{error.digest}</code> : null}
          {error.digest ? ').' : ''}
        </p>

        <div className="flex items-center gap-2">
          <Button onClick={reset} size="sm">
            <RotateCcw className="h-3.5 w-3.5 mr-1.5" />
            Try again
          </Button>
          <Link
            href={'/' as never}
            className="text-sm text-muted-foreground hover:text-foreground underline"
          >
            Back to dashboard
          </Link>
        </div>
      </div>
    </div>
  );
}