"use client";

/**
 * TASK-0133 — Overview tab: org counts + 30-day storage/audit trend + the
 * effective policy (the plan caps the file size; see the Policies tab to edit
 * it). Data: `GET /orgs/:orgId/admin/overview`.
 */
import { useQuery } from "@tanstack/react-query";
import { Database, FileText, NotebookText, User, Users } 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]}`;
}

/** A tiny inline bar sparkline (no chart library — the org console keeps its
 *    dependencies lean). Pure CSS bars, ARIA-labelled. */
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: typeof User; 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 AdminOverviewTab({ orgId }: { orgId: string }) {
  const q = useQuery({
    queryKey: ["orgs", orgId, "admin", "overview"],
    queryFn: () => orgAdminApi.overview(orgId),
    retry: false,
  });

  if (q.isLoading) {
    return <p className="text-sm text-muted-foreground" role="status">Loading overview…</p>;
  }
  if (q.isError) {
    return <p className="text-sm text-destructive" role="alert">Could not load the overview.</p>;
  }
  const o = q.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={Users} label="Members" value={o.memberCount} />
        <Stat icon={User} label="Active (30d)" value={o.activeMemberCount} />
        <Stat icon={Database} label="Workspaces" value={o.workspaceCount} />
        <Stat icon={FileText} label="Pages" value={o.pageCount} />
        <Stat icon={NotebookText} label="Databases" value={o.databaseCount} />
        <Stat icon={FileText} label="Files" value={o.fileCount} />
      </div>

      <div className="grid gap-4 lg:grid-cols-2">
        <Section title="Storage (30 days)" description={`Current total: ${formatBytes(o.storageBytes)}`}>
          <Sparkline
            points={o.storageTrend.map((p) => ({ day: p.day, value: p.bytes }))}
            label="Storage trend over 30 days"
            fmt={formatBytes}
          />
        </Section>
        <Section title="Audit events (30 days)" description="Rows written to the org audit log per day">
          <Sparkline
            points={o.auditTrend.map((p) => ({ day: p.day, value: p.count }))}
            label="Audit events trend over 30 days"
            fmt={(n) => String(n)}
          />
        </Section>
      </div>

      <Section
        title="Effective policy"
        description="The plan caps security policy — see the Policies tab to change it."
      >
        <dl className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm sm:grid-cols-3">
          <div className="flex justify-between gap-2">
            <dt className="text-muted-foreground">Max file size</dt>
            <dd className="font-medium">{o.policy.maxFileSizeMB ? `${o.policy.maxFileSizeMB} MB` : "plan default"}</dd>
          </div>
          <div className="flex justify-between gap-2">
            <dt className="text-muted-foreground">2FA</dt>
            <dd className="font-medium">{o.policy.require2FA ? "required" : "off"}</dd>
          </div>
          <div className="flex justify-between gap-2">
            <dt className="text-muted-foreground">SSO enforced</dt>
            <dd className="font-medium">{o.policy.ssoEnforced ? "on" : "off"}</dd>
          </div>
          <div className="flex justify-between gap-2">
            <dt className="text-muted-foreground">Guest public share</dt>
            <dd className="font-medium">{o.policy.disableGuestPublicShare ? "disabled" : "allowed"}</dd>
          </div>
          <div className="flex justify-between gap-2">
            <dt className="text-muted-foreground">External embeds</dt>
            <dd className="font-medium">{o.policy.allowExternalEmbeds ? "allowed" : "disabled"}</dd>
          </div>
          <div className="flex justify-between gap-2">
            <dt className="text-muted-foreground">Session lifetime</dt>
            <dd className="font-medium">{o.policy.sessionLifetimeHours ? `${o.policy.sessionLifetimeHours} h` : "default"}</dd>
          </div>
        </dl>
      </Section>
    </div>
  );
}