'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, Database } from 'lucide-react';
import SyncControlPanel from '@/components/admin/SyncControlPanel';
import SyncDashboard from '@/components/admin/SyncDashboard';
import SyncHistoryTable from '@/components/admin/SyncHistoryTable';
import SyncScheduler from '@/components/admin/SyncScheduler';
import { EntityType } from '@/lib/types/sync';

export default function AutotaskSyncPage() {
  const [selectedEntities, setSelectedEntities] = useState<EntityType[]>([]);
  const [isSyncing, setIsSyncing] = useState(false);
  const [refreshKey, setRefreshKey] = useState(0);

  useEffect(() => {
    if (!isSyncing) return;
    const interval = setInterval(async () => {
      setRefreshKey(prev => prev + 1);
      try {
        const res = await fetch('/api/sync/status');
        if (res.ok) {
          const d = await res.json();
          if (!d.inProgress) setIsSyncing(false);
        }
      } catch {}
    }, 5000);
    return () => clearInterval(interval);
  }, [isSyncing]);

  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-blue-500/30 bg-blue-500/5">
            <Database className="w-5 h-5 text-blue-500" />
          </div>
          <div>
            <h1 className="text-2xl font-bold">PSA — Autotask</h1>
            <p className="text-sm text-muted-foreground">Tickets, companies, contacts, time entries, configuration items</p>
          </div>
        </div>
      </div>

      <SyncControlPanel
        selectedEntities={selectedEntities}
        onSelectedEntitiesChange={setSelectedEntities}
        onSyncStart={() => setIsSyncing(true)}
        onSyncComplete={() => { setIsSyncing(false); setRefreshKey(k => k + 1); }}
        isSyncing={isSyncing}
      />

      <Tabs defaultValue="status" className="w-full">
        <TabsList className="grid w-full max-w-lg grid-cols-3">
          <TabsTrigger value="status" className="gap-2">
            <Activity className="h-4 w-4" />
            Status
          </TabsTrigger>
          <TabsTrigger value="history" className="gap-2">
            <History className="h-4 w-4" />
            History
          </TabsTrigger>
          <TabsTrigger value="schedules" className="gap-2">
            <Calendar className="h-4 w-4" />
            Schedules
          </TabsTrigger>
        </TabsList>
        <TabsContent value="status" className="mt-6">
          <SyncDashboard refreshKey={refreshKey} />
        </TabsContent>
        <TabsContent value="history" className="mt-6">
          <SyncHistoryTable refreshKey={refreshKey} />
        </TabsContent>
        <TabsContent value="schedules" className="mt-6">
          <SyncScheduler />
        </TabsContent>
      </Tabs>
    </div>
  );
}