"use client";

import { CLUSTER_NODES, TOTAL_CORES, TOTAL_MEMORY, TOTAL_GPU, TIER_COLORS } from "@/lib/cluster";
import type { NodeMetrics } from "@/lib/ssh";

interface TailscaleStatus {
  online: boolean;
  lastSeen: string;
  ip: string;
}

/** Format a byte count, auto-switching GB -> TB above 1024 GB. */
function formatStorage(bytes: number): string {
  const gb = bytes / (1024 * 1024 * 1024);
  if (gb >= 1024) return `${(gb / 1024).toFixed(2)} TB`;
  return `${Math.round(gb)} GB`;
}

export default function ClusterOverview({
  statusMap,
  metricsMap = {},
}: {
  statusMap: Record<string, TailscaleStatus>;
  metricsMap?: Record<string, NodeMetrics>;
}) {
  const onlineCount = Object.values(statusMap).filter((s) => s.online).length;
  const total = CLUSTER_NODES.length;
  const pct = total ? Math.round((onlineCount / total) * 100) : 0;
  const tiers = ["ultra", "max", "pro", "base"] as const;

  // Cluster-wide storage totals (internal SSD + external drives) across reporting nodes.
  const liveMetrics = Object.values(metricsMap).filter((m) => m.online);
  const storageUsed = liveMetrics.reduce((a, m) => a + m.diskUsed + (m.extDiskUsed || 0), 0);
  const storageTotal = liveMetrics.reduce((a, m) => a + m.diskTotal + (m.extDiskTotal || 0), 0);
  const extTotal = liveMetrics.reduce((a, m) => a + (m.extDiskTotal || 0), 0);

  return (
    <div className="space-y-5 fade-in">
      {/* Hero stat cards */}
      <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
        <StatCard label="Nodes Online" value={`${onlineCount}/${total}`} sub={`${pct}% reachable`} accent="#16a34a" icon={<ServerIcon />}>
          <div className="mt-3 h-1.5 w-full overflow-hidden rounded-full bg-zinc-200">
            <div className="h-full rounded-full" style={{ width: `${pct}%`, background: "linear-gradient(90deg,#16a34a,#4ade80)" }} />
          </div>
        </StatCard>
        <StatCard label="CPU Cores" value={TOTAL_CORES.toString()} sub="across cluster" accent="#2563eb" icon={<CpuIcon />} />
        <StatCard label="Memory" value={`${TOTAL_MEMORY}`} unit="GB" sub="unified" accent="#7c3aed" icon={<MemIcon />} />
        <StatCard label="GPU Cores" value={TOTAL_GPU.toString()} sub="Metal" accent="#d97706" icon={<GpuIcon />} />
        <StatCard
          label="Storage"
          value={storageTotal > 0 ? formatStorage(storageUsed) : "—"}
          sub={storageTotal > 0 ? `of ${formatStorage(storageTotal)}${extTotal > 0 ? ` · +${formatStorage(extTotal)} ext` : ""}` : "internal + external"}
          accent="#0891b2"
          icon={<DiskIcon />}
        />
      </div>

      {/* Tier breakdown */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {tiers.map((tier) => {
          const nodes = CLUSTER_NODES.filter((n) => n.tier === tier);
          const online = nodes.filter((n) => statusMap[n.id]?.online).length;
          const tpct = nodes.length ? Math.round((online / nodes.length) * 100) : 0;
          const color = TIER_COLORS[tier];
          return (
            <div key={tier} className="glass glass-hover rounded-2xl p-4">
              <div className="mb-2 flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: color, boxShadow: `0 0 8px ${color}66` }} />
                  <span className="text-xs font-semibold uppercase tracking-wider text-zinc-600">{tier}</span>
                </div>
                <span className="text-xs text-zinc-500">{online}/{nodes.length}</span>
              </div>
              <div className="text-2xl font-bold text-zinc-900 tabular-nums">
                {nodes.reduce((a, n) => a + n.cpuCores, 0)}
                <span className="ml-1 text-sm font-normal text-zinc-500">cores</span>
              </div>
              <div className="mb-2 text-xs text-zinc-500">{nodes.reduce((a, n) => a + n.memoryGB, 0)} GB · {nodes.reduce((a, n) => a + n.gpuCores, 0)} GPU</div>
              <div className="h-1 w-full overflow-hidden rounded-full bg-zinc-200">
                <div className="h-full rounded-full" style={{ width: `${tpct}%`, backgroundColor: color }} />
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function StatCard({
  label, value, unit, sub, accent, icon, children,
}: {
  label: string; value: string; unit?: string; sub: string; accent: string; icon: React.ReactNode; children?: React.ReactNode;
}) {
  return (
    <div className="glass glass-hover relative overflow-hidden rounded-2xl p-4">
      <div className="pointer-events-none absolute -right-6 -top-6 h-20 w-20 rounded-full opacity-25 blur-2xl" style={{ background: accent }} />
      <div className="flex items-start justify-between">
        <div className="text-xs font-medium uppercase tracking-wide text-zinc-500">{label}</div>
        <div style={{ color: accent }}>{icon}</div>
      </div>
      <div className="mt-2 text-3xl font-bold tabular-nums text-zinc-900">
        {value}
        {unit && <span className="ml-1 text-base font-medium text-zinc-500">{unit}</span>}
      </div>
      <div className="mt-0.5 text-xs text-zinc-500">{sub}</div>
      {children}
    </div>
  );
}

/* Minimal inline icons */
const S = { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round" as const, strokeLinejoin: "round" as const };
const ServerIcon = () => (<svg {...S}><rect x="3" y="4" width="18" height="6" rx="2" /><rect x="3" y="14" width="18" height="6" rx="2" /><path d="M7 7h.01M7 17h.01" /></svg>);
const CpuIcon = () => (<svg {...S}><rect x="6" y="6" width="12" height="12" rx="2" /><path d="M9 2v2M15 2v2M9 20v2M15 20v2M2 9h2M2 15h2M20 9h2M20 15h2" /></svg>);
const MemIcon = () => (<svg {...S}><rect x="3" y="7" width="18" height="10" rx="2" /><path d="M7 7v10M12 7v10M17 7v10" /></svg>);
const GpuIcon = () => (<svg {...S}><rect x="2" y="6" width="20" height="12" rx="2" /><circle cx="9" cy="12" r="2.5" /><path d="M15 10h4M15 14h4" /></svg>);
const DiskIcon = () => (<svg {...S}><rect x="3" y="4" width="18" height="16" rx="2" /><path d="M7 8h10M7 12h10" /><circle cx="8" cy="16" r="1" /></svg>);