wulf-pulse/app/backup-status/page.tsx

'use client';

import { useEffect, useState } from 'react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { BackupSummaryCards } from '@/components/backup/backup-summary-cards';
import { CompanyBackupTable, CompanyBackupRow } from '@/components/backup/company-backup-table';
import { ComplianceSummaryCards } from '@/components/backup/compliance-summary-cards';
import { ComplianceDetailTable } from '@/components/backup/compliance-detail-table';
import { RefreshCw } from 'lucide-react';
import { Skeleton } from '@/components/ui/skeleton';

interface BackupStatusData {
  totalProtectedWorkloads: number;
  unprotectedWorkloads: number;
  successRate24h: number;
  failedJobs24h: number;
  warningJobs24h: number;
  totalBackupServerJobs: number;
  totalBackupAgentJobs: number;
  lastSyncAt: string | null;
}

interface ComplianceData {
  summary: {
    totalContractedDevices: number;
    matchedDevices: number;
    contractedNotBackedUp: number;
    backedUpNotContracted: number;
    computedAt: string | null;
  };
  mismatches: any[];
}

function timeAgo(dateStr: string | null): string {
  if (!dateStr) return 'Never';
  const diff = Date.now() - new Date(dateStr).getTime();
  const minutes = Math.floor(diff / 60000);
  if (minutes < 1) return 'Just now';
  if (minutes < 60) return `${minutes}m ago`;
  const hours = Math.floor(minutes / 60);
  if (hours < 24) return `${hours}h ago`;
  return `${Math.floor(hours / 24)}d ago`;
}

export default function BackupStatusPage() {
  const [status, setStatus] = useState<BackupStatusData | null>(null);
  const [companies, setCompanies] = useState<CompanyBackupRow[]>([]);
  const [compliance, setCompliance] = useState<ComplianceData | null>(null);
  const [loading, setLoading] = useState(true);
  const [syncing, setSyncing] = useState(false);

  const fetchData = async () => {
    try {
      const [statusRes, companiesRes, complianceRes] = await Promise.all([
        fetch('/api/veeam/backup-status').then(r => r.json()),
        fetch('/api/veeam/companies').then(r => r.json()),
        fetch('/api/veeam/compliance').then(r => r.json()),
      ]);
      setStatus(statusRes);
      setCompanies(Array.isArray(companiesRes) ? companiesRes : []);
      setCompliance(complianceRes);
    } catch (error) {
      console.error('Failed to fetch backup status:', error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  const handleSync = async () => {
    setSyncing(true);
    try {
      await fetch('/api/veeam/sync', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ syncType: 'full' }),
      });
      // Poll for completion
      const poll = setInterval(async () => {
        const res = await fetch('/api/veeam/sync').then(r => r.json());
        if (!res.isSyncing) {
          clearInterval(poll);
          setSyncing(false);
          fetchData();
        }
      }, 3000);
      // Safety timeout
      setTimeout(() => {
        clearInterval(poll);
        setSyncing(false);
        fetchData();
      }, 120000);
    } catch {
      setSyncing(false);
    }
  };

  const isSyncStale = status?.lastSyncAt
    ? Date.now() - new Date(status.lastSyncAt).getTime() > 2 * 60 * 60 * 1000
    : true;

  if (loading) {
    return (
      <div className="container px-6 py-6 space-y-6">
        <div className="grid gap-4 md:grid-cols-3 lg:grid-cols-5">
          {[...Array(5)].map((_, i) => <Skeleton key={i} className="h-24" />)}
        </div>
        <Skeleton className="h-96" />
      </div>
    );
  }

  return (
    <div>
      <div className="container px-6 py-6 space-y-6">

        <Tabs defaultValue="overview" className="space-y-6">
          <div className="flex items-center justify-between">
            <TabsList>
              <TabsTrigger value="overview">Backup Overview</TabsTrigger>
              <TabsTrigger value="compliance">
                Contract Compliance
                {compliance && (compliance.summary.contractedNotBackedUp > 0 || compliance.summary.backedUpNotContracted > 0) && (
                  <Badge variant="destructive" className="ml-2 h-5 px-1.5 text-xs">
                    {compliance.summary.contractedNotBackedUp + compliance.summary.backedUpNotContracted}
                  </Badge>
                )}
              </TabsTrigger>
            </TabsList>
            <div className="flex items-center gap-3">
              {status?.lastSyncAt && (
                <span className="text-sm text-muted-foreground">
                  Last sync: {timeAgo(status.lastSyncAt)}
                </span>
              )}
              <Button
                variant="outline"
                size="sm"
                onClick={handleSync}
                disabled={syncing}
              >
                <RefreshCw className={`h-4 w-4 mr-2 ${syncing ? 'animate-spin' : ''}`} />
                {syncing ? 'Syncing...' : 'Sync Now'}
              </Button>
            </div>
          </div>

          <TabsContent value="overview" className="space-y-6">
            {status && (
              <BackupSummaryCards
                totalProtectedWorkloads={status.totalProtectedWorkloads}
                successRate24h={status.successRate24h}
                failedJobs24h={status.failedJobs24h}
                warningJobs24h={status.warningJobs24h}
                totalBackupServerJobs={status.totalBackupServerJobs}
                totalBackupAgentJobs={status.totalBackupAgentJobs}
                lastSyncAt={status.lastSyncAt}
              />
            )}
            <CompanyBackupTable companies={companies} />
          </TabsContent>

          <TabsContent value="compliance" className="space-y-6">
            {compliance && (
              <>
                <ComplianceSummaryCards
                  totalContractedDevices={compliance.summary.totalContractedDevices}
                  matchedDevices={compliance.summary.matchedDevices}
                  contractedNotBackedUp={compliance.summary.contractedNotBackedUp}
                  backedUpNotContracted={compliance.summary.backedUpNotContracted}
                />
                <ComplianceDetailTable mismatches={compliance.mismatches} />
              </>
            )}
          </TabsContent>
        </Tabs>
      </div>
    </div>
  );
}