import { Head } from "@inertiajs/react";
import { useEffect, useMemo, useState } from "react";
import { FlaskConical, Languages, Save, Settings2 } from "lucide-react";
import { useI18n } from "@/lib/i18n";

import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
type Language = {
    id: number;
    code: string;
    name: string;
    native_name: string | null;
    is_enabled: boolean;
    is_default: boolean;
    translations: Record<string, string> | null;
};
type FeatureState = {
    backtest_enabled: boolean;
    signal_engine_enabled: boolean;
};

type AnalysisCardState = Record<string, boolean>;

type CustomerPageDefinition = {
    title: string;
    description: string;
    href: string;
    enabled: boolean;
    required: boolean;
};

type CustomerPageState = Record<string, CustomerPageDefinition>;

const analysisCardDefinitions = [
    {
        key: "advanced_analytics",
        title: "Advanced Analytics & History",
        description: "Show or hide the Advanced Analytics & History section on the Trading page.",
    },
    {
        key: "research_backtesting",
        title: "Professional Research & Backtesting",
        description: "Show or hide the Professional Research & Backtesting section on the Trading page.",
    },
    {
        key: "market_intelligence",
        title: "Market Intelligence",
        description: "Show or hide the Market Intelligence accordion on the Trading page.",
    },
    {
        key: "context_validation",
        title: "Context & Validation",
        description: "Show or hide the Context & Validation accordion on the Trading page.",
    },
    {
        key: "signal_engine",
        title: "Signal Engine",
        description: "Live LONG / SHORT signal generation card.",
    },
    {
        key: "trade_plan",
        title: "Trade Plan",
        description: "Entry, stop loss, take profit and risk plan.",
    },
    {
        key: "signal_history",
        title: "Signal History",
        description: "Recent detected signals and their outcomes.",
    },
    {
        key: "signal_performance",
        title: "Signal Performance",
        description: "Signal statistics and performance analytics.",
    },
    {
        key: "regime_detection",
        title: "Regime Detection",
        description: "Current market regime analysis for futures.",
    },
    {
        key: "market_breadth",
        title: "Market Breadth",
        description: "Breadth and participation across active USDT pairs.",
    },
    {
        key: "market_relay",
        title: "Market Relay",
        description: "Historical lead-lag relationships between market assets.",
    },
    {
        key: "correlation",
        title: "Correlation",
        description: "Cross-market correlation analysis for futures.",
    },
    {
        key: "portfolio_risk",
        title: "Portfolio Risk",
        description: "Portfolio risk and exposure analysis.",
    },
    {
        key: "signal_engine_replay",
        title: "Signal Engine Replay",
        description: "Replay historical signal-engine behavior.",
    },
    {
        key: "backtest",
        title: "Backtest",
        description: "Historical strategy backtesting panel.",
    },
    {
        key: "volume_profile",
        title: "Volume Profile",
        description: "Volume profile analysis when the indicator is enabled.",
    },
    {
        key: "signal_calibration",
        title: "Signal Calibration",
        description:
            "Probability calibration and out-of-sample validation panel.",
    },
] as const;

export default function AdminSettings() {
    const { t } = useI18n();
    const [appName, setAppName] = useState("");
    const [languages, setLanguages] = useState<Language[]>([]);
    const [features, setFeatures] = useState<FeatureState>({
        backtest_enabled: true,
        signal_engine_enabled: true,
    });
    const [analysisCards, setAnalysisCards] = useState<AnalysisCardState>({});
    const [customerPages, setCustomerPages] = useState<CustomerPageState>({});
    const [newLanguage, setNewLanguage] = useState({
        code: "",
        name: "",
        native_name: "",
        translations: "{}",
    });
    const [message, setMessage] = useState("");
    const [translationDialogOpen, setTranslationDialogOpen] = useState(false);
    const [translationLanguage, setTranslationLanguage] =
        useState<Language | null>(null);
    const [translationJson, setTranslationJson] = useState("{}");
    const [translationSaving, setTranslationSaving] = useState(false);

    const load = () =>
        fetch("/admin/settings/data", {
            headers: { Accept: "application/json" },
        })
            .then((r) => r.json())
            .then((d) => {
                setAppName(d.app_name ?? "");
                setLanguages(d.languages ?? []);
                setFeatures({
                    backtest_enabled: d.features?.backtest_enabled !== false,
                    signal_engine_enabled:
                        d.features?.signal_engine_enabled !== false,
                });
                setAnalysisCards(d.trading_cards ?? {});
                setCustomerPages(d.customer_pages ?? {});
            });
    useEffect(() => {
        void load();
    }, []);

    const saveApp = async () => {
        const r = await fetch("/admin/settings/app", {
            method: "PUT",
            headers: {
                "Content-Type": "application/json",
                Accept: "application/json",
                "X-CSRF-TOKEN":
                    document
                        .querySelector('meta[name="csrf-token"]')
                        ?.getAttribute("content") ?? "",
            },
            body: JSON.stringify({ app_name: appName }),
        });
        setMessage(r.ok ? "Saved." : "Unable to save application name.");
        if (r.ok) window.location.reload();
    };

    const toggleBacktest = async (enabled: boolean) => {
        setFeatures((current) => ({ ...current, backtest_enabled: enabled }));
        const r = await fetch("/admin/settings/features/backtest", {
            method: "PUT",
            headers: {
                "Content-Type": "application/json",
                Accept: "application/json",
                "X-CSRF-TOKEN":
                    document
                        .querySelector('meta[name="csrf-token"]')
                        ?.getAttribute("content") ?? "",
            },
            body: JSON.stringify({ enabled }),
        });

        if (r.ok) {
            setMessage(
                enabled
                    ? t("admin.backtest_enabled", "Backtest enabled.")
                    : t("admin.backtest_disabled", "Backtest disabled."),
            );
            return;
        }

        setFeatures((current) => ({ ...current, backtest_enabled: !enabled }));
        const payload = await r.json().catch(() => ({}));
        setMessage(
            payload.message ??
                t("admin.feature_update_failed", "Unable to update feature."),
        );
    };

    const toggleSignalEngine = async (enabled: boolean) => {
        setFeatures((current) => ({
            ...current,
            signal_engine_enabled: enabled,
        }));
        const r = await fetch("/admin/settings/features/signal-engine", {
            method: "PUT",
            headers: {
                "Content-Type": "application/json",
                Accept: "application/json",
                "X-CSRF-TOKEN":
                    document
                        .querySelector('meta[name="csrf-token"]')
                        ?.getAttribute("content") ?? "",
            },
            body: JSON.stringify({ enabled }),
        });
        if (r.ok) {
            setMessage(
                enabled
                    ? t("admin.signal_enabled", "Signal Engine enabled.")
                    : t("admin.signal_disabled", "Signal Engine disabled."),
            );
            return;
        }
        setFeatures((current) => ({
            ...current,
            signal_engine_enabled: !enabled,
        }));
        const payload = await r.json().catch(() => ({}));
        setMessage(
            payload.message ??
                t("admin.feature_update_failed", "Unable to update feature."),
        );
    };

    const toggleAnalysisCard = async (card: string, enabled: boolean) => {
        const previous = analysisCards[card] !== false;
        setAnalysisCards((current) => ({ ...current, [card]: enabled }));

        const r = await fetch(`/admin/settings/trading-cards/${card}`, {
            method: "PUT",
            headers: {
                "Content-Type": "application/json",
                Accept: "application/json",
                "X-CSRF-TOKEN":
                    document
                        .querySelector('meta[name="csrf-token"]')
                        ?.getAttribute("content") ?? "",
            },
            body: JSON.stringify({ enabled }),
        });

        if (r.ok) {
            setMessage(
                `${analysisCardDefinitions.find((item) => item.key === card)?.title ?? card} ${enabled ? "shown" : "hidden"}.`,
            );
            return;
        }

        setAnalysisCards((current) => ({ ...current, [card]: previous }));
        const payload = await r.json().catch(() => ({}));
        setMessage(
            payload.message ??
                t("admin.feature_update_failed", "Unable to update feature."),
        );
    };

    const toggleCustomerPage = async (pageKey: string, enabled: boolean) => {
        const previous = customerPages[pageKey]?.enabled !== false;
        setCustomerPages((current) => ({
            ...current,
            [pageKey]: {
                ...current[pageKey],
                enabled,
            },
        }));

        const r = await fetch(`/admin/settings/customer-pages/${pageKey}`, {
            method: "PUT",
            headers: {
                "Content-Type": "application/json",
                Accept: "application/json",
                "X-CSRF-TOKEN":
                    document
                        .querySelector('meta[name="csrf-token"]')
                        ?.getAttribute("content") ?? "",
            },
            body: JSON.stringify({ enabled }),
        });

        if (r.ok) {
            const payload = await r.json().catch(() => ({}));
            const page = customerPages[pageKey];
            setMessage(
                `${page?.title ?? pageKey} ${payload.enabled ? "shown" : "hidden"}.`,
            );
            return;
        }

        setCustomerPages((current) => ({
            ...current,
            [pageKey]: {
                ...current[pageKey],
                enabled: previous,
            },
        }));
        const payload = await r.json().catch(() => ({}));
        setMessage(
            payload.message ??
                t(
                    "admin.page_visibility_update_failed",
                    "Unable to update customer page visibility.",
                ),
        );
    };

    const toggle = async (language: Language) => {
        const r = await fetch(`/admin/languages/${language.id}`, {
            method: "PUT",
            headers: {
                "Content-Type": "application/json",
                Accept: "application/json",
                "X-CSRF-TOKEN":
                    document
                        .querySelector('meta[name="csrf-token"]')
                        ?.getAttribute("content") ?? "",
            },
            body: JSON.stringify({ is_enabled: !language.is_enabled }),
        });
        if (r.ok) load();
        else
            setMessage(
                (await r.json()).message ?? "Unable to update language.",
            );
    };

    const openTranslationDialog = (language: Language) => {
        setTranslationLanguage(language);
        setTranslationJson(
            JSON.stringify(language.translations ?? {}, null, 2),
        );
        setMessage("");
        setTranslationDialogOpen(true);
    };

    const parsedTranslations = useMemo(() => {
        try {
            const parsed = JSON.parse(translationJson);
            if (
                parsed === null ||
                Array.isArray(parsed) ||
                typeof parsed !== "object"
            ) {
                return {
                    value: null as Record<string, string> | null,
                    error: "Translations must be a JSON object.",
                };
            }
            for (const [key, value] of Object.entries(parsed)) {
                if (typeof value !== "string") {
                    return {
                        value: null as Record<string, string> | null,
                        error: `Translation value for "${key}" must be a string.`,
                    };
                }
            }
            return { value: parsed as Record<string, string>, error: "" };
        } catch {
            return {
                value: null as Record<string, string> | null,
                error: "Invalid JSON. Please check the syntax.",
            };
        }
    }, [translationJson]);

    const saveTranslations = async () => {
        if (!translationLanguage || !parsedTranslations.value) return;

        setTranslationSaving(true);
        try {
            const r = await fetch(
                `/admin/languages/${translationLanguage.id}`,
                {
                    method: "PUT",
                    headers: {
                        "Content-Type": "application/json",
                        Accept: "application/json",
                        "X-CSRF-TOKEN":
                            document
                                .querySelector('meta[name="csrf-token"]')
                                ?.getAttribute("content") ?? "",
                    },
                    body: JSON.stringify({
                        translations: parsedTranslations.value,
                    }),
                },
            );

            if (r.ok) {
                setMessage("Language saved.");
                setTranslationDialogOpen(false);
                setTranslationLanguage(null);
                await load();
                return;
            }

            const payload = await r.json().catch(() => ({}));
            setMessage(payload.message ?? "Unable to save language.");
        } finally {
            setTranslationSaving(false);
        }
    };

    const addLanguage = async () => {
        let translations: Record<string, string>;
        try {
            translations = JSON.parse(newLanguage.translations || "{}");
        } catch {
            setMessage("Invalid translations JSON.");
            return;
        }
        const r = await fetch("/admin/languages", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                Accept: "application/json",
                "X-CSRF-TOKEN":
                    document
                        .querySelector('meta[name="csrf-token"]')
                        ?.getAttribute("content") ?? "",
            },
            body: JSON.stringify({ ...newLanguage, translations }),
        });
        if (r.ok) {
            setNewLanguage({
                code: "",
                name: "",
                native_name: "",
                translations: "{}",
            });
            setMessage("Language added.");
            load();
        } else
            setMessage((await r.json()).message ?? "Unable to add language.");
    };

    return (
        <>
            <Head title={t("admin.settings", "Application Settings")} />
            <div className="min-h-full p-4 sm:p-6">
                <div className="mx-auto space-y-5">
                    <div>
                        <div className="mb-2 flex items-center gap-2 text-[10px] font-bold uppercase tracking-[.2em] text-success-400">
                            <Settings2 className="size-3" /> {t("Admin")}
                        </div>
                        <h1 className="text-2xl font-bold">
                            {t("admin.settings", "Application Settings")}
                        </h1>
                    </div>
                    {message && (
                        <div className="rounded-xl border border-success-400/20 bg-success-400/5 p-3 text-sm text-success-300">
                            {message}
                        </div>
                    )}
                    <Card className="rounded-2xl border border-border bg-card p-5">
                        <div className="flex items-center gap-2">
                            <Settings2 className="size-4 text-success-400" />
                            <h2 className="font-bold">
                                {t(
                                    "admin.application_name",
                                    "Application name",
                                )}
                            </h2>
                        </div>
                        <p className="mt-1 text-sm text-muted-foreground">
                            {t(
                                "admin.application_name_help",
                                "This name is shown in the application header, browser title, and navigation.",
                            )}
                        </p>
                        <div className="mt-4 flex gap-3">
                            <Input
                                value={appName}
                                onChange={(e) => setAppName(e.target.value)}
                                className="flex-1 rounded-xl border border-border bg-background px-3 py-2.5"
                            />
                            <Button
                                variant="outline"
                                onClick={saveApp}
                                className="inline-flex items-center gap-2 rounded-xl bg-success-400 px-4 py-2.5 text-sm font-bold text-[#04120d]"
                            >
                                <Save className="size-4" />
                                {t("admin.save_settings", "Save settings")}
                            </Button>
                        </div>
                    </Card>
                    <Card className="rounded-2xl border border-border bg-card p-5">
                        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                            <div>
                                <div className="flex items-center gap-2">
                                    <FlaskConical className="size-4 text-success-400" />
                                    <h2 className="font-bold">
                                        {t("admin.features", "Features")}
                                    </h2>
                                </div>
                                <p className="mt-1 text-sm text-muted-foreground">
                                    {t(
                                        "admin.features_help",
                                        "Enable or disable optional product features globally. Plan permissions still apply.",
                                    )}
                                </p>
                            </div>
                            <div className="flex items-center gap-3">
                                <div className="text-right">
                                    <div className="text-sm font-semibold">
                                        {t("backtest.title", "Backtest Engine")}
                                    </div>
                                    <div className="text-xs text-muted-foreground">
                                        {features.backtest_enabled
                                            ? t("common.enabled", "Enabled")
                                            : t("common.disabled", "Disabled")}
                                    </div>
                                </div>
                                <Button
                                    type="button"
                                    variant="outline"
                                    size="sm"
                                    aria-pressed={features.backtest_enabled}
                                    aria-label={t(
                                        "admin.toggle_backtest",
                                        "Toggle Backtest Engine",
                                    )}
                                    onClick={() =>
                                        void toggleBacktest(
                                            !features.backtest_enabled,
                                        )
                                    }
                                    className={
                                        features.backtest_enabled
                                            ? "border-success-500/30 bg-success-500/10 text-success-500 hover:bg-success-500/15"
                                            : ""
                                    }
                                >
                                    {features.backtest_enabled
                                        ? t("common.enabled", "Enabled")
                                        : t("common.disabled", "Disabled")}
                                </Button>
                            </div>
                        </div>
                    </Card>
                    <Card className="rounded-2xl border border-border bg-card p-5">
                        <div className="flex items-center justify-between gap-4">
                            <div>
                                <div className="font-bold">
                                    {t("signal.title", "Signal Engine")}
                                </div>
                                <p className="mt-1 text-sm text-muted-foreground">
                                    {t(
                                        "signal.subtitle",
                                        "Live LONG / SHORT setup with Entry, SL, TP and confidence.",
                                    )}
                                </p>
                            </div>
                            <Button
                                type="button"
                                variant="outline"
                                size="sm"
                                aria-pressed={features.signal_engine_enabled}
                                onClick={() =>
                                    void toggleSignalEngine(
                                        !features.signal_engine_enabled,
                                    )
                                }
                                className={
                                    features.signal_engine_enabled
                                        ? "border-success-500/30 bg-success-500/10 text-success-500 hover:bg-success-500/15"
                                        : ""
                                }
                            >
                                {features.signal_engine_enabled
                                    ? t("common.enabled", "Enabled")
                                    : t("common.disabled", "Disabled")}
                            </Button>
                        </div>
                    </Card>
                    <Card className="rounded-2xl border border-border bg-card p-5">
                        <div>
                            <div className="flex items-center gap-2">
                                <FlaskConical className="size-4 text-success-400" />
                                <h2 className="font-bold">
                                    {t("Analysis Cards")}
                                </h2>
                            </div>
                            <p className="mt-1 text-sm text-muted-foreground">
                                {t(
                                    "Control which analysis cards are visible on the Market Analysis page. Hiding a card only removes its UI; dependent analysis can continue to run when another visible card needs the same data.",
                                )}
                            </p>
                        </div>
                        <div className="mt-4 grid gap-3 md:grid-cols-2">
                            {analysisCardDefinitions.map((card) => {
                                const enabled =
                                    analysisCards[card.key] !== false;

                                return (
                                    <div
                                        key={card.key}
                                        className="flex items-center justify-between gap-4 rounded-xl border border-border p-4"
                                    >
                                        <div className="min-w-0">
                                            <div className="font-bold">
                                                {card.title}
                                            </div>
                                            <p className="mt-1 text-xs text-muted-foreground">
                                                {card.description}
                                            </p>
                                        </div>
                                        <Button
                                            type="button"
                                            variant="outline"
                                            size="sm"
                                            aria-pressed={enabled}
                                            aria-label={`Toggle ${card.title}`}
                                            onClick={() =>
                                                void toggleAnalysisCard(
                                                    card.key,
                                                    !enabled,
                                                )
                                            }
                                            className={
                                                enabled
                                                    ? "border-success-500/30 bg-success-500/10 text-success-500 hover:bg-success-500/15"
                                                    : ""
                                            }
                                        >
                                            {enabled ? "Shown" : "Hidden"}
                                        </Button>
                                    </div>
                                );
                            })}
                        </div>
                    </Card>
                    <Card className="rounded-2xl border border-border bg-card p-5">
                        <div>
                            <div className="flex items-center gap-2">
                                <Settings2 className="size-4 text-success-400" />
                                <h2 className="font-bold">
                                    {t(
                                        "admin.customer_pages",
                                        "Customer Pages & Navigation",
                                    )}
                                </h2>
                            </div>
                            <p className="mt-1 text-sm text-muted-foreground">
                                {t(
                                    "admin.customer_pages_help",
                                    "Control which customer-facing pages are visible in the sidebar. Hidden pages are also blocked when opened directly.",
                                )}
                            </p>
                        </div>
                        <div className="mt-4 space-y-3">
                            {Object.entries(customerPages).map(
                                ([key, page]) => (
                                    <div
                                        key={key}
                                        className="flex flex-col gap-3 rounded-xl border border-border p-4 sm:flex-row sm:items-center sm:justify-between"
                                    >
                                        <div className="min-w-0">
                                            <div className="font-bold">
                                                {page.title}
                                            </div>
                                            <p className="mt-1 text-xs text-muted-foreground">
                                                {page.description}
                                            </p>
                                            <p className="mt-1 truncate text-[11px] text-muted-foreground/70">
                                                {page.href}
                                            </p>
                                        </div>
                                        <Button
                                            type="button"
                                            variant="outline"
                                            size="sm"
                                            disabled={page.required}
                                            aria-pressed={page.enabled}
                                            aria-label={`Toggle ${page.title}`}
                                            onClick={() =>
                                                void toggleCustomerPage(
                                                    key,
                                                    !page.enabled,
                                                )
                                            }
                                            className={
                                                page.required
                                                    ? "opacity-70"
                                                    : page.enabled
                                                      ? "border-success-500/30 bg-success-500/10 text-success-500 hover:bg-success-500/15"
                                                      : ""
                                            }
                                        >
                                            {page.required
                                                ? t(
                                                      "admin.always_shown",
                                                      "Always shown",
                                                  )
                                                : page.enabled
                                                  ? t("common.shown", "Shown")
                                                  : t(
                                                        "common.hidden",
                                                        "Hidden",
                                                    )}
                                        </Button>
                                    </div>
                                ),
                            )}
                        </div>
                    </Card>
                    <Card className="rounded-2xl border border-border bg-card p-5">
                        <div className="flex items-center gap-2">
                            <Languages className="size-4 text-success-400" />
                            <h2 className="font-bold">
                                {t("admin.languages", "Languages")}
                            </h2>
                        </div>
                        <div className="mt-4 space-y-3">
                            {languages.map((language) => (
                                <div
                                    key={language.id}
                                    className="flex flex-col gap-3 rounded-xl border border-border p-4 sm:flex-row sm:items-center sm:justify-between"
                                >
                                    <div>
                                        <div className="font-bold">
                                            {language.native_name ||
                                                language.name}{" "}
                                            <span className="ml-2 text-xs text-muted-foreground">
                                                {language.code}
                                            </span>
                                        </div>
                                        <div className="text-xs text-muted-foreground">
                                            {language.is_default
                                                ? "Default"
                                                : language.name}
                                        </div>
                                    </div>
                                    <div className="flex gap-2">
                                        <Button
                                            variant="outline"
                                            onClick={() =>
                                                openTranslationDialog(language)
                                            }
                                            className="rounded-lg border border-border px-3 py-2 text-xs"
                                        >
                                            {t("Edit translations")}
                                        </Button>
                                        <Button
                                            variant="outline"
                                            disabled={language.is_default}
                                            onClick={() => toggle(language)}
                                            className="rounded-lg border border-border px-3 py-2 text-xs disabled:opacity-40"
                                        >
                                            {language.is_enabled
                                                ? t("common.enabled", "Enabled")
                                                : t(
                                                      "common.disabled",
                                                      "Disabled",
                                                  )}
                                        </Button>
                                    </div>
                                </div>
                            ))}
                        </div>
                        <div className="mt-5 rounded-xl border border-dashed border-border p-4">
                            <h3 className="font-semibold">
                                {t("admin.add_language", "Add language")}
                            </h3>
                            <div className="mt-3 grid gap-3 sm:grid-cols-3">
                                <Input
                                    value={newLanguage.code}
                                    onChange={(e) =>
                                        setNewLanguage({
                                            ...newLanguage,
                                            code: e.target.value,
                                        })
                                    }
                                    placeholder={t(
                                        "admin.language_code",
                                        "Locale code",
                                    )}
                                    className="rounded-xl border border-border bg-background px-3 py-2.5"
                                />
                                <Input
                                    value={newLanguage.name}
                                    onChange={(e) =>
                                        setNewLanguage({
                                            ...newLanguage,
                                            name: e.target.value,
                                        })
                                    }
                                    placeholder={t(
                                        "admin.language_name",
                                        "Language name",
                                    )}
                                    className="rounded-xl border border-border bg-background px-3 py-2.5"
                                />
                                <Input
                                    value={newLanguage.native_name}
                                    onChange={(e) =>
                                        setNewLanguage({
                                            ...newLanguage,
                                            native_name: e.target.value,
                                        })
                                    }
                                    placeholder={t(
                                        "admin.native_name",
                                        "Native name",
                                    )}
                                    className="rounded-xl border border-border bg-background px-3 py-2.5"
                                />
                            </div>
                            <Textarea
                                value={newLanguage.translations}
                                onChange={(e) =>
                                    setNewLanguage({
                                        ...newLanguage,
                                        translations: e.target.value,
                                    })
                                }
                                className="mt-3 min-h-32 w-full rounded-xl border border-border bg-background p-3 font-mono text-xs"
                                placeholder={t('{"nav.dashboard":"Dashboard"}')}
                            />
                            <Button
                                variant="outline"
                                onClick={addLanguage}
                                className="mt-3 rounded-xl bg-success-400 px-4 py-2.5 text-sm font-bold text-[#04120d]"
                            >
                                {t("admin.add", "Add")}
                            </Button>
                        </div>
                    </Card>
                </div>
            </div>

            <Dialog
                open={translationDialogOpen}
                onOpenChange={(open) => {
                    setTranslationDialogOpen(open);
                    if (!open) setTranslationLanguage(null);
                }}
            >
                <DialogContent className="flex max-h-[90vh] w-[calc(100%-2rem)] max-w-3xl flex-col overflow-hidden">
                    <DialogHeader>
                        <DialogTitle>
                            {t("admin.edit_translations", "Edit translations")}
                        </DialogTitle>
                        <DialogDescription>
                            {translationLanguage
                                ? `${translationLanguage.native_name || translationLanguage.name} (${translationLanguage.code})`
                                : ""}
                        </DialogDescription>
                    </DialogHeader>

                    <div className="min-h-0 flex-1 overflow-y-auto pr-1">
                        <div className="space-y-2">
                            <div className="flex items-center justify-between gap-3">
                                <label
                                    htmlFor="translations-json"
                                    className="text-sm font-medium"
                                >
                                    {t(
                                        "admin.translations_json",
                                        "Translations JSON",
                                    )}
                                </label>
                                <span className="text-xs text-muted-foreground">
                                    {
                                        Object.keys(
                                            parsedTranslations.value ?? {},
                                        ).length
                                    }{" "}
                                    {t("entries")}
                                </span>
                            </div>
                            <Textarea
                                id="translations-json"
                                value={translationJson}
                                onChange={(event) =>
                                    setTranslationJson(event.target.value)
                                }
                                className="h-[55vh] min-h-70 max-h-[55vh] w-full resize-none overflow-y-auto rounded-xl border border-border bg-background p-4 font-mono text-xs leading-5"
                                spellCheck={false}
                                autoFocus
                            />
                            <p
                                className={
                                    parsedTranslations.error
                                        ? "text-sm text-destructive"
                                        : "text-sm text-muted-foreground"
                                }
                            >
                                {parsedTranslations.error ||
                                    'Use a JSON object with string values, for example {"admin.add":"Add"}.'}
                            </p>
                        </div>
                    </div>

                    <DialogFooter>
                        <Button
                            type="button"
                            variant="outline"
                            onClick={() => setTranslationDialogOpen(false)}
                            disabled={translationSaving}
                        >
                            {t("common.cancel", "Cancel")}
                        </Button>
                        <Button
                            type="button"
                            onClick={() => void saveTranslations()}
                            disabled={
                                translationSaving ||
                                !translationLanguage ||
                                !parsedTranslations.value
                            }
                            className="bg-success-500 text-success-950 hover:bg-success-400"
                        >
                            <Save className="size-4" />
                            {translationSaving
                                ? t("common.saving", "Saving...")
                                : t(
                                      "admin.save_translations",
                                      "Save translations",
                                  )}
                        </Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>
        </>
    );
}