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

'use client';

import { useEffect, useState } from 'react';
import { PageHeader } from '@/components/navigation/app-navigation';
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, AlertTriangle } 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>
        <PageHeader title="Backup Status" description="Veeam backup health and compliance overview" />
        <div className="container 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>
      </div>
    );
  }

  return (
    <div>
      <PageHeader
        title="Backup Status"
        description="Veeam backup health and compliance overview"
        actions={
          <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 className="container py-6 space-y-6">
        {/* Stale sync warning */}
        {isSyncStale && !loading && (
          <div className="flex items-center gap-2 p-3 rounded-md bg-yellow-500/10 border border-yellow-500/20 text-yellow-600 dark:text-yellow-400">
            <AlertTriangle className="h-4 w-4" />
            <span className="text-sm">
              Backup data may be outdated. Last sync: {status?.lastSyncAt ? timeAgo(status.lastSyncAt) : 'Never'}.
            </span>
          </div>
        )}

        <Tabs defaultValue="overview" className="space-y-6">
          <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>

          <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>
  );
}