import { Head } from '@inertiajs/react';
import AppLayout from '@/layouts/app-layout';
import IndexPageLayout from '@/components/core/IndexPageLayout';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import BookingCalendar from './BookingCalendar';
import RoomAvailability from './RoomAvailability';


export default function Index() {

    const getCellStyle = (status: string) => {

        switch (status) {

            case 'booked':
                return 'bg-red-500/15 text-red-700 border-red-500/20';

            case 'pending':
                return 'bg-amber-500/15 text-amber-700 border-amber-500/20';

            case 'blocked':
                return 'bg-slate-800 text-white border-slate-700';

            default:
                return 'bg-emerald-500/10 text-emerald-700 border-emerald-500/20';
        }
    };

    return (
        <AppLayout breadcrumbs={[{ title: 'Booking Calendar', href: '/dashboard/booking-calendar' }]}>

            <Head title="Booking Calendar" />

            <IndexPageLayout
                title="Booking Calendar"
                path="/dashboard/booking-calendar"
                description="Manage room availability, reservations, blocked dates, and occupancy schedules through an organized room calendar interface."
            >

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

                    <BookingCalendar />

                    {/* Bottom Action Panel */}
                    {/* <div className="grid lg:grid-cols-3 gap-4">

                        <Card className="shadow-none border-border/60 p-0  rounded-sm">
                            <CardContent className="p-4 space-y-2">

                                <p className="text-[11px] uppercase tracking-wide text-muted-foreground">
                                    Add Booking Block
                                </p>

                                <p className="text-sm text-foreground leading-relaxed">
                                    Block rooms for maintenance, cleaning schedules, or private reservations.
                                </p>

                                <Button size="sm" variant="outline" className="mt-2 h-8 text-xs">
                                    Create Block
                                </Button>
                            </CardContent>
                        </Card>

                        <Card className="shadow-none border-border/60 p-0  rounded-sm">
                            <CardContent className="p-4 space-y-2">

                                <p className="text-[11px] uppercase tracking-wide text-muted-foreground">
                                    Manual Reservation
                                </p>

                                <p className="text-sm text-foreground leading-relaxed">
                                    Add walk-in guests or external reservations directly into availability records.
                                </p>

                                <Button size="sm" variant="outline" className="mt-2 h-8 text-xs">
                                    Add Reservation
                                </Button>
                            </CardContent>
                        </Card>

                        <Card className="shadow-none border-border/60 p-0  rounded-sm">
                            <CardContent className="p-4 space-y-2">

                                <p className="text-[11px] uppercase tracking-wide text-muted-foreground">
                                    Edit Availability
                                </p>

                                <p className="text-sm text-foreground leading-relaxed">
                                    Update room status, edit occupancy dates, or manage channel availability.
                                </p>

                                <Button size="sm" variant="outline" className="mt-2 h-8 text-xs">
                                    Manage
                                </Button>
                            </CardContent>
                        </Card>
                    </div> */}
                    <RoomAvailability />
                </div>
            </IndexPageLayout>
        </AppLayout>
    );
}