import * as React from 'react';
import { router } from '@inertiajs/react';
import AdminLayout from '../layout';
import { offersApi, type Offer } from '@/features/admin/offers/services/api';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
    Table,
    TableHead,
    TableBody,
    TableRow,
    TableHeaderCell,
    TableCell,
    TableEmpty,
} from '@/components/ui/table';
import { Spinner } from '@/components/ui/spinner';
import { toast } from '@/components/ui/sonner';
import { formatDate } from '@/lib/utils';

export default function OffersIndex() {
    const [offers, setOffers] = React.useState<Offer[]>([]);
    const [loading, setLoading] = React.useState(true);

    React.useEffect(() => {
        offersApi
            .index()
            .then((offers) =>
                setOffers(offers.sort((a, b) => a.score_slot - b.score_slot)),
            )
            .catch(() => toast.error('Failed to load offers.'))
            .finally(() => setLoading(false));
    }, []);

    return (
        <AdminLayout title="Offers">
            <div className="mb-4 flex justify-end">
                <Button onClick={() => router.visit('/admin/offers/create')}>
                    Add offer
                </Button>
            </div>
            <Card>
                <Table>
                    <TableHead>
                        <tr>
                            <TableHeaderCell>Score slot</TableHeaderCell>
                            <TableHeaderCell>Title</TableHeaderCell>
                            <TableHeaderCell>Coupon code</TableHeaderCell>
                            <TableHeaderCell>Valid window</TableHeaderCell>
                            <TableHeaderCell>Status</TableHeaderCell>
                            <TableHeaderCell className="text-right">
                                Actions
                            </TableHeaderCell>
                        </tr>
                    </TableHead>
                    <TableBody>
                        {loading ? (
                            <tr>
                                <TableCell colSpan={6}>
                                    <div className="flex justify-center py-10">
                                        <Spinner className="h-5 w-5 text-(--color-accent)" />
                                    </div>
                                </TableCell>
                            </tr>
                        ) : offers.length === 0 ? (
                            <TableEmpty
                                colSpan={6}
                                message="No offers configured."
                            />
                        ) : (
                            offers.map((offer) => (
                                <TableRow key={offer.id}>
                                    <TableCell className="font-medium">
                                        {offer.score_slot}
                                    </TableCell>
                                    <TableCell>{offer.title}</TableCell>
                                    <TableCell className="font-mono text-xs">
                                        {offer.coupon_code}
                                    </TableCell>
                                    <TableCell>
                                        {formatDate(offer.valid_from, false)} –{' '}
                                        {formatDate(offer.valid_to, false)}
                                    </TableCell>
                                    <TableCell>
                                        <Badge
                                            tone={
                                                offer.active
                                                    ? 'success'
                                                    : 'neutral'
                                            }
                                        >
                                            {offer.active
                                                ? 'Active'
                                                : 'Inactive'}
                                        </Badge>
                                    </TableCell>
                                    <TableCell className="text-right">
                                        <Button
                                            variant="secondary"
                                            size="sm"
                                            onClick={() =>
                                                router.visit(
                                                    `/admin/offers/${offer.id}/edit`,
                                                )
                                            }
                                        >
                                            Edit
                                        </Button>
                                    </TableCell>
                                </TableRow>
                            ))
                        )}
                    </TableBody>
                </Table>
            </Card>
        </AdminLayout>
    );
}