import { Head, usePage } from '@inertiajs/react';
import AppLayout from '@/layouts/app-layout';
import type { BreadcrumbItem } from '@/types';
import IndexPageLayout from '@/components/core/IndexPageLayout';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Card, CardContent, CardFooter } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { BedDouble, CirclePlus } from 'lucide-react';
import LinkButton, { EditButton, ViewButton } from '@/components/core/LinkButton';
import { DeleteButton } from '@/components/core/DeleteButton';
import { SystemCurrencyType } from '@/types/dashboard/currency';

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Rooms',
        href: 'dashboard/rooms',
    },
];

type Room = {
    id: number;
    room_number: string;

    price_override: number;
    is_published: boolean;

    room_category_name: string;
};


interface RoomsPageProps {
    rooms: Room[];
    system_currency: SystemCurrencyType
}

export default function Index({ rooms, system_currency }: RoomsPageProps) {


    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Rooms" />
            <IndexPageLayout title='Rooms' path='/dashboard/rooms' add description='Manage hotel rooms with pricing, images, availability, and room details. Organize and update rooms to provide a smooth booking experience for customers.' >
                <>

                    <Card className='py-4 rounded-sm shadow-none gap-2'>
                        <CardContent className='px-4'>

                            {rooms.length === 0 ? (
                                <div className="flex flex-col items-center justify-center py-16 text-center space-y-4">
                                    <div className="p-4 rounded-full bg-muted">
                                        <BedDouble className="w-10 h-10 text-primary" />
                                    </div>

                                    <div className="space-y-1">
                                        <h3 className="text-lg font-semibold">No Rooms Yet</h3>
                                        <p className="text-sm text-muted-foreground max-w-sm">
                                            You haven’t added any rooms to your hotel. Start by creating your first room to manage pricing and availability.
                                        </p>
                                    </div>

                                    <LinkButton className='bg-primary hover:bg-primary hover:text-white text-white' href='/dashboard/rooms/create' ><CirclePlus className=" h-4 w-4" /> Add First Room </LinkButton>
                                </div>
                            ) : (
                                <Table>
                                    <TableHeader>
                                        <TableRow>
                                            <TableHead className="w-8">#</TableHead>
                                            <TableHead >Room Number</TableHead>
                                            <TableHead >Cateogry</TableHead>
                                            <TableHead>Published</TableHead>
                                            <TableHead >Price</TableHead>
                                            <TableHead className="text-right">Action</TableHead>
                                        </TableRow>
                                    </TableHeader>
                                    <TableBody>
                                        {rooms.map((room) => (
                                            <TableRow key={room.id}>
                                                <TableCell >{room.id}</TableCell>
                                                <TableCell >{room.room_number}</TableCell>
                                                <TableCell >{room.room_category_name}</TableCell>
                                                <TableCell ><Badge variant={room.is_published ? 'default' : 'outline'}>{room.is_published ? ' published' : 'Hide'}</Badge></TableCell>
                                                <TableCell > {Number(room.price_override) > 0 ? <>{system_currency} {Number(room.price_override).toLocaleString()}</> : '-'}</TableCell>
                                                <TableCell className=" flex gap-2 justify-end items-center">
                                                    <ViewButton path='/dashboard/rooms' id={room.id} />
                                                    <EditButton path='/dashboard/rooms' id={room.id} />
                                                    <DeleteButton deleteId={room.id} model='rooms' title={`Room #${room.id}`} />
                                                </TableCell>
                                            </TableRow>
                                        ))}
                                    </TableBody>
                                </Table>
                            )}
                        </CardContent>
                        <CardFooter>
                            {/* <TablePagination page={2} take={5} total={10} onPageChange={() => { }} onTakeChange={() => { }} /> */}
                        </CardFooter>
                    </Card>
                </>

            </IndexPageLayout>
        </AppLayout >
    );
}
