import type { LoaderFunctionArgs } from "@remix-run/node";
import { json } from "@remix-run/node";
import { useLoaderData, useSearchParams } from "@remix-run/react";
import db from "../db.server";

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const url = new URL(request.url);
  const level = url.searchParams.get("level") ?? "all";
  const page = Math.max(1, parseInt(url.searchParams.get("page") ?? "1", 10));
  const perPage = 50;

  const where = level !== "all" ? { level } : {};

  const [logs, total] = await Promise.all([
    db.adminLog.findMany({
      where,
      orderBy: { createdAt: "desc" },
      skip: (page - 1) * perPage,
      take: perPage,
    }),
    db.adminLog.count({ where }),
  ]);

  return json({
    logs: logs.map((l) => ({
      id: l.id,
      level: l.level,
      message: l.message,
      context: l.context,
      createdAt: l.createdAt.toISOString(),
    })),
    total,
    page,
    totalPages: Math.ceil(total / perPage),
    level,
  });
};

const levelColors: Record<string, { bg: string; text: string }> = {
  error: { bg: "#fee2e2", text: "#991b1b" },
  warn: { bg: "#fef3c7", text: "#92400e" },
  info: { bg: "#dbeafe", text: "#1e40af" },
};

export default function AdminLogs() {
  const { logs, total, page, totalPages, level } = useLoaderData<typeof loader>();
  const [, setSearchParams] = useSearchParams();

  return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "1.5rem" }}>
        <h1 style={{ margin: 0, fontSize: "1.5rem" }}>Logs ({total})</h1>
        <div style={{ display: "flex", gap: "0.5rem" }}>
          {["all", "error", "warn", "info"].map((l) => (
            <button
              key={l}
              onClick={() => setSearchParams({ level: l, page: "1" })}
              style={{
                padding: "0.375rem 0.75rem",
                border: "1px solid #d1d5db",
                borderRadius: "4px",
                background: level === l ? "#111" : "white",
                color: level === l ? "white" : "#374151",
                cursor: "pointer",
                fontSize: "0.8125rem",
              }}
            >
              {l === "all" ? "Tous" : l}
            </button>
          ))}
        </div>
      </div>

      <div style={{ background: "white", borderRadius: "8px", boxShadow: "0 1px 3px rgba(0,0,0,0.1)", overflow: "hidden" }}>
        {logs.map((log) => {
          const colors = levelColors[log.level] ?? levelColors.info;
          let contextObj: Record<string, unknown> | null = null;
          try {
            if (log.context) contextObj = JSON.parse(log.context);
          } catch { /* ignore */ }

          return (
            <div key={log.id} style={{ padding: "0.75rem 1rem", borderBottom: "1px solid #e5e7eb" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "0.25rem" }}>
                <span style={{
                  display: "inline-block",
                  padding: "0.125rem 0.5rem",
                  borderRadius: "4px",
                  fontSize: "0.75rem",
                  fontWeight: 500,
                  background: colors.bg,
                  color: colors.text,
                }}>
                  {log.level}
                </span>
                <span style={{ fontSize: "0.75rem", color: "#6b7280" }}>
                  {new Date(log.createdAt).toLocaleString("fr-FR")}
                </span>
              </div>
              <div style={{ fontSize: "0.875rem", marginTop: "0.25rem" }}>{log.message}</div>
              {contextObj && (
                <pre style={{ fontSize: "0.75rem", color: "#6b7280", margin: "0.25rem 0 0", whiteSpace: "pre-wrap", wordBreak: "break-all" }}>
                  {JSON.stringify(contextObj, null, 2)}
                </pre>
              )}
            </div>
          );
        })}
        {logs.length === 0 && (
          <div style={{ padding: "2rem", textAlign: "center", color: "#6b7280" }}>
            Aucun log trouve
          </div>
        )}
      </div>

      {totalPages > 1 && (
        <div style={{ display: "flex", justifyContent: "center", gap: "0.5rem", marginTop: "1rem" }}>
          {Array.from({ length: Math.min(totalPages, 10) }, (_, i) => i + 1).map((p) => (
            <button
              key={p}
              onClick={() => setSearchParams({ level, page: String(p) })}
              style={{
                padding: "0.375rem 0.625rem",
                border: "1px solid #d1d5db",
                borderRadius: "4px",
                background: page === p ? "#111" : "white",
                color: page === p ? "white" : "#374151",
                cursor: "pointer",
                fontSize: "0.8125rem",
              }}
            >
              {p}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}