

import { usePage } from '@inertiajs/react';
import { Badge } from '@/components/ui/badge';
import { useMemo, useState } from 'react';
import { TablePagination } from '@/components/core/TablePagination';

export default function BookingTable({ selected, setSelected }: any) {


    const { bookings } = usePage().props as any;


    const [search, setSearch] = useState('');

    const { data } = bookings;

    const filtered = useMemo(() => {
        return data.filter((b: any) =>
            b.reference.toLowerCase().includes(search.toLowerCase()) ||
            b.guest?.first_name.toLowerCase().includes(search.toLowerCase())
        );
    }, [data, search]);




    return <div className="min-w-48 max-w-md 2xl:max-w-lg w-full border h-fit rounded-sm flex flex-col bg-background overflow-hidden pb-4">

        {/* HEADER */}
        <div className="border-b bg-muted/20">

            <div className="p-3 flex items-center justify-between gap-3">

                <div>
                    <h2 className="text-sm font-semibold tracking-tight">
                        Booking Records
                    </h2>

                    <p className="text-xs text-muted-foreground mt-0.5">
                        {filtered.length} reservations
                    </p>
                </div>

                {/* <div className="flex items-center gap-2">
                    <select className="h-8 border rounded-sm px-2 text-xs bg-background">
                        <option>All Status</option>
                        <option>Confirmed</option>
                        <option>Pending</option>
                        <option>Cancelled</option>
                    </select>

                    <select className="h-8 border rounded-sm px-2 text-xs bg-background">
                        <option>Newest</option>
                        <option>Oldest</option>
                        <option>Check-in</option>
                    </select>
                </div> */}

            </div>

            {/* <div className="px-3 pb-3">
                <Input
                    placeholder="Search by booking reference, guest or email..."
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                    className="h-9"
                />
            </div> */}

        </div>

        {/* LIST */}
        <div className="flex-1 overflow-auto">

            {filtered.map((b: any) => {

                const nights =
                    (new Date(b.check_out).getTime() -
                        new Date(b.check_in).getTime()) /
                    (1000 * 60 * 60 * 24);

                return (
                    <button key={b.id} onClick={() => setSelected(b)} className={`w-full text-left px-4 py-2.5 border-b transition    hover:bg-muted/30    ${selected?.id === b.id ? 'bg-muted/50 border-l-[3px] border-l-primary' : ''}  `}>

                        {/* TOP */}
                        <div className="flex items-start justify-between gap-4">

                            {/* LEFT */}
                            <div className="min-w-0 flex-1">

                                <div className="flex items-center gap-2">

                                    <p className="font-medium text-sm tracking-tight">
                                        {b.reference}
                                    </p>

                                    <Badge
                                        variant={
                                            b.status === 'booked'
                                                ? 'default'
                                                : b.status === 'pending'
                                                    ? 'secondary'
                                                    : 'outline'
                                        }
                                        className="capitalize h-4 text-[9px] px-1.5"
                                    >
                                        {b.status}
                                    </Badge>

                                </div>

                                <div className="mt-0.5 text-sm truncate">
                                    {b.guest?.first_name} {b.guest?.last_name}
                                </div>

                                <div className="text-[11px] text-muted-foreground truncate">
                                    {b.guest?.email}
                                </div>

                            </div>

                            {/* RIGHT */}
                            <div className="shrink-0 flex flex-col items-end justify-between gap-2">

                                {/* PRICE */}
                                <div className="text-right">

                                    <div className="font-semibold text-sm tracking-tight">{b.base_currency} {Number(b.total_price).toLocaleString()}  </div>

                                    <div className="text-[10px] text-muted-foreground">Total Amount </div>

                                </div>

                                {/* STAY INFO */}
                                <div className="flex items-center gap-1.5 text-[11px]">
                                    <div className="px-2 py-0.5 rounded-md border bg-muted/40 text-muted-foreground">  {b.check_in}  </div>
                                    <div className="text-muted-foreground">  →  </div>
                                    <div className="px-1.5 py-0.5 rounded-full border bg-primary/5 text-primary text-[10px] font-medium">  {nights}N  </div>
                                    <div className="text-muted-foreground">  →  </div>
                                    <div className="px-2 py-0.5 rounded-md border bg-muted/40 text-muted-foreground">  {b.check_out}  </div>
                                </div>

                            </div>

                        </div>


                    </button>
                );
            })}

        </div>

        {/* FOOTER */}
        <TablePagination links={bookings.links} meta={bookings} />

    </div>
}
