"use client";

import { AlertTriangle, RotateCcw } from "lucide-react";
import Link from "next/link";
import { useEffect } from "react";
import { Kbd, Panel } from "@/components/ui";

export default function ErrorPage({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
  useEffect(() => {
    console.error(error);
  }, [error]);
  return (
    <div className="mx-auto max-w-lg py-12 sm:py-20">
      <Panel dense>
        <div className="flex flex-col items-center gap-2 px-4 py-10 text-center">
          <span className="font-mono text-[11px] font-semibold tracking-wider text-danger">RENDER ERROR</span>
          <AlertTriangle className="mt-1 size-6 text-danger" aria-hidden />
          <h1 className="mt-1 text-lg font-semibold leading-tight">Something went wrong while rendering</h1>
          <p className="max-w-sm text-[13px] text-fg-muted">The sensors and the API are unaffected; only this view failed. Retrying usually works — the gateway may have been warming up.</p>
          {(error.digest || error.message) && <code className="mt-1 max-w-full truncate rounded-sm border border-line bg-panel-2 px-2 py-0.5 font-mono text-[11px] text-fg-subtle" title={error.message}>{error.digest ?? error.message}</code>}
          <div className="mt-4 flex flex-wrap justify-center gap-2 text-[12.5px]">
            <button type="button" onClick={reset} className="inline-flex h-8 items-center gap-1.5 rounded-md border border-signal/40 bg-signal-soft px-3 text-signal hover:border-signal"><RotateCcw className="size-3.5" /> Try again</button>
            <Link href="/live" className="inline-flex h-8 items-center rounded-md border border-line bg-panel px-3 hover:border-line-strong">Live feed</Link>
            <Link href="/explore" className="inline-flex h-8 items-center rounded-md border border-line bg-panel px-3 hover:border-line-strong">Explore</Link>
          </div>
          <p className="mt-3 flex items-center gap-1.5 text-[11px] text-fg-subtle">
            <Kbd>⌘</Kbd><Kbd>K</Kbd> opens search from any page.
          </p>
        </div>
      </Panel>
    </div>
  );
}