// OneBot per-UIN configuration page.
//
// Layout: collapsible left sidebar for account selection + tabbed right
// pane (通用 / 4 network kinds). Each network tab is a list view of
// summary cards with inline enable/disable; create + edit both go
// through `NodeEditDialog`. All changes auto-save: network mutations
// persist immediately; general-settings edits are debounced (500 ms).

import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { motion } from 'motion/react';
import { Check, Loader2, MousePointerClick, Plus, Save } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { ScrollableTabList } from '@/components/ui/tabs';
import { ConfirmDialog } from '@/components/confirm-dialog';
import { SkeletonSwap } from '@/components/interior/skeleton-swap';
import { cn } from '@/lib/utils';
import type { AdapterStatus, NetworkKind, OneBotConfig, OneBotNetworks } from '@/types';
import { useOneBotInstanceConfig } from '@/hooks/use-onebot-instance-config';
import { useAppState } from '@/contexts/AppStateContext';
import { useLayout } from '@/contexts/LayoutContext';
import { AccountSidebar } from '@/components/config/account-sidebar';
import { GeneralSettingsTab } from '@/components/config/general-settings-tab';
import { NodeSummaryCard } from '@/components/config/node-summary-card';
import { NodeEditDialog } from '@/components/config/node-edit-dialog';
import {
    ALL_TABS,
    NETWORK_TABS,
    nextUniqueSuffix,
    type TabKey,
} from '@/components/config/defaults';

type DialogState =
    | { open: false }
    | {
          open: true;
          kind: NetworkKind;
          index: number | null;
          seed: OneBotNetworks[NetworkKind][number];
      };
//   index: null → create with `seed`, otherwise edit the item at that position.

export function ConfigPage() {
    const { qqList, connections, selectedUin, setSelectedUin, resources, refreshQqList } =
        useAppState();
    const {
        config,
        loading,
        loadError,
        reload,
        setConfig,
        dirty,
        requestSwitchUin,
        pendingSwitchUin,
        confirmSwitch,
        cancelSwitch,
        save,
        saveStatus,
        saveStatusTone,
    } = useOneBotInstanceConfig(qqList, {
        selectedUin,
        onSelectedUinChange: setSelectedUin,
    });
    const { pages, setPages } = useLayout();
    const [activeTab, setActiveTabState] = useState<TabKey>(() => {
        const t = pages.configTab;
        return t === 'general' || (!!t && t in NETWORK_TABS) ? (t as TabKey) : 'general';
    });
    // Persist the last-used tab as the default for next time.
    const setActiveTab = useCallback(
        (t: TabKey) => {
            setActiveTabState(t);
            setPages({ configTab: t });
        },
        [setPages],
    );
    // Default the account strip to its 56px avatar-only form on narrow screens
    // (≤lg) so the editor pane isn't squeezed; the user can still expand it.
    const [sidebarCollapsed, setSidebarCollapsed] = useState(
        () => typeof window !== 'undefined' && window.matchMedia('(max-width: 1024px)').matches,
    );
    // The edit dialog is modal and blocks every other click in the page,
    // so `selectedUin` cannot change while it's open — no defensive close
    // wiring needed beyond the dialog's own open/close.
    const [dialog, setDialog] = useState<DialogState>({ open: false });

    const pendingSwitchAccount = useMemo(
        () => (pendingSwitchUin ? (qqList.find((q) => q.uin === pendingSwitchUin) ?? null) : null),
        [pendingSwitchUin, qqList],
    );

    // Live adapter status for the selected account, keyed by adapter name so
    // each summary card can light up its real connection state.
    const liveStatusByName = useMemo(() => {
        const acc = connections.find((c) => c.uin === selectedUin);
        const map = new Map<string, AdapterStatus>();

        for (const a of acc?.adapters ?? []) {
            map.set(a.name, a);
        }

        return map;
    }, [connections, selectedUin]);

    // Auto-save general settings with debounce. Network mutations
    // (create / edit / delete / enable-toggle) persist immediately in commitKind.
    const debounceRef = useRef<number | null>(null);
    useEffect(() => {
        if (debounceRef.current != null) {
            window.clearTimeout(debounceRef.current);
        }

        if (dirty) {
            debounceRef.current = window.setTimeout(() => {
                void save();
                debounceRef.current = null;
            }, 500);
        }

        return () => {
            if (debounceRef.current != null) {
                window.clearTimeout(debounceRef.current);
            }
        };
    }, [dirty, config, save]);

    /** Immediate save: clear any pending auto-save debounce and persist now. */
    const immediateSave = useCallback(() => {
        if (debounceRef.current != null) {
            window.clearTimeout(debounceRef.current);
            debounceRef.current = null;
        }

        void save();
    }, [save]);

    function commitKind<K extends NetworkKind>(kind: K, nextList: OneBotNetworks[K]): void {
        if (!config) {
            return;
        }

        const next = { ...config, networks: { ...config.networks, [kind]: nextList } };
        setConfig(next);
        void save(next);
    }

    function handleCreate<K extends NetworkKind>(kind: K, item: OneBotNetworks[K][number]): void {
        if (!config) {
            return;
        }

        const list = config.networks[kind] as OneBotNetworks[K];
        commitKind(kind, [...list, item] as OneBotNetworks[K]);
    }

    function handleEdit<K extends NetworkKind>(
        kind: K,
        index: number,
        item: OneBotNetworks[K][number],
    ): void {
        if (!config) {
            return;
        }

        const list = config.networks[kind] as OneBotNetworks[K];
        commitKind(kind, list.map((it, i) => (i === index ? item : it)) as OneBotNetworks[K]);
    }

    function handleDelete<K extends NetworkKind>(kind: K, index: number): void {
        if (!config) {
            return;
        }

        const list = config.networks[kind] as OneBotNetworks[K];
        commitKind(kind, list.filter((_, i) => i !== index) as OneBotNetworks[K]);
    }

    function handleToggleEnabled<K extends NetworkKind>(
        kind: K,
        index: number,
        enabled: boolean,
    ): void {
        if (!config) {
            return;
        }

        const list = config.networks[kind] as OneBotNetworks[K];
        commitKind(
            kind,
            list.map((it, i) =>
                i === index
                    ? ({ ...it, enabled: enabled ? undefined : false } as OneBotNetworks[K][number])
                    : it,
            ) as OneBotNetworks[K],
        );
    }

    const openCreate = (kind: NetworkKind) => {
        if (!config) {
            return;
        }

        const tab = NETWORK_TABS[kind];
        const list = config.networks[kind];
        const suffix = nextUniqueSuffix(list, tab.defaultEntry);
        setDialog({ open: true, kind, index: null, seed: tab.defaultEntry(suffix) });
    };

    const openEdit = (kind: NetworkKind, index: number) => {
        if (!config) {
            return;
        }

        const item = config.networks[kind][index];

        if (!item) {
            return;
        }

        setDialog({ open: true, kind, index, seed: item });
    };

    return (
        <SkeletonSwap
            ready={resources.qqList.ready}
            lines={7}
            lineHeight={28}
            barHeight={11}
            reserve={196}
            label="账号列表"
            className={resources.qqList.ready ? 'skeleton-swap-fluid min-h-[196px]' : ''}
        >
            {resources.qqList.ready ? (
                resources.qqList.error && qqList.length === 0 ? (
                    <ConfigLoadError message={resources.qqList.error} onRetry={refreshQqList} />
                ) : (
                    <div className="flex flex-col gap-3">
                        {resources.qqList.error && (
                            <div
                                role="alert"
                                className="rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive"
                            >
                                {resources.qqList.error}；当前显示上次成功读取的账号列表。
                            </div>
                        )}
                        <div className="flex gap-4">
                            <AccountSidebar
                                accounts={qqList}
                                selectedUin={selectedUin}
                                onSelect={requestSwitchUin}
                                collapsed={sidebarCollapsed}
                                onToggleCollapsed={() => setSidebarCollapsed((v) => !v)}
                            />

                            <div className="min-w-0 flex-1">
                                {!selectedUin ? (
                                    <EmptyState />
                                ) : (
                                    <SkeletonSwap
                                        ready={!loading}
                                        lines={7}
                                        lineHeight={28}
                                        barHeight={11}
                                        reserve={196}
                                        label="账号配置"
                                        className={
                                            !loading
                                                ? 'skeleton-swap-fluid min-h-[196px]'
                                                : 'w-full'
                                        }
                                    >
                                        {!loading ? (
                                            loadError || !config ? (
                                                <ConfigLoadError
                                                    message={loadError ?? '账号配置不可用'}
                                                    onRetry={reload}
                                                />
                                            ) : (
                                                <div className="flex flex-col gap-4">
                                                    <HeaderBar
                                                        selectedUin={selectedUin}
                                                        dirty={dirty}
                                                        saveStatus={saveStatus}
                                                        saveStatusTone={saveStatusTone}
                                                        onSave={immediateSave}
                                                        activeTab={activeTab}
                                                        onCreate={
                                                            activeTab !== 'general'
                                                                ? () =>
                                                                      openCreate(
                                                                          activeTab as NetworkKind,
                                                                      )
                                                                : undefined
                                                        }
                                                    />

                                                    <TabStrip
                                                        activeTab={activeTab}
                                                        onChange={setActiveTab}
                                                        counts={countMap(config.networks)}
                                                    />

                                                    <div
                                                        id={`config-panel-${activeTab}`}
                                                        role="tabpanel"
                                                        aria-labelledby={`config-tab-${activeTab}`}
                                                    >
                                                        {activeTab === 'general' ? (
                                                            <GeneralSettingsTab
                                                                config={config}
                                                                onChange={setConfig}
                                                            />
                                                        ) : (
                                                            <NetworkTabView
                                                                kind={activeTab}
                                                                config={config}
                                                                statusByName={liveStatusByName}
                                                                onCreateClick={() =>
                                                                    openCreate(activeTab)
                                                                }
                                                                onEdit={(idx) =>
                                                                    openEdit(activeTab, idx)
                                                                }
                                                                onDelete={(idx) =>
                                                                    handleDelete(activeTab, idx)
                                                                }
                                                                onToggleEnabled={(idx, v) =>
                                                                    handleToggleEnabled(
                                                                        activeTab,
                                                                        idx,
                                                                        v,
                                                                    )
                                                                }
                                                            />
                                                        )}
                                                    </div>
                                                </div>
                                            )
                                        ) : null}
                                    </SkeletonSwap>
                                )}
                            </div>

                            {/* Single dialog covers create + edit across all 4 kinds. */}
                            {dialog.open && config && selectedUin && (
                                <NodeEditDialog
                                    open={dialog.open}
                                    onOpenChange={(open) => !open && setDialog({ open: false })}
                                    kind={dialog.kind}
                                    initial={dialog.seed}
                                    isEdit={dialog.index != null}
                                    otherNames={otherNames(
                                        config.networks,
                                        dialog.kind,
                                        dialog.index,
                                    )}
                                    uin={selectedUin}
                                    onSubmit={(item) => {
                                        if (dialog.index == null) {
                                            handleCreate(dialog.kind, item);
                                        } else {
                                            handleEdit(dialog.kind, dialog.index, item);
                                        }
                                    }}
                                />
                            )}

                            <ConfirmDialog
                                open={pendingSwitchUin != null}
                                onOpenChange={(open) => !open && cancelSwitch()}
                                title="放弃未保存的修改？"
                                description={
                                    <>
                                        <p>
                                            当前会话{' '}
                                            <code className="font-mono">{selectedUin}</code>{' '}
                                            还有未保存的修改。
                                        </p>
                                        <p className="mt-2">
                                            切换到{' '}
                                            <code className="font-mono">
                                                {pendingSwitchAccount?.uin ?? pendingSwitchUin}
                                            </code>
                                            {pendingSwitchAccount?.nickname
                                                ? `（${pendingSwitchAccount.nickname}）`
                                                : ''}{' '}
                                            会丢弃这些修改。
                                        </p>
                                    </>
                                }
                                confirmText="放弃并切换"
                                destructive
                                onConfirm={confirmSwitch}
                            />
                        </div>
                    </div>
                )
            ) : null}
        </SkeletonSwap>
    );
}

// ─────────────── header ───────────────

interface HeaderBarProps {
    selectedUin: string;
    dirty: boolean;
    saveStatus: string;
    saveStatusTone: 'idle' | 'saving' | 'success' | 'warning' | 'error';
    onSave: () => void;
    activeTab: TabKey;
    onCreate?: () => void;
}

function HeaderBar({
    selectedUin,
    dirty,
    saveStatus,
    saveStatusTone,
    onSave,
    activeTab,
    onCreate,
}: HeaderBarProps) {
    return (
        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div className="min-w-0">
                <h2 className="text-base font-semibold tracking-tight">OneBot 协议端点</h2>
                <code className="mt-0.5 block font-mono text-xs text-muted-foreground tabular-nums">
                    UIN {selectedUin}
                </code>
            </div>
            <div className="flex flex-wrap items-center gap-3">
                {(saveStatus || dirty) && (
                    <span className="inline-flex items-center gap-1.5 text-xs font-medium">
                        {saveStatusTone === 'saving' ? (
                            <>
                                <Loader2 className="size-3.5 animate-spin text-muted-foreground" />
                                <span className="text-muted-foreground">保存中</span>
                            </>
                        ) : saveStatusTone === 'success' ? (
                            <>
                                <Check className="size-3.5 text-success" />
                                <span className="text-success">{saveStatus}</span>
                            </>
                        ) : saveStatusTone === 'warning' ? (
                            <>
                                <span className="size-1.5 rounded-full bg-warning" />
                                <span className="text-warning">{saveStatus}</span>
                            </>
                        ) : saveStatusTone === 'error' ? (
                            <>
                                <span className="size-1.5 rounded-full bg-destructive" />
                                <span className="text-destructive">{saveStatus}</span>
                            </>
                        ) : (
                            <>
                                <span className="size-1.5 rounded-full bg-warning" />
                                <span className="text-warning">未保存</span>
                            </>
                        )}
                    </span>
                )}
                {onCreate && (
                    <Button size="sm" variant="outline" onClick={onCreate}>
                        <Plus className="size-3.5" />
                        新建
                        {activeTab === 'general'
                            ? ''
                            : NETWORK_TABS[activeTab as NetworkKind].title}
                    </Button>
                )}
                <Button onClick={onSave} size="sm">
                    <Save className="size-3.5" /> 保存
                </Button>
            </div>
        </div>
    );
}

// ─────────────── tab strip ───────────────

interface TabStripProps {
    activeTab: TabKey;
    onChange: (key: TabKey) => void;
    counts: Record<NetworkKind, number>;
}

function TabStrip({ activeTab, onChange, counts }: TabStripProps) {
    const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);

    const moveTab = (from: number, direction: 1 | -1 | 'home' | 'end') => {
        const length = ALL_TABS.length;
        const nextIndex =
            direction === 'home'
                ? 0
                : direction === 'end'
                  ? length - 1
                  : (from + direction + length) % length;
        const next = ALL_TABS[nextIndex];

        if (!next) {
            return;
        }

        onChange(next);
        tabRefs.current[nextIndex]?.focus();
    };

    return (
        <ScrollableTabList
            activeValue={activeTab}
            role="tablist"
            aria-label="节点配置分类"
            className="gap-1 border-b"
        >
            {ALL_TABS.map((key, index) => {
                const label = key === 'general' ? '通用设置' : NETWORK_TABS[key].title;
                const count = key === 'general' ? null : counts[key];
                const active = activeTab === key;
                return (
                    <button
                        key={key}
                        ref={(element) => {
                            tabRefs.current[index] = element;
                        }}
                        id={`config-tab-${key}`}
                        role="tab"
                        type="button"
                        aria-selected={active}
                        aria-controls={`config-panel-${key}`}
                        data-tab-active={active ? 'true' : undefined}
                        tabIndex={active ? 0 : -1}
                        onClick={() => onChange(key)}
                        onKeyDown={(event) => {
                            if (event.key === 'ArrowRight') {
                                event.preventDefault();
                                moveTab(index, 1);
                            } else if (event.key === 'ArrowLeft') {
                                event.preventDefault();
                                moveTab(index, -1);
                            } else if (event.key === 'Home') {
                                event.preventDefault();
                                moveTab(index, 'home');
                            } else if (event.key === 'End') {
                                event.preventDefault();
                                moveTab(index, 'end');
                            }
                        }}
                        className={cn(
                            'group relative inline-flex min-h-11 shrink-0 items-center gap-1.5 whitespace-nowrap px-3 py-2 text-sm outline-none transition-colors cursor-pointer md:min-h-10',
                            'focus-visible:ring-[3px] focus-visible:ring-ring/40',
                            active
                                ? 'text-foreground'
                                : 'text-muted-foreground hover:text-foreground',
                        )}
                    >
                        {label}
                        {count != null && (
                            <Badge
                                variant={active ? 'default' : 'secondary'}
                                className="h-4 px-1.5 font-mono text-micro tabular-nums"
                            >
                                {count}
                            </Badge>
                        )}
                        {active && (
                            <motion.span
                                layoutId="config-tab-underline"
                                className="absolute inset-x-2 -bottom-px h-0.5 rounded-full bg-primary"
                                transition={{ type: 'spring', stiffness: 350, damping: 30 }}
                            />
                        )}
                    </button>
                );
            })}
        </ScrollableTabList>
    );
}

function countMap(networks: OneBotNetworks): Record<NetworkKind, number> {
    return {
        httpServers: networks.httpServers.length,
        httpClients: networks.httpClients.length,
        wsServers: networks.wsServers.length,
        wsClients: networks.wsClients.length,
    };
}

// ─────────────── network tab body ───────────────

interface NetworkTabViewProps {
    kind: NetworkKind;
    config: OneBotConfig;
    statusByName: Map<string, AdapterStatus>;
    onCreateClick: () => void;
    onEdit: (index: number) => void;
    onDelete: (index: number) => void;
    onToggleEnabled: (index: number, enabled: boolean) => void;
}

function NetworkTabView({
    kind,
    config,
    statusByName,
    onCreateClick,
    onEdit,
    onDelete,
    onToggleEnabled,
}: NetworkTabViewProps) {
    const tab = NETWORK_TABS[kind];
    const list = config.networks[kind];
    // `summarize` is typed per K in NETWORK_TABS; the union here forces a
    // widening cast at the call site rather than ladder-of-ifs per tab.
    const summarize = tab.summarize as (it: (typeof list)[number]) => string;

    // Tally name occurrences once instead of doing `list.filter(...).map(...).includes(...)`
    // inside `.map()` (O(n²) per render). With this lookup, the duplicate
    // check is O(1) per row — matters once the list grows past a few entries
    // or when typing renames a node and the tab re-renders on every keystroke.
    const nameCounts = useMemo(() => {
        const counts = new Map<string, number>();

        for (const item of list) {
            const name = item.name;

            if (!name) {
                continue;
            }

            counts.set(name, (counts.get(name) ?? 0) + 1);
        }

        return counts;
    }, [list]);

    if (list.length === 0) {
        return (
            <div className="flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed py-16 text-muted-foreground">
                <p className="text-sm">暂无 {tab.title} 节点</p>
                <Button variant="outline" size="sm" onClick={onCreateClick}>
                    <Plus className="size-3.5" /> 创建第一个
                </Button>
            </div>
        );
    }

    return (
        <div className="flex flex-col gap-2">
            <p className="text-xs text-muted-foreground">{tab.description}</p>
            <div className="flex flex-col gap-2">
                {list.map((item, idx) => {
                    const duplicate = !!item.name && (nameCounts.get(item.name) ?? 0) > 1;
                    return (
                        <NodeSummaryCard
                            key={`${item.name}-${idx}`}
                            item={item}
                            summary={summarize(item)}
                            duplicateName={duplicate}
                            liveStatus={statusByName.get(item.name)}
                            onToggleEnabled={(v) => onToggleEnabled(idx, v)}
                            onEdit={() => onEdit(idx)}
                            onDelete={() => onDelete(idx)}
                        />
                    );
                })}
            </div>
        </div>
    );
}

// ─────────────── empty + loading ───────────────

function EmptyState() {
    return (
        <div className="flex h-64 flex-col items-center justify-center gap-2 rounded-xl border border-dashed text-muted-foreground">
            <MousePointerClick className="size-8 opacity-40" strokeWidth={1.5} />
            <p className="text-sm">请在左栏选择会话以配置通信节点</p>
        </div>
    );
}

function ConfigLoadError({ message, onRetry }: { message: string; onRetry: () => void }) {
    return (
        <div className="flex h-64 flex-col items-center justify-center gap-3 rounded-xl border border-dashed text-muted-foreground">
            <p className="max-w-md text-center text-sm text-destructive">{message}</p>
            <Button variant="outline" size="sm" onClick={onRetry}>
                重试
            </Button>
        </div>
    );
}

// ─────────────── helpers ───────────────

/** Names of every adapter except the one currently being edited. */
function otherNames<K extends NetworkKind>(
    networks: OneBotNetworks,
    kind: K,
    excludeIndex: number | null,
): string[] {
    const list = networks[kind];
    return list
        .filter((_, i) => i !== excludeIndex)
        .map((n) => n.name)
        .filter((s): s is string => typeof s === 'string' && s.length > 0);
}