"use client";

/**
 * Phase 8 — org ANALYTICS tab (read-only usage/health analytics).
 *
 * Data: `GET /orgs/:orgId/admin/analytics` (server-side `assertOrgAdmin`,
 * org-scoped — see apps/api `analytics.service.ts`). The Overview tab is the
 * billing-adjacent counts + storage/audit trend; this tab is the usage/health
 * picture: content mix by page kind, growth (7d/30d), comment + file volume,
 * top audit actions, and the four 30-day trends. Rendering reuses the
 * Overview tab's house chrome (Section from settings-shell, CSS Sparkline,
 * Stat card, formatBytes) — no new dependencies.
 */
import { useQuery } from "@tanstack/react-query";
import { Activity, Database, FileText, MessageSquare, NotebookText, Users, type LucideIcon } from "lucide-react";
import { orgAdminApi } from "@/lib/org-admin";
import { Section } from "@/components/settings/settings-shell";

function formatBytes(n: number): string {
  if (n < 1024) return `${n} B`;
  const units = ["KB", "MB", "GB", "TB"];
  let v = n / 1024;
  let i = 0;
  while (v >= 1024 && i < units.length - 1) {
    v /= 1024;
    i += 1;
  }
  return `${v.toFixed(1)} ${units[i]}`;
}

function Sparkline({ points, label, fmt }: { points: { day: string; value: number }[]; label: string; fmt: (n: number) => string }) {
  const max = Math.max(1, ...points.map((p) => p.value));
  return (
    <div>
      <div className="flex h-24 items-end gap-px" role="img" aria-label={label}>
        {points.map((p) => (
          <div
            key={p.day}
            title={`${p.day}: ${fmt(p.value)}`}
            className="min-w-0 flex-1 rounded-t-sm bg-primary/60"
            style={{ height: `${Math.max(2, (p.value / max) * 100)}%` }}
          />
        ))}
      </div>
      <div className="mt-1 flex justify-between text-[11px] text-muted-foreground">
        <span>{points[0]?.day ?? ""}</span>
        <span>{points[points.length - 1]?.day ?? ""}</span>
      </div>
    </div>
  );
}

function Stat({ icon: Icon, label, value }: { icon: LucideIcon; label: string; value: string | number }) {
  return (
    <div className="flex items-center gap-3 rounded-lg border border-border p-3">
      <Icon className="size-4 text-muted-foreground" aria-hidden />
      <div>
        <div className="text-xs text-muted-foreground">{label}</div>
        <div className="text-lg font-semibold">{value}</div>
      </div>
    </div>
  );
}

export function AdminAnalyticsTab({ orgId }: { orgId: string }) {
  const q = useQuery({
    queryKey: ["orgs", orgId, "admin", "analytics"],
    queryFn: () => orgAdminApi.analytics(orgId),
    retry: false,
  });

  if (q.isLoading) {
    return <p className="text-sm text-muted-foreground" role="status">Loading analytics…</p>;
  }
  if (q.isError) {
    return <p className="text-sm text-destructive" role="alert">Could not load analytics.</p>;
  }
  const a = q.data!.data;

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
        <Stat icon={Database} label="Workspaces" value={a.workspaces} />
        <Stat icon={Users} label="Members" value={a.members} />
        <Stat icon={FileText} label="Pages (total)" value={a.pagesTotal} />
        <Stat icon={NotebookText} label="New databases (30d)" value={a.newDatabases30d} />
        <Stat icon={MessageSquare} label="Open comments" value={a.comments.open} />
        <Stat icon={FileText} label="Files" value={a.files.count} />
      </div>

      <div className="grid gap-4 lg:grid-cols-2">
        <Section title="Content mix" description="Pages by kind (non-trashed)">
          {a.pagesTotal === 0 ? (
            <p className="text-sm text-muted-foreground">No pages yet.</p>
          ) : (
            <dl className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm sm:grid-cols-3">
              {Object.entries(a.pages).map(([kind, count]) => (
                <div key={kind} className="flex justify-between gap-2">
                  <dt className="text-muted-foreground">{kind}</dt>
                  <dd className="font-medium">{count}</dd>
                </div>
              ))}
            </dl>
          )}
          <dl className="mt-3 grid grid-cols-2 gap-x-6 gap-y-2 border-t border-border pt-3 text-sm">
            <div className="flex justify-between gap-2">
              <dt className="text-muted-foreground">New pages (7d)</dt>
              <dd className="font-medium">{a.newPages.last7d}</dd>
            </div>
            <div className="flex justify-between gap-2">
              <dt className="text-muted-foreground">New pages (30d)</dt>
              <dd className="font-medium">{a.newPages.last30d}</dd>
            </div>
            <div className="flex justify-between gap-2">
              <dt className="text-muted-foreground">New comments (30d)</dt>
              <dd className="font-medium">{a.comments.last30d}</dd>
            </div>
            <div className="flex justify-between gap-2">
              <dt className="text-muted-foreground">Files (30d)</dt>
              <dd className="font-medium">{formatBytes(a.files.last30dBytes)}</dd>
            </div>
            <div className="flex justify-between gap-2">
              <dt className="text-muted-foreground">Total storage</dt>
              <dd className="font-medium">{formatBytes(a.files.storageBytes)}</dd>
            </div>
            <div className="flex justify-between gap-2">
              <dt className="text-muted-foreground">Archived workspaces</dt>
              <dd className="font-medium">{a.archivedWorkspaces}</dd>
            </div>
          </dl>
        </Section>

        <Section title="Top audit actions (30 days)" description={`${a.audit.last30d} audit events in the last 30 days`}>
          {a.audit.topActions.length === 0 ? (
            <p className="text-sm text-muted-foreground">No audit events in the last 30 days.</p>
          ) : (
            <ul className="space-y-1.5">
              {a.audit.topActions.map((t) => (
                <li key={t.action} className="flex items-center justify-between gap-2 text-sm">
                  <span className="inline-flex items-center gap-1.5 font-mono text-[13px]">
                    <Activity className="size-3.5 text-muted-foreground" aria-hidden />
                    {t.action}
                  </span>
                  <span className="font-medium tabular-nums">{t.count}</span>
                </li>
              ))}
            </ul>
          )}
        </Section>
      </div>

      <div className="grid gap-4 lg:grid-cols-2">
        <Section title="New pages (30 days)" description="Pages created per day">
          <Sparkline
            points={a.trends.newPages.map((p) => ({ day: p.day, value: p.count }))}
            label="New pages trend over 30 days"
            fmt={(n) => String(n)}
          />
        </Section>
        <Section title="Storage growth (30 days)" description="File bytes created per day">
          <Sparkline
            points={a.trends.storage.map((p) => ({ day: p.day, value: p.bytes }))}
            label="Storage growth trend over 30 days"
            fmt={formatBytes}
          />
        </Section>
        <Section title="Members joined (30 days)" description="Org members added per day">
          <Sparkline
            points={a.trends.members.map((p) => ({ day: p.day, value: p.count }))}
            label="Member sign-up trend over 30 days"
            fmt={(n) => String(n)}
          />
        </Section>
        <Section title="Audit events (30 days)" description="Audit rows written per day">
          <Sparkline
            points={a.trends.audit.map((p) => ({ day: p.day, value: p.count }))}
            label="Audit events trend over 30 days"
            fmt={(n) => String(n)}
          />
        </Section>
      </div>
    </div>
  );
}