import { Card } from "@/components/ui/card";
import { getLocalDb } from "@/lib/local-db";
import type { AuditLogEntry } from "@/lib/local-db";

function levelBadge(level: AuditLogEntry["level"]) {
  if (level === "error") {
    return (
      <span className="inline-flex items-center rounded-full bg-red-100 px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-red-700">
        error
      </span>
    );
  }
  if (level === "warn") {
    return (
      <span className="inline-flex items-center rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-amber-700">
        warn
      </span>
    );
  }
  return (
    <span className="inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
      info
    </span>
  );
}

function actionLabel(action: AuditLogEntry["action"]) {
  const map: Record<AuditLogEntry["action"], string> = {
    login: "Login",
    logout: "Logout",
    import_commit: "Import",
    import_preview: "Preview",
    metadata_update: "Metadata",
    user_create: "User Create",
    user_update: "User Update",
    error: "Error",
  };
  return map[action] ?? action;
}

export default async function AuditLogPage() {
  const db = await getLocalDb();
  const entries = db.audit_log;

  const errorCount = entries.filter((e) => e.level === "error").length;
  const warnCount = entries.filter((e) => e.level === "warn").length;
  const actionCounts = entries.reduce<Record<string, number>>((acc, entry) => {
    acc[entry.action] = (acc[entry.action] ?? 0) + 1;
    return acc;
  }, {});

  return (
    <div className="space-y-4">
      <Card className="bg-[linear-gradient(120deg,#ffffff_0%,#f4f9ff_62%,#fff4e9_100%)]">
        <h2 className="text-xl font-black tracking-tight text-slate-900">Audit Log</h2>
        <p className="mt-2 text-sm text-slate-600">
          Security and activity events — logins, imports, and admin actions. Last {entries.length} entries shown (max 2,000).
        </p>
        <div className="mt-4 grid gap-2.5 md:grid-cols-4">
          {[
            { label: "Total events", value: entries.length, tone: "slate" },
            { label: "Errors", value: errorCount, tone: "red" },
            { label: "Warnings", value: warnCount, tone: "amber" },
            { label: "Imports", value: actionCounts.import_commit ?? 0, tone: "blue" },
          ].map((item) => (
            <div
              key={item.label}
              className={`rounded-2xl border px-3 py-3 shadow-[0_14px_24px_-28px_rgba(38,99,172,0.85)] ${
                item.tone === "red"
                  ? "border-red-200 bg-red-50/80"
                  : item.tone === "amber"
                    ? "border-amber-200 bg-amber-50/80"
                    : item.tone === "blue"
                      ? "border-[#dbe7f5] bg-[linear-gradient(145deg,#ffffff_0%,#f4f9ff_100%)]"
                      : "border-slate-200 bg-white/90"
              }`}
            >
              <p className="caption text-[10px] uppercase tracking-[0.16em] text-slate-500">{item.label}</p>
              <p className="mt-1 text-2xl font-black tracking-tight text-slate-900">{item.value}</p>
            </div>
          ))}
        </div>
      </Card>

      {(errorCount > 0 || warnCount > 0) && (
        <div className="rounded-2xl border border-amber-200 bg-amber-50 px-5 py-4">
          <p className="text-sm font-semibold text-amber-800">
            Monitoring summary
          </p>
          <div className="mt-2 flex gap-6 text-sm">
            {errorCount > 0 && (
              <span className="text-red-700">
                <span className="font-bold">{errorCount}</span> error{errorCount !== 1 ? "s" : ""}
              </span>
            )}
            {warnCount > 0 && (
              <span className="text-amber-700">
                <span className="font-bold">{warnCount}</span> warning{warnCount !== 1 ? "s" : ""}
              </span>
            )}
          </div>
          {errorCount > 0 && (
            <p className="mt-2 text-xs text-red-600">
              Review error entries below — these may indicate failed imports, access denials, or system faults.
            </p>
          )}
        </div>
      )}

      {entries.length === 0 ? (
        <div className="rounded-2xl border border-slate-200 bg-white px-6 py-12 text-center text-sm text-slate-500">
          No events recorded yet. Events will appear here after logins, imports, and admin actions.
        </div>
      ) : (
        <div className="overflow-hidden rounded-3xl border border-[#d9e5f3] bg-[linear-gradient(180deg,#ffffff_0%,#f8fbff_100%)] shadow-[0_22px_40px_-32px_rgba(38,99,172,0.7)]">
          <div className="max-h-[720px] overflow-auto">
            <table className="w-full text-left text-sm">
              <thead className="sticky top-0 bg-[linear-gradient(120deg,#eef5ff_0%,#f6faff_70%,#fff7ed_100%)] text-[11px] uppercase tracking-[0.16em] text-slate-500">
                <tr>
                  <th className="px-4 py-3">Time</th>
                  <th className="px-4 py-3">Level</th>
                  <th className="px-4 py-3">Action</th>
                  <th className="px-4 py-3">Actor</th>
                  <th className="px-4 py-3">Detail</th>
                </tr>
              </thead>
              <tbody>
                {entries.map((entry) => (
                  <tr
                    key={entry.id}
                    className={`border-t border-slate-200 align-top ${
                      entry.level === "error"
                        ? "bg-red-50/40"
                        : entry.level === "warn"
                          ? "bg-amber-50/30"
                          : ""
                    }`}
                  >
                    <td className="whitespace-nowrap px-4 py-3 text-xs text-slate-500">
                      {new Date(entry.ts).toLocaleString("en-GB")}
                    </td>
                    <td className="px-4 py-3">{levelBadge(entry.level)}</td>
                    <td className="px-4 py-3 text-slate-700">{actionLabel(entry.action)}</td>
                    <td className="px-4 py-3 font-mono text-xs text-slate-600">{entry.actor}</td>
                    <td className="px-4 py-3 text-xs text-slate-600">{entry.detail}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  );
}