"use client";

import Link from "next/link";
import { LOG_CATEGORY_LABELS, LOG_CATEGORY_COLORS, type LogCategory, type LogRange, type LogRow } from "@/lib/logConstants";

function fmt(ts: string) {
  return new Date(ts).toLocaleString("de-DE", {
    day: "2-digit",
    month: "2-digit",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
  });
}

export function LogList({
  rows,
  category,
  range,
  page,
  pageCount,
}: {
  rows: LogRow[];
  category: LogCategory | "all";
  range: LogRange;
  page: number;
  pageCount: number;
}) {
  const baseQuery = (p: number) => {
    const params = new URLSearchParams();
    if (category !== "all") params.set("cat", category);
    params.set("range", range);
    if (p > 1) params.set("page", String(p));
    const s = params.toString();
    return s ? `?${s}` : "";
  };

  return (
    <div className="flex flex-col gap-1.5">
      {rows.map((row) => {
        const color = LOG_CATEGORY_COLORS[row.category];
        const metaEntries = Object.entries(row.meta).filter(([, v]) => v);
        const expandable = Boolean(row.stack) || metaEntries.length > 0;
        const isError = row.category === "error" || row.category === "warn";

        const head = (
          <div className="flex items-start gap-3">
            <span className="mt-1.5 w-2 h-2 rounded-full shrink-0" style={{ background: color }} />
            <div className="min-w-0 flex-1">
              <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
                <span
                  className="text-[0.6rem] uppercase tracking-[0.12em] rounded px-1.5 py-0.5"
                  style={{ background: `${color}1f`, color }}
                >
                  {LOG_CATEGORY_LABELS[row.category]}
                </span>
                <span className="text-[0.7rem] text-[var(--rk-ink-muted)] tabular-nums">{fmt(row.ts)}</span>
                <span className="text-[0.7rem] text-[var(--rk-ink-muted)]">· {row.actor}</span>
              </div>
              <p className={`mt-1 text-sm ${isError ? "text-[var(--rk-ink)] font-medium" : "text-[var(--rk-ink)]"}`}>
                {row.title}
              </p>
              {row.detail && (
                <p className="mt-0.5 text-xs text-[var(--rk-ink-muted)] break-words">{row.detail}</p>
              )}
              {row.route && row.route.startsWith("/") && (
                <Link
                  href={row.route}
                  className="mt-1 inline-block text-[0.7rem] text-[var(--rk-accent)] hover:underline break-all"
                >
                  {row.route}
                </Link>
              )}
            </div>
          </div>
        );

        if (!expandable) {
          return (
            <div key={row.id} className="border border-white/10 rounded-xl px-4 py-3">
              {head}
            </div>
          );
        }

        return (
          <details key={row.id} className="group border border-white/10 rounded-xl px-4 py-3 open:border-white/20">
            <summary className="cursor-pointer list-none [&::-webkit-details-marker]:hidden">
              <div className="flex items-start gap-2">
                <div className="flex-1">{head}</div>
                <svg
                  width="12"
                  height="12"
                  viewBox="0 0 8 8"
                  fill="none"
                  className="mt-1.5 opacity-50 shrink-0 transition-transform group-open:rotate-180"
                >
                  <path d="M1.5 2.5L4 5l2.5-2.5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </div>
            </summary>

            <div className="mt-3 pl-5 flex flex-col gap-3">
              {metaEntries.length > 0 && (
                <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-[0.7rem]">
                  {metaEntries.map(([k, v]) => (
                    <div key={k} className="contents">
                      <dt className="text-[var(--rk-ink-muted)] uppercase tracking-[0.08em]">{k}</dt>
                      <dd className="text-[var(--rk-ink)] break-all">{v}</dd>
                    </div>
                  ))}
                </dl>
              )}
              {row.stack && (
                <pre className="text-[0.7rem] leading-relaxed text-[var(--rk-ink-muted)] bg-black/30 border border-white/10 rounded-lg p-3 overflow-x-auto whitespace-pre">
                  {row.stack}
                </pre>
              )}
            </div>
          </details>
        );
      })}

      {pageCount > 1 && (
        <div className="mt-4 flex items-center justify-between text-xs">
          {page > 1 ? (
            <Link
              href={baseQuery(page - 1)}
              className="border border-white/20 rounded-lg px-3 py-1.5 hover:border-white/50 transition-colors"
            >
              ← Neuer
            </Link>
          ) : (
            <span />
          )}
          <span className="text-[var(--rk-ink-muted)] tabular-nums">
            Seite {page} / {pageCount}
          </span>
          {page < pageCount ? (
            <Link
              href={baseQuery(page + 1)}
              className="border border-white/20 rounded-lg px-3 py-1.5 hover:border-white/50 transition-colors"
            >
              Älter →
            </Link>
          ) : (
            <span />
          )}
        </div>
      )}
    </div>
  );
}