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';
import { useTranslation } from '@/lib/i18n';

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 { t } = useTranslation();
  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">{t('screenError.title')}</h1>
          <p className="text-muted-foreground text-sm">{t('screenError.description')}</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 || t('screenError.unknownError')}
        </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}>{t('screenError.tryAgain')}</Button>
        <Button variant="secondary" onClick={() => window.location.reload()}>
          {t('screenError.reload')}
        </Button>
        <Button variant="secondary" asChild>
          <Link to="/">{t('screenError.goHome')}</Link>
        </Button>
      </div>

      <div className="space-y-2 border-t pt-4">
        <p className="text-muted-foreground text-sm">
          {t('screenError.resetHint')} <strong>{t('screenError.dashboardsSafe')}</strong>
        </p>
        <Button variant={confirming ? 'destructive' : 'outline'} disabled={resetting} onClick={resetScreenLayouts}>
          {resetting ? t('screenError.resetting') : confirming ? t('screenError.resetConfirm') : t('screenError.reset')}
        </Button>
      </div>
    </div>
  );
};