"use client";

import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { useQuery } from "@tanstack/react-query";
import { useTranslations } from "next-intl";
import { Activity, Server, Users, Layers, CreditCard } from "lucide-react";
import type { LucideIcon } from "lucide-react";
import { orpc } from "@/utils/orpc";
import { authClient } from "@/lib/auth-client";
import Loader from "@/components/loader";
import { DitherAvatar } from "@struxa/ui/components/dither-kit/avatar";

function StatRow({
  icon: Icon,
  label,
  children,
}: {
  icon: LucideIcon;
  label: string;
  children: React.ReactNode;
}) {
  return (
    <div className="flex flex-col border-b border-border last:border-b-0">
      <div className="flex flex-col gap-1.5 px-4 pt-3 pb-2.5">
        <div className="flex items-center gap-1.5 text-[10px] font-medium uppercase tracking-widest text-muted-foreground">
          <Icon className="h-3 w-3" />
          {label}
        </div>
        {children}
      </div>
    </div>
  );
}

const EVENT_STYLES: Record<string, { color: string; bg: string }> = {
  server:   { color: "#3b82f6", bg: "rgba(59,130,246,0.12)" },
  user:     { color: "#f43f5e", bg: "rgba(244,63,94,0.12)" },
  node:     { color: "#f59e0b", bg: "rgba(245,158,11,0.12)" },
  alloc:    { color: "#f59e0b", bg: "rgba(245,158,11,0.12)" },
  nest:     { color: "#a855f7", bg: "rgba(168,85,247,0.12)" },
  egg:      { color: "#a855f7", bg: "rgba(168,85,247,0.12)" },
  dbhost:   { color: "#3b82f6", bg: "rgba(59,130,246,0.12)" },
  location: { color: "#f59e0b", bg: "rgba(245,158,11,0.12)" },
  settings: { color: "#71717a", bg: "rgba(113,113,122,0.10)" },
  billing: { color: "#10b981", bg: "rgba(16,185,129,0.12)" },
  backup: { color: "#14b8a6", bg: "rgba(20,184,166,0.12)" },
};

function getEventStyle(event: string): { color: string; bg: string } {
  if (event.startsWith("admin:server.")) return EVENT_STYLES.server!;
  if (event.startsWith("admin:user.")) return EVENT_STYLES.user!;
  if (event.startsWith("admin:node.")) return EVENT_STYLES.node!;
  if (event.startsWith("admin:allocation.")) return EVENT_STYLES.alloc!;
  if (event.startsWith("admin:nest.")) return EVENT_STYLES.nest!;
  if (event.startsWith("admin:egg.")) return EVENT_STYLES.egg!;
  if (event.startsWith("admin:database-host.")) return EVENT_STYLES.dbhost!;
  if (event.startsWith("admin:location.")) return EVENT_STYLES.location!;
  if (event.startsWith("admin:settings.")) return EVENT_STYLES.settings!;
  if (event.startsWith("admin:billing.")) return EVENT_STYLES.billing!;
  if (event.startsWith("admin:backup-destination.")) return EVENT_STYLES.backup!;
  return { color: "#71717a", bg: "rgba(113,113,122,0.10)" };
}

const prettify = (slug: string) =>
  slug.replace(/[._-]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());

function useEventLabel() {
  const t = useTranslations("admin.activity.events");
  return (event: string) => {
    const path = event.replace(/^admin:/, "");
    const dot = path.lastIndexOf(".");
    if (dot < 0) return prettify(path);
    const part = (kind: string, slug: string) =>
      t.has(`${kind}.${slug}`) ? t(`${kind}.${slug}`) : t("unknown");
    return `${part("resource", path.slice(0, dot).replace(/\./g, "_"))}: ${part("action", path.slice(dot + 1))}`;
  };
}

function ActorCell({ user }: { user: { name: string | null; email: string; image: string | null } | null | undefined }) {
  const t = useTranslations("admin.activity");
  if (!user) return <span className="text-sm text-muted-foreground">{t("system")}</span>;
  const displayName = user.name ?? user.email;
  return (
    <div className="flex items-center gap-2 min-w-0">
      <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-muted text-xs font-semibold text-foreground overflow-hidden">
        {user.image ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img src={user.image} alt={displayName} className="h-6 w-6 object-cover" />
        ) : (
          <DitherAvatar name={displayName} className="h-6 w-6" />
        )}
      </div>
      <span className="truncate text-sm text-foreground">{displayName}</span>
    </div>
  );
}

function getEventDetails(eventType: string, propertiesJson: string | null): string | null {
  if (!propertiesJson) return null;
  let props: Record<string, unknown>;
  try { props = JSON.parse(propertiesJson) as Record<string, unknown>; } catch { return null; }

  if (eventType === "admin:billing.wallet.adjust" && typeof props.amountCents === "number") {
    const sign = props.amountCents >= 0 ? "+" : "";
    return `${sign}${(props.amountCents / 100).toFixed(2)}`;
  }
  if (eventType === "admin:billing.gateway.create" && typeof props.name === "string" && typeof props.provider === "string") {
    return `${props.name} (${props.provider})`;
  }
  if (typeof props.name === "string") return props.name;
  if (typeof props.short === "string") {
    return props.long && typeof props.long === "string" ? `${props.short} — ${props.long}` : props.short;
  }
  if (typeof props.variable === "string") return props.variable;
  if (typeof props.targetUserId === "string") {
    if (typeof props.role === "string") return `→ ${props.role}`;
    if (typeof props.reason === "string") return props.reason;
    return props.targetUserId;
  }
  if (typeof props.ip === "string" && typeof props.ports === "string") return `${props.ip}:${props.ports}`;
  if (typeof props.ip === "string" && typeof props.port === "number") return `${props.ip}:${props.port}`;
  if (eventType.startsWith("admin:backup-destination.")) {
    return [props.type, props.scope].filter((v) => typeof v === "string").join(" · ") || null;
  }
  if (typeof props.key === "string") return props.key;
  return null;
}

function fmtDate(d: Date | string | null): string {
  if (!d) return "—";
  return new Date(d).toLocaleString();
}

export default function AdminActivityPage() {
  const t = useTranslations("admin.activity");
  const eventLabel = useEventLabel();
  const router = useRouter();
  const { data: session, isPending } = authClient.useSession();

  useEffect(() => {
    if (!isPending && !session) router.replace("/login");
    if (!isPending && session && session.user.role !== "admin") router.replace("/");
  }, [isPending, session, router]);

  const { data: activityData, isPending: activityPending } = useQuery({
    ...orpc.activity.adminList.queryOptions({ input: { page: 1 } }),
    enabled: !!session && session.user.role === "admin",
  });

  if (isPending || !session) return <Loader />;

  const entries = activityData?.data ?? [];
  const serverCount = entries.filter((e) => e.eventType.startsWith("admin:server.")).length;
  const userCount = entries.filter((e) => e.eventType.startsWith("admin:user.")).length;
  const infraCount = entries.filter((e) =>
    e.eventType.startsWith("admin:node.") ||
    e.eventType.startsWith("admin:allocation.") ||
    e.eventType.startsWith("admin:location.") ||
    e.eventType.startsWith("admin:database-host.") ||
    e.eventType.startsWith("admin:nest.") ||
    e.eventType.startsWith("admin:egg.") ||
    e.eventType.startsWith("admin:settings.") ||
    e.eventType.startsWith("admin:backup-destination.")
  ).length;
  const billingCount = entries.filter((e) => e.eventType.startsWith("admin:billing.")).length;

  return (
    <>
      <div className="flex flex-1 flex-col gap-3 overflow-auto px-4 py-4 md:flex-row md:overflow-hidden">
        <div className="flex flex-1 flex-col overflow-hidden rounded-xl border border-border bg-card">
          <div className="grid grid-cols-[160px_180px_200px_150px_1fr_130px] border-b border-border bg-muted/40 px-4 py-2.5">
            <span className="text-xs font-medium text-muted-foreground">{t("timestampColumn")}</span>
            <span className="text-xs font-medium text-muted-foreground">{t("eventColumn")}</span>
            <span className="text-xs font-medium text-muted-foreground">{t("actorColumn")}</span>
            <span className="text-xs font-medium text-muted-foreground">{t("targetColumn")}</span>
            <span className="text-xs font-medium text-muted-foreground">{t("detailsColumn")}</span>
            <span className="text-xs font-medium text-muted-foreground">{t("ipColumn")}</span>
          </div>

          <div className="flex-1 overflow-y-auto">
            {activityPending ? (
              <div className="flex items-center justify-center py-12 text-sm text-muted-foreground">{t("loading")}</div>
            ) : entries.length === 0 ? (
              <div className="flex flex-col items-center justify-center py-12 gap-2">
                <Activity className="h-8 w-8 text-muted-foreground/30" />
                <p className="text-sm text-muted-foreground">{t("noActivity")}</p>
              </div>
            ) : (
              entries.map((entry, i) => {
                const style = getEventStyle(entry.eventType);
                const isLast = i === entries.length - 1;
                const target = entry.server?.name ?? entry.node?.name ?? null;
                return (
                  <div
                    key={entry.id}
                    className={`grid grid-cols-[160px_180px_200px_150px_1fr_130px] items-center px-4 py-3 transition-colors hover:bg-muted/40 ${!isLast ? "border-b border-border" : ""}`}
                  >
                    <span className="font-mono text-xs text-muted-foreground">{fmtDate(entry.timestamp)}</span>
                    <span>
                      <span
                        className="rounded-full px-2 py-0.5 font-mono text-xs font-medium"
                        style={{ color: style.color, backgroundColor: style.bg }}
                      >
                        {eventLabel(entry.eventType)}
                      </span>
                    </span>
                    <div className="min-w-0 pr-4">
                      <ActorCell user={entry.user} />
                    </div>
                    <span className="truncate pr-4 font-mono text-xs text-muted-foreground">
                      {target ?? "—"}
                    </span>
                    <span className="truncate pr-4 font-mono text-xs text-muted-foreground">
                      {getEventDetails(entry.eventType, entry.properties) ?? "—"}
                    </span>
                    <span className="font-mono text-xs text-muted-foreground">{entry.ip ?? "—"}</span>
                  </div>
                );
              })
            )}
          </div>
        </div>

        <aside className="flex w-full shrink-0 flex-col overflow-hidden rounded-xl border border-border bg-card md:w-[220px]">
          <StatRow icon={Activity} label={t("totalEvents")}>
            <span className="text-xl font-bold text-foreground">{entries.length}</span>
          </StatRow>
          <StatRow icon={Server} label={t("serverEvents")}>
            <span className="text-xl font-bold" style={{ color: "#3b82f6" }}>{serverCount}</span>
          </StatRow>
          <StatRow icon={Users} label={t("userModeration")}>
            <span className="text-xl font-bold" style={{ color: "#f43f5e" }}>{userCount}</span>
          </StatRow>
          <StatRow icon={Layers} label={t("infrastructure")}>
            <span className="text-xl font-bold" style={{ color: "#f59e0b" }}>{infraCount}</span>
          </StatRow>
          <StatRow icon={CreditCard} label={t("billingEvents")}>
            <span className="text-xl font-bold" style={{ color: "#10b981" }}>{billingCount}</span>
          </StatRow>
        </aside>
      </div>
    </>
  );
}