wulf-pulse/app/analyzer/itglue/configurations/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 { Skeleton } from '@/components/ui/skeleton';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Input } from '@/components/ui/input';
import { useUserTimezone } from '@/lib/hooks/use-user-timezone';

interface ConfigurationRow {
  id: string;
  name: string;
  hostname: string | null;
  typeName: string | null;
  statusName: string | null;
  organizationId: string | null;
  organizationName: string | null;
  latestAudit: {
    id: string;
    generatedAt: string | null;
    overallScore: number | null;
    provider: 'anthropic' | 'openrouter' | null;
  } | null;
}

function scoreBadgeVariant(
  score: number | null
): 'default' | 'secondary' | 'destructive' | 'outline' {
  if (score === null) return 'outline';
  if (score > 0.8) return 'default';
  if (score > 0.5) return 'secondary';
  return 'destructive';
}

export default function ConfigurationsListPage() {
  const tz = useUserTimezone();
  const [rows, setRows] = useState<ConfigurationRow[] | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [filter, setFilter] = useState('');

  useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        const res = await fetch('/api/analyzer/itglue/configurations');
        if (!res.ok) throw new Error(`Request failed: ${res.status}`);
        const data = (await res.json()) as { configurations: ConfigurationRow[] };
        if (!cancelled) setRows(data.configurations);
      } catch (err) {
        if (!cancelled) setError(err instanceof Error ? err.message : 'Unknown error');
      }
    })();
    return () => {
      cancelled = true;
    };
  }, []);

  const visible = rows
    ? rows.filter((r) => {
        if (!filter.trim()) return true;
        const q = filter.toLowerCase();
        return (
          (r.name ?? '').toLowerCase().includes(q) ||
          (r.hostname ?? '').toLowerCase().includes(q) ||
          (r.organizationName ?? '').toLowerCase().includes(q) ||
          (r.typeName ?? '').toLowerCase().includes(q)
        );
      })
    : [];

  const auditedCount = rows ? rows.filter((r) => r.latestAudit !== null).length : 0;

  return (
    <div className="container mx-auto px-6 py-6 max-w-5xl space-y-6">
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between gap-4 flex-wrap">
            <div>
              <CardTitle>IT Glue configurations audit</CardTitle>
              <p className="text-sm text-muted-foreground mt-1">
                {rows === null
                  ? 'Loading…'
                  : `${rows.length} configurations · ${auditedCount} audited`}
              </p>
            </div>
            <Input
              placeholder="Filter by name, hostname, type, or client…"
              value={filter}
              onChange={(e) => setFilter(e.target.value)}
              className="max-w-sm"
            />
          </div>
        </CardHeader>
        <CardContent>
          {error && (
            <Alert variant="destructive">
              <AlertTitle>Couldn&rsquo;t load configurations</AlertTitle>
              <AlertDescription>{error}</AlertDescription>
            </Alert>
          )}
          {rows === null && !error ? (
            <div className="space-y-2">
              <Skeleton className="h-10 w-full" />
              <Skeleton className="h-10 w-full" />
              <Skeleton className="h-10 w-full" />
            </div>
          ) : (
            <ul className="divide-y">
              {visible.map((r) => (
                <li
                  key={r.id}
                  className="py-3 flex items-center justify-between gap-3"
                >
                  <div className="min-w-0 flex-1">
                    <Link
                      href={`/analyzer/itglue/configurations/${r.id}`}
                      className="font-medium hover:underline"
                    >
                      {r.name}
                    </Link>
                    <p className="text-xs text-muted-foreground mt-0.5">
                      {r.organizationName ?? '—'}
                      {r.typeName && ` · ${r.typeName}`}
                      {r.statusName && ` · ${r.statusName}`}
                      {r.hostname && ` · ${r.hostname}`}
                      {r.latestAudit && (
                        <>
                          {' · '}last audited{' '}
                          {r.latestAudit.generatedAt
                            ? new Date(r.latestAudit.generatedAt).toLocaleDateString(undefined, { timeZone: tz })
                            : 'unknown'}
                          {' '}
                          (
                          {r.latestAudit.provider === 'openrouter'
                            ? 'DeepSeek'
                            : 'Claude'}
                          )
                        </>
                      )}
                    </p>
                  </div>
                  <Badge variant={scoreBadgeVariant(r.latestAudit?.overallScore ?? null)}>
                    {r.latestAudit?.overallScore !== null &&
                    r.latestAudit?.overallScore !== undefined
                      ? Math.round(r.latestAudit.overallScore * 100) + '%'
                      : 'No audit'}
                  </Badge>
                </li>
              ))}
            </ul>
          )}
        </CardContent>
      </Card>
    </div>
  );
}