"use client";

// [DBG-r3p1] error boundary ของ taskpane — แสดง error จริงแทนหน้า
// "Application error: a client-side exception has occurred" ของ Next
// (ไว้ใช้ debug ใน webview ของ Word ที่เปิด devtools ไม่ได้ — คงไว้ถาวร
//  เพราะดีกว่าข้อความกลาง ๆ ของ Next เสมอ สำหรับ add-in ที่ผู้ใช้เปิด console ไม่ได้)
export default function WordAddinError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <div className="flex min-h-screen flex-col gap-3 p-4">
      <h2 className="font-display text-base font-semibold text-ink">task pane ทำงานผิดพลาด</h2>
      <p className="text-sm text-ink-soft">
        เกิดข้อผิดพลาดฝั่งหน้าเว็บ — แจ้งข้อความด้านล่าง (ถ่ายภาพหน้าจอนี้มาด้วย) แล้วกดลองใหม่
      </p>
      <pre
        className="max-h-64 overflow-auto whitespace-pre-wrap rounded-lg border border-line bg-canvas p-3 text-xs text-error-ink"
        aria-label="รายละเอียดข้อผิดพลาด"
      >
        {error.message}
        {error.digest ? `\n[digest ${error.digest}]` : ""}
        {error.stack ? `\n\n${error.stack}` : ""}
      </pre>
      <button
        type="button"
        className="focus-ring w-fit rounded-md border border-line bg-white px-3 py-1.5 text-sm text-ink hover:border-primary hover:text-primary"
        onClick={reset}
      >
        ลองใหม่
      </button>
    </div>
  );
}