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 { TablePagination } from '@/components/core/TablePagination';
import { Button } from '@/components/ui/button';
import { CirclePlus, DollarSign, Eye, SquarePen } from 'lucide-react';
import { DeleteAlertButton } from '@/components/core/DeleteAlertButton';
import { useState } from 'react';
import { PriceModifier, RoomCategoryItem, RoomItem } from '@/types/price-modifire';
import PriceModifierMaker from './PriceModifireMaker';
import { DeleteButton } from '@/components/core/DeleteButton';

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Price Modifiers',
        href: '/dashboard/price-modifiers',
    },
];

type PaginationLinkType = {
    url: string | null;
    label: string;
    active: boolean;
};

interface PriceModifierPageProps {
    modifiers: {
        data: PriceModifier[];
        links: PaginationLinkType[];
        path: string;
        current_page: number;
        last_page: number;
        per_page: number;
        total: number;
        categories: number[],
        rooms: number[]
    };
    roomCategories: RoomCategoryItem[];
    rooms: RoomItem[];
}

export default function PriceModifierIndex({ modifiers, roomCategories, rooms }: PriceModifierPageProps) {
    const [openMaker, setOpenMaker] = useState(false);
    const [modifier, setModifier] = useState<PriceModifier | null>(null);
    const [view, setView] = useState<boolean>(false);

    const { data, links, current_page, last_page, per_page, total, path } = modifiers;
    const meta = { current_page, last_page, per_page, total, path };

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Price Modifiers" />
            <IndexPageLayout
                title="Price Modifiers"
                description='Add modifiers like weekday/weekend adjustments, holiday pricing, or custom discounts to your room rates.'
                path="/dashboard/price-modifiers"
                headerButtons={<PriceModifierMaker modifier={modifier} setModifier={setModifier} open={openMaker} setOpen={setOpenMaker} roomCategories={roomCategories} rooms={rooms} view={view} />}
            >

                <Card className="py-4 rounded-sm shadow-none gap-2">
                    <CardContent className="px-4">
                        {data.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">
                                    <DollarSign className="w-10 h-10 text-primary" />
                                </div>
                                <div className="space-y-1">
                                    <h3 className="text-lg font-semibold">No Price Modifiers Yet</h3>
                                    <p className="text-sm text-muted-foreground max-w-sm">
                                        Add modifiers like weekday/weekend adjustments, holiday pricing, or custom discounts to your room rates.
                                    </p>
                                </div>
                                <Button onClick={() => setOpenMaker(true)} className="bg-primary hover:bg-primary hover:text-white text-white">
                                    <CirclePlus className="h-4 w-4" /> Add First Modifier
                                </Button>
                            </div>
                        ) : (
                            <>
                                <Table>
                                    <TableHeader>
                                        <TableRow>
                                            <TableHead>#</TableHead>
                                            <TableHead>Name</TableHead>
                                            <TableHead>Type</TableHead>
                                            <TableHead>Operation</TableHead>
                                            <TableHead>Calculation</TableHead>
                                            <TableHead>Value</TableHead>
                                            {/* <TableHead>Priority</TableHead> */}
                                            <TableHead>Start Date</TableHead>
                                            <TableHead>End Date</TableHead>
                                            {/* <TableHead>Updated At</TableHead> */}
                                            <TableHead className="text-right">Action</TableHead>
                                        </TableRow>
                                    </TableHeader>
                                    <TableBody>
                                        {data.map((item) => (
                                            <TableRow key={item.id}>
                                                <TableCell>{item.id}</TableCell>
                                                <TableCell className='truncate max-w-34'>{item.name}</TableCell>
                                                <TableCell>{item.type}</TableCell>
                                                <TableCell>{item.operation}</TableCell>
                                                <TableCell>{item.calculation}</TableCell>
                                                <TableCell>{Number(item.value).toLocaleString()}{item.calculation === 'percent' && '%'}</TableCell>
                                                {/* <TableCell>{item.priority}</TableCell> */}
                                                <TableCell>{item.start_date || '-'}</TableCell>
                                                <TableCell>{item.end_date || '-'}</TableCell>
                                                {/* <TableCell>{new Date(item.updated_at).toLocaleDateString()}</TableCell> */}
                                                <TableCell className="flex gap-2 justify-end items-center">
                                                    <Button variant="outline" size="icon-sm" onClick={() => { setModifier(item); setView(true); setOpenMaker(true); }}>  <Eye /> </Button>
                                                    <Button variant="outline" size="icon-sm" onClick={() => { setModifier(item); setView(false); setOpenMaker(true); }}>  <SquarePen /> </Button>
                                                    <DeleteButton deleteId={item.id} model="price-modifiers" title="Price Modifier" />
                                                </TableCell>
                                            </TableRow>
                                        ))}
                                    </TableBody>
                                </Table>
                                <TablePagination links={links} meta={meta} />
                            </>
                        )}
                    </CardContent>
                    <CardFooter></CardFooter>
                </Card>
                {/**/}
            </IndexPageLayout>
        </AppLayout>
    );
}