'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
  ArrowLeft, Activity, History, Calendar, Shield, RefreshCw, Loader2,
  CheckCircle2, XCircle, AlertTriangle, Clock, Server, HardDrive,
  Bot, Bell, ChevronDown, ChevronRight, Target, Play,
} from 'lucide-react';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { StatusBadge } from '@/components/ui/status-badge';
import SyncScheduler from '@/components/admin/SyncScheduler';

// ── Helpers ───────────────────────────────────────────────────────────────────
function fmtDate(d: string | null | undefined) {
  if (!d) return 'Never';
  return new Date(d).toLocaleString(undefined, { month: 'short', day: 'numeric', year: 'numeric', hour: '2-digit', minute: '2-digit' });
}
function fmtDur(ms: number) {
  if (ms < 60000) return `${Math.round(ms / 1000)}s`;
  return `${Math.floor(ms / 60000)}m ${Math.round((ms % 60000) / 1000)}s`;
}

function StatCard({ label, value, sub, icon: Icon, cls }: {
  label: string; value: string | number; sub?: string; icon?: React.ElementType; cls?: string;
}) {
  return (
    <div className={`rounded-lg border p-4 flex flex-col gap-1 ${cls ?? ''}`}>
      <div className="flex items-center gap-2 text-xs text-muted-foreground">
        {Icon && <Icon className="w-3.5 h-3.5" />}{label}
      </div>
      <div className="text-2xl font-bold tabular-nums">{value}</div>
      {sub && <div className="text-xs text-muted-foreground">{sub}</div>}
    </div>
  );
}

function SyncStatusBadge({ status }: { status: string }) {
  const tone =
    status === 'completed' ? 'ok' :
    status === 'failed'    ? 'error' :
    status === 'started'   ? 'info' :
                             'warn';
  return <StatusBadge tone={tone}>{status}</StatusBadge>;
}

// ── Status Tab ────────────────────────────────────────────────────────────────
function VeeamStatusTab({ data, onSync, syncing }: { data: any; onSync: (t: string) => void; syncing: boolean }) {
  if (!data) return (
    <div className="flex items-center justify-center py-12">
      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
    </div>
  );

  const aj = data.agentJobs ?? {};
  const bj = data.backupJobs ?? {};
  const totalFailed  = (aj.failed  ?? 0) + (bj.failed  ?? 0);
  const totalWarning = (aj.warning ?? 0) + (bj.warning ?? 0);
  const totalRunning = aj.running ?? 0;
  const totalSuccess = (aj.success ?? 0) + (bj.success ?? 0);

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between rounded-lg border p-4 bg-muted/30">
        <div className="space-y-0.5">
          <p className="text-sm font-medium">{data.configured ? 'Connected to VSPC' : 'Not configured'}</p>
          <p className="text-xs text-muted-foreground">Last sync: {fmtDate(data.lastSync)}</p>
        </div>
        <div className="flex gap-2">
          <Button size="sm" variant="outline" onClick={() => onSync('incremental')} disabled={syncing || !data.configured}>
            {syncing ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <RefreshCw className="w-4 h-4 mr-2" />}
            Incremental
          </Button>
          <Button size="sm" onClick={() => onSync('full')} disabled={syncing || !data.configured}>
            {syncing ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <RefreshCw className="w-4 h-4 mr-2" />}
            Full Sync
          </Button>
        </div>
      </div>

      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
        <StatCard label="Organizations"      value={data.organizations    ?? 0} icon={Server}    />
        <StatCard label="Protected Workloads" value={data.protectedWorkloads ?? 0} icon={HardDrive} />
        <StatCard label="Agent Jobs"  value={aj.total ?? 0} sub={`${aj.success ?? 0} success`} icon={Shield} />
        <StatCard label="Backup Jobs" value={bj.total ?? 0} sub={`${bj.success ?? 0} success`} icon={Shield} />
      </div>

      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
        <StatCard label="Running" value={totalRunning} icon={Clock}
          cls={totalRunning > 0 ? 'border-blue-500/30 bg-blue-500/5' : ''} />
        <StatCard label="Failed" value={totalFailed} icon={XCircle}
          cls={totalFailed > 0 ? 'border-red-500/30 bg-red-500/5' : ''} />
        <StatCard label="Warning" value={totalWarning} icon={AlertTriangle}
          cls={totalWarning > 0 ? 'border-yellow-500/30 bg-yellow-500/5' : ''} />
        <StatCard label="Success" value={totalSuccess} icon={CheckCircle2}
          cls="border-green-500/30 bg-green-500/5" />
      </div>

      {(totalFailed > 0 || totalWarning > 0 || totalRunning > 0) && (
        <div className="rounded-lg border p-4 space-y-2">
          <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Attention Required</p>
          {totalFailed  > 0 && <div className="flex items-center gap-2 text-sm text-red-600"><XCircle className="w-4 h-4" />{totalFailed} job{totalFailed !== 1 ? 's' : ''} failed</div>}
          {totalWarning > 0 && <div className="flex items-center gap-2 text-sm text-yellow-700"><AlertTriangle className="w-4 h-4" />{totalWarning} job{totalWarning !== 1 ? 's' : ''} with warnings</div>}
          {totalRunning > 0 && <div className="flex items-center gap-2 text-sm text-blue-600"><Loader2 className="w-4 h-4 animate-spin" />{totalRunning} job{totalRunning !== 1 ? 's' : ''} running</div>}
        </div>
      )}
    </div>
  );
}

// ── History Tab ───────────────────────────────────────────────────────────────
const ENTITY_LABELS: Record<string, string> = {
  organizations:      'Organizations',
  backup_servers:     'Backup Servers',
  repositories:       'Repositories',
  backup_jobs:        'Backup Jobs',
  backup_agent_jobs:  'Agent Jobs',
  protected_workloads:'Protected Workloads',
  backup_agents:      'Agents',
  alarms:             'Alarms',
};

function HistoryRow({ row }: { row: any }) {
  const [expanded, setExpanded] = useState(false);
  const dur = row.completed_at && row.started_at
    ? new Date(row.completed_at).getTime() - new Date(row.started_at).getTime()
    : null;

  let entities: Array<{ entity: string; success: boolean; recordsUpserted: number; duration: number; error?: string }> = [];
  try {
    if (row.entity_details) {
      entities = typeof row.entity_details === 'string' ? JSON.parse(row.entity_details) : row.entity_details;
    }
  } catch { /* ignore parse errors */ }

  return (
    <>
      <TableRow
        className={entities.length > 0 ? 'cursor-pointer' : ''}
        onClick={() => entities.length > 0 && setExpanded(e => !e)}
      >
        <TableCell>
          <div className="flex items-center gap-1.5">
            {entities.length > 0
              ? (expanded
                  ? <ChevronDown className="w-3.5 h-3.5 text-muted-foreground" />
                  : <ChevronRight className="w-3.5 h-3.5 text-muted-foreground" />)
              : <span className="w-3.5" />}
            <span className="capitalize">{row.sync_type}</span>
          </div>
        </TableCell>
        <TableCell><SyncStatusBadge status={row.status} /></TableCell>
        <TableCell className="num font-medium">{(row.records_added ?? 0).toLocaleString()}</TableCell>
        <TableCell className="text-muted-foreground text-xs num">{fmtDate(row.started_at)}</TableCell>
        <TableCell className="text-muted-foreground num">{dur != null ? fmtDur(dur) : '—'}</TableCell>
        <TableCell className="text-muted-foreground capitalize">{row.triggered_by ?? '—'}</TableCell>
      </TableRow>
      {expanded && entities.length > 0 && (
        <TableRow className="bg-muted/20">
          <TableCell colSpan={6} className="px-8 py-3">
            <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2">Entity Breakdown</p>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
              {entities.map((e) => (
                <div key={e.entity} className={`rounded border px-3 py-2 text-xs ${e.success ? '' : 'border-red-300 bg-red-50 dark:bg-red-950/20'}`}>
                  <div className="font-medium text-foreground">{ENTITY_LABELS[e.entity] ?? e.entity}</div>
                  <div className="text-muted-foreground mt-0.5">
                    {e.success
                      ? <><span className="text-green-700 font-semibold">{e.recordsUpserted.toLocaleString()}</span> records · {fmtDur(e.duration)}</>
                      : <span className="text-red-600">Failed: {e.error?.substring(0, 60)}</span>}
                  </div>
                </div>
              ))}
            </div>
            {row.error_message && (
              <div className="mt-2 text-xs text-red-600 bg-red-50 dark:bg-red-950/20 border border-red-200 rounded px-3 py-2">
                {row.error_message}
              </div>
            )}
          </TableCell>
        </TableRow>
      )}
    </>
  );
}

function VeeamHistoryTab({ refreshKey }: { refreshKey: number }) {
  const [rows, setRows] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    fetch('/api/sync/history?entityType=veeam&limit=50')
      .then(r => r.json())
      .then(d => setRows(d.history ?? []))
      .catch(() => setRows([]))
      .finally(() => setLoading(false));
  }, [refreshKey]);

  if (loading) return <div className="flex items-center justify-center py-12"><Loader2 className="w-5 h-5 animate-spin text-muted-foreground" /></div>;
  if (!rows.length) return <div className="text-center py-12 text-muted-foreground text-sm">No sync history yet — run a sync to populate</div>;

  return (
    <div className="rounded-lg border overflow-hidden">
      <Table>
        <TableHeader className="bg-muted/50">
          <TableRow>
            <TableHead>Type</TableHead>
            <TableHead>Status</TableHead>
            <TableHead>Records</TableHead>
            <TableHead>Started</TableHead>
            <TableHead>Duration</TableHead>
            <TableHead>Triggered By</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {rows.map((row, i) => <HistoryRow key={i} row={row} />)}
        </TableBody>
      </Table>
    </div>
  );
}

// ── Agents Tab ────────────────────────────────────────────────────────────────
function AgentsTab({ refreshKey }: { refreshKey: number }) {
  const [data, setData] = useState<any>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    fetch('/api/veeam/agents')
      .then(r => r.json())
      .then(d => setData(d))
      .catch(() => setData(null))
      .finally(() => setLoading(false));
  }, [refreshKey]);

  if (loading) return <div className="flex items-center justify-center py-12"><Loader2 className="w-5 h-5 animate-spin text-muted-foreground" /></div>;
  if (!data || !data.agents?.length) return <div className="text-center py-12 text-muted-foreground text-sm">No agent data — run a sync first</div>;

  const s = data.summary ?? {};
  const agents: any[] = data.agents ?? [];

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
        <StatCard label="Total Agents"     value={s.total       ?? 0} icon={Bot} />
        <StatCard label="Active"           value={s.active      ?? 0} icon={CheckCircle2} cls="border-green-500/30 bg-green-500/5" />
        <StatCard label="Inaccessible"     value={s.inaccessible ?? 0} icon={XCircle}
          cls={(s.inaccessible ?? 0) > 0 ? 'border-red-500/30 bg-red-500/5' : ''} />
        <StatCard label="Outdated"         value={s.outdated    ?? 0} icon={AlertTriangle}
          cls={(s.outdated ?? 0) > 0 ? 'border-yellow-500/30 bg-yellow-500/5' : ''} />
        <StatCard label="Win / Linux / Mac" value={`${s.windows ?? 0} / ${s.linux ?? 0} / ${s.mac ?? 0}`} icon={Server} />
      </div>

      <div className="rounded-lg border overflow-hidden">
        <Table>
          <TableHeader className="bg-muted/50">
            <TableRow>
              <TableHead>Name</TableHead>
              <TableHead>Organization</TableHead>
              <TableHead>Platform</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Agent Status</TableHead>
              <TableHead>Version</TableHead>
              <TableHead>Mode</TableHead>
              <TableHead>Jobs</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {agents.map((a: any) => (
              <TableRow key={a.instance_uid}>
                <TableCell className="font-medium">{a.name}</TableCell>
                <TableCell className="text-muted-foreground text-xs">{a.organization_name ?? '—'}</TableCell>
                <TableCell className="text-xs">{a.agent_platform ?? '—'}</TableCell>
                <TableCell>
                  <StatusBadge tone={a.status === 'Active' ? 'ok' : 'inactive'}>
                    {a.status ?? '—'}
                  </StatusBadge>
                </TableCell>
                <TableCell>
                  <StatusBadge
                    tone={
                      a.management_agent_status === 'Inaccessible' ? 'error' :
                      a.management_agent_status === 'Accessible'   ? 'ok' :
                      'inactive'
                    }
                  >
                    {a.management_agent_status ?? '—'}
                  </StatusBadge>
                </TableCell>
                <TableCell className="text-xs">
                  <span className={a.version_status === 'Outdated' ? 'text-yellow-700 font-medium' : 'text-muted-foreground'}>
                    {a.version ?? '—'}
                    {a.version_status === 'Outdated' && ' ⚠'}
                  </span>
                </TableCell>
                <TableCell className="text-xs text-muted-foreground">{a.operation_mode ?? '—'}</TableCell>
                <TableCell className="text-xs num">
                  <span className="text-green-700">{a.success_jobs_count ?? 0}✓</span>
                  {(a.running_jobs_count ?? 0) > 0 && <span className="text-blue-600 ml-1">{a.running_jobs_count}▶</span>}
                  {(a.total_jobs_count ?? 0) - (a.success_jobs_count ?? 0) - (a.running_jobs_count ?? 0) > 0 && (
                    <span className="text-red-600 ml-1">
                      {(a.total_jobs_count ?? 0) - (a.success_jobs_count ?? 0) - (a.running_jobs_count ?? 0)}✗
                    </span>
                  )}
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}

// ── Alarms Tab ────────────────────────────────────────────────────────────────
function AlarmsTab({ refreshKey }: { refreshKey: number }) {
  const [data, setData] = useState<any>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    fetch('/api/veeam/alarms')
      .then(r => r.json())
      .then(d => setData(d))
      .catch(() => setData(null))
      .finally(() => setLoading(false));
  }, [refreshKey]);

  if (loading) return <div className="flex items-center justify-center py-12"><Loader2 className="w-5 h-5 animate-spin text-muted-foreground" /></div>;
  if (!data || !data.alarms?.length) return <div className="text-center py-12 text-muted-foreground text-sm">No alarm data — run a sync first</div>;

  const s = data.summary ?? {};
  const alarms: any[] = data.alarms ?? [];

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
        <StatCard label="Total Alarms"  value={s.total         ?? 0} icon={Bell} />
        <StatCard label="Active"        value={s.statusActive  ?? 0} icon={XCircle}
          cls={(s.statusActive ?? 0) > 0 ? 'border-red-500/30 bg-red-500/5' : ''} />
        <StatCard label="Warning"       value={s.statusWarning ?? 0} icon={AlertTriangle}
          cls={(s.statusWarning ?? 0) > 0 ? 'border-yellow-500/30 bg-yellow-500/5' : ''} />
        <StatCard label="Resolved"      value={s.statusResolved ?? 0} icon={CheckCircle2}
          cls="border-green-500/30 bg-green-500/5" />
      </div>

      <div className="rounded-lg border overflow-hidden">
        <Table>
          <TableHeader className="bg-muted/50">
            <TableRow>
              <TableHead>Object</TableHead>
              <TableHead>Type</TableHead>
              <TableHead>Organization</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Repeats</TableHead>
              <TableHead>Last Activation</TableHead>
              <TableHead>Message</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {alarms.map((a: any) => (
              <TableRow key={a.instance_uid}>
                <TableCell className="font-medium">{a.object_computer_name || a.object_name || '—'}</TableCell>
                <TableCell className="text-xs text-muted-foreground">{a.object_type ?? '—'}</TableCell>
                <TableCell className="text-xs text-muted-foreground">{a.organization_name ?? '—'}</TableCell>
                <TableCell>
                  <StatusBadge
                    tone={
                      a.last_activation_status === 'Active'   ? 'error' :
                      a.last_activation_status === 'Warning'  ? 'warn' :
                      a.last_activation_status === 'Resolved' ? 'ok' :
                      'inactive'
                    }
                  >
                    {a.last_activation_status ?? '—'}
                  </StatusBadge>
                </TableCell>
                <TableCell className="num text-xs">{a.repeat_count ?? 0}</TableCell>
                <TableCell className="text-xs text-muted-foreground num">{fmtDate(a.last_activation_time)}</TableCell>
                <TableCell className="text-xs text-muted-foreground max-w-xs truncate" title={a.last_activation_message ?? ''}>
                  {a.last_activation_message?.trim() || '—'}
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}

// ── RPO Tab ───────────────────────────────────────────────────────────────────
function RpoTab({ refreshKey }: { refreshKey: number }) {
  const [data, setData] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [running, setRunning] = useState(false);
  const [lastResult, setLastResult] = useState<any>(null);

  const fetchStatus = () => {
    setLoading(true);
    fetch('/api/veeam/rpo-check')
      .then(r => r.json())
      .then(d => setData(d))
      .catch(() => setData(null))
      .finally(() => setLoading(false));
  };

  useEffect(() => { fetchStatus(); }, [refreshKey]);

  const runCheck = async () => {
    setRunning(true);
    try {
      const r = await fetch('/api/veeam/rpo-check', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({}) });
      const d = await r.json();
      setLastResult(d);
      fetchStatus();
    } catch { /* ignore */ }
    finally { setRunning(false); }
  };

  if (loading) return <div className="flex items-center justify-center py-12"><Loader2 className="w-5 h-5 animate-spin text-muted-foreground" /></div>;

  const s = data?.summary ?? {};
  const jobs: any[] = data?.jobs ?? [];
  const breachedJobs = jobs.filter((j: any) => j.is_breached);
  const healthyJobs  = jobs.filter((j: any) => !j.is_breached);

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between rounded-lg border p-4 bg-muted/30">
        <div className="space-y-0.5">
          <p className="text-sm font-medium">RPO-Based Workstation Backup Alerting</p>
          <p className="text-xs text-muted-foreground">
            One ticket per job — created when RPO is breached, auto-resolved when backup succeeds. Enable the scheduler to run every 30 min.
          </p>
        </div>
        <Button size="sm" onClick={runCheck} disabled={running}>
          {running ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <Play className="w-4 h-4 mr-2" />}
          Run Check Now
        </Button>
      </div>

      {lastResult && !lastResult.error && (
        <div className="rounded-lg border border-blue-500/30 bg-blue-500/5 p-4 text-sm">
          <p className="font-medium text-blue-700 mb-1">Last Run Result</p>
          <div className="flex gap-4 text-xs text-muted-foreground">
            <span>Checked: <strong>{lastResult.checked}</strong></span>
            <span className="text-green-700">New Tickets: <strong>{lastResult.newTickets}</strong></span>
            <span className="text-yellow-700">Escalated: <strong>{lastResult.escalated}</strong></span>
            <span>Resolved: <strong>{lastResult.resolved}</strong></span>
            {lastResult.errors?.length > 0 && <span className="text-red-600">Errors: <strong>{lastResult.errors.length}</strong></span>}
          </div>
        </div>
      )}

      <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
        <StatCard label="Total Jobs"       value={s.total          ?? 0} icon={Target} />
        <StatCard label="Within RPO"       value={s.healthy        ?? 0} icon={CheckCircle2} cls="border-green-500/30 bg-green-500/5" />
        <StatCard label="RPO Breached"     value={s.breached       ?? 0} icon={XCircle}
          cls={(s.breached ?? 0) > 0 ? 'border-red-500/30 bg-red-500/5' : ''} />
        <StatCard label="Open Tickets"     value={s.withOpenTicket ?? 0} icon={AlertTriangle}
          cls={(s.withOpenTicket ?? 0) > 0 ? 'border-yellow-500/30 bg-yellow-500/5' : ''} />
        <StatCard label="Critical / High"  value={`${s.critical ?? 0} / ${s.high ?? 0}`} icon={Clock}
          cls={(s.critical ?? 0) > 0 ? 'border-red-500/30 bg-red-500/5' : ''} />
      </div>

      {breachedJobs.length > 0 && (
        <div className="rounded-lg border overflow-hidden">
          <div className="px-4 py-2.5 bg-red-500/5 border-b flex items-center gap-2">
            <XCircle className="w-4 h-4 text-red-600" />
            <p className="text-xs font-semibold uppercase tracking-wider text-red-700">RPO Breached ({breachedJobs.length})</p>
          </div>
          <Table>
            <TableHeader className="bg-muted/50">
              <TableRow>
                <TableHead>Job</TableHead>
                <TableHead>Organization</TableHead>
                <TableHead>Last Backup</TableHead>
                <TableHead>Overdue</TableHead>
                <TableHead>Failure Reason</TableHead>
                <TableHead>Ticket</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {breachedJobs.map((j: any) => {
                const hrs = j.hours_since_backup;
                const display = hrs === null ? 'Never' : hrs >= 48 ? `${Math.round(hrs / 24)}d` : `${Math.round(hrs)}h`;
                const ticketTone =
                  j.open_ticket?.priority_level === 'critical' ? 'error' :
                  j.open_ticket?.priority_level === 'high'     ? 'warn'  :
                  'pending';
                return (
                  <TableRow key={j.job_instance_uid}>
                    <TableCell className="font-medium text-xs">{j.job_name}</TableCell>
                    <TableCell className="text-xs text-muted-foreground">{j.org_name}</TableCell>
                    <TableCell className="text-xs text-muted-foreground num">{fmtDate(j.last_end_time)}</TableCell>
                    <TableCell className="num text-xs font-semibold text-red-600">{display}</TableCell>
                    <TableCell className="text-xs text-muted-foreground max-w-xs truncate" title={j.failure_category ?? ''}>
                      {j.failure_category ?? '—'}
                    </TableCell>
                    <TableCell className="text-xs">
                      {j.open_ticket ? (
                        <StatusBadge tone={ticketTone}>
                          {j.open_ticket.at_ticket_number} · {j.open_ticket.priority_level}
                        </StatusBadge>
                      ) : (
                        <span className="text-muted-foreground">No ticket yet</span>
                      )}
                    </TableCell>
                  </TableRow>
                );
              })}
            </TableBody>
          </Table>
        </div>
      )}

      {healthyJobs.length > 0 && (
        <details className="rounded-lg border overflow-hidden">
          <summary className="px-4 py-2.5 bg-green-500/5 border-b cursor-pointer flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-green-700">
            <CheckCircle2 className="w-4 h-4" />Within RPO ({healthyJobs.length})
          </summary>
          <Table>
            <TableHeader className="bg-muted/50">
              <TableRow>
                <TableHead>Job</TableHead>
                <TableHead>Organization</TableHead>
                <TableHead>Last Backup</TableHead>
                <TableHead>Hours Ago</TableHead>
                <TableHead>RPO</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {healthyJobs.map((j: any) => (
                <TableRow key={j.job_instance_uid}>
                  <TableCell className="font-medium text-xs">{j.job_name}</TableCell>
                  <TableCell className="text-xs text-muted-foreground">{j.org_name}</TableCell>
                  <TableCell className="text-xs text-muted-foreground num">{fmtDate(j.last_end_time)}</TableCell>
                  <TableCell className="num text-xs text-green-700">
                    {j.hours_since_backup !== null ? `${j.hours_since_backup}h` : '—'}
                  </TableCell>
                  <TableCell className="text-xs text-muted-foreground num">{j.rpo_hours}h</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </details>
      )}
    </div>
  );
}

// ── Page ──────────────────────────────────────────────────────────────────────
export default function VeeamSyncPage() {
  const [status, setStatus] = useState<any>(null);
  const [syncing, setSyncing] = useState(false);
  const [refreshKey, setRefreshKey] = useState(0);

  const fetchStatus = async () => {
    const res = await fetch('/api/integrations/status');
    if (res.ok) { const d = await res.json(); setStatus(d.veeam); }
  };

  useEffect(() => { fetchStatus(); }, [refreshKey]);

  const handleSync = async (syncType = 'full') => {
    setSyncing(true);
    try {
      await fetch('/api/veeam/sync', {
        method: 'POST',
        body: JSON.stringify({ syncType }),
        headers: { 'Content-Type': 'application/json' },
      });
      const poll = setInterval(async () => {
        try {
          const r = await fetch('/api/veeam/sync');
          if (r.ok) {
            const d = await r.json();
            if (!d.isSyncing) {
              clearInterval(poll);
              setSyncing(false);
              setRefreshKey(k => k + 1);
            }
          }
        } catch { /* keep polling */ }
      }, 4000);
    } catch {
      setSyncing(false);
    }
  };

  return (
    <div className="container mx-auto py-4 md:py-8 px-4 space-y-6">
      <div className="flex items-center gap-4">
        <Link href="/admin/sync">
          <Button variant="outline" size="sm" className="gap-2">
            <ArrowLeft className="w-4 h-4" />Integrations
          </Button>
        </Link>
        <div className="flex items-center gap-3">
          <div className="p-2 rounded-lg border border-green-500/30 bg-green-500/5">
            <Shield className="w-5 h-5 text-green-500" />
          </div>
          <div>
            <h1 className="text-2xl font-bold">Backup — Veeam VSPC</h1>
            <p className="text-sm text-muted-foreground">Agent jobs, backup jobs, protected workloads, agents, alarms</p>
          </div>
        </div>
        <div className="ml-auto">
          <Link href="/backup-status">
            <Button variant="outline" size="sm">View Backup Status</Button>
          </Link>
        </div>
      </div>

      <Tabs defaultValue="status" className="w-full">
        <TabsList className="grid w-full max-w-3xl grid-cols-6">
          <TabsTrigger value="status"    className="gap-1.5"><Activity  className="h-4 w-4" />Status</TabsTrigger>
          <TabsTrigger value="rpo"       className="gap-1.5"><Target    className="h-4 w-4" />RPO</TabsTrigger>
          <TabsTrigger value="history"   className="gap-1.5"><History   className="h-4 w-4" />History</TabsTrigger>
          <TabsTrigger value="agents"    className="gap-1.5"><Bot       className="h-4 w-4" />Agents</TabsTrigger>
          <TabsTrigger value="alarms"    className="gap-1.5"><Bell      className="h-4 w-4" />Alarms</TabsTrigger>
          <TabsTrigger value="schedules" className="gap-1.5"><Calendar  className="h-4 w-4" />Schedules</TabsTrigger>
        </TabsList>

        <TabsContent value="status"    className="mt-6"><VeeamStatusTab data={status} onSync={handleSync} syncing={syncing} /></TabsContent>
        <TabsContent value="rpo"       className="mt-6"><RpoTab refreshKey={refreshKey} /></TabsContent>
        <TabsContent value="history"   className="mt-6"><VeeamHistoryTab refreshKey={refreshKey} /></TabsContent>
        <TabsContent value="agents"    className="mt-6"><AgentsTab refreshKey={refreshKey} /></TabsContent>
        <TabsContent value="alarms"    className="mt-6"><AlarmsTab refreshKey={refreshKey} /></TabsContent>
        <TabsContent value="schedules" className="mt-6"><SyncScheduler /></TabsContent>
      </Tabs>
    </div>
  );
}