wulf-pulse/app/admin/sync/page.tsx

'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { RefreshCw, CheckCircle2, XCircle, AlertTriangle, Clock, Loader2, ChevronRight } from 'lucide-react';

interface IntegrationCard {
  id: string;
  category: string;
  product: string;
  description: string;
  href: string;
  logo: string;
  color: string;
}

const INTEGRATIONS: IntegrationCard[] = [
  { id: 'autotask',  category: 'PSA',           product: 'Autotask',    description: 'Tickets, companies, contacts, time entries, configuration items', href: '/admin/sync/autotask',  logo: '/logos/autotask.ico',  color: 'red'    },
  { id: 'itglue',    category: 'Documentation', product: 'IT Glue',     description: 'Organizations, configurations, contacts, passwords, flexible assets, documents, domains', href: '/admin/sync/itglue', logo: '/logos/itglue.ico', color: 'blue' },
  { id: 'veeam',     category: 'Backup',        product: 'Veeam VSPC',  description: 'Agent jobs, backup jobs, protected workloads, compliance',         href: '/admin/sync/veeam',     logo: '/logos/veeam.ico',     color: 'green'  },
  { id: 'datto-rmm', category: 'RMM',           product: 'Datto RMM',   description: 'Device monitoring, alerts, patch management, remote access',       href: '/admin/sync/datto-rmm', logo: '/logos/datto-rmm.ico', color: 'orange' },
  { id: 'auvik',     category: 'NMS',           product: 'Auvik',       description: 'Network devices, topology, tenant mappings',                       href: '/admin/sync/auvik',     logo: '/logos/auvik.ico',     color: 'purple' },
  { id: 'addigy',       category: 'Apple RMM',  product: 'Addigy',        description: 'macOS/iOS device management, policies, compliance',                href: '/admin/sync/addigy',         logo: '/logos/addigy.ico',       color: 'gray'   },
  { id: 'sentinelone', category: 'EDR/AV',     product: 'SentinelOne',   description: 'Endpoint agents, threat detections, site coverage, AV health',        href: '/admin/sync/sentinelone',    logo: '/logos/sentinelone.ico',  color: 'purple' },
];

const COLOR_MAP: Record<string, { bg: string; border: string }> = {
  red:    { bg: 'bg-red-500/5',    border: 'border-red-500/20'    },
  green:  { bg: 'bg-green-500/5',  border: 'border-green-500/20'  },
  blue:   { bg: 'bg-blue-500/5',   border: 'border-blue-500/20'   },
  orange: { bg: 'bg-orange-500/5', border: 'border-orange-500/20' },
  purple: { bg: 'bg-purple-500/5', border: 'border-purple-500/20' },
  gray:   { bg: 'bg-muted/20',     border: 'border-border'        },
};

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

export default function SyncOverviewPage() {
  const [status, setStatus] = useState<any>(null);
  const [autotaskSync, setAutotaskSync] = useState<any>(null);
  const [loading, setLoading] = useState(true);

  const [itglueSyncData, setItglueSyncData] = useState<any>(null);
  const [s1SyncData, setS1SyncData] = useState<any>(null);

  const fetchAll = async () => {
    try {
      const [intRes, atRes, itgRes, s1Res] = await Promise.all([
        fetch('/api/integrations/status'),
        fetch('/api/sync/last-sync'),
        fetch('/api/itglue/sync'),
        fetch('/api/sentinelone/sync'),
      ]);
      if (intRes.ok) setStatus(await intRes.json());
      if (atRes.ok) {
        const d = await atRes.json();
        setAutotaskSync(d.lastSync || {});
      }
      if (itgRes.ok) setItglueSyncData(await itgRes.json());
      if (s1Res.ok) setS1SyncData(await s1Res.json());
    } catch (e) {
      console.error(e);
    } finally {
      setLoading(false);
    }
  };

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

  const getAutotaskSummary = () => {
    if (!autotaskSync) return null;
    const entries = Object.values(autotaskSync) as any[];
    if (!entries.length) return null;
    const latest = entries.reduce((a: any, b: any) =>
      new Date(a.completed_at) > new Date(b.completed_at) ? a : b
    );
    const failed = entries.filter((e: any) => e.status === 'failed').length;
    return { lastSync: latest.completed_at, failed, total: entries.length };
  };

  const atSummary = getAutotaskSummary();

  const getSummary = (id: string) => {
    if (!status) return null;
    if (id === 'autotask') return atSummary;
    if (id === 'veeam') {
      const v = status.veeam;
      if (!v) return null;
      const aj = v.agentJobs ?? {};
      const bj = v.backupJobs ?? {};
      return {
        lastSync: v.lastSync,
        failed: (aj.failed ?? 0) + (bj.failed ?? 0),
        warning: (aj.warning ?? 0) + (bj.warning ?? 0),
        running: aj.running ?? 0,
        total: (aj.total ?? 0) + (bj.total ?? 0),
      };
    }
    if (id === 'datto-rmm') {
      const d = status.dattoRmm;
      if (!d) return null;
      return {
        lastSync: d.lastSync,
        sites: d.sites ?? 0,
        devices: d.devices?.total ?? 0,
        online: d.devices?.online ?? 0,
        offline: d.devices?.offline ?? 0,
        openAlerts: d.openAlerts?.total ?? 0,
        critical: d.openAlerts?.critical ?? 0,
      };
    }
    if (id === 'itglue') {
      if (!itglueSyncData) return null;
      const h = itglueSyncData.history?.[0];
      const c = itglueSyncData.counts ?? {};
      return {
        lastSync: h?.completed_at ?? null,
        organizations: Number(c.organizations ?? 0),
        configurations: Number(c.configurations ?? 0),
        totalUpserted: h?.total_upserted ?? 0,
        status: h?.status ?? null,
      };
    }
    if (id === 'sentinelone') {
      if (!s1SyncData) return null;
      const h = s1SyncData.history?.[0];
      const c = s1SyncData.counts ?? {};
      return {
        lastSync: h?.completed_at ?? null,
        status: h?.status ?? null,
        sites: Number(c.sites ?? 0),
        agents: Number(c.agents ?? 0),
        infected: Number(c.infected ?? 0),
        threats: Number(c.threats ?? 0),
      };
    }
    if (id === 'auvik') return { lastSync: status.auvik?.lastSync, configured: status.auvik?.configured };
    if (id === 'addigy') return { lastSync: status.addigy?.lastSync, configured: status.addigy?.configured };
    return null;
  };

  const getStatusIcon = (id: string, summary: any) => {
    if (!summary) return <Clock className="w-4 h-4 text-muted-foreground" />;
    if (id === 'veeam') {
      if (summary.failed > 0) return <XCircle className="w-4 h-4 text-red-500" />;
      if (summary.warning > 0 || summary.running > 0) return <AlertTriangle className="w-4 h-4 text-yellow-500" />;
      return <CheckCircle2 className="w-4 h-4 text-green-500" />;
    }
    if (id === 'autotask') {
      if (summary.failed > 0) return <XCircle className="w-4 h-4 text-red-500" />;
      return <CheckCircle2 className="w-4 h-4 text-green-500" />;
    }
    if (id === 'datto-rmm') {
      if (summary.critical > 0) return <XCircle className="w-4 h-4 text-red-500" />;
      if (summary.openAlerts > 0) return <AlertTriangle className="w-4 h-4 text-yellow-500" />;
      return <CheckCircle2 className="w-4 h-4 text-green-500" />;
    }
    if (id === 'itglue') {
      if (!summary.lastSync) return <Clock className="w-4 h-4 text-muted-foreground" />;
      if (summary.status === 'failed') return <XCircle className="w-4 h-4 text-red-500" />;
      return <CheckCircle2 className="w-4 h-4 text-green-500" />;
    }
    if (id === 'sentinelone') {
      if (!summary.lastSync) return <Clock className="w-4 h-4 text-muted-foreground" />;
      if (summary.infected > 0) return <AlertTriangle className="w-4 h-4 text-red-500" />;
      return <CheckCircle2 className="w-4 h-4 text-green-500" />;
    }
    return <CheckCircle2 className="w-4 h-4 text-green-500" />;
  };

  return (
    <div className="container mx-auto py-4 md:py-8 px-4 space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl md:text-3xl font-bold">Integrations & Sync</h1>
          <p className="text-sm text-muted-foreground mt-0.5">Manage data sync across all connected platforms</p>
        </div>
        <Button variant="outline" size="sm" onClick={fetchAll} className="gap-2">
          <RefreshCw className="w-4 h-4" />
          Refresh
        </Button>
      </div>

      {loading ? (
        <div className="flex items-center justify-center py-20">
          <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 items-stretch">
          {INTEGRATIONS.map((intg) => {
            const colors = COLOR_MAP[intg.color];
            const summary = getSummary(intg.id);
            return (
              <Link key={intg.id} href={intg.href} className="flex">
                <div className={`flex flex-col w-full rounded-xl border ${colors.border} ${colors.bg} p-5 hover:shadow-md transition-all cursor-pointer group`}>

                  {/* Header: logo + names + chevron */}
                  <div className="flex items-start justify-between mb-4">
                    <div className="flex items-center gap-3">
                      <img src={intg.logo} alt={intg.product} className="w-10 h-10 shrink-0 rounded-lg object-contain" />
                      <div>
                        <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground leading-none mb-1">
                          {intg.category}
                        </p>
                        <div className="flex items-center gap-2">
                          <span className="font-bold text-base leading-tight">{intg.product}</span>
                          {summary && getStatusIcon(intg.id, summary)}
                        </div>
                      </div>
                    </div>
                    <ChevronRight className="w-4 h-4 text-muted-foreground group-hover:text-foreground transition-colors shrink-0 mt-1" />
                  </div>

                  {/* Description */}
                  <p className="text-xs text-muted-foreground leading-relaxed mb-4">{intg.description}</p>

                  {/* Stats — pushed to bottom */}
                  <div className="mt-auto pt-3 border-t border-border/50 space-y-1.5 text-xs text-muted-foreground">
                    {intg.id === 'autotask' && summary && (
                      <>
                        <div className="flex justify-between">
                          <span>Last sync</span>
                          <span className="font-medium text-foreground">{fmtDate(summary.lastSync)}</span>
                        </div>
                        <div className="flex justify-between">
                          <span>Entities tracked</span>
                          <span className="font-medium text-foreground">{summary.total}</span>
                        </div>
                      </>
                    )}
                    {intg.id === 'veeam' && summary && (
                      <>
                        <div className="flex justify-between">
                          <span>Last sync</span>
                          <span className="font-medium text-foreground">{fmtDate(summary.lastSync)}</span>
                        </div>
                        <div className="flex justify-between">
                          <span>Total jobs</span>
                          <span className="font-medium text-foreground">{summary.total}</span>
                        </div>
                        {(summary as any).failed > 0 && (
                          <div className="flex justify-between text-red-600">
                            <span>Failed</span><span className="font-medium">{(summary as any).failed}</span>
                          </div>
                        )}
                        {(summary as any).running > 0 && (
                          <div className="flex justify-between text-blue-600">
                            <span>Running (stalled?)</span><span className="font-medium">{(summary as any).running}</span>
                          </div>
                        )}
                        {(summary as any).warning > 0 && (
                          <div className="flex justify-between text-yellow-700">
                            <span>Warning</span><span className="font-medium">{(summary as any).warning}</span>
                          </div>
                        )}
                      </>
                    )}
                    {intg.id === 'datto-rmm' && summary && (
                      <>
                        <div className="flex justify-between">
                          <span>Last sync</span>
                          <span className="font-medium text-foreground">{fmtDate(summary.lastSync)}</span>
                        </div>
                        <div className="flex justify-between">
                          <span>Sites / Devices</span>
                          <span className="font-medium text-foreground">{(summary as any).sites} / {(summary as any).devices}</span>
                        </div>
                        <div className="flex justify-between">
                          <span>Online / Offline</span>
                          <span className="font-medium text-foreground">{(summary as any).online} / {(summary as any).offline}</span>
                        </div>
                        {(summary as any).openAlerts > 0 && (
                          <div className={`flex justify-between ${(summary as any).critical > 0 ? 'text-red-600' : 'text-yellow-700'}`}>
                            <span>Open alerts</span>
                            <span className="font-medium">{(summary as any).openAlerts}</span>
                          </div>
                        )}
                      </>
                    )}
                    {intg.id === 'itglue' && summary && (
                      <>
                        <div className="flex justify-between">
                          <span>Last sync</span>
                          <span className="font-medium text-foreground">{fmtDate(summary.lastSync)}</span>
                        </div>
                        <div className="flex justify-between">
                          <span>Organizations</span>
                          <span className="font-medium text-foreground">{(summary as any).organizations?.toLocaleString()}</span>
                        </div>
                        <div className="flex justify-between">
                          <span>Configurations</span>
                          <span className="font-medium text-foreground">{(summary as any).configurations?.toLocaleString()}</span>
                        </div>
                      </>
                    )}
                    {intg.id === 'sentinelone' && summary && (
                      <>
                        <div className="flex justify-between">
                          <span>Last sync</span>
                          <span className="font-medium text-foreground">{fmtDate(summary.lastSync)}</span>
                        </div>
                        <div className="flex justify-between">
                          <span>Sites / Agents</span>
                          <span className="font-medium text-foreground">{(summary as any).sites} / {(summary as any).agents?.toLocaleString()}</span>
                        </div>
                        {(summary as any).infected > 0 && (
                          <div className="flex justify-between text-red-600">
                            <span>Infected</span>
                            <span className="font-medium">{(summary as any).infected}</span>
                          </div>
                        )}
                      </>
                    )}
                    {(intg.id === 'auvik' || intg.id === 'addigy') && (
                      <div className="flex justify-between">
                        <span>Status</span>
                        <span className={`font-medium ${(summary as any)?.configured ? 'text-green-600' : 'text-muted-foreground'}`}>
                          {(summary as any)?.configured ? 'Connected' : 'Not configured'}
                        </span>
                      </div>
                    )}
                  </div>
                </div>
              </Link>
            );
          })}
        </div>
      )}
    </div>
  );
}