"use client";

import Link from "next/link";
import { useEffect } from "react";

export default function AppError({
  error,
  unstable_retry,
}: {
  error: Error & { digest?: string };
  unstable_retry: () => void;
}) {
  useEffect(() => {
    console.error("Sellfin route render failed", error);
  }, [error]);

  return (
    <section className="mx-auto max-w-2xl rounded-2xl border border-rose-200 bg-white p-6 shadow-sm dark:border-rose-900 dark:bg-slate-900">
      <div className="text-xs font-black uppercase tracking-[0.14em] text-rose-700">Halaman gagal dimuat</div>
      <h1 className="mt-2 text-xl font-black text-slate-950 dark:text-white">Data belum bisa ditampilkan</h1>
      <p className="mt-2 text-sm leading-6 text-slate-600 dark:text-slate-300">Coba muat ulang halaman. Jika masalah berulang, buka bagian lain sementara dan sampaikan kode error ini ke admin.</p>
      {error.digest ? <p className="mt-3 rounded-lg bg-slate-50 px-3 py-2 font-mono text-xs text-slate-600 dark:bg-slate-950 dark:text-slate-300">Kode error: {error.digest}</p> : null}
      <div className="mt-5 flex flex-wrap gap-2">
        <button className="ui-button ui-button-primary" onClick={() => unstable_retry()} type="button">Coba lagi</button>
        <Link className="ui-button ui-button-secondary" href="/finance?shop_id=all">Profit</Link>
        <Link className="ui-button ui-button-secondary" href="/reports?shop_id=all">Laporan</Link>
        <Link className="ui-button ui-button-secondary" href="/optimizer?shop_id=all">AI Agent Profit</Link>
      </div>
    </section>
  );
}