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

export default async function AdminErrorLogDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const { data: log } = await getErrorLog(id);

  return (
    <div>
      <Link href="/admin/error-logs" className="text-sm font-medium text-kolabora-primary">
        &larr; Back to Error Log
      </Link>

      <h2 className="mt-4 text-lg font-semibold">{log.exception_class}</h2>
      <p className="mt-1 text-sm text-kolabora-neutral-dark/70">{log.message}</p>

      <dl className="mt-4 flex flex-col gap-1 text-sm text-kolabora-neutral-dark/70">
        <div className="flex gap-2">
          <dt className="font-medium">Time</dt>
          <dd>{formatDate(log.created_at)}</dd>
        </div>
        <div className="flex gap-2">
          <dt className="font-medium">Location</dt>
          <dd className="font-mono text-xs">
            {log.file}:{log.line}
          </dd>
        </div>
        {log.url && (
          <div className="flex gap-2">
            <dt className="font-medium">Request</dt>
            <dd className="font-mono text-xs">
              {log.method} {log.url}
            </dd>
          </div>
        )}
        {log.user && (
          <div className="flex gap-2">
            <dt className="font-medium">User</dt>
            <dd>{log.user}</dd>
          </div>
        )}
      </dl>

      {log.trace && (
        <div className="mt-6">
          <h3 className="text-sm font-semibold">Stack Trace</h3>
          <pre className={cn("mt-2 max-h-96 overflow-auto", cardClasses("bg-kolabora-neutral-dark/5 p-4 text-xs"))}>
            {log.trace}
          </pre>
        </div>
      )}
    </div>
  );
}