import React, { useState } from 'react';
import { useLocation } from 'react-router-dom';
import { RefreshCw, History, HelpCircle } from 'lucide-react';
import { useSystemPermission } from '@nexuscrm/host-sdk';
import { formatApiError } from '@nexuscrm/host-sdk';
import {
    EmptyState,
    RecordListSkeleton,
    useErrorToast,
    useSuccessToast,
} from '@nexuscrm/salesforce-crm-standard-frontend/platform/components/ui';
import { useIdentitySyncStatus, useResetBreaker } from './identitySyncQueries';
import { SyncHealthSummary } from './components/SyncHealthSummary';
import { ActivityTab } from './components/ActivityTab';
import { QuarantineTab } from './components/QuarantineTab';
import { ScimTokenCard } from './components/ScimTokenCard';

type TabId = 'activity' | 'quarantine';

interface TabDefinition {
    id: TabId;
    label: string;
    icon: React.ReactNode;
}

const TABS: TabDefinition[] = [
    { id: 'activity', label: 'Activity', icon: <History size={18} /> },
    { id: 'quarantine', label: 'Quarantine', icon: <HelpCircle size={18} /> },
];

/** Derive the initial tab from a deep-linked child route (…/identity-sync/<tab>). */
export function deriveInitialTab(pathname: string): TabId {
    const segment = pathname.split('/').filter(Boolean).pop();
    if (segment === 'quarantine') return 'quarantine';
    return 'activity';
}

export const IdentitySyncDashboard: React.FC = () => {
    const location = useLocation();
    const canManageUsers = useSystemPermission('ManageUsers');
    const errorToast = useErrorToast();
    const successToast = useSuccessToast();

    const [activeTab, setActiveTab] = useState<TabId>(() => deriveInitialTab(location.pathname));

    const { data: status, isLoading: statusLoading, error: statusError, refetch: refetchStatus } = useIdentitySyncStatus();
    const resetBreakerMutation = useResetBreaker();

    const handleResetBreaker = async () => {
        try {
            await resetBreakerMutation.mutateAsync();
            successToast('Circuit breaker reset');
        } catch (err: unknown) {
            errorToast(`Failed to reset circuit breaker: ${formatApiError(err).message}`);
        }
    };

    return (
        <div className="mx-auto max-w-7xl p-6">
            {/* Header — icon badge + title + subtitle (matches the Setup admin bar) */}
            <div className="mb-8 flex items-center gap-4">
                <div className="rounded-lg bg-blue-100 p-3">
                    <RefreshCw className="text-blue-600" size={32} />
                </div>
                <div>
                    <h1 className="text-2xl font-bold text-slate-800">Identity Sync</h1>
                    <p className="text-slate-500">Monitor SCIM identity provisioning and review quarantined identities.</p>
                </div>
            </div>

            {/* Health / breaker summary row */}
            {statusLoading ? (
                <div className="mb-6 rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
                    <RecordListSkeleton rows={2} columns={6} />
                </div>
            ) : statusError || !status ? (
                <div className="mb-6">
                    <EmptyState
                        variant="error"
                        title="Error Loading Status"
                        description="Failed to load the identity-sync status. Please try again."
                        action={{ label: 'Retry', onClick: () => refetchStatus() }}
                    />
                </div>
            ) : (
                <SyncHealthSummary
                    status={status}
                    canManageUsers={canManageUsers}
                    onResetBreaker={handleResetBreaker}
                    resetting={!!resetBreakerMutation.isPending}
                />
            )}

            {status?.config.provisioningSource.trim().toLowerCase() === 'scim' && <ScimTokenCard />}

            {/* Tabbed content */}
            <div className="overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">
                <div className="border-b border-slate-200">
                    <nav className="flex -mb-px" aria-label="Identity sync sections">
                        {TABS.map((tab) => (
                            <button
                                key={tab.id}
                                type="button"
                                onClick={() => setActiveTab(tab.id)}
                                aria-current={activeTab === tab.id ? 'page' : undefined}
                                className={`flex items-center gap-2 border-b-2 px-6 py-4 text-sm font-medium transition-colors ${activeTab === tab.id
                                    ? 'border-blue-500 text-blue-600'
                                    : 'border-transparent text-slate-500 hover:border-slate-300 hover:text-slate-700'
                                    }`}
                            >
                                {tab.icon}
                                {tab.label}
                            </button>
                        ))}
                    </nav>
                </div>

                <div className="p-6">
                    {activeTab === 'activity' && <ActivityTab />}
                    {activeTab === 'quarantine' && <QuarantineTab canManageUsers={canManageUsers} />}
                </div>
            </div>
        </div>
    );
};