import { Head, router, useForm } from '@inertiajs/react'
import { useEffect, useMemo, useState } from 'react'
import AppLayout from '@/layouts/app-layout'
import IndexPageLayout from '@/components/core/IndexPageLayout'
import InputField, { CountrySelector, DateInput, TextAreaField } from '@/components/core/InputField'
import { Button } from '@/components/ui/button'
import { Label } from '@/components/ui/label'
import { Checkbox } from '@/components/ui/checkbox'
import { Separator } from '@/components/ui/separator'
import { Save, CalendarDays, Users, BedDouble, ReceiptText, UtensilsCrossed, CreditCard } from 'lucide-react'
import { toast } from 'sonner'
import { BookingPriceAdjustmentType } from '@/types/dashboard/price-adjustment'
import { Spinner } from '@/components/ui/spinner'
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { BookingPriceAdjustment, CheckoutBookingInput, MealPackageSelected, MealPackageVariantSelected, RoomSelected } from '@/types/home/bookings'
import ItemDatesSelector from '@/components/(dashboard)/ItemDateSelector'
import { calBookingSubTotal, calBookingTotal, calMealPackageTotal, calPriceAdjustment, calRoomOnlyTotal, calRoomTotal, filterPriceAdjustment } from '@/utils/client/calBooking'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { CategoryType, MealPackageType, RoomType } from '@/types/dashboard/booking'
import FormErrors from '@/components/(dashboard)/FormErrors'





interface PageProp {
    categories: CategoryType[],
    check_in: string,
    check_out: string,
    nights: number,
    allRoomMealPackages: MealPackageType[],
    system_currency: string,
    price_adjustments: BookingPriceAdjustmentType[]
}
interface BookingeSummeryProp {
    booking: CheckoutBookingInput,
    onSubmit: () => void,
    processing: boolean,
    currency: string,
    price_adjustments: BookingPriceAdjustmentType[],
    nights: number,
    setPriceAdujestment: (adjs: BookingPriceAdjustmentType[]) => void,
    setTotal: (value: number) => void,

}

function MealPackageCard({ meal_package, selected, onSelect, currency }: { meal_package: MealPackageType, selected: MealPackageSelected | null, onSelect: (value: MealPackageSelected) => void, currency: string }) {

    const [open, setOpen] = useState(false)
    const [selectedDays, setSelectedDays] = useState<string[]>([]);
    const [selectedVariant, setSelectedVariant] = useState<MealPackageVariantSelected | null>(null);

    const onClick = () => {


        if (!open && (meal_package.is_allow_select_days || meal_package.is_variant)) {
            setOpen(true)
            return
        }


        onSelect({
            id: meal_package.id,
            title: meal_package.title,
            price: meal_package.price,
            is_entire_stay: true,
            selected_days: [],
            is_variant_selected: false,
            variant: null,
        })
    }


    const onClickSelect = () => {

        // only date selection
        if (meal_package.is_allow_select_days && selectedDays.length === 0) {
            toast.error("Select at least one day");
            return;
        }


        if (meal_package.is_allow_select_days && !meal_package.is_variant) {
            onSelect({
                id: meal_package.id,
                title: meal_package.title,
                price: meal_package.price,
                is_entire_stay: false,
                selected_days: selectedDays,
                is_variant_selected: true,
                variant: selectedVariant,
            })
            setOpen(false)
            return
        }


        // varinat and date selection
        if (meal_package.is_variant && !selectedVariant) {
            toast.error("Select a variant");
            return;
        }

        if (meal_package.is_variant) {
            onSelect({
                id: meal_package.id,
                title: meal_package.title,
                price: meal_package.price,
                is_entire_stay: !meal_package.is_allow_select_days,
                selected_days: selectedDays,
                is_variant_selected: true,
                variant: selectedVariant,
            })
            setOpen(false)
            setSelectedVariant(null)
        }
    }


    return <Dialog open={open} onOpenChange={setOpen}>

        <Button type='button' variant='outline' onClick={onClick} className="w-full flex items-center justify-between border rounded-sm px-3 py-2 hover:bg-muted/40 transition"  >
            {/* LEFT: radio + title */}
            <div className="flex items-center gap-3">
                <div className='w-4 h-4 flex justify-center items-center border rounded-full'>  {(meal_package.id === selected?.id) && <div className='w-2 h-2 rounded-full  bg-primary' />} </div>
                <div className="flex flex-col">
                    <Label className="text-sm font-medium">  {meal_package.title}   </Label>
                </div>
            </div>
            {meal_package.is_variant ? <span className='text-sm'>varinat</span> : <div className="text-sm font-semibold">  {currency} {Number(meal_package.price).toLocaleString()}</div>}
        </Button>

        <DialogContent className="w-105 p-4 rounded-sm gap-4"  >

            <DialogHeader className="flex justify-start items-start">
                <div className="flex items-start gap-2 w-full">
                    <div className="">
                        <DialogTitle className="text-base">{meal_package.title}</DialogTitle>
                        <DialogDescription className="text-sm text-neutral-500">{meal_package.description}</DialogDescription>
                    </div>
                </div>
            </DialogHeader>

            {meal_package.is_variant &&
                <div className='space-y-2 gap-1'>
                    {
                        meal_package.variants.map((variant: any, index: number) => <div key={index} onClick={() => setSelectedVariant({ id: variant.id, title: variant.title, price: variant.price })} className="flex items-center justify-between border rounded-sm px-3 py-2 hover:bg-muted/40 transition"  >
                            {/* LEFT: radio + title */}
                            <div className="flex items-center gap-3">
                                <div className='w-4 h-4 flex justify-center items-center border rounded-full'>  {(selectedVariant?.id === variant.id) && <div className='w-2 h-2 rounded-full  bg-primary' />} </div>
                                <div className="flex flex-col"> <Label className="text-sm font-medium">  {variant.title}   </Label>   </div>
                            </div>
                            <div className="text-sm font-semibold">  {currency} {Number(variant.price).toLocaleString()}</div>
                        </div>)
                    }
                </div>
            }


            {meal_package.is_allow_select_days && <ItemDatesSelector stayDays={meal_package.available_dates} selectedDays={selectedDays} setSelectedDays={setSelectedDays} />}

            <DialogFooter>
                <Button type='button' variant='ghost' onClick={() => setOpen(false)}>Close</Button>
                <Button type='button' onClick={onClickSelect}>Select</Button>
            </DialogFooter>

        </DialogContent>
    </Dialog >
}


function RoomPriceSummary({ room, currency }: { room: RoomSelected, currency: string }) {

    const nights = room.room_daily_prices.length

    return <div className="space-y-3">

        <div className="flex items-center gap-2"><ReceiptText className="size-4" /><h4 className="text-sm font-medium">Room Price Summary  </h4> </div>

        <div className="space-y-3 text-sm">

            <div className="flex justify-between items-center">
                <p className=" text-muted-foreground"> Room Only  </p>
                <p>{currency} {calRoomOnlyTotal(room.room_daily_prices).toLocaleString()} </p>
            </div>
            {
                room.meal_package && <div className="flex justify-between items-center">
                    <p className=" text-muted-foreground"> Meal Package  </p>
                    <p>{currency} {calMealPackageTotal(room.meal_package, nights, room.adults + room.children).toLocaleString()} </p>
                </div>
            }

            <div className="flex justify-between items-center border-y py-2 font-medium">
                <p> Room Total </p>
                <p>{currency} {calRoomTotal(room, nights).toLocaleString()} </p>
            </div>
        </div>
    </div>
}

function BookingPriceSummary({ booking, onSubmit, processing, currency, price_adjustments, nights, setPriceAdujestment, setTotal }: BookingeSummeryProp) {


    const subTotal = calBookingSubTotal(booking)
    const adjs = useMemo(() => filterPriceAdjustment(price_adjustments, booking.rooms.length, nights, subTotal), [price_adjustments, booking.rooms.length, nights, subTotal])


    const total = calBookingTotal(booking)

    useEffect(() => {
        setPriceAdujestment(adjs)
    }, [adjs])

    useEffect(() => {
        setTotal(total)
    }, [total])


    return <div className="w-full space-y-4">

        <div className="flex items-center gap-2 text-sm font-medium   bg-muted/80 px-2 pt-1  border-b pb-1 "><Users className="w-4 h-4" />Booking Summary</div>


        <div className="space-y-3">

            {
                booking.rooms.map((room, index) => {
                    return <div key={index} className="flex items-center justify-between text-sm">
                        <span className="text-muted-foreground">Rooms ({room.room_number})</span>
                        <span>{currency} {calRoomTotal(room, nights).toLocaleString()}</span>
                    </div>
                })
            }

            <Separator />

            <div className="flex items-center justify-between text-sm">
                <span className="text-muted-foreground">Sub Total</span>
                <span>{currency} {subTotal.toLocaleString()}</span>
            </div>

            {
                adjs.map(item => {
                    const isDiscount = item.direction === 'subtract';

                    return (
                        <div key={item.id} className={`flex justify-between text-sm   ${isDiscount ? 'text-green-600' : 'text-muted-foreground'} `}  >
                            {/* Left side */}
                            <span className="flex items-center gap-1">
                                {item.name}
                                {item.value_type === 'percentage' && <span className="text-xs text-neutral-400">({Number(item.value)}%)</span>}
                                {item.value_type === 'fixed' && <span className="text-xs text-neutral-400">(fixed)</span>}
                            </span>

                            {/* Right side */}
                            <span className="font-medium">
                                {item.direction === 'add' ? '+' : '-'}{" "}
                                {Math.abs(calPriceAdjustment(item, calBookingSubTotal(booking)))}
                            </span>
                        </div>
                    );
                })
            }


            <div className={'justify-between items-end pt-3 flex flex-row border-t w-full ease-in'}>
                <div>
                    <p className="text-xs text-neutral-300">Booking Total</p>
                    <h2 className="text-lg font-bold flex gap-2 justify-start items-baseline-last ">
                        <span>{currency} {total.toLocaleString()}</span>
                        <span className="text-xs font-normal text-neutral-300"> / price</span>
                    </h2>
                </div>
                <Button disabled={processing} className={`cursor-pointer  px-5 h hover:scale-[1.005] active:scale-99 `} onClick={onSubmit} > {processing ? <><Spinner /> Please Wait</> : <><Save /> Create</>} </Button>
            </div >

        </div>

    </div >


}


export default function Booking({ categories, check_in, check_out, nights, allRoomMealPackages, system_currency, price_adjustments }: PageProp) {

    const [loadingRoom, setLoadingRoom] = useState(false)
    const { data, setData, post, processing, errors } = useForm<CheckoutBookingInput>({
        guest: {
            title: '',
            first_name: '',
            last_name: '',
            email: '',
            phone: '',
            passport: '',
            country: '',
            special_requests: '',
        },

        check_in: '',
        check_out: '',
        nights: 0,
        rooms: [],
        price_data: [],

        payment_option: 'pay_now',

        note: '',
        total_price: 0,
        base_currency: null,
        display_total_price: null,
        display_currency: null,
        exchange_rate: null,
        currency_rate_id: null,

    })

    function getRoomById(roomId: number) {
        for (const category of categories) {
            const room = category.rooms.find(r => r.id === roomId);
            if (room) {
                return {
                    roomData: room,
                    categoryData: category
                };
            }
        }
        return { roomData: null, categoryData: null };
    }

    const updateRoom = (index: number, field: keyof RoomSelected, value: any) => {
        const updated = [...data.rooms]
        updated[index] = {
            ...updated[index],
            [field]: value
        }
        setData('rooms', updated)
    }

    const toggleRoom = (room: RoomType, category: CategoryType) => {
        const exists = data.rooms.find((r) => r.room_id === room.id);

        const price = room.room_daily_prices?.[0]?.price ?? Number(room.price_override ?? 0);

        // REMOVE if already selected
        if (exists) {
            setData("rooms", data.rooms.filter((r) => r.room_id !== room.id));
            return;
        }

        // ADD if not selected
        setData("rooms", [
            ...data.rooms,
            {
                room_id: room.id,
                title: category.name,
                slug: category.slug,
                image_url: '',
                room_number: room.room_number,
                adults: 1,
                children: 0,
                meal_package: null,
                addons: [],
                room_daily_prices: room.room_daily_prices ?? [],
            },
        ]);

    };


    const submit = () => {
        console.log(data);

        if (data.rooms.length <= 0) {
            toast.error('At least one room required')
            return
        }

        post('/dashboard/bookings', {
            onSuccess: () => toast.success('Booking created successfully'),
            onError: () => toast.error('Something went wrong')
        })
    }

    const findRooms = () => {

        setLoadingRoom(true)

        router.get('/dashboard/bookings/create', { check_in: data.check_in, check_out: data.check_out }, {
            preserveScroll: true,

            onSuccess: () => { toast.success("Room Found") },

            onError: (errors) => {
                toast.error(Object.values(errors)[0] as string || "Failed to update booking");
            },

            onFinish: () => { setLoadingRoom(false); }
        })

    }


    const setPriceAdujestment = (adjs: BookingPriceAdjustmentType[]) => {
        const _adjs = adjs.map(item => ({
            id: item.id,
            type: item.type,
            name: item.name,
            description: item.description,
            value: item.value,
            value_type: item.value_type,
            direction: item.direction,
        }))
        setData('price_data', _adjs)
    }

    useEffect(() => {
        if (check_in && check_out) {
            setData(prev => ({
                ...prev,
                check_in,
                check_out,
                nights,
                base_currency: system_currency
            }))
        }
    }, [check_in, check_out, system_currency])

    return (
        <AppLayout breadcrumbs={[{ title: 'Booking Records', href: '/dashboard/bookings' }, { title: 'Create', href: '/dashboard/bookings/create' }]}>
            <Head title="Create Booking" />

            <IndexPageLayout title="Booking" path="/dashboard/bookings" mode="create" description="Create and manage hotel bookings with rooms, pricing, meal packages, addons, and guest information."   >


                <div className="flex flex-col xl:flex-row gap-4">

                    <div className="p-4 flex-1 space-y-6  bg-background/90 border rounded-sm">

                        <div className="space-y-4">
                            <div className="flex items-center gap-2 text-sm font-medium   bg-muted/80 px-2 pt-1  border-b pb-1 "><CalendarDays className="w-4 h-4" />Stay Information</div>

                            <div className=' border-l-4  pl-4'>


                                <div className="flex items-end gap-4">

                                    <DateInput label="Check In" value={data.check_in} onChange={(value) => setData('check_in', value)} error={errors.check_in} />
                                    <div className='rounded-sm px-2 py-1  mx-3 text-sm font-medium'>- {data.nights}N -</div>
                                    <DateInput label="Check Out" value={data.check_out} onChange={(value) => setData('check_out', value)} error={errors.check_out} />
                                    <Button type="button" onClick={findRooms}> {loadingRoom ? <Spinner /> : <BedDouble />}  Find Rooms </Button>
                                </div>

                                <div className="space-y-4">
                                    {categories.map((category: CategoryType) => {
                                        // Calculate category total (sum of available room prices)
                                        const availableRooms = category.rooms.filter(room => room.isAvailable);

                                        if (availableRooms.length === 0) return null; // Hide category if no rooms are available

                                        return (
                                            <div key={category.id} className="  text-card-foreground  overflow-hidden">

                                                {/* Category Header */}
                                                <div className="flex items-center justify-between  px-4 py-2 border-b">
                                                    <div className="flex items-center gap-2">
                                                        <h3 className="font-semibold text-sm tracking-tight text-foreground">
                                                            {category.name} ({availableRooms.length})
                                                        </h3>
                                                    </div>

                                                    <span className='text-xs'>{category.max_adults}A / {category.max_children}C </span>
                                                </div>

                                                {/* Room Rows */}
                                                <div className="divide-y divide-border">
                                                    {availableRooms.map(room => {
                                                        const price = room.room_daily_prices?.[0]?.price ?? Number(room.price_override ?? 0);

                                                        const isSelected = data.rooms.some(item => item.room_id === room.id)


                                                        return (
                                                            <div
                                                                key={room.id} className={`flex justify-between items-center px-4 py-2 cursor-pointer transition-all duration-200 select-none border-l-4${isSelected ? "bg-primary/5 border-l-primary" : "hover:bg-muted/50 border-l-transparent"}`} >
                                                                {/* Column 1: Checkbox & Room Number */}
                                                                <div className="col-span-2 flex items-center gap-3">
                                                                    <Checkbox checked={isSelected} onCheckedChange={() => toggleRoom(room, category)} className="transition-transform duration-150 active:scale-95" />
                                                                    <span className={`text-sm font-medium transition-colors ${isSelected ? "text-primary font-semibold" : "text-foreground"}`}>  Room #{room.room_number}  </span>
                                                                </div>
                                                                {/* Column 2: Floor Info */}
                                                                <div className="text-xs text-muted-foreground flex items-center"><span className="bg-muted px-2 py-1 rounded">Floor {room.floor}</span>  </div>
                                                                <div className="text-xs text-muted-foreground flex items-center">{room.view ?? '-'}  </div>
                                                                <div className="text-right text-sm font-semibold text-foreground">LKR {price.toLocaleString()}  </div>

                                                            </div>
                                                        );
                                                    })}
                                                </div>
                                            </div>
                                        );
                                    })}
                                </div>
                            </div>
                        </div>

                        <div className="space-y-4">
                            <div className="flex items-center gap-2 text-sm font-medium   bg-muted/80 px-2 pt-1  border-b pb-1 "><BedDouble className="w-4 h-4" /> Selected Rooms ({data.rooms.length})</div>


                            <div className="space-y-4  border-l-4  pl-4">
                                {
                                    data.rooms.map((room, index) => {

                                        const { roomData, categoryData } = getRoomById(room.room_id)

                                        if (!roomData || !categoryData) return

                                        const meal_packages: MealPackageType[] = [...roomData.meal_packages, ...categoryData.meal_packages, ...allRoomMealPackages,]

                                        return <div key={index} className="border shadow-none overflow-hidden py-0"   >

                                            {/* HEADER */}
                                            <div className="border-b bg-muted/30 px-4 py-3 flex items-center justify-between">
                                                <div className="flex items-center gap-3 text-sm">
                                                    <h3 className="font-medium">Room ({room.room_number}) </h3>
                                                </div>

                                                <span className="text-xs text-muted-foreground">  {new Date(data.check_in).toLocaleString('default', { day: '2-digit', month: 'short', year: 'numeric' })}  </span>
                                            </div>

                                            {/* BODY */}
                                            <div className="py-4">

                                                <div className="grid grid-cols-1 lg:grid-cols-2">

                                                    {/* LEFT SIDE - CONTROL PANEL */}
                                                    <div className="px-4 pb-4 space-y-6 border-r">

                                                        {/* Occupancy */}
                                                        <div className="space-y-2">

                                                            {/* <div className="flex items-center gap-2"> <Users className="size-4" /> <h4 className="text-sm font-medium">Occupancy </h4>  </div> */}

                                                            <div className="grid grid-cols-2 gap-3">
                                                                <InputField label={`Adults (${categoryData.max_adults})`} type="number" min={1} max={categoryData.max_adults} value={room.adults} onChange={(value) => updateRoom(index, 'adults', Number(value))} />
                                                                <InputField label={`Children (${categoryData.max_children})`} type="number" min={0} max={categoryData.max_children} value={room.children} onChange={(value) => updateRoom(index, 'children', Number(value))} />
                                                            </div>

                                                        </div>

                                                        {/* Meal Package */}
                                                        <div className="space-y-4">

                                                            <div className='flex justify-between'>
                                                                <div className="flex items-center gap-2"> <UtensilsCrossed className="size-4" />
                                                                    <h4 className="text-sm font-medium">  Meal Package  </h4>
                                                                </div>
                                                                <span onClick={() => updateRoom(index, "meal_package", null)} className='text-sm hover:underline cursor-pointer active:scale-95'>clear</span>
                                                            </div>

                                                            <div className='space-y-2' >
                                                                {meal_packages.map(meal => <MealPackageCard key={meal.id} currency={data.base_currency || ''} meal_package={meal} selected={room.meal_package} onSelect={(meal: MealPackageSelected) => updateRoom(index, "meal_package", meal)} />)}
                                                            </div>

                                                        </div>

                                                    </div>

                                                    {/* RIGHT SIDE - PRICING ENGINE */}
                                                    <div className="px-4 pb-4 space-y-6">

                                                        {/* DAILY PRICES */}
                                                        <div className="space-y-3">

                                                            <div className="flex items-center justify-between">
                                                                <h4 className="text-sm font-medium flex items-center gap-2">  <CalendarDays className="size-4" />  Daily Room Prices  </h4>
                                                                {/* <span className="text-xs text-muted-foreground">  {new Date(data.check_in).toLocaleString('default', { month: 'short', year: 'numeric' })}  </span> */}
                                                            </div>

                                                            {/* GRID BLOCKS */}
                                                            <div className="flex flex-wrap gap-2">

                                                                {room.room_daily_prices.map((item, i) => {

                                                                    const day = new Date(item.date).getDate()
                                                                    const month = new Date(item.date).toLocaleString('default', { month: 'short' })

                                                                    return (
                                                                        <div key={i} className="border rounded-sm px-3 py-1.5 bg-background hover:bg-muted/40 transition flex flex-col text-center "   >
                                                                            <span className="text-xs text-muted-foreground">  {month}  {day} </span>
                                                                            <div className="text-sm font-bold"> {item.price}   </div>
                                                                        </div>
                                                                    )
                                                                })}

                                                            </div>

                                                        </div>
                                                        {/* TOTALS */}
                                                        <RoomPriceSummary room={room} currency={data.base_currency || ''} />


                                                    </div>

                                                </div>

                                            </div>

                                        </div>
                                    })
                                }

                            </div>
                        </div>

                        <div className="space-y-4">
                            <div className="flex items-center gap-2 text-sm font-medium   bg-muted/80 px-2 pt-1  border-b pb-1 "><Users className="w-4 h-4" />  Guest Information</div>


                            <div className="space-y-4 border-l-4  pl-4">

                                <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
                                    <InputField label="First Name" value={data.guest.first_name} onChange={(value) => setData('guest', { ...data.guest, first_name: value })} error={errors['guest.first_name']} />
                                    <InputField label="Last Name" value={data.guest.last_name} onChange={(value) => setData('guest', { ...data.guest, last_name: value })} error={errors['guest.last_name']} />
                                    <InputField label="Email" value={data.guest.email} onChange={(value) => setData('guest', { ...data.guest, email: value })} error={errors['guest.email']} />
                                    <InputField label="Phone" value={data.guest.phone} onChange={(value) => setData('guest', { ...data.guest, phone: value })} error={errors['guest.phone']} />
                                    <InputField label="Passport" value={data.guest.passport} onChange={(value) => setData('guest', { ...data.guest, passport: value })} error={errors['guest.passport']} />
                                    <CountrySelector label="Country" value={data.guest.country} onChange={value => setData('guest', { ...data.guest, country: value })} classNameField='rounded-sm shadow-none' error={errors['guest.country']} />
                                </div>

                                <TextAreaField label="Special Requests" value={data.guest.special_requests} onChange={(value) => setData('guest', { ...data.guest, special_requests: value })} placeholder="Guest notes for booking" />

                            </div>
                        </div>

                    </div>

                    <div className='w-full xl:w-90 space-y-4 '>
                        <div className=" space-y-6 rounded-sm bg-card h-fit p-4 border">

                            <div className="space-y-4 ">

                                <div className="flex items-center gap-2 text-sm font-medium   bg-muted/80 px-2 pt-1  border-b pb-1 "><CreditCard className="w-4 h-4" />Payment Details</div>


                                <div className='space-y-2'>
                                    <Label>Payment Option</Label>

                                    <Select value={data.payment_option} onValueChange={(value: string) => setData('payment_option', value)}   >
                                        <SelectTrigger className="w-full">
                                            <SelectValue placeholder="Select payment option" />
                                        </SelectTrigger>

                                        <SelectContent>
                                            <SelectItem value="pay_now">   Pay Now </SelectItem>
                                            <SelectItem value="pay_at_hotel">   Pay At Hotel </SelectItem>
                                        </SelectContent>
                                    </Select>
                                </div>
                                <TextAreaField label="Notes / Message" value={data.note} onChange={(value) => setData('note', value)} placeholder="Notes for booking" />
                            </div>
                            <BookingPriceSummary booking={data} onSubmit={submit} processing={processing} currency={data.base_currency || ''} price_adjustments={price_adjustments} nights={nights} setPriceAdujestment={setPriceAdujestment} setTotal={value => setData('total_price', value)} />
                        </div>

                        <FormErrors errors={errors} />
                    </div>

                </div>


            </IndexPageLayout>
        </AppLayout >
    )
}
