'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,
} from 'lucide-react';
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 StatusBadge({ status }: { status: string }) {
  const cls =
    status === 'completed' ? 'bg-green-500/15 text-green-700' :
    status === 'failed'    ? 'bg-red-500/15 text-red-600' :
    status === 'started'   ? 'bg-blue-500/15 text-blue-700' :
                             'bg-yellow-500/15 text-yellow-700';
  return <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${cls}`}>{status}</span>;
}

// ── 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 (
    <>
      <tr
        className={`border-b hover:bg-muted/30 ${entities.length > 0 ? 'cursor-pointer' : ''}`}
        onClick={() => entities.length > 0 && setExpanded(e => !e)}
      >
        <td className="px-4 py-2.5">
          <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>
        </td>
        <td className="px-4 py-2.5"><StatusBadge status={row.status} /></td>
        <td className="px-4 py-2.5 tabular-nums font-medium">{(row.records_added ?? 0).toLocaleString()}</td>
        <td className="px-4 py-2.5 text-muted-foreground text-xs">{fmtDate(row.started_at)}</td>
        <td className="px-4 py-2.5 text-muted-foreground">{dur != null ? fmtDur(dur) : '—'}</td>
        <td className="px-4 py-2.5 text-muted-foreground capitalize">{row.triggered_by ?? '—'}</td>
      </tr>
      {expanded && entities.length > 0 && (
        <tr className="border-b bg-muted/20">
          <td 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>
            )}
          </td>
        </tr>
      )}
    </>
  );
}

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 className="w-full text-sm">
        <thead className="bg-muted/50 border-b">
          <tr>
            <th className="text-left px-4 py-2 font-medium text-muted-foreground">Type</th>
            <th className="text-left px-4 py-2 font-medium text-muted-foreground">Status</th>
            <th className="text-left px-4 py-2 font-medium text-muted-foreground">Records</th>
            <th className="text-left px-4 py-2 font-medium text-muted-foreground">Started</th>
            <th className="text-left px-4 py-2 font-medium text-muted-foreground">Duration</th>
            <th className="text-left px-4 py-2 font-medium text-muted-foreground">Triggered By</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((row, i) => <HistoryRow key={i} row={row} />)}
        </tbody>
      </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 className="w-full text-sm">
          <thead className="bg-muted/50 border-b">
            <tr>
              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Name</th>
              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Organization</th>
              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Platform</th>
              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Status</th>
              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Agent Status</th>
              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Version</th>
              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Mode</th>
              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Jobs</th>
            </tr>
          </thead>
          <tbody>
            {agents.map((a: any) => (
              <tr key={a.instance_uid} className="border-b last:border-0 hover:bg-muted/30">
                <td className="px-4 py-2 font-medium">{a.name}</td>
                <td className="px-4 py-2 text-muted-foreground text-xs">{a.organization_name ?? '—'}</td>
                <td className="px-4 py-2 text-xs">{a.agent_platform ?? '—'}</td>
                <td className="px-4 py-2">
                  <span className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${
                    a.status === 'Active' ? 'bg-green-500/15 text-green-700' : 'bg-muted text-muted-foreground'
                  }`}>{a.status ?? '—'}</span>
                </td>
                <td className="px-4 py-2">
                  <span className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${
                    a.management_agent_status === 'Inaccessible' ? 'bg-red-500/15 text-red-600' :
                    a.management_agent_status === 'Accessible'   ? 'bg-green-500/15 text-green-700' :
                    'bg-muted text-muted-foreground'
                  }`}>{a.management_agent_status ?? '—'}</span>
                </td>
                <td className="px-4 py-2 text-xs">
                  <span className={a.version_status === 'Outdated' ? 'text-yellow-700 font-medium' : 'text-muted-foreground'}>
                    {a.version ?? '—'}
                    {a.version_status === 'Outdated' && ' ⚠'}
                  </span>
                </td>
                <td className="px-4 py-2 text-xs text-muted-foreground">{a.operation_mode ?? '—'}</td>
                <td className="px-4 py-2 text-xs tabular-nums">
                  <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>
                  )}
                </td>
              </tr>
            ))}
          </tbody>
        </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 className="w-full text-sm">
          <thead className="bg-muted/50 border-b">
            <tr>
              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Object</th>
              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Type</th>
              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Organization</th>
              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Status</th>
              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Repeats</th>
              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Last Activation</th>
              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Message</th>
            </tr>
          </thead>
          <tbody>
            {alarms.map((a: any) => (
              <tr key={a.instance_uid} className="border-b last:border-0 hover:bg-muted/30">
                <td className="px-4 py-2 font-medium">{a.object_computer_name || a.object_name || '—'}</td>
                <td className="px-4 py-2 text-xs text-muted-foreground">{a.object_type ?? '—'}</td>
                <td className="px-4 py-2 text-xs text-muted-foreground">{a.organization_name ?? '—'}</td>
                <td className="px-4 py-2">
                  <span className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${
                    a.last_activation_status === 'Active'   ? 'bg-red-500/15 text-red-600' :
                    a.last_activation_status === 'Warning'  ? 'bg-yellow-500/15 text-yellow-700' :
                    a.last_activation_status === 'Resolved' ? 'bg-green-500/15 text-green-700' :
                    'bg-muted text-muted-foreground'
                  }`}>{a.last_activation_status ?? '—'}</span>
                </td>
                <td className="px-4 py-2 tabular-nums text-xs">{a.repeat_count ?? 0}</td>
                <td className="px-4 py-2 text-xs text-muted-foreground">{fmtDate(a.last_activation_time)}</td>
                <td className="px-4 py-2 text-xs text-muted-foreground max-w-xs truncate" title={a.last_activation_message ?? ''}>
                  {a.last_activation_message?.trim() || '—'}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </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-2xl grid-cols-5">
          <TabsTrigger value="status"    className="gap-1.5"><Activity  className="h-4 w-4" />Status</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="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>
  );
}