import { Head, useForm, usePage } from '@inertiajs/react';
import { Check, CheckCircle2, Circle, ShieldCheck } from 'lucide-react';
import { useEffect, useMemo, useState } from 'react';
import { ConfirmActionModal } from '@/components/confirm-action-modal';
import { AppPage } from '@/components/app-page';
import InputError from '@/components/input-error';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { Spinner } from '@/components/ui/spinner';
import { countryOptions } from '@/lib/countries';
import { cn } from '@/lib/utils';

type Submission = {
    legal_first_name: string;
    legal_last_name: string;
    date_of_birth: string;
    document_type: string;
    document_number: string;
    document_issuing_country: string;
    country_of_residence: string;
    address_line1: string;
    address_line2: string | null;
    city: string;
    region_state: string;
    postal_code: string;
    occupation: string | null;
    documents: {
        front_uploaded: boolean;
        back_uploaded: boolean;
        selfie_uploaded: boolean;
    };
    updated_at: string | null;
};

type Props = {
    status: string;
    rejection_reason: string | null;
    submission: Submission | null;
};

const DOCUMENT_TYPES = [
    { value: 'national_id', label: 'Documento nacional de identidad' },
    { value: 'passport', label: 'Pasaporte' },
    { value: 'drivers_license', label: 'Licencia de conducir' },
    { value: 'residence_card', label: 'Tarjeta de residencia / permiso migratorio' },
] as const;

const STEPS = [
    {
        title: 'Identidad',
        description: 'Datos como en tu documento',
    },
    {
        title: 'Domicilio',
        description: 'Residencia y contacto AML',
    },
    {
        title: 'Documentos',
        description: 'Fotos o PDF del ID',
    },
] as const;

const STEP_0_FIELDS = [
    'legal_first_name',
    'legal_last_name',
    'date_of_birth',
    'document_type',
    'document_number',
    'document_issuing_country',
] as const;

const STEP_1_FIELDS = [
    'country_of_residence',
    'address_line1',
    'city',
    'region_state',
    'postal_code',
] as const;

function firstBackendErrorStep(errors: Partial<Record<string, string>>): number | null {
    for (const key of STEP_0_FIELDS) {
        if (errors[key]) return 0;
    }
    for (const key of STEP_1_FIELDS) {
        if (errors[key]) return 1;
    }
    if (errors.address_line2 || errors.occupation) return 1;
    if (errors.document_front || errors.document_back || errors.selfie_document) return 2;
    return null;
}

function VerificationAccountChecklistRow({
    complete,
    label,
}: {
    complete: boolean;
    label: string;
}) {
    return (
        <li className="flex items-start gap-3">
            {complete ? (
                <CheckCircle2
                    className="mt-0.5 size-5 shrink-0 text-primary"
                    aria-hidden
                />
            ) : (
                <Circle
                    className="text-muted-foreground mt-0.5 size-5 shrink-0"
                    aria-hidden
                />
            )}
            <span
                className={cn(
                    'text-sm font-medium leading-tight sm:text-[15px]/snug',
                    complete ? 'text-foreground' : 'text-muted-foreground',
                )}
            >
                {label}
            </span>
        </li>
    );
}

function KycStepsHeader({
    currentStep,
    onStepClick,
}: {
    currentStep: number;
    onStepClick: (index: number) => void;
}) {
    return (
        <nav
            aria-label="Pasos del formulario de verificación"
            className="rounded-xl border bg-card/80 px-3 py-4 shadow-sm backdrop-blur-sm sm:px-5"
        >
            <ol className="flex flex-wrap items-start justify-between gap-y-6 sm:flex-nowrap">
                {STEPS.map((step, index) => {
                    const completed = index < currentStep;
                    const active = index === currentStep;
                    const canJumpBack = index < currentStep;

                    return (
                        <li
                            key={step.title}
                            className={cn(
                                'relative flex min-w-[5.5rem] flex-1 flex-col items-center gap-2 sm:min-w-0',
                                index < STEPS.length - 1 &&
                                    'sm:after:pointer-events-none sm:after:absolute sm:after:start-[calc(50%+1rem)] sm:after:end-[-50%] sm:after:top-4 sm:after:h-px sm:after:bg-border sm:after:content-[""]',
                            )}
                        >
                            <button
                                type="button"
                                aria-current={active ? 'step' : undefined}
                                aria-label={`Paso ${index + 1}: ${step.title}`}
                                className={cn(
                                    'relative z-[1] flex size-10 items-center justify-center rounded-full border text-sm font-semibold transition-colors',
                                    active &&
                                        'border-primary bg-primary text-primary-foreground ring-4 ring-primary/25',
                                    completed &&
                                        !active &&
                                        'border-emerald-600/80 bg-emerald-600/15 text-emerald-700 dark:text-emerald-400',
                                    !active &&
                                        !completed &&
                                        'border-muted bg-muted/50 text-muted-foreground',
                                    canJumpBack && 'cursor-pointer hover:border-primary/60',
                                    !canJumpBack &&
                                        index > currentStep &&
                                        'cursor-not-allowed opacity-50',
                                )}
                                disabled={!canJumpBack && index !== currentStep}
                                onClick={() => {
                                    if (canJumpBack) {
                                        onStepClick(index);
                                    }
                                }}
                            >
                                {completed ? (
                                    <Check aria-hidden className="size-4" strokeWidth={2.75} />
                                ) : (
                                    index + 1
                                )}
                            </button>
                            <div className="max-w-[8.5rem] text-center">
                                <p
                                    className={cn(
                                        'text-xs font-semibold leading-tight sm:text-sm',
                                        active && 'text-foreground',
                                        !active && 'text-muted-foreground',
                                    )}
                                >
                                    {step.title}
                                </p>
                                <p className="mt-0.5 hidden leading-snug text-[11px] text-muted-foreground sm:block sm:text-xs">
                                    {step.description}
                                </p>
                            </div>
                        </li>
                    );
                })}
            </ol>
        </nav>
    );
}

export default function KycVerification({
    status,
    rejection_reason,
    submission,
}: Props) {
    type AuthSnippet = {
        country?: string;
        email_verified_at?: string | null;
        kyc_status?: string;
    };
    const authUser = usePage<{ auth?: { user?: AuthSnippet } }>().props.auth
        ?.user;
    const registrationCountryRaw = authUser?.country;
    const registrationCountry =
        typeof registrationCountryRaw === 'string' ? registrationCountryRaw : '';
    const emailConfirmed = Boolean(authUser?.email_verified_at);
    const kycConfirmed = authUser?.kyc_status === 'approved';

    const initial = useMemo(
        () => ({
            legal_first_name: submission?.legal_first_name ?? '',
            legal_last_name: submission?.legal_last_name ?? '',
            date_of_birth: submission?.date_of_birth ?? '',
            document_type:
                submission?.document_type ?? ('national_id' as (typeof DOCUMENT_TYPES)[number]['value']),
            document_number: submission?.document_number ?? '',
            document_issuing_country:
                submission?.document_issuing_country ?? '',
            country_of_residence:
                submission?.country_of_residence
                ?? (registrationCountry !== '' && registrationCountry !== 'OTHER'
                    ? registrationCountry
                    : ''),
            address_line1: submission?.address_line1 ?? '',
            address_line2: submission?.address_line2 ?? '',
            city: submission?.city ?? '',
            region_state: submission?.region_state ?? '',
            postal_code: submission?.postal_code ?? '',
            occupation: submission?.occupation ?? '',
            document_front: null as File | null,
            document_back: null as File | null,
            selfie_document: null as File | null,
        }),
        [registrationCountry, submission],
    );

    const form = useForm(initial);
    const [step, setStep] = useState(0);
    const [localNavHint, setLocalNavHint] = useState<string | null>(null);
    const [submitConfirmOpen, setSubmitConfirmOpen] = useState(false);

    const showForm =
        status === 'requires_submission' || status === 'rejected';

    useEffect(() => {
        const keys = Object.keys(form.errors);
        if (keys.length === 0) {
            return;
        }

        const target = firstBackendErrorStep(form.errors);
        if (target !== null) {
            setStep(target);
        }
    }, [form.errors]);

    function validateStep0(): boolean {
        const d = form.data;

        return (
            d.legal_first_name.trim() !== '' &&
            d.legal_last_name.trim() !== '' &&
            d.date_of_birth !== '' &&
            d.document_type.trim() !== '' &&
            d.document_number.trim() !== '' &&
            d.document_issuing_country.trim() !== ''
        );
    }

    function validateStep1(): boolean {
        const d = form.data;

        return (
            d.country_of_residence.trim() !== '' &&
            d.address_line1.trim() !== '' &&
            d.city.trim() !== '' &&
            d.region_state.trim() !== '' &&
            d.postal_code.trim() !== ''
        );
    }

    function validateStep2(): boolean {
        return form.data.document_front !== null;
    }

    function nextStep() {
        setLocalNavHint(null);

        if (step === 0) {
            if (!validateStep0()) {
                setLocalNavHint(
                    'Revisa el paso de identidad: todos los campos obligatorios deben estar completos.',
                );

                return;
            }

            setStep(1);

            return;
        }

        if (step === 1) {
            if (!validateStep1()) {
                setLocalNavHint(
                    'Revisa el paso de domicilio: país, dirección, ciudad, provincia y código postal son obligatorios.',
                );

                return;
            }

            setStep(2);
        }
    }

    function submit(e: React.FormEvent) {
        e.preventDefault();
        setLocalNavHint(null);

        if (!validateStep2()) {
            setStep(2);
            setLocalNavHint('Debes adjuntar el documento frontal para continuar.');

            return;
        }

        setSubmitConfirmOpen(true);
    }

    function executeSubmitKyc() {
        form.post('/verificacion-kyc', {
            forceFormData: true,
            preserveScroll: true,
            onSuccess: () => setSubmitConfirmOpen(false),
        });
    }

    const stepMeta = STEPS[step] ?? STEPS[0];

    return (
        <>
            <Head title="Verificación de identidad" />

            <ConfirmActionModal
                cancelLabel="Revisar de nuevo"
                confirmLabel="Enviar solicitud"
                description="Se enviará tu información y documentos para revisión. Confirma solo si todo está correcto."
                open={submitConfirmOpen}
                processing={form.processing}
                title="¿Enviar solicitud de verificación?"
                onConfirm={executeSubmitKyc}
                onOpenChange={(open) => !open && setSubmitConfirmOpen(false)}
            >
                <p className="text-muted-foreground">
                    Nombre:{' '}
                    <span className="text-foreground">
                        {form.data.legal_first_name} {form.data.legal_last_name}
                    </span>
                </p>
            </ConfirmActionModal>

            <AppPage width="narrow">
                <div className="flex items-start gap-3 border-b border-border pb-6">
                    <div className="flex size-10 shrink-0 items-center justify-center rounded-xl border border-border bg-muted/60">
                        <ShieldCheck aria-hidden className="size-5 text-primary" />
                    </div>
                    <header>
                        <h1 className="text-3xl font-bold tracking-tight">
                            Verificación de identidad
                        </h1>
                        <p className="mt-1 text-muted-foreground text-sm">
                            Debes completar los pasos de verificación para poder acceder a todas las funcionalidades de la plataforma.
                        </p>
                    </header>
                </div>

                <Card className="border-muted">
                    <CardHeader className="pb-3">
                        <CardTitle className="text-base font-semibold">
                            Estado de tu cuenta
                        </CardTitle>
                    </CardHeader>
                    <CardContent className="pt-0">
                        <ul
                            aria-label="Verificaciones de cuenta"
                            className="space-y-3"
                            role="list"
                        >
                            <VerificationAccountChecklistRow
                                complete={emailConfirmed}
                                label="Correo electrónico confirmado"
                            />
                            <VerificationAccountChecklistRow
                                complete={kycConfirmed}
                                label="Verificación de identidad (KYC) confirmada"
                            />
                        </ul>
                    </CardContent>
                </Card>

                {status === 'pending_review' ? (
                    <Alert>
                        <AlertTitle>Solicitud en revisión</AlertTitle>
                        <AlertDescription>
                            Tus documentos están en cola para validación manual. Cuando aprueben el proceso
                            ya podrás usar el sistema completo. Si necesitas ayuda escribe al equipo.
                        </AlertDescription>
                    </Alert>
                ) : null}

                {status === 'rejected' && rejection_reason ? (
                    <Alert variant="destructive">
                        <AlertTitle>Revisión devuelta</AlertTitle>
                        <AlertDescription className="whitespace-pre-wrap">
                            {rejection_reason}
                        </AlertDescription>
                    </Alert>
                ) : null}

                {showForm ? (
                    <>
                        <KycStepsHeader
                            currentStep={step}
                            onStepClick={(index) => {
                                setLocalNavHint(null);
                                setStep(index);
                            }}
                        />

                        <Card>
                            <CardHeader>
                                <CardTitle className="flex flex-wrap items-baseline gap-x-2">
                                    <span>
                                        Paso {step + 1} de {STEPS.length}
                                    </span>
                                    <span className="text-muted-foreground font-normal">
                                        · {stepMeta.title}
                                    </span>
                                </CardTitle>
                                <CardDescription>
                                    {step === 2
                                        ? 'Adjunta tus archivos. Tamaño máx. 15 MB por archivo (JPEG, PNG, WEBP y PDF donde aplique).'
                                        : 'Los datos deben coincidir con tu documento de identificación.'}
                                </CardDescription>
                            </CardHeader>
                            <CardContent>
                                <form className="space-y-8" encType="multipart/form-data" onSubmit={submit}>
                                    {step === 0 ? (
                                        <fieldset className="space-y-4" disabled={form.processing}>
                                            <div className="grid gap-4 sm:grid-cols-2">
                                                <div className="grid gap-2">
                                                    <Label htmlFor="legal_first_name">
                                                        Nombre tal como figura en el ID
                                                    </Label>
                                                    <Input
                                                        id="legal_first_name"
                                                        name="legal_first_name"
                                                        value={form.data.legal_first_name}
                                                        onChange={(e) =>
                                                            form.setData('legal_first_name', e.target.value)
                                                        }
                                                        required
                                                    />
                                                    <InputError message={form.errors.legal_first_name} />
                                                </div>
                                                <div className="grid gap-2">
                                                    <Label htmlFor="legal_last_name">Apellido(s)</Label>
                                                    <Input
                                                        id="legal_last_name"
                                                        name="legal_last_name"
                                                        value={form.data.legal_last_name}
                                                        onChange={(e) =>
                                                            form.setData('legal_last_name', e.target.value)
                                                        }
                                                        required
                                                    />
                                                    <InputError message={form.errors.legal_last_name} />
                                                </div>
                                            </div>

                                            <div className="grid gap-4 sm:grid-cols-2">
                                                <div className="grid gap-2">
                                                    <Label htmlFor="date_of_birth">Fecha de nacimiento</Label>
                                                    <Input
                                                        id="date_of_birth"
                                                        name="date_of_birth"
                                                        type="date"
                                                        max={new Date(Date.now()).toISOString().split('T')[0]}
                                                        value={form.data.date_of_birth}
                                                        onChange={(e) =>
                                                            form.setData('date_of_birth', e.target.value)
                                                        }
                                                        required
                                                    />
                                                    <InputError message={form.errors.date_of_birth} />
                                                </div>
                                                <div className="grid gap-2">
                                                    <Label>Tipo de documento</Label>
                                                    <Select
                                                        name="document_type"
                                                        required
                                                        value={form.data.document_type}
                                                        onValueChange={(v) => form.setData('document_type', v)}
                                                    >
                                                        <SelectTrigger>
                                                            <SelectValue placeholder="Selecciona tipo" />
                                                        </SelectTrigger>
                                                        <SelectContent>
                                                            {DOCUMENT_TYPES.map((d) => (
                                                                <SelectItem key={d.value} value={d.value}>
                                                                    {d.label}
                                                                </SelectItem>
                                                            ))}
                                                        </SelectContent>
                                                    </Select>
                                                    <InputError message={form.errors.document_type} />
                                                </div>
                                            </div>

                                            <div className="grid gap-4 sm:grid-cols-2">
                                                <div className="grid gap-2">
                                                    <Label htmlFor="document_number">
                                                        Número de documento
                                                    </Label>
                                                    <Input
                                                        id="document_number"
                                                        name="document_number"
                                                        value={form.data.document_number}
                                                        onChange={(e) =>
                                                            form.setData('document_number', e.target.value)
                                                        }
                                                        required
                                                    />
                                                    <InputError message={form.errors.document_number} />
                                                </div>
                                                <div className="grid gap-2">
                                                    <Label>País emisor del documento (ISO-2)</Label>
                                                    <Select
                                                        required
                                                        value={
                                                            form.data.document_issuing_country || undefined
                                                        }
                                                        onValueChange={(v) =>
                                                            form.setData('document_issuing_country', v)
                                                        }
                                                    >
                                                        <SelectTrigger>
                                                            <SelectValue placeholder="Selecciona país" />
                                                        </SelectTrigger>
                                                        <SelectContent>
                                                            {countryOptions.map((c) => (
                                                                <SelectItem key={c.value} value={c.value}>
                                                                    {c.label}
                                                                </SelectItem>
                                                            ))}
                                                        </SelectContent>
                                                    </Select>
                                                    <InputError message={form.errors.document_issuing_country} />
                                                </div>
                                            </div>
                                        </fieldset>
                                    ) : null}

                                    {step === 1 ? (
                                        <fieldset className="space-y-4" disabled={form.processing}>
                                            <div className="grid gap-2">
                                                <Label>País de residencia habitual (ISO-2)</Label>
                                                <Select
                                                    required
                                                    value={
                                                        form.data.country_of_residence || undefined
                                                    }
                                                    onValueChange={(v) =>
                                                        form.setData('country_of_residence', v)
                                                    }
                                                >
                                                    <SelectTrigger>
                                                        <SelectValue placeholder="Selecciona país" />
                                                    </SelectTrigger>
                                                    <SelectContent>
                                                        {countryOptions.map((c) => (
                                                            <SelectItem key={c.value} value={c.value}>
                                                                {c.label}
                                                            </SelectItem>
                                                        ))}
                                                    </SelectContent>
                                                </Select>
                                                <InputError message={form.errors.country_of_residence} />
                                            </div>

                                            <div className="grid gap-2">
                                                <Label htmlFor="address_line1">
                                                    Línea 1 dirección fiscal
                                                </Label>
                                                <Input
                                                    id="address_line1"
                                                    name="address_line1"
                                                    value={form.data.address_line1}
                                                    onChange={(e) =>
                                                        form.setData('address_line1', e.target.value)
                                                    }
                                                    required
                                                />
                                                <InputError message={form.errors.address_line1} />
                                            </div>

                                            <div className="grid gap-2">
                                                <Label htmlFor="address_line2">
                                                    Línea 2 dirección{' '}
                                                    <span className="text-muted-foreground">(opcional)</span>
                                                </Label>
                                                <Input
                                                    id="address_line2"
                                                    name="address_line2"
                                                    value={form.data.address_line2}
                                                    onChange={(e) =>
                                                        form.setData('address_line2', e.target.value)
                                                    }
                                                />
                                                <InputError message={form.errors.address_line2} />
                                            </div>

                                            <div className="grid gap-4 sm:grid-cols-2">
                                                <div className="grid gap-2">
                                                    <Label htmlFor="city">Ciudad / municipio</Label>
                                                    <Input
                                                        id="city"
                                                        name="city"
                                                        value={form.data.city}
                                                        onChange={(e) =>
                                                            form.setData('city', e.target.value)
                                                        }
                                                        required
                                                    />
                                                    <InputError message={form.errors.city} />
                                                </div>
                                                <div className="grid gap-2">
                                                    <Label htmlFor="region_state">
                                                        Departamento / provincia / estado
                                                    </Label>
                                                    <Input
                                                        id="region_state"
                                                        name="region_state"
                                                        value={form.data.region_state}
                                                        onChange={(e) =>
                                                            form.setData('region_state', e.target.value)
                                                        }
                                                        required
                                                    />
                                                    <InputError message={form.errors.region_state} />
                                                </div>
                                            </div>

                                            <div className="grid gap-4 sm:grid-cols-2">
                                                <div className="grid gap-2">
                                                    <Label htmlFor="postal_code">Código postal</Label>
                                                    <Input
                                                        id="postal_code"
                                                        name="postal_code"
                                                        value={form.data.postal_code}
                                                        onChange={(e) =>
                                                            form.setData('postal_code', e.target.value)
                                                        }
                                                        required
                                                    />
                                                    <InputError message={form.errors.postal_code} />
                                                </div>
                                                <div className="grid gap-2">
                                                    <Label htmlFor="occupation">
                                                        Profesión u ocupación{' '}
                                                        <span className="text-muted-foreground">
                                                            (opcional)
                                                        </span>
                                                    </Label>
                                                    <Input
                                                        id="occupation"
                                                        name="occupation"
                                                        value={form.data.occupation}
                                                        onChange={(e) =>
                                                            form.setData('occupation', e.target.value)
                                                        }
                                                    />
                                                    <InputError message={form.errors.occupation} />
                                                </div>
                                            </div>
                                        </fieldset>
                                    ) : null}

                                    {step === 2 ? (
                                        <fieldset className="space-y-4" disabled={form.processing}>
                                            <div className="grid gap-2">
                                                <Label htmlFor="document_front">
                                                    Documento frontal (obligatorio)
                                                </Label>
                                                <Input
                                                    id="document_front"
                                                    name="document_front"
                                                    type="file"
                                                    accept="image/jpeg,image/png,image/webp,application/pdf"
                                                    required
                                                    onChange={(e) =>
                                                        form.setData(
                                                            'document_front',
                                                            e.target.files?.item(0) ?? null,
                                                        )
                                                    }
                                                />
                                                {submission?.documents.front_uploaded ? (
                                                    <p className="text-muted-foreground text-xs">
                                                        Tienes un archivo previo cargado — al volver a enviar
                                                        debes adjuntar uno nuevo obligatoriamente.
                                                    </p>
                                                ) : null}
                                                <InputError message={form.errors.document_front} />
                                            </div>
                                            <div className="grid gap-2">
                                                <Label htmlFor="document_back">
                                                    Reverso / segunda página{' '}
                                                    <span className="text-muted-foreground">
                                                        (opcional según tipo)
                                                    </span>
                                                </Label>
                                                <Input
                                                    id="document_back"
                                                    name="document_back"
                                                    type="file"
                                                    accept="image/jpeg,image/png,image/webp,application/pdf"
                                                    onChange={(e) =>
                                                        form.setData(
                                                            'document_back',
                                                            e.target.files?.item(0) ?? null,
                                                        )
                                                    }
                                                />
                                                <InputError message={form.errors.document_back} />
                                            </div>
                                            <div className="grid gap-2">
                                                <Label htmlFor="selfie_document">
                                                    Selfie sosteniendo el documento{' '}
                                                    <span className="text-muted-foreground">
                                                        (opcional)
                                                    </span>
                                                </Label>
                                                <Input
                                                    id="selfie_document"
                                                    name="selfie_document"
                                                    type="file"
                                                    accept="image/jpeg,image/png,image/webp"
                                                    onChange={(e) =>
                                                        form.setData(
                                                            'selfie_document',
                                                            e.target.files?.item(0) ?? null,
                                                        )
                                                    }
                                                />
                                                <InputError message={form.errors.selfie_document} />
                                            </div>
                                            {!validateStep2() &&
                                            Object.keys(form.errors).length === 0 ? (
                                                <p className="text-amber-600 text-sm dark:text-amber-400">
                                                    Debes seleccionar al menos el archivo frontal antes de enviar.
                                                </p>
                                            ) : null}
                                        </fieldset>
                                    ) : null}

                                    <div className="flex flex-col gap-3 border-t pt-6">
                                        {localNavHint ? (
                                            <p className="text-destructive text-sm">{localNavHint}</p>
                                        ) : null}

                                        <div className="flex flex-col gap-3 sm:flex-row sm:justify-between">
                                            <div>
                                            {step > 0 ? (
                                                <Button
                                                    disabled={form.processing}
                                                    type="button"
                                                    variant="outline"
                                                    onClick={() => {
                                                        setLocalNavHint(null);
                                                        setStep((s) => Math.max(0, s - 1));
                                                    }}
                                                >
                                                    Anterior
                                                </Button>
                                            ) : null}
                                            </div>

                                            <div className="flex flex-wrap gap-2 sm:justify-end">
                                            {step < 2 ? (
                                                <Button
                                                    disabled={form.processing}
                                                    type="button"
                                                    onClick={nextStep}
                                                >
                                                    Siguiente
                                                </Button>
                                            ) : (
                                                <Button disabled={form.processing} type="submit">
                                                    {form.processing && (
                                                        <Spinner aria-hidden className="mr-2" />
                                                    )}
                                                    Enviar para revisión
                                                </Button>
                                            )}
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </CardContent>
                        </Card>
                    </>
                ) : null}
            </AppPage>
        </>
    );
}

KycVerification.layout = {
    breadcrumbs: [
        { title: 'Inicio', href: '/' },
        { title: 'Verificación de identidad', href: '/verificacion-kyc' },
    ],
};