import SectionCard from '@/components/(dashboard)/SectionCard';
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { CirclePlus, PenSquare, Percent, Trash2 } from 'lucide-react';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Badge } from '@/components/ui/badge';
import { BookingPriceAdjustmentType } from '@/types/dashboard/price-adjustment';
import BookingPriceAdjustmentMaker from './BookingPriceAdjustmentMaker';
import { DeleteButton } from '@/components/core/DeleteButton';
import EmptyState from '@/components/(dashboard)/EmptyState';
import { SystemCurrencyType } from '@/types/dashboard/currency';

export default function BookingPriceAdjustmentTable({ priceAdjustment, system_currency }: { priceAdjustment: BookingPriceAdjustmentType[], system_currency: SystemCurrencyType }) {

    const [item, setItem] = useState<BookingPriceAdjustmentType | null>(null)
    const [open, setOpen] = useState(false)

    return <SectionCard title=" Price Adjustment" description="Manage pricing rules to adjust booking prices at checkout" sideChildren={<BookingPriceAdjustmentMaker open={open} setOpen={setOpen} item={item} setItem={setItem} system_currency={system_currency} />}>
        {priceAdjustment.length === 0 ? (
            <EmptyState icon="Percent" title="No Pricing Rules Yet" description="Create rules like taxes, discounts, or service fees to automatically adjust booking prices at checkout." actionLabel="Add First Rule" onClick={() => setOpen(true)} />
        ) : (
            <Table>
                <TableHeader>
                    <TableRow>
                        <TableHead>Name</TableHead>
                        <TableHead>Type</TableHead>
                        <TableHead>Value</TableHead>
                        <TableHead>Active</TableHead>
                        <TableHead className="text-right">Action</TableHead>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    {priceAdjustment.map((t) => (
                        <TableRow key={t.id}>
                            <TableCell className="font-medium">{t.name || '-'}</TableCell>
                            <TableCell>
                                <Badge variant={t.type === "Tax" ? "destructive" : "secondary"}>
                                    {t.type}
                                </Badge>
                            </TableCell>
                            <TableCell> {t.value ? (`${Number(t.value).toLocaleString()} ${t.value_type === 'percentage' ? '%' : ''}`) : '-'}   </TableCell>
                            <TableCell> {t.is_active ? <Badge>Active</Badge> : <Badge variant='destructive'>Inactive</Badge>} </TableCell>
                            <TableCell className="text-right space-x-2">
                                <Button size="icon-sm" variant="outline" onClick={() => { setItem(t); setOpen(true) }} >  <PenSquare size={16} />  </Button>
                                <DeleteButton deleteId={t.id} model='price-adjustment' title='Price Adjustment' />
                            </TableCell>
                        </TableRow>
                    ))}
                    {priceAdjustment.length === 0 && (
                        <TableRow>
                            <TableCell colSpan={4}>
                                <div className="text-center text-muted-foreground py-4">
                                    No rules available
                                </div>
                            </TableCell>
                        </TableRow>
                    )}
                </TableBody>
            </Table>
        )}
    </SectionCard>
}
