"use client"

import { ClockIcon, CalendarIcon, MapPinIcon, CheckCircleIcon, PencilSquareIcon, TrashIcon, ShoppingCartIcon } from "@heroicons/react/24/outline"
import axios from "axios";
import { format, toDate } from "date-fns"
import React, { useState, useEffect } from "react"
import type { CartItem, TicketType } from "@/lib/types";
import type { Events } from "@prisma/client"
import { redirect, useRouter } from "next/navigation";
import placeholder from "@/public/placeholder.svg"
import Link from "next/link";
import { useAppStore } from "@/lib/store";
import { useFormatter, useTranslations } from 'next-intl';
import Basket from "@/components/CartItem";
import { CREATE_TTYPE, EVENT_UPD, TICKET_BUY, TICKET_GET, TTYPE_UPD, USER_INFO_ROUTE } from "@/routes/routes";
import Navigation from "@/components/Navigation";

export default function event({ params }: { params: Promise<{ id: string }> }){ 
    // const f = useFormatter();
    // const t = useTranslations()
    const [event, setEvent] = useState<Events | null>(null)
    const [selectedTType, setSelectedTType] = useState<string>("")
    const [qty, setQty] = useState(0)
    const router = useRouter()
    const [success, setSuccess] = useState(false)
    const [cartOpen, setCartOpen] = useState(false)
    
    const [total, setTotal] = useState<number>(0)
    const [tax, setTax] = useState<number>(0)
    const [title, setTitle] = useState("")
    const [loc, setLoc] = useState("")
    const [date, setDate] = useState("")
    const [image, setImage] = useState("")
    const [editEvent, setEditEvent] = useState(false)
    const [etType, setETtype] = useState<TicketType[]>([])

    const { events, tTypes, cart, user, addToCart, setCart, setTickets, setUser } = useAppStore()

    const { id } = React.use(params);

    useEffect(() => {
        const idCheck = events.find(event => event.id === id)

        if(idCheck){
            setEvent(idCheck)
        }
    })

    const filteredTickets = tTypes.filter(tType => tType.eventId === id)

    useEffect(() => {
        const fun = async() => {
            if(!user){
                await axios.get(USER_INFO_ROUTE, { withCredentials: true })
                .then((res) => {
                    setUser(res.data)
                })
                .catch((err) => {
                    router.replace("/")
                })
            }
        }
        fun();
    },[user, setUser, router])

    console.log(user)

    const handleEdit = async() => {
        if(!event) return

        if(event.title !== title){
            
        }

        if(event.location !== loc){

        }

        const inputDate = new Date(date)
        inputDate.setHours(inputDate.getHours() + 3);

        const localTime = inputDate.toISOString()
        const originalDate = new Date(event.date).toISOString();

        if(originalDate !== localTime){

        }

        if(event.image !== image){

        }

        await axios.post(EVENT_UPD, { withCreditentials : true })
        .then(() => {
            // for(){// all etType
            //     if(){ //etType[i] === //tType[i]
            //         axios.post(TTYPE_UPD, {}, { withCredentials: true })
            //     }else{
            //         axios.post(CREATE_TTYPE, {}, { withCredentials: true })
            //     }
                
            // }

        })
        
    }

    const generateTicketNr = (length = 15) => {
        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        let ticketNr = '';
        for (let i = 0; i < length; i++) {
            ticketNr += chars.charAt(Math.floor(Math.random() * chars.length));
        }
        return ticketNr;
    }

    const payment = async() => {
        console.log("Button clicked")
        for(const tt of cart ){
            for(let i = 0; i < tt.quantity; i++){
                await axios.post(TICKET_BUY, {ticketnr:generateTicketNr(), userId:user?.id, eventId:tt.eventId, ttypeId:tt.id}, { withCredentials: true })
            }
        }
        axios.get(TICKET_GET, { withCredentials: true })
        .then((res) => {
            setTickets(res.data)
        })
        setCart([])
    }

    const handleAddTicket = () => {
        setETtype([...etType, { id: "", eventId: "", name: '', price: 0, qty: 0}])
        console.log(etType)
    }
    
    const handleDeleteTicket = (i: number) => {
        const newTickets = [...etType]
        newTickets.splice(i, 1)
        setETtype(newTickets)
    }
    
    const handleChange = (i:number, f: keyof TicketType, v: string | number) => {
        const newTickets = [...etType]
        newTickets[i][f] = v as never
        setETtype(newTickets)
    }

    const handleAddCart = (t:any) => {
        const event = events.find((e) => e.id === t.eventId)

        if(!event) return

        const cartItem: CartItem = {
            id: t.id,
            title: t.name,
            price: t.price,
            quantity: 1,
            eventId: t.eventId,
            event: {
                id: event.id,
                title: event.title
            },
        }
        console.log("added: ", cartItem)
        console.log("Cart: ", cart)
        addToCart(cartItem)
    }

    const openEditor = () => {
        if(!event) return

        const isoToLocalInput = (iso: Date) => {
            const date = new Date(iso);
            return date.toISOString().slice(0, 16); // "YYYY-MM-DDTHH:mm"
        };

        setTitle(event.title)
        setLoc(event.location)
        setDate(isoToLocalInput(event.date))
        setImage(event.image)
        setETtype(filteredTickets)

        setEditEvent(true)
    }

    useEffect(() => {
        const totalValue = cart.reduce((s, i) => s + i.price * i.quantity, 0)
        const taxValue = totalValue * 0.21 

        setTotal(totalValue)
        setTax(taxValue)
        console.log("Cart: ", cart)

    }, [cart])
    
    
    if(!event){
        return(
            <div className="h-screen px-5 flex flex-col items-center justify-center">
                <h1 className="text-2xl font-bold mb-2">Event not Found</h1>
                <p className="text-neutral-500 text-center mb-6">The event you're looking for doesn't exist or has been removed.</p>
                <Link href={'/events'} className="h-10 px-4 flex items-center justify-center rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 transition-colors cursor-pointer">Back to events</Link>
            </div>
        )
    }

    const tdb = new Date(event.date);
    tdb.setDate(tdb.getDate() - 3);

    const less3day = new Date() >= tdb;

    return(
        <div className="min-h-screen flex flex-col">
            <Navigation />
            <div className="w-full px-5 sm:px-10 py-8 sm:py-4 grid gap-8 md:grid-cols-3 grow ">
                <div className="flex flex-col md:col-span-2">
                    <div className="w-full max-w-[900px] max-h-[507px] aspect-video bg-cover bg-center rounded-lg mb-6" style={{backgroundImage: `url(${event.image?.trim() ? event.image : placeholder.src})`}}/>
                    <div className="flex items-center justify-between">
                        <h1 className="mb-4 text-3xl font-bold">{event.title}</h1>
                        {(user?.role === 1 && less3day ) && (
                            <button className="h-10 px-2.5 py-2 flex items-center gap-2 text-sm font-semibold border border-neutral-200 hover:bg-neutral-200 rounded-lg transition-colors cursor-pointer" onClick={() => openEditor()}>
                                <PencilSquareIcon className="size-4" /> Edit Event
                            </button>
                        )}
                    </div>
                    <div className="flex gap-4 mb-6">
                        <div className="flex items-center gap-2 text-sm text-neutral-500">
                            <CalendarIcon className="size-4"/>
                            <span>{format(new Date(event.date), "MMMM dd, yyyy")}</span>
                        </div>
                        <div className="flex items-center gap-2 text-sm text-neutral-500">
                            <ClockIcon className="size-4"/>
                            <span>{format(new Date(event.date), "HH:mm")}</span>
                        </div>
                        <div className="flex items-center gap-2 text-sm text-neutral-500">
                            <MapPinIcon className="size-4"/>
                            <span>{event.location}</span>
                        </div>
                    </div>
                    <div className="px-3 py-4 sm:p-6 border border-neutral-200 rounded-md mb-4 sm:mb-0">
                        {filteredTickets.length > 0 ? (
                            <div className="flex flex-col gap-y-6">
                                <h1 className="text-2xl font-semibold tracking-tight">Tickets</h1>
                                <div className="flex flex-col gap-2">
                                    {filteredTickets.map((t) => (
                                        <div key={t.id} className="p-6 border border-neutral-200 rounded-lg">
                                            <div className="flex items-center justify-between">
                                                <h1>{t.name}</h1>
                                                <div className="flex gap-2">
                                                    <p className="flex items-center">{t.price.toFixed(2)}Eur</p>
                                                    <button className="h-10 px-2.5 flex items-center gap-2 rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 transition-colors cursor-pointer" onClick={() => handleAddCart(t)}>
                                                        <ShoppingCartIcon className="size-4"/> Add to basket
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        ):(
                            <p className="text-center py-4 text-neutral-500">No tickets available for this event yet.</p>
                        )}
                    </div>
                    <input type="button" value="Pay" className="w-full block sm:hidden font-semibold py-2 text-white bg-blue-600 sm:hover:bg-blue-700 rounded-lg transition-colors cursor-pointer" onClick={() => setCartOpen(true)}/>
                </div>
                <div className={`w-full h-full px-3 py-4 sm:p-6 flex flex-col border fixed left-0 top-0 sm:static border-neutral-200 rounded-md transition-all duration-300 ${cartOpen? "translate-y-0" : "translate-y-full"} sm:translate-y-0 bg-white`}>
                    <div className="w-full h-full flex flex-col">
                        <div className="flex items-center justify-between border-b border-neutral-200 px-4 sm:px-0 pb-4">
                            <h1 className="text-xl font-semibold tracking-tight ">Cart</h1>
                            <p className="block sm:hidden text-xl tracking-tight cursor-pointer" onClick={() => setCartOpen(false)}>X</p>
                        </div>
                        {cart.length > 0? (
                            <div className="flex flex-col grow justify-between">
                                <Basket />
                                <div className="space-y-4 pt-4 border-t border-neutral-200">
                                    <div className="space-y-2">
                                        <div className="flex gap-2">
                                            <h1 className="text-neutral-500">Total:</h1>
                                            <h1>{total.toFixed(2)}</h1>
                                        </div>
                                        <div className="flex gap-2">
                                            <h1 className="text-neutral-500">VAT:</h1>
                                            <h1>{tax.toFixed(2)}</h1>
                                        </div>
                                        <div className="flex gap-2">
                                            <h1 className="text-neutral-500">Without VAT:</h1>
                                            <h1>{(total-tax).toFixed(2)}</h1>
                                        </div>
                                        <input type="button" value={`Pay ${total.toFixed(2)} €`} className="w-full h-10 rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 transition-colors cursor-pointer" onClick={() => payment()}/>
                                    </div>
                                </div>
                            </div>
                        ):(
                            <div className="flex grow items-center justify-center">
                                <p className="py-4 text-neutral-500">No tickets selected.</p>
                            </div>
                        )}
                    </div>
                </div>
            </div>
            <div className={`min-h-screen w-screen p-4 flex items-end sm:items-center justify-center sm:justify-end fixed left-0 top-0 bg-black/80 transition-all duration-300 ${editEvent ? "translate-y-0 sm:translate-x-0" : "translate-y-full sm:translate-y-0 sm:translate-x-full"} z-60`}>
                <div className="w-full max-w-md p-6 flex flex-col bg-white rounded-lg">
                    <div className="flex items-center justify-between mb-6">
                        <h1 className="text-xl font-semibold tracking-tight">Edit event</h1>
                        <p className="py-1 px-2 border border-neutral-200 rounded-md cursor-pointer" onClick={() => setEditEvent(false)}>X</p>
                    </div>
                    <form onSubmit={handleEdit} className="flex flex-col gap-4 mb-4">
                        <div>
                            <span className="text-sm font-medium leading-none">Title</span>
                            <input type="text" className="w-full px-3 py-2 mt-2 outline-none border border-neutral-200 rounded-md" value={title} onChange={(e) => setTitle(e.target.value)}/>
                        </div>
                        <div>
                            <span className="text-sm font-medium leading-none">Location</span>
                            <input type="text" className="w-full px-3 py-2 mt-2 outline-none border border-neutral-200 rounded-md" value={loc} onChange={(e) => setLoc(e.target.value)}/>
                        </div>
                        <div>
                            <span className="text-sm font-medium leading-none">Date</span>
                            <input type="datetime-local" className="w-full px-3 py-2 mt-2 outline-none border border-neutral-200 rounded-md" value={date} onChange={(e) => setDate(e.target.value)}/>
                        </div>
                        <div>
                            <span className="text-sm font-medium leading-none">Image</span>
                            <input type="text" className="w-full px-3 py-2 mt-2 outline-none border border-neutral-200 rounded-md" value={image} onChange={(e) => setImage(e.target.value)}/>
                        </div>
                        <div>
                            <div className="flex items-center justify-between">
                                <span className="text-sm font-medium leading-none">Ticket types</span>
                                <p className="py-1 px-2 border border-neutral-200 rounded-md cursor-pointer" onClick={() => handleAddTicket()}>+</p>
                            </div>
                            <div className="w-full h-60 sm:h-80 px-3 mt-2 border border-neutral-200 rounded-md overflow-hidden">
                                {etType.length > 0 && (  
                                    <table className="w-full border-collapse">
                                        <thead>
                                            <tr>
                                                <th className="pr-1.5 py-2 text-sm font-semibold text-left">Name</th>
                                                <th className="pr-1.5 py-2 text-sm font-semibold text-left">Price</th>
                                                <th className="pr-1.5 py-2 text-sm font-semibold text-left">Qty</th>
                                                <th className="pr-1.5 py-2 text-sm font-semibold text-left"></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {etType.map((t, i) => (
                                                <tr key={i} className="border-b border-neutral-200 first:border-t">
                                                    <td className="pr-1.5 py-2">
                                                        <input type="text" className="w-full px-3 py-2 outline-none border border-neutral-200 rounded-md" value={t.name} onChange={(e) => handleChange(i, 'name', e.target.value)}/>
                                                    </td>
                                                    <td className="pr-1.5 py-2">
                                                        <input type="number" inputMode="numeric" min={0} className="w-full px-3 py-2 outline-none border border-neutral-200 rounded-md" value={t.price} onChange={(e) => handleChange(i, 'price', e.target.value)}/>
                                                    </td>
                                                    <td className="pr-1.5 py-2">
                                                        <input type="number" inputMode="numeric" min={0} className="w-full px-3 py-2 outline-none border border-neutral-200 rounded-md" value={t.qty} onChange={(e) => handleChange(i, 'qty', e.target.value)}/>
                                                    </td>
                                                    <td className="pr-1.5 py-2">
                                                        <TrashIcon className="size-5 hover:stroke-red-500 cursor-pointer transition-colors" onClick={() => handleDeleteTicket(i)}/>
                                                    </td>
                                                </tr>
                                            ))}
                                        </tbody>
                                    </table>
                                )}
                            </div>
                        </div>
                        <input type="submit" className="h-10 rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 transition-colors cursor-pointer" value="Update" />
                    </form>
                </div>
            </div>
            <div className={`h-screen w-screen p-4 flex flex-col items-center justify-center fixed left-0 top-0 bg-white transition-all duration-300 ${success ? "translate-x-0" : "translate-x-full"} z-60`}>
                <CheckCircleIcon className="size-32 mb-5"/>
                <h1 className="text-3xl font-bold tracking-tight mb-4">Payment Success</h1>
                <p className="text-sm font-semibold tracking-tight mb-4">Bought: </p>
                <input type="button" value="Close" className="w-full font-semibold py-2 text-white bg-blue-600 sm:hover:bg-blue-700 rounded-lg transition-colors cursor-pointer mb-4" onClick={() => setSuccess(false)}/>
            </div>
        </div>
    )
}