import { Head } 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 { CirclePlus, Puzzle } from 'lucide-react';
import { DeleteButton } from '@/components/core/DeleteButton';
import LinkButton, { EditButton, ViewButton } from '@/components/core/LinkButton';
import { RoomCategoriesRef } from '@/types/room';
import { SystemCurrencyType } from '@/types/dashboard/currency';

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Room Categories',
        href: '/dashboard/room-categories',
    },
];

interface PageProps {
    room_categories: RoomCategoriesRef[],
    system_currency: SystemCurrencyType
}



export default function Index({ room_categories, system_currency }: PageProps) {

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Room Categories" />
            <IndexPageLayout title='Room Categories' path='/dashboard/room-categories' add description='Manage and organize your room categories from one place. Create category types like Deluxe, Family, Suite, or Budget rooms, add descriptions and, control visibility, and keep your hotel rooms neatly structured for bookings and search filters.'>
                <>

                    <Card className='py-4 rounded-sm shadow-none gap-2'>
                        <CardContent className='px-4'>
                            {room_categories.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"> <Puzzle className="w-10 h-10 text-primary" /> </div>

                                    <div className="space-y-1">
                                        <h3 className="text-lg font-semibold">No Room Categories Yet</h3>
                                        <p className="text-sm text-muted-foreground max-w-sm">
                                            Add categories like Deluxe, Standard, Suite, or Family to organize your rooms better and make it easier for guests to choose.
                                        </p>
                                    </div>
                                    <LinkButton className='bg-primary hover:bg-primary hover:text-white text-white' href='/dashboard/room-categories/create' ><CirclePlus className=" h-4 w-4" /> Add First Room Category</LinkButton>
                                </div>
                                :
                                <Table>
                                    <TableHeader>
                                        <TableRow >
                                            <TableHead>Order</TableHead>
                                            <TableHead>Name</TableHead>
                                            <TableHead>Slug</TableHead>
                                            <TableHead>Price</TableHead>
                                            <TableHead >Updated At</TableHead>
                                            <TableHead className="text-right">Action</TableHead>
                                        </TableRow>
                                    </TableHeader>
                                    <TableBody>
                                        {room_categories.map((item) => (
                                            <TableRow key={item.id}>
                                                <TableCell  >{item.sort_order}</TableCell>
                                                <TableCell >{item.name}</TableCell>
                                                <TableCell >{item.slug}</TableCell>
                                                <TableCell > {Number(item.base_price) > 0 ? <>{system_currency} {Number(item.base_price).toLocaleString()}</> : '-'}</TableCell>
                                                <TableCell >{new Date(item.updated_at || '').toLocaleDateString()}</TableCell>
                                                <TableCell className=" flex gap-2 justify-end items-center">
                                                    <ViewButton path='/dashboard/room-categories' id={item.id} />
                                                    <EditButton path='/dashboard/room-categories' id={item.id} />
                                                    <DeleteButton deleteId={item.id} model='room-categories' title='Room Categories' />
                                                </TableCell>
                                            </TableRow>
                                        ))}

                                    </TableBody>
                                </Table>
                            }
                        </CardContent>
                        <CardFooter>
                        </CardFooter>
                    </Card>
                </>



            </IndexPageLayout>
        </AppLayout >
    );
}
