import React, { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { connectorsApi } from '../../api/settingsApi';
import type { ConnectorInfo, ConnectorLog } from '../../api/settingsApi';
import {
Plug,
Loader2,
RefreshCw,
ChevronDown,
ChevronUp,
Clock,
CheckCircle2,
AlertCircle,
CircleHelp,
ExternalLink,
Trash2,
FileText,
} from 'lucide-react';
/* ─── Styling constants (match SettingsPage / BillingTab) ──────────── */
const btnClass =
'rounded-lg bg-brand-600 py-2 px-4 text-sm font-semibold text-white hover:bg-brand-700 disabled:opacity-50';
const btnOutlineClass =
'rounded-lg border border-surface-300 py-2 px-4 text-sm font-medium text-surface-700 hover:bg-surface-50 disabled:opacity-50';
const btnDangerClass =
'rounded-lg border border-red-200 py-2 px-4 text-sm font-medium text-red-600 hover:bg-red-50 disabled:opacity-50';
/* ─── Helpers ──────────────────────────────────────────────────────── */
function timeAgo(dateStr: string | null): string {
if (!dateStr) return 'Never';
const diffMs = Date.now() - new Date(dateStr).getTime();
const seconds = Math.floor(diffMs / 1000);
if (seconds < 60) return 'Just now';
const minutes = Math.floor(seconds / 60);
if (minutes < 60) return `${minutes}m ago`;
const hours = Math.floor(minutes / 60);
if (hours < 24) return `${hours}h ago`;
const days = Math.floor(hours / 24);
return `${days}d ago`;
}
function statusBadge(status: string) {
switch (status) {
case 'connected':
case 'success':
return (
<span className="inline-flex items-center gap-1 rounded-full bg-green-50 px-2.5 py-1 text-xs font-medium text-green-700">
<CheckCircle2 className="h-3 w-3" /> Connected
</span>
);
case 'error':
case 'failed':
return (
<span className="inline-flex items-center gap-1 rounded-full bg-red-50 px-2.5 py-1 text-xs font-medium text-red-700">
<AlertCircle className="h-3 w-3" /> Failed
</span>
);
case 'syncing':
return (
<span className="inline-flex items-center gap-1 rounded-full bg-brand-50 px-2.5 py-1 text-xs font-medium text-brand-700">
<Loader2 className="h-3 w-3 animate-spin" /> Syncing
</span>
);
default:
return (
<span className="inline-flex items-center gap-1 rounded-full bg-surface-100 px-2.5 py-1 text-xs font-medium text-surface-600">
<CircleHelp className="h-3 w-3" /> Never synced
</span>
);
}
}
function logStatusBadge(status: string) {
switch (status) {
case 'success':
return <span className="text-green-600">Success</span>;
case 'failed':
case 'error':
return <span className="text-red-600">Failed</span>;
case 'pending':
case 'syncing':
return <span className="text-brand-600">Running</span>;
default:
return <span className="text-surface-500">{status}</span>;
}
}
/* ─── Sync Logs Collapsible ────────────────────────────────────────── */
interface SyncLogsProps {
connectorId: string;
serviceName: string;
}
function SyncLogs({ connectorId, serviceName }: SyncLogsProps) {
const [isOpen, setIsOpen] = useState(false);
const { data, isLoading } = useQuery({
queryKey: ['connector-logs', connectorId],
queryFn: () => connectorsApi.getConnectorLogs(connectorId),
enabled: isOpen,
staleTime: 30_000,
refetchOnWindowFocus: false,
});
return (
<div className="mt-3 rounded-lg border border-surface-200 bg-surface-50">
<button
type="button"
onClick={() => setIsOpen(!isOpen)}
className="flex w-full items-center justify-between px-4 py-2.5 text-sm font-medium text-surface-700 hover:bg-surface-100"
>
<span className="flex items-center gap-2">
<FileText className="h-4 w-4 text-surface-400" />
Sync Logs for {serviceName}
{data && <span className="text-xs text-surface-400">({data.logs.length} entries)</span>}
</span>
{isOpen ? (
<ChevronUp className="h-4 w-4 text-surface-400" />
) : (
<ChevronDown className="h-4 w-4 text-surface-400" />
)}
</button>
{isOpen && (
<div className="max-h-48 overflow-y-auto border-t border-surface-200 px-4 py-2">
{isLoading ? (
<div className="flex items-center gap-2 py-2 text-sm text-surface-500">
<Loader2 className="h-4 w-4 animate-spin" />
Loading logs…
</div>
) : !data?.logs.length ? (
<p className="py-2 text-sm text-surface-400">No sync logs available.</p>
) : (
<div className="space-y-1.5">
{data.logs.map((log: ConnectorLog) => (
<div
key={log.id}
className="flex items-center justify-between rounded-md bg-white px-3 py-1.5 text-xs"
>
<div className="flex items-center gap-2">
{logStatusBadge(log.status)}
<span className="text-surface-600">{log.event_type}</span>
{log.record_count > 0 && (
<span className="text-surface-400">{log.record_count} records</span>
)}
{log.duration_ms && (
<span className="text-surface-400">{log.duration_ms}ms</span>
)}
</div>
<div className="flex items-center gap-1.5">
{log.error_message && (
<span className="text-red-500 truncate max-w-[150px]" title={log.error_message}>
{log.error_message}
</span>
)}
<span className="shrink-0 text-surface-400">
{timeAgo(log.created_at)}
</span>
</div>
</div>
))}
</div>
)}
</div>
)}
</div>
);
}
/* ─── Connected Integration Card ───────────────────────────────────── */
interface ConnectedCardProps {
connector: ConnectorInfo;
onDisconnect: (id: string) => void;
onSync: (id: string) => void;
disconnectingIds: string[];
syncingIds: string[];
}
function ConnectedCard({ connector, onDisconnect, onSync, disconnectingIds, syncingIds }: ConnectedCardProps) {
return (
<div className="rounded-xl border border-surface-200 bg-white p-6">
<div className="mb-3 flex items-start justify-between">
<div className="flex items-center gap-3">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-surface-100">
<Plug className="h-5 w-5 text-surface-500" />
</div>
<div>
<h4 className="text-sm font-semibold text-surface-900">{connector.serviceDisplayName}</h4>
<div className="mt-0.5 flex items-center gap-2">
{statusBadge(connector.status)}
<span className="flex items-center gap-1 text-xs text-surface-400">
<Clock className="h-3 w-3" />
{timeAgo(connector.last_sync_at)}
</span>
</div>
</div>
</div>
<div className="flex items-center gap-2">
<button
type="button"
onClick={() => onSync(connector.id)}
disabled={disconnectingIds.includes(connector.id) || syncingIds.includes(connector.id)}
className={btnOutlineClass}
title="Sync now"
>
{syncingIds.includes(connector.id) ? (
<span className="flex items-center gap-2">
<Loader2 className="h-4 w-4 animate-spin" />
Syncing…
</span>
) : (
<span className="flex items-center gap-2">
<RefreshCw className="h-4 w-4" />
Sync Now
</span>
)}
</button>
<button
type="button"
onClick={() => onDisconnect(connector.id)}
disabled={disconnectingIds.includes(connector.id) || syncingIds.includes(connector.id)}
className={btnDangerClass}
title="Disconnect"
>
{disconnectingIds.includes(connector.id) ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<span className="flex items-center gap-2">
<Trash2 className="h-4 w-4" />
Disconnect
</span>
)}
</button>
</div>
</div>
{connector.error_message && (
<div className="mb-3 flex items-start gap-2 rounded-lg bg-red-50 p-3 text-xs text-red-600">
<AlertCircle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
<span>{connector.error_message}</span>
</div>
)}
<div className="flex items-center gap-4 text-xs text-surface-500">
<span>Sync: {connector.sync_frequency}</span>
<span>Auth: {connector.auth_type === 'oauth2' ? 'OAuth 2.0' : 'Manual'}</span>
<span>Connected: {timeAgo(connector.created_at).replace(' ago', '')}</span>
</div>
{/* Sync Logs */}
<SyncLogs connectorId={connector.id} serviceName={connector.serviceDisplayName} />
</div>
);
}
/* ─── Available Integration Card ───────────────────────────────────── */
interface AvailableCardProps {
service: string;
displayName: string;
description: string;
onConnect: (service: string) => void;
connectingService: string | null;
}
function AvailableCard({ service, displayName, description, onConnect, connectingService }: AvailableCardProps) {
return (
<div className="rounded-xl border border-surface-200 bg-white p-5">
<div className="mb-3 flex items-center gap-3">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-surface-100">
<Plug className="h-5 w-5 text-surface-500" />
</div>
<div>
<h4 className="text-sm font-semibold text-surface-900">{displayName}</h4>
<p className="mt-0.5 text-xs text-surface-500 line-clamp-2">{description}</p>
</div>
</div>
<button
type="button"
onClick={() => onConnect(service)}
disabled={connectingService === service}
className={btnClass}
>
{connectingService === service ? (
<span className="flex items-center gap-2">
<Loader2 className="h-4 w-4 animate-spin" />
Redirecting…
</span>
) : (
<span className="flex items-center gap-2">
<ExternalLink className="h-4 w-4" />
Connect
</span>
)}
</button>
</div>
);
}
/* ─── IntegrationsTab ──────────────────────────────────────────────── */
export default function IntegrationsTab() {
const queryClient = useQueryClient();
const [connectingService, setConnectingService] = useState<string | null>(null);
const [disconnectingIds, setDisconnectingIds] = useState<string[]>([]);
const [syncingIds, setSyncingIds] = useState<string[]>([]);
// ─── Fetch data ──────────────────────────────────────────────────
const { data: availableData, isLoading: availableLoading } = useQuery({
queryKey: ['available-integrations'],
queryFn: connectorsApi.getAvailableIntegrations,
staleTime: 300_000,
refetchOnWindowFocus: false,
});
const { data: connectedData, isLoading: connectedLoading } = useQuery({
queryKey: ['connected-integrations'],
queryFn: connectorsApi.getConnectedIntegrations,
staleTime: 60_000,
refetchOnWindowFocus: false,
});
// ─── Mutations ───────────────────────────────────────────────────
const disconnectMutation = useMutation({
mutationFn: (connectorId: string) => connectorsApi.disconnectIntegration(connectorId),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['connected-integrations'] });
},
});
const syncMutation = useMutation({
mutationFn: (connectorId: string) => connectorsApi.triggerSync(connectorId),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['connected-integrations'] });
queryClient.invalidateQueries({ queryKey: ['connector-logs'] });
},
});
const connectMutation = useMutation({
mutationFn: (service: string) => connectorsApi.connectIntegration(service),
onSuccess: (data) => {
if (data.redirect_url) {
window.location.href = data.redirect_url;
}
},
onSettled: () => {
setConnectingService(null);
},
});
// ─── Handlers ────────────────────────────────────────────────────
const handleConnect = (service: string) => {
setConnectingService(service);
connectMutation.mutate(service);
};
const handleDisconnect = (connectorId: string) => {
if (!window.confirm('Disconnect this integration? This will remove all synced data.')) return;
setDisconnectingIds(prev => [...prev, connectorId]);
disconnectMutation.mutate(connectorId, {
onSettled: () => {
setDisconnectingIds(prev => prev.filter(id => id !== connectorId));
},
});
};
const handleSync = (connectorId: string) => {
setSyncingIds(prev => [...prev, connectorId]);
syncMutation.mutate(connectorId, {
onSettled: () => {
setSyncingIds(prev => prev.filter(id => id !== connectorId));
},
});
};
// ─── Derived state ───────────────────────────────────────────────
const connectedServices = new Set(connectedData?.connectors.map(c => c.service) || []);
const availableIntegrations = availableData || [];
const connectedConnectors = connectedData?.connectors || [];
const unconnectedIntegrations = availableIntegrations.filter(i => !connectedServices.has(i.service));
const isLoading = availableLoading || connectedLoading;
// ─── Render ──────────────────────────────────────────────────────
if (isLoading) {
return (
<div className="rounded-xl border border-surface-200 bg-white p-6">
<div className="flex items-center gap-3 text-surface-500">
<Loader2 className="h-5 w-5 animate-spin" />
<span className="text-sm">Loading integrations…</span>
</div>
</div>
);
}
return (
<div className="space-y-8">
{/* ─── Section header ──────────────────────────────────────── */}
<div>
<h2 className="text-lg font-semibold text-surface-900">Integrations</h2>
<p className="mt-1 text-sm text-surface-500">
Connect your business tools to automate data sync and unlock revenue insights.
</p>
</div>
{/* ─── Connected Integrations ──────────────────────────────── */}
<section>
<h3 className="mb-3 text-sm font-semibold text-surface-700">
Connected Integrations{' '}
<span className="text-xs font-normal text-surface-400">
({connectedConnectors.length} connected)
</span>
</h3>
{connectedConnectors.length === 0 ? (
<div className="rounded-xl border border-surface-200 bg-white p-8 text-center">
<Plug className="mx-auto h-8 w-8 text-surface-300" />
<p className="mt-3 text-sm font-medium text-surface-600">No integrations connected</p>
<p className="mt-1 text-xs text-surface-400">
Connect a service below to get started.
</p>
</div>
) : (
<div className="space-y-3">
{connectedConnectors.map(connector => (
<ConnectedCard
key={connector.id}
connector={connector}
onDisconnect={handleDisconnect}
onSync={handleSync}
disconnectingIds={disconnectingIds}
syncingIds={syncingIds}
/>
))}
</div>
)}
</section>
{/* ─── Available Integrations ──────────────────────────────── */}
<section>
<h3 className="mb-3 text-sm font-semibold text-surface-700">
Available Integrations{' '}
<span className="text-xs font-normal text-surface-400">
({unconnectedIntegrations.length} available)
</span>
</h3>
{unconnectedIntegrations.length === 0 ? (
<div className="rounded-xl border border-surface-200 bg-white p-6 text-center">
<CheckCircle2 className="mx-auto h-8 w-8 text-green-400" />
<p className="mt-3 text-sm font-medium text-surface-600">All integrations connected</p>
<p className="mt-1 text-xs text-surface-400">
You have connected all available integrations.
</p>
</div>
) : (
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
{unconnectedIntegrations.map(integration => (
<AvailableCard
key={integration.service}
service={integration.service}
displayName={integration.display_name}
description={integration.description}
onConnect={handleConnect}
connectingService={connectingService}
/>
))}
</div>
)}
</section>
</div>
);
}