import FileUploadReal from '@/components/file-upload';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
    Stepper,
    StepperIndicator,
    StepperItem,
    StepperTrigger,
} from '@/components/ui/stepper';
import {
    Flash,
    showFlash,
    useFlashToasts,
} from '@/components/use-flash-toasts';
import { useForm } from '@inertiajs/react';
import { CreditCardIcon } from 'lucide-react';
import { FormEventHandler, useEffect, useId, useState } from 'react';
import { usePaymentInputs } from 'react-payment-inputs';
import images, { type CardImages } from 'react-payment-inputs/images';

interface VerificationModalProps {
    open: boolean;
    setOpen: (open: boolean) => void;
    userId: number;
    profileId: number;
    url: string;
    amount?: number;
    mode?: 'verificar' | 'homologar';
}

export interface VerificationForm {
    profile_id: number;
    user_id: number;
    verification_documents: string[];
    amount?: number;
}

const steps = [1, 2];

export default function VerificationModal({
    open,
    setOpen,
    userId,
    profileId,
    url,
    amount = 10,
    mode = 'verificar',
}: VerificationModalProps) {
    const [currentStep, setCurrentStep] = useState(1);
    const id = useId();
    const { data, setData, post, processing, errors } =
        useForm<VerificationForm>({
            profile_id: profileId,
            user_id: userId,
            verification_documents: [],
            amount: amount,
        });

    useFlashToasts({ errors });

    useEffect(() => {
        setCurrentStep(1);
        setData({
            profile_id: profileId,
            user_id: userId,
            verification_documents: [],
        });
    }, [profileId, userId, setData, open]);

    const isFormValid =
        Boolean(data.profile_id) &&
        Boolean(data.user_id) &&
        data.verification_documents.length > 0;

    // Step 1: Formulario
    // Step 2: Datos de tarjeta y pago

    const handleNext = () => {
        if (currentStep === 1 && isFormValid) {
            setCurrentStep(2);
        }
    };

    const handlePrev = () => {
        if (currentStep > 1) setCurrentStep(currentStep - 1);
    };

    // Payment form logic
    const {
        meta,
        getCardNumberProps,
        getExpiryDateProps,
        getCVCProps,
        getCardImageProps,
    } = usePaymentInputs();

    // Campos de tarjeta para habilitar el botón de pago
    const [cardName, setCardName] = useState('');
    const [cardNumber, setCardNumber] = useState('');
    const [cardExpiry, setCardExpiry] = useState('');
    const [cardCvc, setCardCvc] = useState('');

    // Validación de campos de tarjeta
    const isCardValid =
        cardName.trim().length > 0 &&
        cardNumber.trim().length >= 14 &&
        cardExpiry.trim().length >= 4 &&
        cardCvc.trim().length >= 3;

    const submit: FormEventHandler = (e) => {
        e.preventDefault();
        if (!isFormValid) return;
        post(url, {
            onSuccess: (page) => {
                const flash = page.props.flash as Flash;
                showFlash(flash);
                setOpen(false);
            },
            onError: () => {},
        });
    };

    // Textos personalizados según el modo
    const isHomologar = mode === 'homologar';
    const title = isHomologar
        ? 'Solicitar homologación de perfil'
        : 'Solicitar verificación de perfil';
    const description = isHomologar
        ? 'Adjunta documentos y una nota para solicitar la homologación de tu perfil.'
        : 'Adjunta documentos y una nota para solicitar la verificación de tu perfil.';
    const paymentTitle = isHomologar
        ? 'Confirmar pago de homologación'
        : 'Confirmar pago de verificación';
    const paymentDescription = isHomologar
        ? 'Paga de forma segura y cancela en cualquier momento para homologar tu perfil.'
        : 'Paga de forma segura y cancela en cualquier momento.';
    const payButtonText = isHomologar
        ? 'Pagar y homologar'
        : 'Pagar y enviar';

    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogContent className="min-h-[520px] max-w-md">
                <DialogHeader>
                    <DialogTitle>{title}</DialogTitle>
                    <DialogDescription>
                        {description}
                        <br />
                        <span className="mt-2 block text-base font-bold text-primary">
                            El costo de {isHomologar ? 'la homologación' : 'la verificación'} es{' '}
                            <span className="text-foreground">
                                ${amount} USD
                            </span>
                        </span>
                    </DialogDescription>
                </DialogHeader>
                <div className="mb-4">
                    <Stepper value={currentStep} onValueChange={setCurrentStep}>
                        {steps.map((step) => (
                            <StepperItem
                                key={step}
                                step={step}
                                className="flex-1"
                            >
                                <StepperTrigger
                                    className="w-full flex-col items-start gap-2"
                                    asChild
                                >
                                    <StepperIndicator
                                        asChild
                                        className="h-2 w-full rounded-none bg-border"
                                    >
                                        <span className="sr-only">{step}</span>
                                    </StepperIndicator>
                                </StepperTrigger>
                            </StepperItem>
                        ))}
                    </Stepper>
                    <div className="mt-2 text-center text-sm font-medium text-muted-foreground tabular-nums">
                        Paso {currentStep} de {steps.length}
                    </div>
                </div>
                {currentStep === 1 && (
                    <form>
                        <div className="mb-4 grid grid-cols-1">
                            <label className="mb-1 block text-sm font-medium">
                                Documentos de {isHomologar ? 'homologación' : 'verificación'} (PDF, imagen, etc.)
                            </label>
                            <span className="mb-2 block text-sm text-muted-foreground">
                                Sube aquí tu información y documentos para
                                solicitar la {isHomologar ? 'homologación' : 'verificación'} de tu perfil.
                            </span>
                            <FileUploadReal
                                onUpload={(urls) =>
                                    setData('verification_documents', urls)
                                }
                                single={false}
                                accept="image/*,application/pdf"
                                maxSizeMB={5}
                                defaultUrls={data.verification_documents}
                            />
                            {errors.verification_documents && (
                                <div className="mt-1 text-sm text-destructive">
                                    {errors.verification_documents}
                                </div>
                            )}
                        </div>
                        <DialogFooter>
                            <DialogClose asChild>
                                <Button variant="outline" type="button">
                                    Cancelar
                                </Button>
                            </DialogClose>
                            <Button
                                type="button"
                                disabled={!isFormValid}
                                onClick={handleNext}
                            >
                                Siguiente
                            </Button>
                        </DialogFooter>
                    </form>
                )}
                {currentStep === 2 && (
                    <form onSubmit={submit}>
                        <div className="mb-2 flex flex-col gap-2">
                            <DialogHeader>
                                <DialogTitle className="text-left">
                                    {paymentTitle}
                                </DialogTitle>
                                <DialogDescription className="text-left">
                                    {paymentDescription}
                                </DialogDescription>
                            </DialogHeader>
                        </div>
                        <div className="space-y-4">
                            <div className="*:not-first:mt-2">
                                <Label htmlFor={`name-${id}`}>
                                    Nombre en la tarjeta
                                </Label>
                                <Input
                                    id={`name-${id}`}
                                    type="text"
                                    required
                                    value={cardName}
                                    onChange={(e) =>
                                        setCardName(e.target.value)
                                    }
                                />
                            </div>
                            <div className="*:not-first:mt-2">
                                <legend className="text-sm font-medium text-foreground">
                                    Detalles de la tarjeta
                                </legend>
                                <div className="rounded-md shadow-xs">
                                    <div className="relative focus-within:z-10">
                                        <Input
                                            className="peer rounded-b-none pe-9 shadow-none [direction:inherit]"
                                            {...getCardNumberProps({
                                                value: cardNumber,
                                                onChange: (e) =>
                                                    setCardNumber(
                                                        e.target.value,
                                                    ),
                                            })}
                                        />
                                        <div className="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-50">
                                            {meta.cardType ? (
                                                <svg
                                                    className="overflow-hidden rounded-sm"
                                                    {...getCardImageProps({
                                                        images: images as unknown as CardImages,
                                                    })}
                                                    width={20}
                                                />
                                            ) : (
                                                <CreditCardIcon
                                                    size={16}
                                                    aria-hidden="true"
                                                />
                                            )}
                                        </div>
                                    </div>
                                    <div className="-mt-px flex">
                                        <div className="min-w-0 flex-1 focus-within:z-10">
                                            <Input
                                                className="rounded-e-none rounded-t-none shadow-none [direction:inherit]"
                                                {...getExpiryDateProps({
                                                    value: cardExpiry,
                                                    onChange: (e) =>
                                                        setCardExpiry(
                                                            e.target.value,
                                                        ),
                                                })}
                                            />
                                        </div>
                                        <div className="-ms-px min-w-0 flex-1 focus-within:z-10">
                                            <Input
                                                className="rounded-s-none rounded-t-none shadow-none [direction:inherit]"
                                                {...getCVCProps({
                                                    value: cardCvc,
                                                    onChange: (e) =>
                                                        setCardCvc(
                                                            e.target.value,
                                                        ),
                                                })}
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <p className="mt-2 text-center text-xs text-muted-foreground">
                            Los pagos no son reembolsables. Puedes cancelar en
                            cualquier momento.
                        </p>
                        <div className="mt-4 flex justify-end gap-2">
                            <Button
                                variant="outline"
                                type="button"
                                onClick={handlePrev}
                                disabled={processing}
                            >
                                Atrás
                            </Button>
                            <DialogClose asChild>
                                <Button
                                    variant="outline"
                                    type="button"
                                    disabled={processing}
                                >
                                    Cancelar
                                </Button>
                            </DialogClose>
                            <Button
                                type="submit"
                                disabled={processing || !isCardValid}
                                data-amount={amount}
                            >
                                {processing
                                    ? 'Procesando...'
                                    : payButtonText}
                            </Button>
                        </div>
                    </form>
                )}
            </DialogContent>
        </Dialog>
    );
}