"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { AlertTriangle, CheckCircle2 } from "lucide-react";
import { api, bytes, type Activity, type AdminUser, type SystemStats } from "@/lib/api";
import { StatCard } from "@/components/admin/stat-card";
import { ActivityChart } from "@/components/admin/activity-chart";
import { UsersTable } from "@/components/admin/users-table";
import { SkeletonCards } from "@/components/ui/skeleton";
import { cn } from "@/lib/utils";

export function AdminPanel({ me }: { me: string | null }) {
  const [sys, setSys] = React.useState<SystemStats | null>(null);
  const [act, setAct] = React.useState<Activity | null>(null);
  const [users, setUsers] = React.useState<{ users: AdminUser[]; roles: string[] } | null>(null);
  const [err, setErr] = React.useState<string | null>(null);

  const loadUsers = React.useCallback(() => {
    api.admin.users().then(setUsers).catch((e) => setErr((e as Error).message));
  }, []);

  React.useEffect(() => {
    loadUsers();
    api.admin.activity(30).then(setAct).catch(() => undefined);
    const poll = () => api.admin.system().then(setSys).catch(() => undefined);
    poll();
    // 5s: CPU is a delta between samples, so the first reading is always null
    // and a slow poll would leave it null for an uncomfortably long time.
    const t = setInterval(poll, 5000);
    return () => clearInterval(t);
  }, [loadUsers]);

  if (err) return <div className="py-12 text-center text-dim">{err}</div>;
  if (!sys || !users) return <SkeletonCards n={4} />;

  const s = sys.system;
  const lib = s.disks.library;
  const active = (sys.jobs.queued ?? 0) + (sys.jobs.searching ?? 0) + (sys.jobs.downloading ?? 0);

  return (
    <div className="flex flex-col gap-4">
      <SlskdBanner slskd={sys.slskd} />

      <div className="grid grid-cols-2 gap-2.5 sm:grid-cols-3 lg:grid-cols-4">
        <StatCard
          index={0}
          label="CPU"
          value={s.cpu_pct == null ? "—" : `${s.cpu_pct}%`}
          sub={s.load ? `load ${s.load.join(" · ")}${s.cpus ? ` on ${s.cpus}` : ""}` : undefined}
          pct={s.cpu_pct}
        />
        <StatCard
          index={1}
          label="Memory"
          value={s.mem_pct == null ? "—" : `${s.mem_pct}%`}
          sub={s.mem_total ? `${bytes(s.mem_used)} of ${bytes(s.mem_total)}` : undefined}
          pct={s.mem_pct}
        />
        <StatCard
          index={2}
          label="Library disk"
          value={lib ? `${lib.pct}%` : "—"}
          sub={lib ? `${bytes(lib.free)} free` : undefined}
          pct={lib?.pct ?? null}
        />
        <StatCard
          index={3}
          label="Library"
          value={sys.library.tracks.toLocaleString()}
          sub={`${bytes(sys.library.bytes)} imported`}
        />
        <StatCard index={4} label="In flight" value={active} sub={`${sys.pending} waiting · ${sys.workers} workers`} />
        <StatCard index={5} label="Failed" value={sys.jobs.failed ?? 0} sub="all time" />
        <StatCard index={6} label="Users" value={sys.users} sub={`${sys.sessions} active sessions`} />
        <StatCard
          index={7}
          label="Shared files"
          value={sys.slskd.shared_files?.toLocaleString() ?? "—"}
          sub="advertised to Soulseek"
        />
      </div>

      {act && <ActivityChart data={act} />}

      {act && act.per_user.length > 0 && (
        <div className="grid gap-4 md:grid-cols-2">
          <Breakdown
            title="By user"
            rows={act.per_user.map((r) => ({
              label: r.u,
              n: r.n,
              sub: r.bytes ? bytes(r.bytes) : "",
            }))}
          />
          <Breakdown
            title="Most requested artists"
            rows={act.top_artists.map((r) => ({ label: r.artist, n: r.n, sub: "" }))}
          />
        </div>
      )}

      <UsersTable users={users.users} roles={users.roles} me={me} refresh={loadUsers} />
    </div>
  );
}

function SlskdBanner({ slskd }: { slskd: SystemStats["slskd"] }) {
  const healthy = slskd.ok && slskd.connected && slskd.logged_in;
  return (
    <motion.div
      initial={{ opacity: 0, y: -6 }}
      animate={{ opacity: 1, y: 0 }}
      className={cn(
        "card flex items-center gap-2.5 rounded-card px-4 py-2.5 text-callout",
        healthy ? "border-ok/30" : "border-err/40",
      )}
    >
      {healthy ? (
        <CheckCircle2 className="h-4 w-4 shrink-0 text-ok" />
      ) : (
        <AlertTriangle className="h-4 w-4 shrink-0 text-err" />
      )}
      <span className={healthy ? "text-dim" : "text-err"}>
        {healthy
          ? `slskd connected and logged in${slskd.version ? ` · v${slskd.version}` : ""}`
          : slskd.error
            ? `slskd unreachable — ${slskd.error}`
            : `slskd reachable but not logged in to Soulseek — nothing will download`}
      </span>
    </motion.div>
  );
}

function Breakdown({
  title,
  rows,
}: {
  title: string;
  rows: { label: string; n: number; sub: string }[];
}) {
  const max = Math.max(1, ...rows.map((r) => r.n));
  return (
    <div className="card rounded-panel p-5">
      <h3 className="mb-3 text-callout font-bold uppercase tracking-[0.9px] text-dim">{title}</h3>
      <div className="flex flex-col gap-2">
        {rows.slice(0, 8).map((r, i) => (
          <motion.div
            key={r.label}
            initial={{ opacity: 0, x: -8 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay: i * 0.04 }}
            className="flex items-center gap-3"
          >
            <span className="w-32 shrink-0 text-callout clamp1">{r.label}</span>
            <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-faint">
              <motion.i
                className="block h-full rounded-full bg-accent"
                initial={{ width: 0 }}
                animate={{ width: `${(r.n / max) * 100}%` }}
                transition={{ delay: i * 0.04, duration: 0.5, ease: "easeOut" }}
              />
            </div>
            <span className="w-10 shrink-0 text-right text-callout tabular-nums text-dim">
              {r.n}
            </span>
            {r.sub && (
              <span className="hidden w-16 shrink-0 text-right text-caption text-dim sm:block">
                {r.sub}
              </span>
            )}
          </motion.div>
        ))}
      </div>
    </div>
  );
}