import Link from "next/link";
import { getErrorLogs } from "@/lib/api/admin";
import { formatDate } from "@/lib/format";
import { Pagination } from "@/components/ui/pagination";
import { cardClasses } from "@/components/ui/styles";
import { cn } from "@/lib/utils";

export default async function AdminErrorLogsPage({
  searchParams,
}: {
  searchParams: Promise<{ page?: string }>;
}) {
  const { page } = await searchParams;
  const { data: logs, meta } = await getErrorLogs(page ? Number(page) : 1);

  return (
    <div>
      <h2 className="text-lg font-semibold">Error Log</h2>
      <p className="mt-1 text-sm text-kolabora-neutral-dark/70">
        Application errors (5xx) logged automatically — routine validation/auth/404 errors are not
        logged here (FR-110).
      </p>

      <div className={cn("scroll-fade-x mt-4 overflow-x-auto", cardClasses())}>
        <table className="w-full text-left text-sm">
          <thead className="bg-kolabora-neutral-dark/5 text-xs uppercase text-kolabora-neutral-dark/70">
            <tr>
              <th className="px-4 py-2">Time</th>
              <th className="px-4 py-2">Exception</th>
              <th className="px-4 py-2">Message</th>
              <th className="px-4 py-2">URL</th>
              <th className="px-4 py-2">User</th>
              <th className="px-4 py-2">Action</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-kolabora-neutral-dark/10">
            {logs.length === 0 && (
              <tr>
                <td colSpan={6} className="px-4 py-6 text-center text-kolabora-neutral-dark/70">
                  No errors logged yet.
                </td>
              </tr>
            )}
            {logs.map((log) => (
              <tr key={log.id}>
                <td className="px-4 py-2 whitespace-nowrap">{formatDate(log.created_at)}</td>
                <td className="px-4 py-2 font-mono text-xs">{log.exception_class}</td>
                <td className="max-w-sm truncate px-4 py-2" title={log.message}>
                  {log.message}
                </td>
                <td className="max-w-xs truncate px-4 py-2 text-xs text-kolabora-neutral-dark/70" title={log.url ?? undefined}>
                  {log.method} {log.url}
                </td>
                <td className="px-4 py-2">{log.user ?? "-"}</td>
                <td className="px-4 py-2">
                  <Link
                    href={`/admin/error-logs/${log.id}`}
                    className="text-sm font-medium text-kolabora-primary hover:underline"
                  >
                    Detail
                  </Link>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <Pagination meta={meta} basePath="/admin/error-logs" />
    </div>
  );
}