import { Head } from "@inertiajs/react";
import type { ReactNode } from "react";
import { useEffect, useMemo, useState } from "react";
import {
    Activity,
    CheckCircle2,
    Database,
    Eye,
    EyeOff,
    KeyRound,
    Plus,
    RefreshCw,
    Save,
    Server,
    Trash2,
    XCircle,
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { useI18n } from "@/lib/i18n";
import { AdminOperationalStrip } from "@/components/admin-operational-strip";
import { toast } from "sonner";

type MarketProvider = {
    id: number;
    name: string;
    slug: string;
    type: string;
    driver: string;
    enabled: boolean;
    health_status: "unknown" | "healthy" | "degraded" | "down";
    last_checked_at: string | null;
    last_success_at: string | null;
    last_failure_at: string | null;
    consecutive_failures: number;
    last_latency_ms: number | null;
    last_error: string | null;
    spot_enabled: boolean;
    futures_enabled: boolean;
    rest_url: string | null;
    ws_url: string | null;
    futures_rest_url: string | null;
    futures_ws_url: string | null;
    settings: Record<string, unknown>;
    credentials_configured: boolean;
    credential_fields: Record<string, string | null>;
    created_at: string | null;
    updated_at: string | null;
};

type DriverOption = {
    driver: string;
    label: string;
    markets: string[];
    credentials: string[];
    defaults: Partial<
        Pick<
            MarketProvider,
            "rest_url" | "ws_url" | "futures_rest_url" | "futures_ws_url"
        >
    >;
};

type ProviderForm = {
    name: string;
    slug: string;
    type: string;
    driver: string;
    enabled: boolean;
    health_status: "unknown" | "healthy" | "degraded" | "down";
    last_checked_at: string | null;
    last_success_at: string | null;
    last_failure_at: string | null;
    consecutive_failures: number;
    last_latency_ms: number | null;
    last_error: string | null;
    spot_enabled: boolean;
    futures_enabled: boolean;
    rest_url: string;
    ws_url: string;
    futures_rest_url: string;
    futures_ws_url: string;
    credentials: Record<string, string>;
    settings_json: string;
};

const emptyForm: ProviderForm = {
    name: "",
    slug: "",
    type: "exchange",
    driver: "binance",
    enabled: true,
    health_status: "unknown",
    last_checked_at: null,
    last_success_at: null,
    last_failure_at: null,
    consecutive_failures: 0,
    last_latency_ms: null,
    last_error: null,
    spot_enabled: true,
    futures_enabled: false,
    rest_url: "",
    ws_url: "",
    futures_rest_url: "",
    futures_ws_url: "",
    credentials: {},
    settings_json: "{}",
};

function csrfToken() {
    return (
        document
            .querySelector('meta[name="csrf-token"]')
            ?.getAttribute("content") ?? ""
    );
}

function settingsObject(value: unknown): Record<string, unknown> {
    if (!value || typeof value !== "object" || Array.isArray(value)) {
        return {};
    }

    return value as Record<string, unknown>;
}

function formFromProvider(provider: MarketProvider): ProviderForm {
    const settings = settingsObject(provider.settings);

    return {
        name: provider.name,
        slug: provider.slug,
        type: provider.type,
        driver: provider.driver as ProviderForm["driver"],
        enabled: provider.enabled,
        health_status: provider.health_status,
        last_checked_at: provider.last_checked_at,
        last_success_at: provider.last_success_at,
        last_failure_at: provider.last_failure_at,
        consecutive_failures: provider.consecutive_failures,
        last_latency_ms: provider.last_latency_ms,
        last_error: provider.last_error,
        spot_enabled: provider.spot_enabled,
        futures_enabled: provider.futures_enabled,
        rest_url: provider.rest_url ?? "",
        ws_url: provider.ws_url ?? "",
        futures_rest_url: provider.futures_rest_url ?? "",
        futures_ws_url: provider.futures_ws_url ?? "",
        credentials: {},
        settings_json: JSON.stringify(settings, null, 2),
    };
}

function formDefaultsFromDriver(
    option?: DriverOption,
): Pick<
    ProviderForm,
    "rest_url" | "ws_url" | "futures_rest_url" | "futures_ws_url"
> {
    return {
        rest_url: option?.defaults.rest_url ?? "",
        ws_url: option?.defaults.ws_url ?? "",
        futures_rest_url: option?.defaults.futures_rest_url ?? "",
        futures_ws_url: option?.defaults.futures_ws_url ?? "",
    };
}

function displayName(key: string) {
    return key
        .replaceAll("_", " ")
        .replace(/\b\w/g, (letter) => letter.toUpperCase());
}

function inputClass(readOnly = false) {
    return readOnly
        ? "w-full border-input bg-muted/60 text-muted-foreground"
        : "w-full border-input bg-background text-foreground placeholder:text-muted-foreground focus-visible:border-success-500 focus-visible:ring-success-500/20";
}

function Field({
    label,
    children,
    hint,
}: {
    label: string;
    children: ReactNode;
    hint?: string;
}) {
    return (
        <div className="space-y-1.5">
            <Label className="text-xs font-semibold text-foreground/75">
                {label}
            </Label>
            {children}
            {hint && (
                <p className="text-[11px] leading-4 text-muted-foreground">
                    {hint}
                </p>
            )}
        </div>
    );
}

function SecretField({
    label,
    value,
    masked,
    visible,
    onToggle,
    onChange,
}: {
    label: string;
    value: string;
    masked: string | null;
    visible: boolean;
    onToggle: () => void;
    onChange: (value: string) => void;
}) {
    return (
        <Field
            label={label}
            hint={
                masked
                    ? `Current value: ${masked}. Leave empty to keep it.`
                    : "No value configured."
            }
        >
            <div className="relative">
                <Input
                    type={visible ? "text" : "password"}
                    value={value}
                    onChange={(event) => onChange(event.target.value)}
                    placeholder={masked ?? "Enter credential"}
                    className="pr-10"
                    autoComplete="off"
                />
                <button
                    type="button"
                    onClick={onToggle}
                    className="absolute right-2 top-1/2 -translate-y-1/2 rounded-md p-1.5 text-muted-foreground hover:text-foreground"
                    aria-label={visible ? `Hide ${label}` : `Show ${label}`}
                >
                    {visible ? (
                        <EyeOff className="size-4" />
                    ) : (
                        <Eye className="size-4" />
                    )}
                </button>
            </div>
        </Field>
    );
}

export default function AdminMarketProviders({
    providers: initialProviders = [],
    driverOptions: initialDriverOptions = [],
}: {
    providers?: MarketProvider[];
    driverOptions?: DriverOption[];
}) {
    const { t } = useI18n();
    const [providers, setProviders] =
        useState<MarketProvider[]>(initialProviders);
    const [driverOptions, setDriverOptions] =
        useState<DriverOption[]>(initialDriverOptions);
    const [selectedId, setSelectedId] = useState<number | null>(
        initialProviders[0]?.id ?? null,
    );
    const [form, setForm] = useState<ProviderForm>(
        initialProviders[0] ? formFromProvider(initialProviders[0]) : emptyForm,
    );
    const [creating, setCreating] = useState(false);
    const [loading, setLoading] = useState(false);
    const [saving, setSaving] = useState(false);
    const [testing, setTesting] = useState(false);
    const [toggling, setToggling] = useState<string | null>(null);
    const [message, setMessage] = useState("");
    const [error, setError] = useState("");
    const [showSecrets, setShowSecrets] = useState<Record<string, boolean>>({});
    const [disableConfirmation, setDisableConfirmation] =
        useState<MarketProvider | null>(null);
    const [deleteConfirmation, setDeleteConfirmation] =
        useState<MarketProvider | null>(null);

    const selectedProvider = useMemo(
        () => providers.find((provider) => provider.id === selectedId) ?? null,
        [providers, selectedId],
    );

    useEffect(() => {
        if (!creating && selectedProvider) {
            setForm(formFromProvider(selectedProvider));
            setShowSecrets({});
        }
    }, [selectedId, creating]);

    const load = async (preferredId: number | null = selectedId) => {
        setLoading(true);
        setError("");
        try {
            const response = await fetch("/admin/market-providers/data", {
                headers: { Accept: "application/json" },
            });
            const payload = (await response.json()) as {
                providers?: MarketProvider[];
                driver_options?: DriverOption[];
            };
            if (!response.ok)
                throw new Error("Unable to load market providers.");
            const data = payload.providers ?? [];
            setDriverOptions(payload.driver_options ?? initialDriverOptions);
            setProviders(data);

            if (data.length === 0) {
                setSelectedId(null);
                setCreating(true);
                setForm(emptyForm);
                return;
            }

            const next =
                data.find((provider) => provider.id === preferredId) ?? data[0];
            setSelectedId(next.id);
            setCreating(false);
            setForm(formFromProvider(next));
        } catch (loadError) {
            setError(
                loadError instanceof Error
                    ? loadError.message
                    : "Unable to load market providers.",
            );
        } finally {
            setLoading(false);
        }
    };

    const selectProvider = (provider: MarketProvider) => {
        setCreating(false);
        setSelectedId(provider.id);
        setMessage("");
        setError("");
    };

    const startCreate = () => {
        setCreating(true);
        setSelectedId(null);
        const firstDriver = driverOptions[0];
        setForm({
            ...emptyForm,
            driver: firstDriver?.driver ?? "",
            name: firstDriver?.label ?? "",
            slug: firstDriver?.driver ?? "",
            ...formDefaultsFromDriver(firstDriver),
        });
        setMessage("");
        setError("");
    };

    const save = async () => {
        setSaving(true);
        setMessage("");
        setError("");

        let settings: Record<string, unknown>;
        try {
            settings = JSON.parse(form.settings_json || "{}");
            if (
                !settings ||
                Array.isArray(settings) ||
                typeof settings !== "object"
            ) {
                throw new Error("Settings must be a JSON object.");
            }
        } catch (parseError) {
            setError(
                parseError instanceof Error
                    ? parseError.message
                    : "Invalid settings JSON.",
            );
            setSaving(false);
            return;
        }

        const credentials = Object.fromEntries(
            Object.entries(form.credentials)
                .filter(([, value]) => value.trim())
                .map(([key, value]) => [key, value.trim()]),
        );

        const payload = {
            name: form.name.trim(),
            slug: form.slug.trim(),
            type: form.type.trim(),
            driver: form.driver,
            enabled: form.enabled,
            spot_enabled: form.spot_enabled,
            futures_enabled: form.futures_enabled,
            rest_url: form.rest_url.trim() || null,
            ws_url: form.ws_url.trim() || null,
            futures_rest_url: form.futures_rest_url.trim() || null,
            futures_ws_url: form.futures_ws_url.trim() || null,
            settings,
            credentials,
        };

        try {
            const url = creating
                ? "/admin/market-providers"
                : `/admin/market-providers/${selectedId}`;
            const response = await fetch(url, {
                method: creating ? "POST" : "PUT",
                headers: {
                    "Content-Type": "application/json",
                    Accept: "application/json",
                    "X-CSRF-TOKEN": csrfToken(),
                },
                body: JSON.stringify(payload),
            });
            const result = await response.json().catch(() => ({}));
            if (!response.ok) {
                const validation = result.errors
                    ? Object.values(result.errors).flat().join(" ")
                    : "";
                throw new Error(
                    validation ||
                        result.message ||
                        "Unable to save market provider.",
                );
            }

            setMessage(`${form.name || form.slug} saved successfully.`);
            setCreating(false);
            setForm((current) => ({
                ...current,
                credentials: {},
            }));
            await load(result.id ?? selectedId);
        } catch (saveError) {
            setError(
                saveError instanceof Error
                    ? saveError.message
                    : "Unable to save market provider.",
            );
        } finally {
            setSaving(false);
        }
    };

    const executeToggle = async (
        provider: MarketProvider,
        scope: "provider" | "spot" | "futures",
        enabled: boolean,
    ) => {
        if (toggling) return;

        const key = `${provider.id}:${scope}`;
        setToggling(key);
        setMessage("");
        setError("");

        try {
            const response = await fetch(
                `/admin/market-providers/${provider.id}/toggle`,
                {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        Accept: "application/json",
                        "X-CSRF-TOKEN": csrfToken(),
                    },
                    body: JSON.stringify({ scope, enabled }),
                },
            );
            const result = await response.json().catch(() => ({}));

            if (!response.ok) {
                const validation = result.errors
                    ? Object.values(result.errors).flat().join(" ")
                    : "";
                throw new Error(
                    validation ||
                        result.message ||
                        t(
                            "Unable to update provider status.",
                            "Unable to update provider status.",
                        ),
                );
            }

            const updated = result.provider as MarketProvider | undefined;
            if (!updated) {
                throw new Error(
                    t(
                        "Provider status response is invalid.",
                        "Respons status provider tidak valid.",
                    ),
                );
            }

            setProviders((current) =>
                current.map((item) =>
                    item.id === updated.id ? updated : item,
                ),
            );
            if (selectedId === updated.id) {
                setForm(formFromProvider(updated));
            }

            toast.success(
                result.message ||
                    (enabled
                        ? t("Provider enabled.", "Provider enabled.")
                        : t("Provider disabled.", "Provider disabled.")),
            );
        } catch (toggleError) {
            const message =
                toggleError instanceof Error
                    ? toggleError.message
                    : t(
                          "Unable to update provider status.",
                          "Unable to update provider status.",
                      );
            setError(message);
            toast.error(message);
        } finally {
            setToggling(null);
        }
    };

    const toggleCapability = (
        scope: "provider" | "spot" | "futures",
        enabled: boolean,
    ) => {
        if (!selectedProvider || toggling) return;

        const provider = selectedProvider;

        if (scope === "provider" && !enabled) {
            setDisableConfirmation(provider);
            return;
        }

        void executeToggle(provider, scope, enabled);
    };

    const testConnection = async () => {
        if (!selectedProvider) return;
        setTesting(true);
        setMessage("");
        setError("");
        try {
            const response = await fetch(
                `/admin/market-providers/${selectedProvider.id}/test`,
                {
                    method: "POST",
                    headers: {
                        Accept: "application/json",
                        "X-CSRF-TOKEN": csrfToken(),
                    },
                },
            );
            const result = await response.json().catch(() => ({}));
            if (!response.ok) {
                throw new Error(result.message || t("Connection test failed."));
            }
            toast.success(result.message || "Connection berhasil.");
        } catch (testError) {
            setError(
                testError instanceof Error
                    ? testError.message
                    : t("Connection test failed."),
            );
        } finally {
            setTesting(false);
        }
    };

    const executeRemove = async (provider: MarketProvider) => {
        if (saving) return;

        setSaving(true);
        setMessage("");
        setError("");

        try {
            const response = await fetch(
                `/admin/market-providers/${provider.id}`,
                {
                    method: "DELETE",
                    headers: {
                        Accept: "application/json",
                        "X-CSRF-TOKEN": csrfToken(),
                    },
                },
            );
            const result = await response.json().catch(() => ({}));
            if (!response.ok) {
                throw new Error(
                    result.message || "Unable to delete market provider.",
                );
            }

            toast.success(
                result.message ||
                    t("Market provider deleted.", "Market provider deleted."),
            );
            await load(null);
        } catch (deleteError) {
            const message =
                deleteError instanceof Error
                    ? deleteError.message
                    : "Unable to delete market provider.";
            setError(message);
            toast.error(message);
        } finally {
            setSaving(false);
        }
    };

    const remove = () => {
        if (!selectedProvider || saving) return;
        setDeleteConfirmation(selectedProvider);
    };

    return (
        <>
            <Head
                title={t("admin.market_providers.title", "Market Providers")}
            />
            <div className="min-h-full p-4 sm:p-6">
                <div className="mx-auto max-w-312.5 space-y-5">
                    <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
                        <div>
                            <div className="mb-2 flex items-center gap-2 text-[10px] font-bold uppercase tracking-[.2em] text-success-400">
                                <Database className="size-3" /> {t("Admin")}
                            </div>
                            <h1 className="text-2xl font-bold">
                                {t(
                                    "admin.market_providers.title",
                                    "Market Providers",
                                )}
                            </h1>
                            <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
                                {t(
                                    "Configure exchange connectors used by market data, spot and derivatives markets, charts, and signals.",
                                    "Configure exchange connectors used by market data, spot and derivatives markets, charts, and signals.",
                                )}
                            </p>
                        </div>
                        <div className="flex gap-2">
                            <Button
                                variant="outline"
                                size="sm"
                                onClick={() => void load()}
                                disabled={loading || saving}
                            >
                                <RefreshCw
                                    className={loading ? "animate-spin" : ""}
                                />
                                {t("admin.common.refresh", "Refresh")}
                            </Button>
                            <Button
                                size="sm"
                                onClick={startCreate}
                                disabled={creating || saving}
                            >
                                <Plus />
                                {t("admin.common.add_provider", "Add provider")}
                            </Button>
                        </div>
                    </div>

                    {message && (
                        <div className="flex items-center gap-2 rounded-xl border border-success-400/20 bg-success-400/5 p-3 text-sm text-success-300">
                            <CheckCircle2 className="size-4" /> {message}
                        </div>
                    )}
                    {error && (
                        <div className="flex items-center gap-2 rounded-xl border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive">
                            <XCircle className="size-4" /> {error}
                        </div>
                    )}

                                        <AdminOperationalStrip
                        metrics={[
                            { label: "Providers", value: providers.length, detail: "configured connector(s)" },
                            { label: "Healthy", value: providers.filter((item) => item.health_status === "healthy").length, detail: "passing health checks", tone: providers.some((item) => item.health_status === "healthy") ? "success" : "warning" },
                            { label: "Attention", value: providers.filter((item) => item.health_status === "degraded" || item.health_status === "down").length, detail: "degraded or offline", tone: providers.some((item) => item.health_status === "down") ? "danger" : providers.some((item) => item.health_status === "degraded") ? "warning" : "default" },
                            { label: "Enabled", value: providers.filter((item) => item.enabled).length, detail: "active in the platform" },
                        ]}
                    />

<div className="grid gap-5 lg:grid-cols-[350px_minmax(0,1fr)]">
                        <section className="rounded-2xl border border-border/80 bg-card p-5 shadow-sm">
                            <div className="mb-3 flex items-center justify-between">
                                <div>
                                    <h2 className="font-bold">
                                        {t(
                                            "admin.common.configured_providers",
                                            "Configured providers",
                                        )}
                                    </h2>
                                    <p className="text-xs text-muted-foreground">
                                        {t(
                                            "admin.common.select_provider",
                                            "Select a provider to edit.",
                                        )}
                                    </p>
                                </div>
                                <Activity className="size-5 text-success-400" />
                            </div>

                            {providers.length === 0 ? (
                                <div className="rounded-xl border border-dashed border-border p-5 text-sm text-muted-foreground">
                                    {t(
                                        "No market provider configured yet.",
                                        "No market provider configured yet.",
                                    )}
                                </div>
                            ) : (
                                <div className="space-y-2">
                                    {providers.map((provider) => (
                                        <button
                                            key={provider.id}
                                            type="button"
                                            onClick={() =>
                                                selectProvider(provider)
                                            }
                                            className={`w-full rounded-xl border p-4 text-left transition ${
                                                selectedId === provider.id &&
                                                !creating
                                                    ? "border-success-400/50 bg-success-400/5"
                                                    : "border-border hover:bg-muted/40"
                                            }`}
                                        >
                                            <div className="flex items-start justify-between gap-3">
                                                <div>
                                                    <div className="font-semibold">
                                                        {provider.name}
                                                    </div>
                                                    <div className="mt-1 font-mono text-xs text-muted-foreground">
                                                        {provider.slug} ·{" "}
                                                        {provider.driver}
                                                    </div>
                                                </div>
                                                <div className="flex items-center gap-2">
                                                    <Badge
                                                        variant={
                                                            provider.enabled
                                                                ? "default"
                                                                : "outline"
                                                        }
                                                    >
                                                        {provider.enabled
                                                            ? t(
                                                                  "admin.common.enabled",
                                                                  "Enabled",
                                                              )
                                                            : t(
                                                                  "admin.common.disabled",
                                                                  "Disabled",
                                                              )}
                                                    </Badge>
                                                    <span
                                                        className={`rounded-full border px-2 py-1 text-[10px] font-semibold uppercase tracking-wide ${
                                                            provider.health_status ===
                                                            "healthy"
                                                                ? "border-success-400/30 text-success-400"
                                                                : provider.health_status ===
                                                                    "degraded"
                                                                  ? "border-warning-400/30 text-warning-400"
                                                                  : provider.health_status ===
                                                                      "down"
                                                                    ? "border-destructive-400/30 text-destructive-400"
                                                                    : "border-border text-muted-foreground"
                                                        }`}
                                                    >
                                                        {provider.health_status}
                                                        {provider.last_latency_ms !=
                                                        null
                                                            ? ` · ${provider.last_latency_ms}ms`
                                                            : ""}
                                                    </span>
                                                </div>
                                            </div>
                                            <div className="mt-3 flex flex-wrap gap-2 text-[11px] text-muted-foreground">
                                                <span className="rounded-full border border-border px-2 py-1">
                                                    {provider.spot_enabled
                                                        ? t("Spot", "Spot")
                                                        : t(
                                                              "Spot off",
                                                              "Spot off",
                                                          )}
                                                </span>
                                                <span className="rounded-full border border-border px-2 py-1">
                                                    {provider.futures_enabled
                                                        ? t(
                                                              "Futures",
                                                              "Futures",
                                                          )
                                                        : t(
                                                              "Futures off",
                                                              "Futures off",
                                                          )}
                                                </span>
                                                {provider.credentials_configured && (
                                                    <span className="inline-flex items-center gap-1 rounded-full border border-border px-2 py-1">
                                                        <KeyRound className="size-3" />{" "}
                                                        {t(
                                                            "admin.common.credentials",
                                                            "Credentials",
                                                        )}
                                                    </span>
                                                )}
                                            </div>
                                        </button>
                                    ))}
                                </div>
                            )}
                        </section>

                        <section className="rounded-2xl border border-border/80 bg-card p-6 shadow-sm">
                            <div className="space-y-6">
                                <div className="flex flex-col gap-3 border-b border-border pb-5 sm:flex-row sm:items-center sm:justify-between">
                                    <div>
                                        <div className="flex items-center gap-2">
                                            <Server className="size-4 text-success-400" />
                                            <h2 className="text-lg font-bold">
                                                {creating
                                                    ? t(
                                                          "Add Market Provider",
                                                          "Add Market Provider",
                                                      )
                                                    : (selectedProvider?.name ??
                                                      t(
                                                          "Market Provider",
                                                          "Market Provider",
                                                      ))}
                                            </h2>
                                        </div>
                                        <p className="mt-1 text-xs text-muted-foreground">
                                            {creating
                                                ? t(
                                                      "Create a new exchange configuration.",
                                                      "Create a new exchange configuration.",
                                                  )
                                                : `${t("Provider ID", "Provider ID")}: ${selectedProvider?.id ?? "-"}`}
                                        </p>
                                    </div>
                                    {!creating && selectedProvider && (
                                        <Button
                                            variant="outline"
                                            size="sm"
                                            onClick={() => void remove()}
                                            disabled={saving}
                                        >
                                            <Trash2 />
                                            {t("Delete", "Delete")}
                                        </Button>
                                    )}
                                </div>

                                <div className="grid gap-4 sm:grid-cols-2">
                                    <Field
                                        label={t(
                                            "admin.common.display_name",
                                            "Display name",
                                        )}
                                    >
                                        <Input
                                            className={inputClass()}
                                            value={form.name}
                                            onChange={(event) =>
                                                setForm((current) => ({
                                                    ...current,
                                                    name: event.target.value,
                                                }))
                                            }
                                            placeholder="Binance"
                                        />
                                    </Field>
                                    <Field
                                        label="Slug"
                                        hint={t(
                                            "Only letters, numbers, dash, and underscore.",
                                            "Only letters, numbers, dash, and underscore.",
                                        )}
                                    >
                                        <Input
                                            className={inputClass(!creating)}
                                            value={form.slug}
                                            disabled={!creating}
                                            onChange={(event) =>
                                                setForm((current) => ({
                                                    ...current,
                                                    slug: event.target.value,
                                                }))
                                            }
                                            placeholder="binance"
                                        />
                                    </Field>
                                    <Field
                                        label="Driver"
                                        hint={
                                            creating
                                                ? t(
                                                      "Select the exchange adapter used by this provider.",
                                                      "Select the exchange adapter used by this provider.",
                                                  )
                                                : t(
                                                      "Driver is locked after creation to protect the configured adapter.",
                                                      "Driver is locked after creation to protect the configured adapter.",
                                                  )
                                        }
                                    >
                                        <Select
                                            value={form.driver}
                                            onValueChange={(value) =>
                                                setForm((current) => {
                                                    const option =
                                                        driverOptions.find(
                                                            (item) =>
                                                                item.driver ===
                                                                value,
                                                        );
                                                    return {
                                                        ...current,
                                                        ...formDefaultsFromDriver(
                                                            option,
                                                        ),
                                                        driver: value,
                                                        name:
                                                            option?.label ??
                                                            current.name,
                                                        slug: value,
                                                        spot_enabled: true,
                                                        futures_enabled:
                                                            Boolean(
                                                                option?.markets.includes(
                                                                    "futures",
                                                                ),
                                                            ),
                                                        credentials: {},
                                                    };
                                                })
                                            }
                                            disabled={!creating}
                                        >
                                            <SelectTrigger
                                                className={inputClass(
                                                    !creating,
                                                )}
                                            >
                                                <SelectValue
                                                    placeholder={t(
                                                        "Select driver",
                                                        "Select driver",
                                                    )}
                                                />
                                            </SelectTrigger>
                                            <SelectContent>
                                                {driverOptions.map((option) => (
                                                    <SelectItem
                                                        key={option.driver}
                                                        value={option.driver}
                                                    >
                                                        {option.label}
                                                    </SelectItem>
                                                ))}
                                            </SelectContent>
                                        </Select>
                                    </Field>
                                    <Field
                                        label="Type"
                                        hint={
                                            creating
                                                ? "Provider category."
                                                : "Provider type is fixed for the existing exchange connector."
                                        }
                                    >
                                        <Input
                                            className={inputClass(!creating)}
                                            value={form.type}
                                            disabled={!creating}
                                            onChange={(event) =>
                                                setForm((current) => ({
                                                    ...current,
                                                    type: event.target.value,
                                                }))
                                            }
                                            placeholder="exchange"
                                        />
                                    </Field>
                                </div>

                                <div className="grid gap-3 sm:grid-cols-3">
                                    {(
                                        [
                                            {
                                                label: "Provider",
                                                key: "enabled",
                                                value: form.enabled,
                                            },
                                            {
                                                label: "Spot",
                                                key: "spot_enabled",
                                                value: form.spot_enabled,
                                            },
                                            {
                                                label: "Futures",
                                                key: "futures_enabled",
                                                value: form.futures_enabled,
                                            },
                                        ] as const
                                    ).map(({ label, key, value }) => (
                                        <Button
                                            key={key}
                                            type="button"
                                            variant="outline"
                                            aria-pressed={value}
                                            disabled={
                                                saving ||
                                                loading ||
                                                toggling ===
                                                    `${selectedProvider?.id}:${key === "enabled" ? "provider" : key === "spot_enabled" ? "spot" : "futures"}`
                                            }
                                            className={`h-auto justify-between rounded-xl px-4 py-3 text-left ${
                                                value
                                                    ? "border-success-500/40 bg-success-500/5 text-success-600 hover:bg-success-500/10"
                                                    : "border-border bg-muted/30 text-muted-foreground hover:bg-muted/50"
                                            }`}
                                            onClick={() => {
                                                if (creating) {
                                                    setForm((current) => ({
                                                        ...current,
                                                        [key]: !Boolean(
                                                            current[
                                                                key as keyof ProviderForm
                                                            ],
                                                        ),
                                                    }));
                                                    return;
                                                }

                                                const scope =
                                                    key === "enabled"
                                                        ? "provider"
                                                        : key === "spot_enabled"
                                                          ? "spot"
                                                          : "futures";
                                                void toggleCapability(
                                                    scope,
                                                    !value,
                                                );
                                            }}
                                        >
                                            <span>
                                                <span className="block text-sm font-semibold">
                                                    {label}
                                                </span>
                                                <span className="text-[11px] font-normal">
                                                    {value
                                                        ? "Enabled"
                                                        : "Disabled"}
                                                </span>
                                            </span>
                                            {toggling ===
                                            `${selectedProvider?.id}:${key === "enabled" ? "provider" : key === "spot_enabled" ? "spot" : "futures"}` ? (
                                                <RefreshCw className="size-4 animate-spin" />
                                            ) : (
                                                <span
                                                    className={`size-2.5 rounded-full ${value ? "bg-success-500" : "bg-muted-foreground/40"}`}
                                                />
                                            )}
                                        </Button>
                                    ))}
                                </div>

                                <div>
                                    <div className="mb-3 flex items-center gap-2">
                                        <Server className="size-4 text-success-400" />
                                        <div>
                                            <h3 className="font-semibold">
                                                {t("Market endpoints")}
                                            </h3>
                                            <p className="text-xs text-muted-foreground">
                                                {t(
                                                    "REST and WebSocket endpoints for spot and futures.",
                                                )}
                                            </p>
                                        </div>
                                    </div>
                                    <div className="grid gap-4 sm:grid-cols-2">
                                        <Field label="Spot REST URL">
                                            <Input
                                                className={inputClass()}
                                                value={form.rest_url}
                                                onChange={(event) =>
                                                    setForm((current) => ({
                                                        ...current,
                                                        rest_url:
                                                            event.target.value,
                                                    }))
                                                }
                                                placeholder="https://api.example.com"
                                            />
                                        </Field>
                                        <Field label="Spot WebSocket URL">
                                            <Input
                                                className={inputClass()}
                                                value={form.ws_url}
                                                onChange={(event) =>
                                                    setForm((current) => ({
                                                        ...current,
                                                        ws_url: event.target
                                                            .value,
                                                    }))
                                                }
                                                placeholder="wss://stream.example.com"
                                            />
                                        </Field>
                                        <Field label="Futures REST URL">
                                            <Input
                                                className={inputClass()}
                                                value={form.futures_rest_url}
                                                onChange={(event) =>
                                                    setForm((current) => ({
                                                        ...current,
                                                        futures_rest_url:
                                                            event.target.value,
                                                    }))
                                                }
                                                placeholder="https://fapi.example.com"
                                            />
                                        </Field>
                                        <Field label="Futures WebSocket URL">
                                            <Input
                                                className={inputClass()}
                                                value={form.futures_ws_url}
                                                onChange={(event) =>
                                                    setForm((current) => ({
                                                        ...current,
                                                        futures_ws_url:
                                                            event.target.value,
                                                    }))
                                                }
                                                placeholder="wss://fstream.example.com"
                                            />
                                        </Field>
                                    </div>
                                </div>

                                <div>
                                    <div className="mb-3 flex items-center gap-2">
                                        <KeyRound className="size-4 text-success-400" />
                                        <div>
                                            <h3 className="font-semibold">
                                                {t(
                                                    "admin.common.credentials",
                                                    "API credentials",
                                                )}
                                            </h3>
                                            <p className="text-xs text-muted-foreground">
                                                {t(
                                                    "Existing secrets remain masked. Empty fields are not sent, so current credentials are preserved.",
                                                )}
                                            </p>
                                        </div>
                                    </div>
                                    <div className="grid gap-4 sm:grid-cols-2">
                                        {(
                                            driverOptions.find(
                                                (option) =>
                                                    option.driver ===
                                                    form.driver,
                                            )?.credentials ?? []
                                        ).map((key) => (
                                            <SecretField
                                                key={key}
                                                label={displayName(key)}
                                                value={
                                                    form.credentials[key] ?? ""
                                                }
                                                masked={
                                                    selectedProvider
                                                        ?.credential_fields[
                                                        key
                                                    ] ?? null
                                                }
                                                visible={Boolean(
                                                    showSecrets[key],
                                                )}
                                                onToggle={() =>
                                                    setShowSecrets(
                                                        (current) => ({
                                                            ...current,
                                                            [key]: !current[
                                                                key
                                                            ],
                                                        }),
                                                    )
                                                }
                                                onChange={(value) =>
                                                    setForm((current) => ({
                                                        ...current,
                                                        credentials: {
                                                            ...current.credentials,
                                                            [key]: value,
                                                        },
                                                    }))
                                                }
                                            />
                                        ))}
                                        {(
                                            driverOptions.find(
                                                (option) =>
                                                    option.driver ===
                                                    form.driver,
                                            )?.credentials ?? []
                                        ).length === 0 && (
                                            <p className="text-xs text-muted-foreground">
                                                {t(
                                                    "This driver does not require API credentials.",
                                                )}
                                            </p>
                                        )}
                                    </div>
                                </div>

                                <Field
                                    label="Additional settings JSON"
                                    hint='Optional object for provider-specific settings. Example: { "recv_window": 5000 }'
                                >
                                    <Textarea
                                        className="min-h-36 bg-background font-mono text-xs"
                                        value={form.settings_json}
                                        onChange={(event) =>
                                            setForm((current) => ({
                                                ...current,
                                                settings_json:
                                                    event.target.value,
                                            }))
                                        }
                                        spellCheck={false}
                                    />
                                </Field>

                                <div className="flex flex-wrap justify-end gap-2 border-t border-border pt-5">
                                    {!creating && selectedProvider && (
                                        <Button
                                            variant="outline"
                                            onClick={() =>
                                                void testConnection()
                                            }
                                            disabled={
                                                testing || saving || loading
                                            }
                                        >
                                            {testing ? (
                                                <RefreshCw className="animate-spin" />
                                            ) : (
                                                <Activity />
                                            )}
                                            {t("Test connection")}
                                        </Button>
                                    )}
                                    <Button
                                        onClick={() => void save()}
                                        disabled={
                                            saving ||
                                            loading ||
                                            !form.name.trim() ||
                                            !form.slug.trim()
                                        }
                                    >
                                        {saving ? (
                                            <RefreshCw className="animate-spin" />
                                        ) : (
                                            <Save />
                                        )}
                                        {creating
                                            ? "Create provider"
                                            : "Save changes"}
                                    </Button>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
            </div>

            <AlertDialog
                open={disableConfirmation !== null}
                onOpenChange={(open) => {
                    if (!open && !toggling) {
                        setDisableConfirmation(null);
                    }
                }}
            >
                <AlertDialogContent>
                    <AlertDialogHeader>
                        <AlertDialogTitle>
                            {t("Disable provider?", "Disable provider?")}
                        </AlertDialogTitle>
                        <AlertDialogDescription>
                            {disableConfirmation
                                ? `${t("Disable", "Disable")} ${disableConfirmation.name}? ${t(
                                      "This provider will no longer be used for market-data requests.",
                                      "Provider ini tidak akan lagi digunakan untuk request market data.",
                                  )}`
                                : ""}
                        </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                        <AlertDialogCancel disabled={Boolean(toggling)}>
                            {t("Cancel", "Cancel")}
                        </AlertDialogCancel>
                        <AlertDialogAction
                            disabled={Boolean(toggling)}
                            onClick={(event) => {
                                event.preventDefault();
                                const provider = disableConfirmation;
                                if (!provider) return;

                                void executeToggle(provider, "provider", false).finally(
                                    () => setDisableConfirmation(null),
                                );
                            }}
                        >
                            {toggling ? (
                                <RefreshCw className="mr-2 size-4 animate-spin" />
                            ) : null}
                            {t("Disable provider", "Disable provider")}
                        </AlertDialogAction>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>

            <AlertDialog
                open={deleteConfirmation !== null}
                onOpenChange={(open) => {
                    if (!open && !saving) {
                        setDeleteConfirmation(null);
                    }
                }}
            >
                <AlertDialogContent>
                    <AlertDialogHeader>
                        <AlertDialogTitle>
                            {t("Delete provider?", "Delete provider?")}
                        </AlertDialogTitle>
                        <AlertDialogDescription>
                            {deleteConfirmation
                                ? `${t("Delete", "Delete")} ${deleteConfirmation.name}? ${t(
                                      "This action cannot be undone.",
                                      "Provider ini akan dihapus permanen dan tidak dapat dibatalkan.",
                                  )}`
                                : ""}
                        </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                        <AlertDialogCancel disabled={saving}>
                            {t("Cancel", "Cancel")}
                        </AlertDialogCancel>
                        <AlertDialogAction
                            disabled={saving}
                            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                            onClick={(event) => {
                                event.preventDefault();
                                const provider = deleteConfirmation;
                                if (!provider) return;

                                void executeRemove(provider).finally(() =>
                                    setDeleteConfirmation(null),
                                );
                            }}
                        >
                            {saving ? (
                                <RefreshCw className="mr-2 size-4 animate-spin" />
                            ) : (
                                <Trash2 className="mr-2 size-4" />
                            )}
                            {t("Delete provider", "Delete provider")}
                        </AlertDialogAction>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>
        </>
    );
}