import { Head, Link, useForm } from '@inertiajs/react';
import {
    ArrowDownCircle,
    CalendarClock,
    Construction,
    ExternalLink,
    Plus,
    ShieldCheck,
    Trash2,
    TrendingUp,
    Users,
    Wallet,
} from 'lucide-react';
import type { FormEvent, ReactNode } from 'react';
import { useState } from 'react';
import { ConfirmActionModal } from '@/components/confirm-action-modal';
import Heading from '@/components/heading';
import InputError from '@/components/input-error';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { cn } from '@/lib/utils';

type InvestmentSettingModel = {
    min_amount: string;
    max_amount: string;
    monthly_return: string;
    payment_method: string;
    payment_address: string;
    require_kyc_to_invest: boolean;
    require_kyc_to_withdraw: boolean;
    referral_direct_percent: string;
    referral_indirect_percent: string;
    referral_direct_earning_limit: string | null;
    referral_indirect_earning_limit: string | null;
    withdrawal_fee_percent: string;
    withdrawal_fee_fixed: string;
    min_withdrawal_amount: string;
    accrual_frequency: 'monthly';
    accrual_day_of_month: number;
    maintenance_mode_enabled: boolean;
};

type InvestmentDuration = {
    id: number;
    months: number;
    label: string;
    is_active: boolean;
};

type Props = {
    settings: InvestmentSettingModel;
    durations: InvestmentDuration[];
};

const NAV_SECTIONS = [
    { id: 'producto', label: 'Producto', icon: TrendingUp },
    { id: 'pagos', label: 'Pagos', icon: Wallet },
    { id: 'acreditacion', label: 'Acreditación', icon: CalendarClock },
    { id: 'referidos', label: 'Referidos', icon: Users },
    { id: 'retiros', label: 'Retiros', icon: ArrowDownCircle },
    { id: 'kyc', label: 'KYC', icon: ShieldCheck },
    { id: 'plazos', label: 'Plazos', icon: CalendarClock },
] as const;

const PLATFORM_SECTION = {
    id: 'plataforma',
    label: 'Plataforma',
    icon: Construction,
} as const;

type SectionId = (typeof NAV_SECTIONS)[number]['id'] | typeof PLATFORM_SECTION.id;

function SettingsSection({
    title,
    description,
    icon: Icon,
    children,
}: {
    title: string;
    description: string;
    icon: typeof TrendingUp;
    children: ReactNode;
}) {
    return (
        <Card className="border-border/80 shadow-sm">
            <CardHeader className="border-b border-border/60 bg-muted/20 pb-4">
                <div className="flex gap-3">
                    <div className="bg-primary/10 text-primary flex size-10 shrink-0 items-center justify-center rounded-lg">
                        <Icon className="size-5" aria-hidden />
                    </div>
                    <div className="min-w-0 space-y-1">
                        <CardTitle className="text-base">{title}</CardTitle>
                        <CardDescription className="text-sm leading-relaxed">
                            {description}
                        </CardDescription>
                    </div>
                </div>
            </CardHeader>
            <CardContent className="space-y-6 pt-6">{children}</CardContent>
        </Card>
    );
}

function Field({
    label,
    htmlFor,
    hint,
    children,
    error,
}: {
    label: string;
    htmlFor: string;
    hint?: string;
    children: ReactNode;
    error?: string;
}) {
    return (
        <div className="grid gap-2">
            <Label htmlFor={htmlFor}>{label}</Label>
            {children}
            {hint ? <p className="text-muted-foreground text-xs leading-relaxed">{hint}</p> : null}
            <InputError message={error} />
        </div>
    );
}

function ToggleRow({
    id,
    checked,
    onCheckedChange,
    title,
    description,
}: {
    id: string;
    checked: boolean;
    onCheckedChange: (value: boolean) => void;
    title: string;
    description: string;
}) {
    return (
        <div className="flex items-start gap-3 rounded-lg border border-border/80 bg-background/50 p-4">
            <Checkbox
                checked={checked}
                id={id}
                onCheckedChange={(v) => onCheckedChange(v === true)}
                className="mt-0.5"
            />
            <div className="grid min-w-0 flex-1 gap-1">
                <Label className="cursor-pointer font-medium leading-snug" htmlFor={id}>
                    {title}
                </Label>
                <p className="text-muted-foreground text-sm leading-relaxed">{description}</p>
            </div>
        </div>
    );
}

export default function InvestmentSettings({ settings, durations }: Props) {
    const activeDurations = durations
        .filter((duration) => duration.is_active)
        .map((duration) => duration.months);

    const form = useForm({
        min_amount: settings.min_amount,
        max_amount: settings.max_amount,
        monthly_return: settings.monthly_return,
        payment_method: settings.payment_method,
        payment_address: settings.payment_address,
        require_kyc_to_invest: settings.require_kyc_to_invest ?? true,
        require_kyc_to_withdraw: settings.require_kyc_to_withdraw ?? true,
        referral_direct_percent: settings.referral_direct_percent ?? '7.0000',
        referral_indirect_percent: settings.referral_indirect_percent ?? '5.0000',
        referral_direct_earning_limit: settings.referral_direct_earning_limit ?? '',
        referral_indirect_earning_limit: settings.referral_indirect_earning_limit ?? '',
        withdrawal_fee_percent: settings.withdrawal_fee_percent ?? '0.0000',
        withdrawal_fee_fixed: settings.withdrawal_fee_fixed ?? '0.00',
        min_withdrawal_amount: settings.min_withdrawal_amount ?? '50.00',
        accrual_frequency: 'monthly',
        accrual_day_of_month:
            typeof settings.accrual_day_of_month === 'number' ? settings.accrual_day_of_month : 30,
        maintenance_mode_enabled: settings.maintenance_mode_enabled ?? false,
        durations: activeDurations.length > 0 ? activeDurations : [4],
    });

    const [saveConfirmOpen, setSaveConfirmOpen] = useState(false);
    const [activeSection, setActiveSection] = useState<SectionId>(NAV_SECTIONS[0].id);

    function submit(event: FormEvent<HTMLFormElement>) {
        event.preventDefault();
        setSaveConfirmOpen(true);
    }

    function executeSave() {
        form.transform((data) => ({
            ...data,
            referral_direct_earning_limit:
                String(data.referral_direct_earning_limit).trim() === ''
                    ? null
                    : data.referral_direct_earning_limit,
            referral_indirect_earning_limit:
                String(data.referral_indirect_earning_limit).trim() === ''
                    ? null
                    : data.referral_indirect_earning_limit,
        }));
        form.put('/admin/inversion', {
            preserveScroll: true,
            onFinish: () => setSaveConfirmOpen(false),
        });
    }

    function updateDuration(index: number, value: string) {
        form.setData(
            'durations',
            form.data.durations.map((duration, durationIndex) =>
                durationIndex === index ? Number(value) : duration,
            ),
        );
    }

    function addDuration() {
        form.setData('durations', [...form.data.durations, 1]);
    }

    function removeDuration(index: number) {
        form.setData(
            'durations',
            form.data.durations.filter((_, durationIndex) => durationIndex !== index),
        );
    }

    const activeMeta =
        NAV_SECTIONS.find((section) => section.id === activeSection)
        ?? (activeSection === PLATFORM_SECTION.id ? PLATFORM_SECTION : NAV_SECTIONS[0]);

    return (
        <>
            <ConfirmActionModal
                cancelLabel="Seguir editando"
                confirmLabel="Sí, guardar configuración"
                description="Los nuevos parámetros aplican a solicitudes e inversores de acuerdo con la política actual."
                open={saveConfirmOpen}
                processing={form.processing}
                title="¿Guardar la configuración de inversión?"
                onConfirm={executeSave}
                onOpenChange={setSaveConfirmOpen}
            />

            <Head title="Parámetros de inversión" />

            <div className="mx-auto max-w-6xl space-y-8">
                <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                    <Heading
                        title="Parámetros de la plataforma"
                        description="Ajustes globales del producto de inversión, pagos, acreditaciones, referidos y retiros."
                    />
                    <Button asChild className="shrink-0" size="sm" variant="outline">
                        <Link href="/admin/inversiones">
                            Ver inversiones
                            <ExternalLink className="size-4" aria-hidden />
                        </Link>
                    </Button>
                </div>

                <div className="flex flex-col gap-8 lg:flex-row lg:items-start lg:gap-10">
                    <aside className="lg:sticky lg:top-20 lg:w-52 lg:shrink-0">
                        <p className="text-muted-foreground mb-3 hidden text-xs font-medium tracking-wide uppercase lg:block">
                            Secciones
                        </p>
                        <nav
                            aria-label="Secciones de configuración"
                            role="tablist"
                            className="flex gap-2 overflow-x-auto pb-1 lg:flex-col lg:gap-0.5 lg:overflow-visible lg:pb-0"
                        >
                            {NAV_SECTIONS.map(({ id, label, icon: Icon }) => (
                                <button
                                    key={id}
                                    type="button"
                                    id={`tab-${id}`}
                                    role="tab"
                                    aria-selected={activeSection === id}
                                    aria-controls="settings-panel"
                                    onClick={() => setActiveSection(id)}
                                    className={cn(
                                        'inline-flex shrink-0 items-center gap-2 rounded-lg px-3 py-2 text-left text-sm transition-colors lg:w-full',
                                        activeSection === id
                                            ? 'bg-muted text-foreground font-medium'
                                            : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground',
                                    )}
                                >
                                    <Icon className="size-4 shrink-0 opacity-70" aria-hidden />
                                    {label}
                                </button>
                            ))}
                            <div
                                aria-hidden
                                className="mx-1 h-6 w-px shrink-0 self-center bg-border/80 lg:my-2 lg:h-px lg:w-full"
                                role="separator"
                            />
                            <button
                                type="button"
                                id={`tab-${PLATFORM_SECTION.id}`}
                                role="tab"
                                aria-selected={activeSection === PLATFORM_SECTION.id}
                                aria-controls="settings-panel"
                                onClick={() => setActiveSection(PLATFORM_SECTION.id)}
                                className={cn(
                                    'inline-flex shrink-0 items-center gap-2 rounded-lg px-3 py-2 text-left text-sm transition-colors lg:w-full',
                                    activeSection === PLATFORM_SECTION.id
                                        ? 'bg-muted text-foreground font-medium'
                                        : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground',
                                )}
                            >
                                <Construction className="size-4 shrink-0 opacity-70" aria-hidden />
                                {PLATFORM_SECTION.label}
                            </button>
                        </nav>
                    </aside>

                    <div className="min-w-0 flex-1">
                        <form className="space-y-6" onSubmit={submit}>
                            <div
                                id="settings-panel"
                                role="tabpanel"
                                aria-labelledby={`tab-${activeSection}`}
                                key={activeSection}
                            >
                            {activeSection === 'plataforma' && (
                            <SettingsSection
                                title="Plataforma"
                                description="Control de disponibilidad general del sitio para inversionistas."
                                icon={Construction}
                            >
                                <div className="flex items-start gap-3 rounded-lg border border-amber-500/30 bg-amber-500/10 p-4">
                                    <Checkbox
                                        checked={form.data.maintenance_mode_enabled}
                                        id="maintenance_mode_enabled"
                                        onCheckedChange={(checked) =>
                                            form.setData(
                                                'maintenance_mode_enabled',
                                                checked === true,
                                            )
                                        }
                                    />
                                    <div className="space-y-1">
                                        <Label htmlFor="maintenance_mode_enabled">
                                            Modo mantenimiento
                                        </Label>
                                        <p className="text-muted-foreground text-sm leading-relaxed">
                                            Mientras esté activo, los visitantes verán una página de
                                            mantenimiento y solo los administradores podrán iniciar
                                            sesión. Las sesiones de inversionistas se cerrarán
                                            automáticamente.
                                        </p>
                                        <InputError message={form.errors.maintenance_mode_enabled} />
                                    </div>
                                </div>
                            </SettingsSection>
                            )}

                            {activeSection === 'producto' && (
                            <SettingsSection
                                title="Producto"
                                description="Montos permitidos y rendimiento mensual que verán los inversionistas al contratar."
                                icon={TrendingUp}
                            >
                                <div className="grid gap-6 sm:grid-cols-3">
                                    <Field
                                        label="Monto mínimo (US$)"
                                        htmlFor="min_amount"
                                        error={form.errors.min_amount}
                                    >
                                        <Input
                                            id="min_amount"
                                            min="1"
                                            name="min_amount"
                                            onChange={(e) =>
                                                form.setData('min_amount', e.target.value)
                                            }
                                            required
                                            step="0.01"
                                            type="number"
                                            value={form.data.min_amount}
                                        />
                                    </Field>
                                    <Field
                                        label="Monto máximo (US$)"
                                        htmlFor="max_amount"
                                        error={form.errors.max_amount}
                                    >
                                        <Input
                                            id="max_amount"
                                            min="1"
                                            name="max_amount"
                                            onChange={(e) =>
                                                form.setData('max_amount', e.target.value)
                                            }
                                            required
                                            step="0.01"
                                            type="number"
                                            value={form.data.max_amount}
                                        />
                                    </Field>
                                    <Field
                                        label="Rendimiento mensual (%)"
                                        htmlFor="monthly_return"
                                        hint="Tasa vigente para nuevas acreditaciones automáticas."
                                        error={form.errors.monthly_return}
                                    >
                                        <Input
                                            id="monthly_return"
                                            min="0"
                                            name="monthly_return"
                                            onChange={(e) =>
                                                form.setData('monthly_return', e.target.value)
                                            }
                                            required
                                            step="0.01"
                                            type="number"
                                            value={form.data.monthly_return}
                                        />
                                    </Field>
                                </div>
                            </SettingsSection>
                            )}

                            {activeSection === 'pagos' && (
                            <SettingsSection
                                title="Pagos y depósitos"
                                description="Datos que se muestran al inversionista para enviar el capital."
                                icon={Wallet}
                            >
                                <div className="grid gap-6 sm:grid-cols-2">
                                    <Field
                                        label="Red / modalidad"
                                        htmlFor="payment_method"
                                        error={form.errors.payment_method}
                                    >
                                        <Input
                                            id="payment_method"
                                            name="payment_method"
                                            onChange={(e) =>
                                                form.setData('payment_method', e.target.value)
                                            }
                                            placeholder="TRC20"
                                            required
                                            value={form.data.payment_method}
                                        />
                                    </Field>
                                    <Field
                                        label="Dirección de depósito"
                                        htmlFor="payment_address"
                                        error={form.errors.payment_address}
                                    >
                                        <Input
                                            id="payment_address"
                                            name="payment_address"
                                            onChange={(e) =>
                                                form.setData('payment_address', e.target.value)
                                            }
                                            placeholder="Wallet o referencia"
                                            required
                                            value={form.data.payment_address}
                                        />
                                    </Field>
                                </div>
                            </SettingsSection>
                            )}

                            {activeSection === 'acreditacion' && (
                            <SettingsSection
                                title="Acreditación de rendimientos"
                                description="Acreditación mensual de rendimientos (confirmada por correo de administradores)."
                                icon={CalendarClock}
                            >
                                <div className="grid gap-6 sm:grid-cols-2">
                                    <Field
                                        label="Día del mes (1–31)"
                                        htmlFor="accrual_day_of_month"
                                        hint="En meses cortos se usa el último día disponible (p. ej. 31 → 28/02)."
                                        error={form.errors.accrual_day_of_month}
                                    >
                                        <Input
                                            id="accrual_day_of_month"
                                            max={31}
                                            min={1}
                                            name="accrual_day_of_month"
                                            onChange={(e) =>
                                                form.setData(
                                                    'accrual_day_of_month',
                                                    Number.parseInt(e.target.value, 10) ||
                                                        1,
                                                )
                                            }
                                            required
                                            type="number"
                                            value={form.data.accrual_day_of_month}
                                        />
                                    </Field>
                                    <div className="rounded-lg border border-border/80 bg-muted/20 p-4 text-sm text-muted-foreground">
                                        La modalidad diaria fue deshabilitada. El sistema solo genera acreditaciones mensuales en el día configurado.
                                    </div>
                                </div>
                            </SettingsSection>
                            )}

                            {activeSection === 'referidos' && (
                            <SettingsSection
                                title="Programa de referidos"
                                description="Porcentaje y tope de ganancias por referido directo o indirecto. La participación se activa por usuario en el directorio."
                                icon={Users}
                            >
                                <div className="grid gap-6 sm:grid-cols-2">
                                    <Field
                                        label="Referido directo (%)"
                                        htmlFor="referral_direct_percent"
                                        error={form.errors.referral_direct_percent}
                                    >
                                        <Input
                                            id="referral_direct_percent"
                                            max="100"
                                            min="0"
                                            name="referral_direct_percent"
                                            onChange={(e) =>
                                                form.setData(
                                                    'referral_direct_percent',
                                                    e.target.value,
                                                )
                                            }
                                            required
                                            step="0.0001"
                                            type="number"
                                            value={form.data.referral_direct_percent}
                                        />
                                    </Field>
                                    <Field
                                        label="Referido indirecto (%)"
                                        htmlFor="referral_indirect_percent"
                                        error={form.errors.referral_indirect_percent}
                                    >
                                        <Input
                                            id="referral_indirect_percent"
                                            max="100"
                                            min="0"
                                            name="referral_indirect_percent"
                                            onChange={(e) =>
                                                form.setData(
                                                    'referral_indirect_percent',
                                                    e.target.value,
                                                )
                                            }
                                            required
                                            step="0.0001"
                                            type="number"
                                            value={form.data.referral_indirect_percent}
                                        />
                                    </Field>
                                </div>
                                <div className="grid gap-6 sm:grid-cols-2">
                                    <Field
                                        hint="Vacío = sin tope. Al alcanzar el monto, el usuario deja de recibir bonos por referidos directos."
                                        label="Límite ganancias referidos directos (USD)"
                                        htmlFor="referral_direct_earning_limit"
                                        error={form.errors.referral_direct_earning_limit}
                                    >
                                        <Input
                                            id="referral_direct_earning_limit"
                                            min="0"
                                            name="referral_direct_earning_limit"
                                            placeholder="Sin límite"
                                            step="0.01"
                                            type="number"
                                            value={form.data.referral_direct_earning_limit}
                                            onChange={(e) =>
                                                form.setData(
                                                    'referral_direct_earning_limit',
                                                    e.target.value,
                                                )
                                            }
                                        />
                                    </Field>
                                    <Field
                                        hint="Vacío = sin tope. Al alcanzar el monto, el usuario deja de recibir bonos por referidos indirectos."
                                        label="Límite ganancias referidos indirectos (USD)"
                                        htmlFor="referral_indirect_earning_limit"
                                        error={form.errors.referral_indirect_earning_limit}
                                    >
                                        <Input
                                            id="referral_indirect_earning_limit"
                                            min="0"
                                            name="referral_indirect_earning_limit"
                                            placeholder="Sin límite"
                                            step="0.01"
                                            type="number"
                                            value={form.data.referral_indirect_earning_limit}
                                            onChange={(e) =>
                                                form.setData(
                                                    'referral_indirect_earning_limit',
                                                    e.target.value,
                                                )
                                            }
                                        />
                                    </Field>
                                </div>
                            </SettingsSection>
                            )}

                            {activeSection === 'retiros' && (
                            <SettingsSection
                                title="Comisiones y retiros"
                                description="Se aplican al monto bruto solicitado; el neto enviado on-chain es bruto menos comisión."
                                icon={ArrowDownCircle}
                            >
                                <div className="grid gap-6 sm:grid-cols-3">
                                    <Field
                                        label="Comisión (%)"
                                        htmlFor="withdrawal_fee_percent"
                                        error={form.errors.withdrawal_fee_percent}
                                    >
                                        <Input
                                            id="withdrawal_fee_percent"
                                            max="100"
                                            min="0"
                                            name="withdrawal_fee_percent"
                                            onChange={(e) =>
                                                form.setData(
                                                    'withdrawal_fee_percent',
                                                    e.target.value,
                                                )
                                            }
                                            required
                                            step="0.0001"
                                            type="number"
                                            value={form.data.withdrawal_fee_percent}
                                        />
                                    </Field>
                                    <Field
                                        label="Comisión fija (US$)"
                                        htmlFor="withdrawal_fee_fixed"
                                        error={form.errors.withdrawal_fee_fixed}
                                    >
                                        <Input
                                            id="withdrawal_fee_fixed"
                                            min="0"
                                            name="withdrawal_fee_fixed"
                                            onChange={(e) =>
                                                form.setData(
                                                    'withdrawal_fee_fixed',
                                                    e.target.value,
                                                )
                                            }
                                            required
                                            step="0.01"
                                            type="number"
                                            value={form.data.withdrawal_fee_fixed}
                                        />
                                    </Field>
                                    <Field
                                        label="Retiro mínimo (US$)"
                                        htmlFor="min_withdrawal_amount"
                                        error={form.errors.min_withdrawal_amount}
                                    >
                                        <Input
                                            id="min_withdrawal_amount"
                                            min="0"
                                            name="min_withdrawal_amount"
                                            onChange={(e) =>
                                                form.setData(
                                                    'min_withdrawal_amount',
                                                    e.target.value,
                                                )
                                            }
                                            required
                                            step="0.01"
                                            type="number"
                                            value={form.data.min_withdrawal_amount}
                                        />
                                    </Field>
                                </div>
                            </SettingsSection>
                            )}

                            {activeSection === 'kyc' && (
                            <SettingsSection
                                title="Verificación de identidad (KYC)"
                                description="Qué operaciones exigen KYC aprobado. El alta de billeteras siempre requiere KYC."
                                icon={ShieldCheck}
                            >
                                <div className="space-y-3">
                                    <ToggleRow
                                        checked={form.data.require_kyc_to_invest}
                                        id="require_kyc_to_invest"
                                        title="Registrar nuevas inversiones"
                                        description="Si está desactivado, pueden enviar depósitos sin KYC (solo entornos de prueba o políticas laxas)."
                                        onCheckedChange={(v) =>
                                            form.setData('require_kyc_to_invest', v)
                                        }
                                    />
                                    <ToggleRow
                                        checked={form.data.require_kyc_to_withdraw}
                                        id="require_kyc_to_withdraw"
                                        title="Solicitar retiros de capital"
                                        description="Si está desactivado, pueden pedir retiros sin KYC, sujeto a las reglas del fondo."
                                        onCheckedChange={(v) =>
                                            form.setData('require_kyc_to_withdraw', v)
                                        }
                                    />
                                </div>
                                <InputError message={form.errors.require_kyc_to_invest} />
                                <InputError message={form.errors.require_kyc_to_withdraw} />
                            </SettingsSection>
                            )}

                            {activeSection === 'plazos' && (
                            <SettingsSection
                                title="Plazos disponibles"
                                description="Duraciones en meses que el inversionista puede elegir al invertir."
                                icon={CalendarClock}
                            >
                                <div className="space-y-3">
                                    {form.data.durations.map((duration, index) => (
                                        <div
                                            key={index}
                                            className="flex flex-wrap items-center gap-3 rounded-lg border border-border/80 bg-muted/20 p-3"
                                        >
                                            <Input
                                                className="w-24"
                                                min="1"
                                                onChange={(e) =>
                                                    updateDuration(index, e.target.value)
                                                }
                                                required
                                                type="number"
                                                value={duration}
                                            />
                                            <span className="text-muted-foreground text-sm">
                                                meses
                                            </span>
                                            <Button
                                                className="ml-auto"
                                                disabled={form.data.durations.length === 1}
                                                onClick={() => removeDuration(index)}
                                                size="icon"
                                                type="button"
                                                variant="outline"
                                            >
                                                <Trash2 className="size-4" />
                                                <span className="sr-only">Eliminar plazo</span>
                                            </Button>
                                        </div>
                                    ))}
                                </div>
                                <InputError message={form.errors.durations} />
                                <Button onClick={addDuration} type="button" variant="outline">
                                    <Plus className="size-4" />
                                    Agregar plazo
                                </Button>
                            </SettingsSection>
                            )}
                            </div>

                            <div className="border-border bg-background/95 supports-[backdrop-filter]:bg-background/80 sticky bottom-0 z-10 -mx-1 mt-2 flex flex-wrap items-center justify-between gap-3 rounded-lg border px-4 py-3 shadow-sm backdrop-blur sm:-mx-2">
                                <p className="text-muted-foreground text-sm">
                                    <span className="text-foreground font-medium">
                                        {activeMeta.label}
                                    </span>
                                    {' · '}
                                    {form.isDirty
                                        ? 'Hay cambios sin guardar.'
                                        : 'Todos los cambios están guardados.'}
                                </p>
                                <Button
                                    disabled={form.processing || !form.isDirty}
                                    type="submit"
                                >
                                    {form.processing
                                        ? 'Guardando…'
                                        : 'Guardar configuración'}
                                </Button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </>
    );
}

InvestmentSettings.layout = {
    breadcrumbs: [
        { title: 'Administración', href: '/admin' },
        { title: 'Parámetros', href: '/admin/inversion' },
    ],
};