import { Form, Head, router } from '@inertiajs/react';
import {
    Settings2,
    Save,
    CheckCircle2,
    Sliders,
    CreditCard,
    Link2,
    ImageIcon,
    Upload,
    X,
    RotateCcw,
    Search,
} from 'lucide-react';
import { useRef, useState } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import AppLayout from '@/layouts/app-layout';
import type { BreadcrumbItem } from '@/types';

type Props = {
    settings: {
        planner_max_tasks_per_day: number;
        app_name: string;
        contact_email: string;
        platform_fee_percent: number;
        bank_name: string;
        bank_account: string;
        bank_holder: string;
        affiliate_enabled: boolean;
        affiliate_default_commission: number;
        affiliate_alumni_commission: number;
        seo_title: string;
        seo_description: string;
        seo_keywords: string;
        seo_location: string;
        seo_og_image: string;
        hero_images: (string | null)[];
    };
};

const defaultHeroLabels = [
    'Belajar digital',
    'Mentor ahli',
    'Sertifikat resmi',
    'Komunitas aktif',
];
const defaultHeroSrcs = [
    'https://picsum.photos/seed/pakandi-h1/700/1000',
    'https://picsum.photos/seed/pakandi-h2/700/1000',
    'https://picsum.photos/seed/pakandi-h3/700/1000',
    'https://picsum.photos/seed/pakandi-h4/700/1000',
];

const breadcrumbs: BreadcrumbItem[] = [
    { title: 'Admin', href: '/admin' },
    { title: 'Pengaturan', href: '/admin/settings' },
];

function HeroImageCard({
    index,
    savedUrl,
    label,
    defaultSrc,
}: {
    index: number;
    savedUrl: string | null;
    label: string;
    defaultSrc: string;
}) {
    const [preview, setPreview] = useState<string | null>(null);
    const [uploading, setUploading] = useState(false);
    const [success, setSuccess] = useState(false);
    const fileRef = useRef<HTMLInputElement>(null);

    const currentSrc = preview ?? savedUrl ?? null;

    function handleFile(e: React.ChangeEvent<HTMLInputElement>) {
        const file = e.target.files?.[0];
        if (!file) return;
        setPreview(URL.createObjectURL(file));
        setSuccess(false);
    }

    function handleUpload() {
        const file = fileRef.current?.files?.[0];
        if (!file) return;
        const form = new FormData();
        form.append(`images[${index}]`, file);
        setUploading(true);
        router.post('/admin/settings/hero-images', form, {
            forceFormData: true,
            preserveScroll: true,
            onSuccess: () => {
                setSuccess(true);
                setPreview(null);
                if (fileRef.current) fileRef.current.value = '';
            },
            onFinish: () => setUploading(false),
        });
    }

    function handleReset() {
        router.delete(`/admin/settings/hero-images/${index + 1}`, {
            preserveScroll: true,
            onSuccess: () => {
                setPreview(null);
                setSuccess(false);
                if (fileRef.current) fileRef.current.value = '';
            },
        });
    }

    return (
        <div className="overflow-hidden rounded-xl border border-slate-100 bg-white shadow-sm dark:border-slate-800 dark:bg-card">
            <div className="relative h-36 w-full bg-slate-50">
                <img
                    src={currentSrc ?? defaultSrc}
                    alt={label}
                    className="h-full w-full object-cover"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />

                {savedUrl && !preview && (
                    <span className="absolute top-2 left-2 rounded-full bg-emerald-500 px-2 py-0.5 text-[10px] font-semibold text-white shadow">
                        Kustom
                    </span>
                )}
                {!savedUrl && !preview && (
                    <span className="absolute top-2 left-2 rounded-full bg-slate-500 px-2 py-0.5 text-[10px] font-semibold text-white shadow">
                        Default
                    </span>
                )}
                {preview && (
                    <span className="absolute top-2 left-2 rounded-full bg-amber-500 px-2 py-0.5 text-[10px] font-semibold text-white shadow">
                        Belum disimpan
                    </span>
                )}

                <p className="absolute bottom-2 left-2.5 text-[11px] font-semibold text-white/90 drop-shadow">
                    Foto {index + 1} — {label}
                </p>
            </div>

            <div className="flex items-center gap-1.5 p-2.5">
                <input
                    ref={fileRef}
                    type="file"
                    accept="image/jpeg,image/png,image/webp"
                    className="hidden"
                    onChange={handleFile}
                />
                <button
                    type="button"
                    onClick={() => fileRef.current?.click()}
                    className="flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-dashed border-slate-200 py-1.5 text-xs font-medium text-slate-400 transition hover:border-blue-400 hover:text-blue-600 dark:border-slate-700 dark:text-slate-500"
                >
                    <Upload className="h-3 w-3" />
                    {preview ? 'Ganti' : 'Pilih foto'}
                </button>

                {preview && (
                    <button
                        type="button"
                        onClick={handleUpload}
                        disabled={uploading}
                        className="flex items-center gap-1 rounded-lg bg-blue-600 px-2.5 py-1.5 text-xs font-semibold text-white transition hover:bg-blue-700 disabled:opacity-60"
                    >
                        <Save className="h-3 w-3" />
                        {uploading ? 'Menyimpan…' : 'Simpan'}
                    </button>
                )}

                {preview && (
                    <button
                        type="button"
                        onClick={() => {
                            setPreview(null);
                            if (fileRef.current) fileRef.current.value = '';
                        }}
                        className="rounded-lg border border-slate-200 p-1.5 text-slate-400 transition hover:text-red-500 dark:border-slate-700"
                    >
                        <X className="h-3 w-3" />
                    </button>
                )}

                {savedUrl && !preview && (
                    <button
                        type="button"
                        onClick={handleReset}
                        title="Reset ke default"
                        className="rounded-lg border border-slate-200 p-1.5 text-slate-400 transition hover:text-red-500 dark:border-slate-700"
                    >
                        <RotateCcw className="h-3 w-3" />
                    </button>
                )}

                {success && !preview && (
                    <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-500" />
                )}
            </div>
        </div>
    );
}

export default function AdminSettingsIndex({ settings }: Props) {
    return (
        <>
            <Head title="Pengaturan Platform" />

            <div className="flex flex-col gap-6 p-4 md:p-6">
                {/* Header — same pattern as other admin pages */}
                <div className="relative overflow-hidden rounded-2xl border border-blue-100 bg-gradient-to-br from-blue-50 via-white to-indigo-50 p-5 shadow-sm dark:border-blue-800/30 dark:from-blue-950/40 dark:via-card dark:to-indigo-950/30">
                    <div className="relative z-10 flex items-center gap-3">
                        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-100 dark:bg-blue-800/60">
                            <Settings2 className="h-5 w-5 text-blue-600 dark:text-blue-300" />
                        </div>
                        <div>
                            <h1 className="text-xl font-bold text-blue-900 dark:text-blue-100">
                                Pengaturan Platform
                            </h1>
                            <p className="text-sm text-blue-600 dark:text-blue-400">
                                Konfigurasi sistem untuk seluruh pengguna
                            </p>
                        </div>
                    </div>
                    <div className="absolute -top-4 -right-4 h-20 w-20 rounded-full bg-blue-100/40 dark:bg-blue-700/10" />
                    <div className="absolute right-10 -bottom-6 h-28 w-28 rounded-full bg-indigo-100/30 dark:bg-indigo-700/10" />
                </div>

                {/* Two-column layout */}
                <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
                    {/* Left: Settings form (2/3) */}
                    <Form
                        action="/admin/settings"
                        method="patch"
                        options={{ preserveScroll: true }}
                        className="lg:col-span-2"
                    >
                        {({ processing, errors, wasSuccessful }) => (
                            <div className="flex flex-col gap-5">
                                {/* General section */}
                                <div className="overflow-hidden rounded-2xl border border-blue-100 bg-white shadow-sm dark:border-blue-900/20 dark:bg-card">
                                    <div className="flex items-center gap-3 border-b border-blue-50 bg-gradient-to-r from-blue-50 to-indigo-50 px-5 py-4 dark:border-blue-900/20 dark:from-blue-950/40 dark:to-indigo-950/40">
                                        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-100 dark:bg-blue-900/40">
                                            <Sliders className="h-4 w-4 text-blue-600 dark:text-blue-400" />
                                        </div>
                                        <h2 className="font-semibold text-blue-900 dark:text-blue-100">
                                            Konfigurasi Umum
                                        </h2>
                                    </div>
                                    <div className="flex flex-col gap-5 p-5">
                                        <div className="grid gap-2">
                                            <Label
                                                htmlFor="app_name"
                                                className="font-semibold"
                                            >
                                                Nama Aplikasi
                                            </Label>
                                            <Input
                                                id="app_name"
                                                name="app_name"
                                                defaultValue={settings.app_name}
                                                placeholder="Nama platform Anda"
                                                className="rounded-xl"
                                            />
                                            {errors.app_name && (
                                                <p className="text-xs text-destructive">
                                                    {errors.app_name}
                                                </p>
                                            )}
                                            <p className="text-xs text-muted-foreground">
                                                Nama ini akan tampil di judul
                                                halaman dan email notifikasi.
                                            </p>
                                        </div>
                                        <div className="grid gap-2">
                                            <Label
                                                htmlFor="contact_email"
                                                className="font-semibold"
                                            >
                                                Email Kontak
                                            </Label>
                                            <Input
                                                id="contact_email"
                                                name="contact_email"
                                                type="email"
                                                defaultValue={
                                                    settings.contact_email
                                                }
                                                placeholder="admin@example.com"
                                                className="rounded-xl"
                                            />
                                            {errors.contact_email && (
                                                <p className="text-xs text-destructive">
                                                    {errors.contact_email}
                                                </p>
                                            )}
                                            <p className="text-xs text-muted-foreground">
                                                Email yang digunakan untuk
                                                pemberitahuan dan kontak
                                                pengguna.
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                {/* Bank section */}
                                <div className="overflow-hidden rounded-2xl border border-emerald-100 bg-white shadow-sm dark:border-emerald-900/20 dark:bg-card">
                                    <div className="flex items-center gap-3 border-b border-emerald-50 bg-gradient-to-r from-emerald-50 to-teal-50 px-5 py-4 dark:border-emerald-900/20 dark:from-emerald-950/40 dark:to-teal-950/40">
                                        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-100 dark:bg-emerald-900/40">
                                            <CreditCard className="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
                                        </div>
                                        <h2 className="font-semibold text-emerald-900 dark:text-emerald-100">
                                            Informasi Rekening Pembayaran
                                        </h2>
                                    </div>
                                    <div className="flex flex-col gap-5 p-5">
                                        <div className="grid gap-2">
                                            <Label
                                                htmlFor="bank_name"
                                                className="font-semibold"
                                            >
                                                Nama Bank
                                            </Label>
                                            <Input
                                                id="bank_name"
                                                name="bank_name"
                                                defaultValue={
                                                    settings.bank_name
                                                }
                                                placeholder="Contoh: Bank Mandiri, BCA, BRI"
                                                className="rounded-xl"
                                            />
                                            {errors.bank_name && (
                                                <p className="text-xs text-destructive">
                                                    {errors.bank_name}
                                                </p>
                                            )}
                                            <p className="text-xs text-muted-foreground">
                                                Nama bank tujuan transfer untuk
                                                pembayaran kelas berbayar.
                                            </p>
                                        </div>
                                        <div className="grid gap-2">
                                            <Label
                                                htmlFor="bank_account"
                                                className="font-semibold"
                                            >
                                                Nomor Rekening
                                            </Label>
                                            <Input
                                                id="bank_account"
                                                name="bank_account"
                                                defaultValue={
                                                    settings.bank_account
                                                }
                                                placeholder="Contoh: 1234567890"
                                                className="rounded-xl"
                                            />
                                            {errors.bank_account && (
                                                <p className="text-xs text-destructive">
                                                    {errors.bank_account}
                                                </p>
                                            )}
                                            <p className="text-xs text-muted-foreground">
                                                Nomor rekening tujuan transfer
                                                pembayaran.
                                            </p>
                                        </div>
                                        <div className="grid gap-2">
                                            <Label
                                                htmlFor="bank_holder"
                                                className="font-semibold"
                                            >
                                                Nama Pemilik Rekening
                                            </Label>
                                            <Input
                                                id="bank_holder"
                                                name="bank_holder"
                                                defaultValue={
                                                    settings.bank_holder
                                                }
                                                placeholder="Contoh: PT. Natagara Digital Indonesia"
                                                className="rounded-xl"
                                            />
                                            {errors.bank_holder && (
                                                <p className="text-xs text-destructive">
                                                    {errors.bank_holder}
                                                </p>
                                            )}
                                            <p className="text-xs text-muted-foreground">
                                                Nama lengkap pemilik rekening
                                                penerima transfer.
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                {/* Affiliate section */}
                                <div className="overflow-hidden rounded-2xl border border-amber-100 bg-white shadow-sm dark:border-amber-900/20 dark:bg-card">
                                    <div className="flex items-center gap-3 border-b border-amber-50 bg-gradient-to-r from-amber-50 to-orange-50 px-5 py-4 dark:border-amber-900/20 dark:from-amber-950/40 dark:to-orange-950/40">
                                        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-amber-100 dark:bg-amber-900/40">
                                            <Link2 className="h-4 w-4 text-amber-600 dark:text-amber-400" />
                                        </div>
                                        <h2 className="font-semibold text-amber-900 dark:text-amber-100">
                                            Program Affiliate
                                        </h2>
                                    </div>
                                    <div className="flex flex-col gap-5 p-5">
                                        <div className="flex items-center justify-between gap-4 rounded-xl border border-input p-4">
                                            <div>
                                                <p className="font-semibold">
                                                    Aktifkan Program Affiliate
                                                </p>
                                                <p className="mt-0.5 text-xs text-muted-foreground">
                                                    Izinkan pengguna mendaftar
                                                    sebagai affiliate dan
                                                    mendapatkan komisi dari
                                                    referral.
                                                </p>
                                            </div>
                                            <input
                                                type="checkbox"
                                                name="affiliate_enabled"
                                                value="1"
                                                defaultChecked={
                                                    settings.affiliate_enabled
                                                }
                                                className="h-5 w-5 cursor-pointer rounded accent-amber-500"
                                            />
                                        </div>
                                        <div className="grid grid-cols-2 gap-4">
                                            <div className="grid gap-2">
                                                <Label
                                                    htmlFor="affiliate_default_commission"
                                                    className="font-semibold"
                                                >
                                                    Komisi Non-alumni Default
                                                    (%)
                                                </Label>
                                                <div className="relative">
                                                    <Input
                                                        id="affiliate_default_commission"
                                                        name="affiliate_default_commission"
                                                        type="number"
                                                        min="0"
                                                        max="100"
                                                        step="0.5"
                                                        defaultValue={
                                                            settings.affiliate_default_commission
                                                        }
                                                        className="rounded-xl pr-10"
                                                    />
                                                    <span className="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-sm font-semibold text-muted-foreground">
                                                        %
                                                    </span>
                                                </div>
                                                <p className="text-xs text-muted-foreground">
                                                    Untuk affiliator umum yang
                                                    disetujui admin.
                                                </p>
                                            </div>
                                            <div className="grid gap-2">
                                                <Label
                                                    htmlFor="affiliate_alumni_commission"
                                                    className="font-semibold"
                                                >
                                                    Komisi Alumni Default (%)
                                                </Label>
                                                <div className="relative">
                                                    <Input
                                                        id="affiliate_alumni_commission"
                                                        name="affiliate_alumni_commission"
                                                        type="number"
                                                        min="0"
                                                        max="100"
                                                        step="0.5"
                                                        defaultValue={
                                                            settings.affiliate_alumni_commission
                                                        }
                                                        className="rounded-xl pr-10"
                                                    />
                                                    <span className="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-sm font-semibold text-muted-foreground">
                                                        %
                                                    </span>
                                                </div>
                                                <p className="text-xs text-muted-foreground">
                                                    Untuk alumni yang
                                                    auto-approved saat membuka
                                                    /affiliate.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {/* SEO section */}
                                <div className="overflow-hidden rounded-2xl border border-sky-100 bg-white shadow-sm dark:border-sky-900/20 dark:bg-card">
                                    <div className="flex items-center gap-3 border-b border-sky-50 bg-gradient-to-r from-sky-50 to-cyan-50 px-5 py-4 dark:border-sky-900/20 dark:from-sky-950/40 dark:to-cyan-950/40">
                                        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-sky-100 dark:bg-sky-900/40">
                                            <Search className="h-4 w-4 text-sky-600 dark:text-sky-400" />
                                        </div>
                                        <h2 className="font-semibold text-sky-900 dark:text-sky-100">
                                            SEO Landing Page
                                        </h2>
                                    </div>
                                    <div className="flex flex-col gap-5 p-5">
                                        <div className="grid gap-2">
                                            <Label
                                                htmlFor="seo_title"
                                                className="font-semibold"
                                            >
                                                Meta Title
                                            </Label>
                                            <Input
                                                id="seo_title"
                                                name="seo_title"
                                                defaultValue={
                                                    settings.seo_title
                                                }
                                                maxLength={60}
                                                placeholder="Platform Pelatihan Online Terpercaya - Natagara LMS"
                                                className="rounded-xl"
                                            />
                                            {errors.seo_title && (
                                                <p className="text-xs text-destructive">
                                                    {errors.seo_title}
                                                </p>
                                            )}
                                            <p className="text-xs text-muted-foreground">
                                                Maksimal 60 karakter agar tidak
                                                terpotong di Google.
                                            </p>
                                        </div>
                                        <div className="grid gap-2">
                                            <Label
                                                htmlFor="seo_description"
                                                className="font-semibold"
                                            >
                                                Meta Description
                                            </Label>
                                            <textarea
                                                id="seo_description"
                                                name="seo_description"
                                                defaultValue={
                                                    settings.seo_description
                                                }
                                                maxLength={160}
                                                rows={3}
                                                placeholder="Deskripsi singkat platform yang tampil di hasil pencarian Google."
                                                className="w-full rounded-xl border border-input bg-background px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
                                            />
                                            {errors.seo_description && (
                                                <p className="text-xs text-destructive">
                                                    {errors.seo_description}
                                                </p>
                                            )}
                                            <p className="text-xs text-muted-foreground">
                                                Maksimal 160 karakter.
                                            </p>
                                        </div>
                                        <div className="grid gap-2">
                                            <Label
                                                htmlFor="seo_keywords"
                                                className="font-semibold"
                                            >
                                                Meta Keywords
                                            </Label>
                                            <Input
                                                id="seo_keywords"
                                                name="seo_keywords"
                                                defaultValue={
                                                    settings.seo_keywords
                                                }
                                                placeholder="marketplace, jual online, produk digital"
                                                className="rounded-xl"
                                            />
                                            {errors.seo_keywords && (
                                                <p className="text-xs text-destructive">
                                                    {errors.seo_keywords}
                                                </p>
                                            )}
                                            <p className="text-xs text-muted-foreground">
                                                Pisahkan dengan koma, contoh:
                                                marketplace, jual online, produk
                                                digital.
                                            </p>
                                        </div>
                                        <div className="grid gap-2">
                                            <Label
                                                htmlFor="seo_location"
                                                className="font-semibold"
                                            >
                                                Lokasi
                                            </Label>
                                            <Input
                                                id="seo_location"
                                                name="seo_location"
                                                defaultValue={
                                                    settings.seo_location
                                                }
                                                placeholder="Contoh: Jakarta, Indonesia"
                                                className="rounded-xl"
                                            />
                                            {errors.seo_location && (
                                                <p className="text-xs text-destructive">
                                                    {errors.seo_location}
                                                </p>
                                            )}
                                            <p className="text-xs text-muted-foreground">
                                                Contoh: Jakarta, Indonesia —
                                                untuk SEO lokal.
                                            </p>
                                        </div>
                                        <div className="grid gap-2">
                                            <Label
                                                htmlFor="seo_og_image"
                                                className="font-semibold"
                                            >
                                                Gambar Share (Open Graph)
                                            </Label>
                                            {settings.seo_og_image && (
                                                <img
                                                    src={settings.seo_og_image}
                                                    alt="Preview gambar share"
                                                    className="h-32 w-auto rounded-xl border border-input object-cover"
                                                />
                                            )}
                                            <input
                                                id="seo_og_image"
                                                name="seo_og_image"
                                                type="file"
                                                accept="image/jpeg,image/png,image/webp"
                                                className="text-sm text-muted-foreground file:mr-3 file:rounded-lg file:border-0 file:bg-sky-100 file:px-3 file:py-1.5 file:text-sm file:font-medium file:text-sky-700 hover:file:bg-sky-200 dark:file:bg-sky-900/40 dark:file:text-sky-300"
                                            />
                                            {errors.seo_og_image && (
                                                <p className="text-xs text-destructive">
                                                    {errors.seo_og_image}
                                                </p>
                                            )}
                                            <p className="text-xs text-muted-foreground">
                                                Gambar yang tampil saat link
                                                dibagikan di WhatsApp/Facebook,
                                                rasio 1200x630.
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <input
                                    type="hidden"
                                    name="planner_max_tasks_per_day"
                                    defaultValue={
                                        settings.planner_max_tasks_per_day
                                    }
                                />
                                <input
                                    type="hidden"
                                    name="platform_fee_percent"
                                    defaultValue={settings.platform_fee_percent}
                                />

                                <div className="flex items-center gap-4">
                                    <Button
                                        type="submit"
                                        disabled={processing}
                                        className="gap-2 rounded-xl bg-blue-600 px-6 shadow-sm hover:bg-blue-700"
                                    >
                                        <Save className="h-4 w-4" />
                                        Simpan Pengaturan
                                    </Button>
                                    {wasSuccessful && (
                                        <div className="flex items-center gap-1.5 rounded-xl bg-emerald-50 px-3 py-2 text-sm font-medium text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400">
                                            <CheckCircle2 className="h-4 w-4" />
                                            Tersimpan
                                        </div>
                                    )}
                                </div>
                            </div>
                        )}
                    </Form>

                    {/* Right: Hero images (1/3) */}
                    <div className="lg:col-span-1">
                        <div className="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-card">
                            <div className="flex items-center gap-3 border-b border-slate-100 bg-gradient-to-r from-slate-50 to-slate-100/60 px-5 py-4 dark:border-slate-700 dark:from-slate-800/60 dark:to-slate-800/30">
                                <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-100 dark:bg-slate-700">
                                    <ImageIcon className="h-4 w-4 text-slate-600 dark:text-slate-300" />
                                </div>
                                <div>
                                    <h2 className="font-semibold text-slate-800 dark:text-slate-100">
                                        Foto Hero Landing Page
                                    </h2>
                                    <p className="mt-0.5 text-xs text-slate-500 dark:text-slate-400">
                                        Maks 3 MB · JPG / PNG / WebP
                                    </p>
                                </div>
                            </div>

                            <div className="flex flex-col gap-3 p-4">
                                {defaultHeroLabels.map((label, i) => (
                                    <HeroImageCard
                                        key={i}
                                        index={i}
                                        savedUrl={
                                            settings.hero_images[i] ?? null
                                        }
                                        label={label}
                                        defaultSrc={defaultHeroSrcs[i]}
                                    />
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}

AdminSettingsIndex.layout = (page: React.ReactNode) => (
    <AppLayout breadcrumbs={breadcrumbs}>{page}</AppLayout>
);