import { useState } from 'react';
import { Link } from 'react-router';
import { useQueryClient } from '@tanstack/react-query';
import { AlertTriangle } from 'lucide-react';
import { useClient } from 'hooks/useClient';
import { Button } from '@/components/ui/button';

type ScreenErrorFallbackProps = { error: Error; reset: () => void };

/**
 * What the owner sees instead of a white screen.
 *
 * The recovery that matters is the last one. Every screen in the app renders a Workspace whose layout is
 * a jsonb blob written by the client and never validated on the way back in, so a malformed one throws
 * during render — and until this existed, the only way out was a psql session. Dashboards are left alone:
 * they are user-created and hold content, whereas a screen's layout is just where its panes sit.
 */
export const ScreenErrorFallback = ({ error, reset }: ScreenErrorFallbackProps) => {
  const client = useClient();
  const queryClient = useQueryClient();
  const [confirming, setConfirming] = useState(false);
  const [resetting, setResetting] = useState(false);

  const resetScreenLayouts = async () => {
    if (!confirming) return setConfirming(true);
    setResetting(true);
    try {
      const state = await client.get<Record<string, unknown>>('/dashboards');
      const patch = Object.fromEntries(
        Object.keys(state)
          .filter((key) => key.startsWith('screens/'))
          .map((key) => [key, null]),
      );
      if (Object.keys(patch).length > 0) await client.patch('/dashboards', patch);
      queryClient.removeQueries({ queryKey: ['DASHBOARD_STATE'] });
      window.location.reload();
    } catch (err) {
      console.error('[screen-error] could not reset screen layouts', err);
      setResetting(false);
      setConfirming(false);
    }
  };

  return (
    <div className="mx-auto flex h-full max-w-2xl flex-col justify-center gap-6 p-6">
      <div className="flex items-start gap-3">
        <AlertTriangle className="mt-1 size-6 shrink-0 text-amber-500" />
        <div className="space-y-1">
          <h1 className="text-xl font-semibold">This screen failed to render</h1>
          <p className="text-muted-foreground text-sm">
            Nothing was lost — this is a display failure, not a data one. Agent transcripts, jobs and files are
            untouched.
          </p>
        </div>
      </div>

      <details className="bg-muted/40 rounded-md border p-3 text-sm">
        <summary className="cursor-pointer select-none font-medium">{error.message || 'Unknown error'}</summary>
        <pre className="mt-2 max-h-64 overflow-auto whitespace-pre-wrap text-xs opacity-70">{error.stack}</pre>
      </details>

      <div className="flex flex-wrap gap-2">
        <Button onClick={reset}>Try again</Button>
        <Button variant="secondary" onClick={() => window.location.reload()}>
          Reload
        </Button>
        <Button variant="secondary" asChild>
          <Link to="/">Go home</Link>
        </Button>
      </div>

      <div className="space-y-2 border-t pt-4">
        <p className="text-muted-foreground text-sm">
          If it fails again in the same place, a saved panel layout is the usual cause. Resetting puts every screen's
          panes back to their defaults. <strong>Your dashboards are not touched.</strong>
        </p>
        <Button variant={confirming ? 'destructive' : 'outline'} disabled={resetting} onClick={resetScreenLayouts}>
          {resetting ? 'Resetting…' : confirming ? 'Yes — reset every screen layout' : 'Reset screen layouts'}
        </Button>
      </div>
    </div>
  );
};