wulf-pulse/app/dashboard/page.tsx

'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Skeleton } from '@/components/ui/skeleton';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import {
  AlertTriangle,
  Database,
  Shield,
  CalendarClock,
  RefreshCw,
  ArrowRight,
  CheckCircle2,
  XCircle,
  Clock,
  Activity,
  Sparkles,
  Plug,
  KeyRound,
} from 'lucide-react';

interface IntegrationHealthItem {
  key: string;
  name: string;
  category: string;
  status: 'ok' | 'auth_failed' | 'unreachable' | 'not_configured' | 'unknown';
  configured: boolean;
  latencyMs?: number;
  error?: string | null;
  tokenExpiry?: {
    envVar: string;
    expiresAt: string;
    daysRemaining: number;
    subject?: string | null;
  } | null;
  checkedAt: string;
}

interface IntegrationHealthResponse {
  items: IntegrationHealthItem[];
  summary: {
    total: number;
    ok: number;
    failed: number;
    notConfigured: number;
    expiringWithin14Days: number;
    expired: number;
    hasIssues: boolean;
  };
}

interface Overview {
  attention: {
    linkConflicts: number;
    itglueUnlinked: number;
    s1Unmapped: number;
    schedules: { enabled: number; total: number };
  };
  observations: Array<{
    id: string;
    kind: string;
    source: string;
    collectedAt: string;
    hostname: string | null;
    companyName: string | null;
    runId: string | null;
  }>;
  audits: Array<{
    id: string;
    generatedAt: string;
    hostname: string | null;
    companyName: string | null;
    overallScore: number | null;
    fieldGapsCount: number;
    status: string;
  }>;
  syncHealth: Array<{
    id: string;
    name: string;
    syncType: string;
    isEnabled: boolean;
    lastRun: string | null;
    lastStatus: string | null;
    lastError: string | null;
    nextRun: string | null;
  }>;
  stats: {
    activeCompanies: number;
    configurationItems: number;
    xref: { total: number; linked: number };
  };
}

const STALE_HOURS = 24;

function relTime(iso: string | null): string {
  if (!iso) return 'never';
  const ms = Date.now() - new Date(iso).getTime();
  if (ms < 0) return 'in the future';
  const min = Math.floor(ms / 60000);
  if (min < 1) return 'just now';
  if (min < 60) return `${min} min ago`;
  const hr = Math.floor(min / 60);
  if (hr < 48) return `${hr} h ago`;
  const day = Math.floor(hr / 24);
  return `${day} d ago`;
}

function isStale(iso: string | null): boolean {
  if (!iso) return true;
  return Date.now() - new Date(iso).getTime() > STALE_HOURS * 3600_000;
}

function syncStatusIcon(s: { lastStatus: string | null; lastRun: string | null; isEnabled: boolean }) {
  if (!s.isEnabled) return <span className="text-muted-foreground text-xs">off</span>;
  if (s.lastStatus === 'failed')
    return <XCircle className="size-4 text-destructive" aria-label="failed" />;
  if (isStale(s.lastRun))
    return <Clock className="size-4 text-amber-500" aria-label="stale" />;
  if (s.lastStatus === 'success')
    return <CheckCircle2 className="size-4 text-emerald-500" aria-label="ok" />;
  return <Clock className="size-4 text-muted-foreground" aria-label="never run" />;
}

export default function DashboardPage() {
  const [data, setData] = useState<Overview | null>(null);
  const [health, setHealth] = useState<IntegrationHealthResponse | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  async function load(): Promise<void> {
    setLoading(true);
    try {
      const [overviewRes, healthRes] = await Promise.all([
        fetch('/api/dashboard/overview'),
        fetch('/api/dashboard/integration-health'),
      ]);
      if (!overviewRes.ok) {
        const body = (await overviewRes.json().catch(() => ({}))) as { error?: string };
        throw new Error(body.error ?? `HTTP ${overviewRes.status}`);
      }
      setData((await overviewRes.json()) as Overview);
      if (healthRes.ok) {
        setHealth((await healthRes.json()) as IntegrationHealthResponse);
      }
      setError(null);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unknown error');
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    void load();
  }, []);

  return (
    <div className="container mx-auto px-6 py-6 space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold tracking-tight">Dashboard</h1>
        <Button onClick={load} variant="outline" size="sm" disabled={loading}>
          <RefreshCw className={`size-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
          Refresh
        </Button>
      </div>

      {error && (
        <Alert variant="destructive">
          <AlertTitle>Failed to load</AlertTitle>
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      )}

      {/* NEEDS ATTENTION ----------------------------------------------------- */}
      <section>
        <h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-3">
          Needs attention
        </h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          <AttentionCard
            icon={AlertTriangle}
            value={data?.attention.linkConflicts}
            label="Device-link conflicts"
            href="/admin/device-link-conflicts"
            tone={data && data.attention.linkConflicts > 0 ? 'warn' : 'ok'}
          />
          <AttentionCard
            icon={Database}
            value={data?.attention.itglueUnlinked}
            label="IT Glue ↛ Autotask"
            sub="unlinked configurations"
            href="/admin/device-link-conflicts"
            tone="info"
          />
          <AttentionCard
            icon={Shield}
            value={data?.attention.s1Unmapped}
            label="S1 unmapped"
            sub="missing site → company mapping"
            href="/sentinelone/mappings"
            tone="info"
          />
          <AttentionCard
            icon={CalendarClock}
            value={data?.attention.schedules.enabled}
            label={`Schedules on / ${data?.attention.schedules.total ?? '—'}`}
            href="/admin/sync/autotask"
            tone="info"
          />
        </div>
      </section>

      {/* RECENT OBSERVATIONS + AUDITS ---------------------------------------- */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-base flex items-center gap-2">
              <Activity className="size-4" />
              Recent device observations
            </CardTitle>
          </CardHeader>
          <CardContent>
            {data === null && !error ? (
              <RowSkeletons />
            ) : data?.observations.length === 0 ? (
              <p className="text-sm text-muted-foreground">No observations recorded yet.</p>
            ) : (
              <div className="space-y-1">
                {data?.observations.map((o) => (
                  <div
                    key={o.id}
                    className="flex items-center justify-between py-1.5 text-sm border-b last:border-0"
                  >
                    <div className="min-w-0 flex-1">
                      <div className="font-medium truncate">{o.hostname ?? '(unanchored)'}</div>
                      <div className="text-xs text-muted-foreground">
                        <span className="font-mono">{o.kind}</span>
                        {o.companyName && <span> · {o.companyName}</span>}
                      </div>
                    </div>
                    <div className="text-xs text-muted-foreground shrink-0 ml-3">
                      {relTime(o.collectedAt)}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-base flex items-center gap-2">
              <Sparkles className="size-4" />
              Recent audits
            </CardTitle>
          </CardHeader>
          <CardContent>
            {data === null && !error ? (
              <RowSkeletons />
            ) : data?.audits.length === 0 ? (
              <p className="text-sm text-muted-foreground">No endpoint audits yet.</p>
            ) : (
              <div className="space-y-1">
                {data?.audits.map((a) => (
                  <div
                    key={a.id}
                    className="flex items-center justify-between py-1.5 text-sm border-b last:border-0"
                  >
                    <div className="min-w-0 flex-1">
                      <div className="font-medium truncate">{a.hostname ?? '(unanchored)'}</div>
                      <div className="text-xs text-muted-foreground">
                        score {a.overallScore?.toFixed(2) ?? '—'} · {a.fieldGapsCount} gaps
                        {a.companyName && <span> · {a.companyName}</span>}
                      </div>
                    </div>
                    <div className="text-xs text-muted-foreground shrink-0 ml-3">
                      {relTime(a.generatedAt)}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </CardContent>
        </Card>
      </div>

      {/* INTEGRATION HEALTH -------------------------------------------------- */}
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-base flex items-center gap-2">
            <Plug className="size-4" />
            Integration health
            {health?.summary.hasIssues && (
              <Badge variant="destructive" className="text-[10px]">issues</Badge>
            )}
          </CardTitle>
        </CardHeader>
        <CardContent>
          {!health ? (
            <RowSkeletons />
          ) : (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-1">
              {health.items
                .slice()
                .sort((a, b) => statusOrder(a.status) - statusOrder(b.status))
                .map((i) => (
                  <IntegrationRow key={i.key} item={i} />
                ))}
            </div>
          )}
        </CardContent>
      </Card>

      {/* SYNC HEALTH --------------------------------------------------------- */}
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-base">Sync health</CardTitle>
        </CardHeader>
        <CardContent>
          {data === null && !error ? (
            <RowSkeletons />
          ) : (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-1">
              {data?.syncHealth.map((s) => (
                <div key={s.id} className="flex items-center justify-between py-1.5 text-sm border-b last:border-0">
                  <div className="min-w-0 flex-1 truncate">{s.name}</div>
                  <div className="flex items-center gap-2 text-xs text-muted-foreground shrink-0 ml-3">
                    <span>{relTime(s.lastRun)}</span>
                    {syncStatusIcon(s)}
                  </div>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>

      {/* STATS FOOTER -------------------------------------------------------- */}
      {data && (
        <p className="text-xs text-muted-foreground">
          {data.stats.activeCompanies} companies · {data.stats.configurationItems.toLocaleString()} CIs ·{' '}
          {data.stats.xref.total.toLocaleString()} xref rows (
          {data.stats.xref.total > 0
            ? Math.round((data.stats.xref.linked / data.stats.xref.total) * 100)
            : 0}
          % linked)
        </p>
      )}
    </div>
  );
}

function AttentionCard(props: {
  icon: React.ElementType;
  value: number | undefined;
  label: string;
  sub?: string;
  href: string;
  tone: 'ok' | 'warn' | 'info';
}) {
  const { icon: Icon, value, label, sub, href, tone } = props;
  const valueColor =
    tone === 'warn' && value && value > 0
      ? 'text-amber-600 dark:text-amber-500'
      : tone === 'ok'
        ? 'text-foreground'
        : 'text-foreground';
  return (
    <Link href={href} className="block">
      <Card className="hover:shadow-md transition-shadow h-full">
        <CardContent className="pt-4 pb-3 flex flex-col gap-1">
          <div className="flex items-center justify-between">
            <Icon className="size-4 text-muted-foreground" />
            <ArrowRight className="size-3.5 text-muted-foreground" />
          </div>
          <div className={`text-2xl font-semibold tabular-nums ${valueColor}`}>
            {value === undefined ? '—' : value.toLocaleString()}
          </div>
          <div className="text-sm font-medium leading-tight">{label}</div>
          {sub && <div className="text-xs text-muted-foreground">{sub}</div>}
        </CardContent>
      </Card>
    </Link>
  );
}

function statusOrder(s: IntegrationHealthItem['status']): number {
  switch (s) {
    case 'auth_failed': return 0;
    case 'unreachable': return 1;
    case 'unknown': return 2;
    case 'ok': return 3;
    case 'not_configured': return 4;
    default: return 5;
  }
}

function statusBadge(item: IntegrationHealthItem) {
  const expiringSoon =
    item.tokenExpiry && item.tokenExpiry.daysRemaining > 0 && item.tokenExpiry.daysRemaining <= 14;
  const expired = item.tokenExpiry && item.tokenExpiry.daysRemaining <= 0;
  if (item.status === 'auth_failed' || item.status === 'unreachable')
    return <XCircle className="size-4 text-destructive" aria-label={item.status} />;
  if (expired)
    return <KeyRound className="size-4 text-destructive" aria-label="token expired" />;
  if (expiringSoon)
    return <KeyRound className="size-4 text-amber-500" aria-label="token expires soon" />;
  if (item.status === 'ok')
    return <CheckCircle2 className="size-4 text-emerald-500" aria-label="ok" />;
  if (item.status === 'unknown')
    return <CheckCircle2 className="size-4 text-muted-foreground" aria-label="configured" />;
  return <span className="text-xs text-muted-foreground">off</span>;
}

function IntegrationRow({ item }: { item: IntegrationHealthItem }) {
  const expired = item.tokenExpiry && item.tokenExpiry.daysRemaining <= 0;
  const expiringSoon =
    item.tokenExpiry && item.tokenExpiry.daysRemaining > 0 && item.tokenExpiry.daysRemaining <= 14;
  const detail =
    item.status === 'auth_failed' || item.status === 'unreachable'
      ? item.error?.slice(0, 80)
      : expired
        ? `token expired ${Math.abs(item.tokenExpiry!.daysRemaining).toFixed(0)} d ago`
        : expiringSoon
          ? `token expires in ${item.tokenExpiry!.daysRemaining.toFixed(0)} d`
          : item.latencyMs !== undefined
            ? `${item.latencyMs} ms`
            : null;
  return (
    <div className="flex items-center justify-between py-1.5 text-sm border-b last:border-0">
      <div className="min-w-0 flex-1 truncate">{item.name}</div>
      <div className="flex items-center gap-2 text-xs text-muted-foreground shrink-0 ml-3">
        {detail && <span className="truncate max-w-[20ch]">{detail}</span>}
        {statusBadge(item)}
      </div>
    </div>
  );
}

function RowSkeletons() {
  return (
    <div className="space-y-2">
      <Skeleton className="h-4 w-full" />
      <Skeleton className="h-4 w-full" />
      <Skeleton className="h-4 w-3/4" />
    </div>
  );
}