'use client'

import Link from 'next/link'
import DepartmentShell from '@/components/department-dashboard/DepartmentShell'

export default function CoreMetricError({ reset }: { error: Error; reset: () => void }) {
  return (
    <DepartmentShell>
      <main className="flex px-4 py-10 sm:px-6 lg:px-8">
        <div className="mx-auto w-full max-w-xl rounded-xl border border-[#e2e8f0] bg-white p-6 shadow-[0_6px_18px_rgba(15,23,42,0.05)] sm:p-8">
          <p className="text-sm font-bold text-[#b4231c]">指标明细暂时无法加载</p>
          <h1 className="mt-3 text-2xl font-bold">数据读取出现异常</h1>
          <p className="mt-3 text-sm leading-6 text-slate-600">请重新加载；若问题持续，可先返回核心指标总览。</p>
          <div className="mt-6 flex flex-wrap gap-3">
            <button onClick={reset} className="min-h-11 rounded-xl bg-[#247fd3] px-4 text-sm font-bold text-white transition-colors hover:bg-[#176fc1] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#78aee9]">重新加载</button>
            <Link href="/workspaces/dashboard/core-metrics" className="inline-flex min-h-11 items-center rounded-xl bg-[#edf5ff] px-4 text-sm font-bold text-[#176fc1] transition-colors hover:bg-[#dcecff] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#78aee9]">返回核心指标</Link>
          </div>
        </div>
      </main>
    </DepartmentShell>
  )
}