import AppLayout from '@/layouts/app-layout';
import { Head, Link } from '@inertiajs/react';
import IndexPageLayout from '@/components/core/IndexPageLayout';
import { BreadcrumbItem } from '@/types';
import SectionCard from '@/components/(dashboard)/SectionCard';
import { useState } from 'react';
import { CalendarRange, ChevronRight, CirclePlus } from 'lucide-react';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import {
    Accordion,
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
} from "@/components/ui/accordion"
import PriceUpdater from './PriceUpdater';
import { BookingPriceAdjustmentType } from '@/types/dashboard/price-adjustment';
import BookingPriceAdjustmentTable from './BookingPriceAdjustmentTable';
import { Button } from '@/components/ui/button';
import EmptyState from '@/components/(dashboard)/EmptyState';
import DisplayPrice from '@/components/(dashboard)/DisplayPrice';
import { SystemCurrencyType } from '@/types/dashboard/currency';

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

type PriceModifireType = {
    id: number,
    name: string,
    calculation: string,
    operation: string,
    value: number,
    type: string
}

type RoomTypeProp = {
    id: number,
    price_override: string | null,
    room_number: string
}

type RoomCategoryTypeProp = {
    id: number,
    base_price: string,
    short_name: string,
    rooms: RoomTypeProp[],
}

export default function Index({ roomCategories, priceModifires, priceAdjustment, system_currency }: { roomCategories: RoomCategoryTypeProp[], priceModifires: PriceModifireType[], priceAdjustment: BookingPriceAdjustmentType[], system_currency: SystemCurrencyType }) {


    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Price Settings" />
            <IndexPageLayout
                title='Price Settings'
                description='Manage hotel price details and default room prices' path='/dashboard/price-settings'
            >

                <div className="flex gap-4 w-full">

                    <SectionCard title="Category & Rooms" description="Manage categories and their rooms">

                        {roomCategories.length === 0 ?
                            <EmptyState icon="Layers" title="No Room Categories Yet" description="Create categories like Deluxe, Standard, or Suite." actionLabel="Add Room Category" href='/dashboard/room-categories/create' />
                            :
                            <Accordion type="multiple" className="w-full space-y-2">

                                {roomCategories.map(category => {


                                    return (
                                        <AccordionItem key={category.id} value={category.short_name}>

                                            {/* CATEGORY HEADER */}
                                            <AccordionTrigger className="px-4 py-3 hover:bg-muted/50 transition">

                                                {/* FULL HEADER */}
                                                <div className="flex w-full items-center justify-between gap-4">

                                                    {/* LEFT: ID + NAME */}
                                                    <div className="flex items-center gap-3 min-w-50">
                                                        <span className="text-xs text-muted-foreground">
                                                            #{category.id}
                                                        </span>

                                                        <span className="font-semibold text-base">
                                                            {category.short_name}
                                                        </span>
                                                    </div>

                                                    {/* CENTER: PRICE */}
                                                    <div className="flex items-center gap-2">

                                                        <span className="text-lg font-semibold text-primary">
                                                            {/* {Number(category.base_price) > 0
                                                                ? Number(category.base_price).toLocaleString()
                                                                : '-'} */}
                                                            <DisplayPrice price={category.base_price} currency={system_currency} />
                                                        </span>
                                                        <span className="text-xs text-muted-foreground"> / room </span>
                                                    </div>

                                                    {/* RIGHT: ACTION */}
                                                    <div className="flex items-center" onClick={(e) => e.stopPropagation()}   >
                                                        <PriceUpdater
                                                            id={category.id}
                                                            room_number={category.short_name}
                                                            price={category.base_price}
                                                            currency="LKR"
                                                        />
                                                    </div>

                                                </div>

                                            </AccordionTrigger>
                                            {/* ROOMS INSIDE CATEGORY */}
                                            <AccordionContent>

                                                <Table>
                                                    <TableHeader>
                                                        <TableRow>
                                                            <TableHead>Room Number</TableHead>
                                                            <TableHead>Price</TableHead>
                                                            <TableHead></TableHead>
                                                        </TableRow>
                                                    </TableHeader>

                                                    <TableBody>

                                                        {category.rooms.map((room, rIndex) => (
                                                            <TableRow key={room.id}>
                                                                <TableCell>{room.room_number}</TableCell>
                                                                <TableCell><DisplayPrice price={room.price_override || ''} currency={system_currency} /></TableCell>
                                                                <TableCell className='text-end'><PriceUpdater id={room.id} room_number={room.room_number} price={room.price_override} currency={system_currency} room /></TableCell>

                                                            </TableRow>
                                                        ))}

                                                        {category.rooms.length === 0 && (
                                                            <TableRow>
                                                                <TableCell colSpan={3}>
                                                                    <div className="text-sm text-muted-foreground py-2">
                                                                        No rooms in this category
                                                                    </div>
                                                                </TableCell>
                                                            </TableRow>
                                                        )}

                                                    </TableBody>
                                                </Table>

                                            </AccordionContent>

                                        </AccordionItem>
                                    )
                                })}

                            </Accordion>
                        }
                    </SectionCard>

                    {/* RIGHT SIDE */}
                    <div className="space-y-4 flex-1">

                        {/* SEASONAL PRICING */}
                        <SectionCard title="Seasonal Pricing" description="Adjust room rates automatically for special dates" sideChildren={<Link href='/dashboard/price-modifiers' className='flex gap-1.5 items-center cursor-pointer text-sm whitespace-nowrap '>See All <ChevronRight className='w-5 h-5' /></Link>}>
                            {priceModifires.length === 0 ? (
                                <EmptyState icon="CalendarRange" title="No Seasonal Pricing Yet" description=" Set seasonal price rules for peak periods, holidays, or special dates to adjust room rates automatically." actionLabel="Add Price Modifier" href='/dashboard/price-modifiers' />
                            ) : (
                                <Table>
                                    <TableHeader>
                                        <TableRow>
                                            <TableHead>ID</TableHead>
                                            <TableHead>Title</TableHead>
                                            <TableHead>When</TableHead>
                                            <TableHead>Operation</TableHead>
                                            <TableHead>Value</TableHead>
                                        </TableRow>
                                    </TableHeader>

                                    <TableBody>

                                        {priceModifires.map((item, rIndex) => (
                                            <TableRow key={item.id}>
                                                <TableCell>#{item.id}</TableCell>
                                                <TableCell>{item.name}</TableCell>
                                                <TableCell>{item.type}</TableCell>
                                                <TableCell>{item.operation}</TableCell>
                                                <TableCell>{Number(item.value).toLocaleString()}{item.calculation === 'percent' && '%'}</TableCell>


                                            </TableRow>
                                        ))}

                                        {priceModifires.length === 0 && (
                                            <TableRow>
                                                <TableCell colSpan={3}>
                                                    <div className="text-sm text-muted-foreground py-2">
                                                        No rooms in this category
                                                    </div>
                                                </TableCell>
                                            </TableRow>
                                        )}

                                    </TableBody>
                                </Table>
                            )}
                        </SectionCard>

                        {/* TAX & DISCOUNT */}
                        <BookingPriceAdjustmentTable priceAdjustment={priceAdjustment} system_currency={system_currency} />

                    </div>
                </div>

            </IndexPageLayout>
        </AppLayout >
    );
}