import { Head, Link, router, useForm } from '@inertiajs/react';
import type { ColumnDef } from '@tanstack/react-table';
import {
    Car,
    ChevronLeft,
    ChevronRight,
    CircleUserRound,
    CreditCard,
    DollarSign,
    Maximize2,
    Minimize2,
    NotebookPen,
    ReceiptText,
    Search,
    X,
} from 'lucide-react';
import type { FormEvent, ReactNode } from 'react';
import { useCallback, useEffect, useMemo, useState } from 'react';
import {
    AdminBookingEditDrawer,
    type AddonOption,
    type LocationOption,
    type PackageOption,
    type TechnicianOption,
} from '@/components/booking/admin-booking-edit-drawer';
import {
    BookingDetailPanel,
    type BookingDetail,
} from '@/components/booking/booking-detail-panel';
import { BookingListCard } from '@/components/booking/booking-list-card';
import { useBookingDateTimeFormatters } from '@/hooks/use-booking-timezone';
import { formatUSPhone } from '@/lib/utils';
import { DataTable } from '@/components/data-table';
import { FormField } from '@/components/form-field';
import { EmptyState } from '@/components/layout/empty-state';
import { FormDrawer } from '@/components/layout/form-drawer';
import { PageHeader } from '@/components/layout/page-header';
import { SectionCard } from '@/components/layout/section-card';
import { ResourceActionsMenu } from '@/components/resource-actions-menu';
import { StatusBadge } from '@/components/status-badge';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import { SheetFooter } from '@/components/ui/sheet';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { NativeSelect } from '@/components/ui/native-select';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Textarea } from '@/components/ui/textarea';
import AppLayout from '@/layouts/app-layout';
import { useBookingListGlobalExpanded, BOOKING_LIST_EXPANDED_KEYS } from '@/hooks/use-booking-list-global-expanded';
import adminCustomers from '@/routes/admin/customers';

type CustomerVehicle = {
    id: number;
    make: string;
    model: string;
    year: number;
    color: string | null;
    size: string;
    license_plate: string | null;
    notes: string | null;
    is_default: boolean;
};

type CustomerBooking = BookingDetail & {
    package_name: string | null;
    vehicle_label: string | null;
    location_label: string | null;
    technician_id: number | null;
    package_id: number;
    location_id: number | null;
    amount_paid: number;
    addons_total: number;
};

type CustomerMembership = {
    id: number;
    status: string;
    current_period_start: string | null;
    current_period_end: string | null;
    washes_used_this_period: number;
    plan: {
        id: number;
        name: string;
        price_monthly: number;
        washes_per_month: number | null;
    } | null;
};

type Customer = {
    id: number;
    name: string;
    email: string;
    phone: string | null;
    office_suite: string | null;
    cell: string | null;
    internal_notes: string | null;
    vehicles: CustomerVehicle[];
    bookings: CustomerBooking[];
    memberships: CustomerMembership[];
};

type Props = {
    customer: Customer;
    technicians: TechnicianOption[];
    locations: LocationOption[];
    packages: PackageOption[];
    addons: AddonOption[];
    stripeEnabled: boolean;
    stripePublishableKey: string | null;
};

function formatMoney(cents: number): string {
    return `$${(cents / 100).toFixed(2)}`;
}

const COMPLETED_BOOKING_STATUSES = new Set(['completed', 'cancelled', 'no_show']);
const BOOKINGS_PER_PAGE = 10;

function FilterField({ label, children }: { label: string; children: ReactNode }) {
    return (
        <div className="flex min-w-0 flex-col gap-1.5">
            <Label className="text-xs font-medium text-muted-foreground">{label}</Label>
            {children}
        </div>
    );
}

export default function AdminCustomerShow({
    customer,
    technicians,
    locations,
    packages,
    addons,
    stripeEnabled,
    stripePublishableKey,
}: Props) {
    const { formatDate } = useBookingDateTimeFormatters();
    const [addVehicleOpen, setAddVehicleOpen] = useState(false);
    const [editingVehicle, setEditingVehicle] = useState<CustomerVehicle | null>(
        null,
    );
    const [viewingBooking, setViewingBooking] = useState<CustomerBooking | null>(
        null,
    );
    const [editingBooking, setEditingBooking] = useState<CustomerBooking | null>(
        null,
    );
    const [bookingSearch, setBookingSearch] = useState('');
    const [bookingStatusFilter, setBookingStatusFilter] = useState('all');
    const {
        allExpanded: allBookingsExpanded,
        expandRevision: bookingExpandRevision,
        toggleAllExpanded: toggleAllBookingsExpanded,
    } = useBookingListGlobalExpanded(BOOKING_LIST_EXPANDED_KEYS.adminCustomerBookings);
    const [bookingCurrentPage, setBookingCurrentPage] = useState(1);
    const [bookingListTab, setBookingListTab] = useState<'active' | 'completed'>('active');

    const profileForm = useForm({
        name: customer.name,
        email: customer.email,
        phone: customer.phone ?? '',
        office_suite: customer.office_suite ?? '',
        cell: customer.cell ?? '',
        internal_notes: customer.internal_notes ?? '',
    });

    const createVehicleForm = useForm({
        make: '',
        model: '',
        year: new Date().getFullYear(),
        color: '',
        size: 'sedan',
        license_plate: '',
        notes: '',
        is_default: false,
    });

    const editVehicleForm = useForm({
        make: '',
        model: '',
        year: new Date().getFullYear(),
        color: '',
        size: 'sedan',
        license_plate: '',
        notes: '',
        is_default: false,
    });

    const activeMembership = customer.memberships.find(
        (membership) => membership.status === 'active',
    );
    const lifetimeSpend = customer.bookings.reduce(
        (sum, booking) => sum + booking.total,
        0,
    );
    const completedBookingsCount = customer.bookings.filter(
        (booking) => booking.service_status === 'completed',
    ).length;

    const bookingStatusOptions = useMemo(() => {
        const options = new Set(customer.bookings.map((booking) => booking.service_status));

        return ['all', ...Array.from(options)];
    }, [customer.bookings]);

    const sortedBookings = useMemo(
        () =>
            [...customer.bookings].sort(
                (left, right) =>
                    new Date(right.scheduled_at).getTime() -
                    new Date(left.scheduled_at).getTime(),
            ),
        [customer.bookings],
    );

    const bookingSearchQuery = bookingSearch.toLowerCase().trim();

    const filteredBookings = useMemo(() => {
        return sortedBookings.filter((booking) => {
            if (
                bookingStatusFilter !== 'all' &&
                booking.service_status !== bookingStatusFilter
            ) {
                return false;
            }

            if (bookingSearchQuery.length === 0) {
                return true;
            }

            const searchable = [
                booking.uuid,
                booking.package_name ?? '',
                booking.package?.name ?? '',
                booking.vehicle_label ?? '',
                booking.location_label ?? '',
                booking.service_status,
                booking.payment_status,
                formatDate(booking.scheduled_at),
            ]
                .join(' ')
                .toLowerCase();

            return (
                searchable.includes(bookingSearchQuery) ||
                booking.uuid.slice(0, 8).toLowerCase().includes(bookingSearchQuery.replace(/^#/, ''))
            );
        });
    }, [bookingSearchQuery, bookingStatusFilter, sortedBookings]);

    const activeBookings = useMemo(
        () =>
            filteredBookings.filter(
                (booking) => !COMPLETED_BOOKING_STATUSES.has(booking.service_status),
            ),
        [filteredBookings],
    );

    const completedBookings = useMemo(
        () =>
            filteredBookings.filter((booking) =>
                COMPLETED_BOOKING_STATUSES.has(booking.service_status),
            ),
        [filteredBookings],
    );

    const tabBookings =
        bookingListTab === 'active' ? activeBookings : completedBookings;

    const bookingTotalPages = Math.max(
        1,
        Math.ceil(tabBookings.length / BOOKINGS_PER_PAGE),
    );

    const paginatedBookings = useMemo(() => {
        const start = (bookingCurrentPage - 1) * BOOKINGS_PER_PAGE;

        return tabBookings.slice(start, start + BOOKINGS_PER_PAGE);
    }, [bookingCurrentPage, tabBookings]);

    useEffect(() => {
        setBookingCurrentPage(1);
    }, [bookingSearchQuery, bookingStatusFilter, bookingListTab]);

    useEffect(() => {
        if (bookingCurrentPage > bookingTotalPages) {
            setBookingCurrentPage(bookingTotalPages);
        }
    }, [bookingCurrentPage, bookingTotalPages]);

    const hasActiveBookingFilters =
        bookingSearchQuery.length > 0 || bookingStatusFilter !== 'all';

    const clearBookingFilters = () => {
        setBookingSearch('');
        setBookingStatusFilter('all');
        setBookingCurrentPage(1);
    };

    const openAdminBookingEdit = useCallback((booking: CustomerBooking) => {
        setEditingBooking(booking);
    }, []);

    const openEditFromView = useCallback(() => {
        if (!viewingBooking) {
            return;
        }

        const booking = viewingBooking;
        setViewingBooking(null);
        setEditingBooking(booking);
    }, [viewingBooking]);

    const submitProfile = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        profileForm.patch(adminCustomers.update.url({ user: customer.id }));
    };

    const submitVehicleCreate = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        createVehicleForm.post(
            adminCustomers.vehicles.store.url({ user: customer.id }),
            {
                onSuccess: () => {
                    createVehicleForm.reset(
                        'make',
                        'model',
                        'color',
                        'license_plate',
                        'notes',
                    );
                    createVehicleForm.clearErrors();
                    setAddVehicleOpen(false);
                },
            },
        );
    };

    const openVehicleEdit = useCallback((vehicle: CustomerVehicle) => {
        setEditingVehicle(vehicle);
        editVehicleForm.setData({
            make: vehicle.make,
            model: vehicle.model,
            year: vehicle.year,
            color: vehicle.color ?? '',
            size: vehicle.size,
            license_plate: vehicle.license_plate ?? '',
            notes: vehicle.notes ?? '',
            is_default: vehicle.is_default,
        });
    }, [editVehicleForm]);

    const submitVehicleEdit = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();

        if (!editingVehicle) {
            return;
        }

        editVehicleForm.patch(
            adminCustomers.vehicles.update.url({
                user: customer.id,
                vehicle: editingVehicle.id,
            }),
            {
                onSuccess: () => setEditingVehicle(null),
            },
        );
    };

    const deleteVehicle = useCallback((vehicleId: number) => {
        router.delete(
            adminCustomers.vehicles.destroy.url({
                user: customer.id,
                vehicle: vehicleId,
            }),
        );
    }, [customer.id]);

    const cancelMembership = (membershipId: number) => {
        router.post(
            adminCustomers.memberships.cancel.url({
                user: customer.id,
                customerMembership: membershipId,
            }),
        );
    };

    const deleteCustomer = () => {
        router.delete(adminCustomers.destroy.url({ user: customer.id }));
    };

    const vehicleColumns = useMemo<ColumnDef<CustomerVehicle>[]>(
        () => [
            {
                id: 'vehicle',
                header: 'Vehicle',
                meta: { label: 'Vehicle' },
                accessorFn: (row) => `${row.year} ${row.make} ${row.model}`,
                cell: ({ row }) => (
                    <div className="text-sm">
                        <div className="font-medium">
                            {row.original.year} {row.original.make}{' '}
                            {row.original.model}
                        </div>
                        <div className="text-muted-foreground">
                            {row.original.color ?? 'No color'} •{' '}
                            <span className="capitalize">{row.original.size}</span>
                        </div>
                    </div>
                ),
            },
            {
                accessorKey: 'license_plate',
                header: 'License plate',
                meta: { label: 'License plate' },
                cell: ({ row }) => row.original.license_plate ?? '-',
            },
            {
                id: 'default',
                header: 'Primary',
                meta: { label: 'Primary' },
                accessorFn: (row) => (row.is_default ? 'Yes' : 'No'),
            },
            {
                id: 'actions',
                enableHiding: false,
                header: () => <span className="sr-only">Actions</span>,
                cell: ({ row }) => (
                    <ResourceActionsMenu
                        onEdit={() => openVehicleEdit(row.original)}
                        onDelete={() => deleteVehicle(row.original.id)}
                        deleteTitle="Delete saved vehicle?"
                        deleteDescription="This removes the vehicle from the customer profile."
                    />
                ),
            },
        ],
        [deleteVehicle, openVehicleEdit],
    );

    const tabCountBadge = (
        count: number,
        variant: 'blue' | 'green' | 'sky' | 'purple' | 'red',
    ) => (
        <Badge
            variant={variant}
            className="pointer-events-none flex size-6 min-w-6 shrink-0 items-center justify-center rounded-full p-0 text-[11px] font-bold leading-none tabular-nums shadow-sm"
        >
            {count}
        </Badge>
    );

    const renderBookingCards = (items: CustomerBooking[], highlight: boolean) => (
        <div className="flex flex-col gap-3">
            {items.map((booking) => (
                <BookingListCard
                    key={`${booking.id}-${bookingExpandRevision}`}
                    booking={booking}
                    highlight={highlight}
                    defaultOpen={allBookingsExpanded}
                    onViewDetails={() => setViewingBooking(booking)}
                    onEditBooking={() => openAdminBookingEdit(booking)}
                />
            ))}
            {bookingSearchQuery ? (
                <p className="text-center text-xs text-muted-foreground">
                    {tabBookings.length} result
                    {tabBookings.length !== 1 ? 's' : ''} for "{bookingSearch}"
                </p>
            ) : null}
            {bookingTotalPages > 1 ? (
                <div className="flex items-center justify-between border-t pt-3">
                    <p className="text-xs text-muted-foreground">
                        {(bookingCurrentPage - 1) * BOOKINGS_PER_PAGE + 1}–
                        {Math.min(
                            bookingCurrentPage * BOOKINGS_PER_PAGE,
                            tabBookings.length,
                        )}{' '}
                        of {tabBookings.length} bookings
                    </p>
                    <div className="flex items-center gap-1">
                        <Button
                            type="button"
                            variant="outline"
                            size="icon"
                            className="size-7"
                            disabled={bookingCurrentPage === 1}
                            onClick={() => setBookingCurrentPage((page) => page - 1)}
                        >
                            <ChevronLeft className="size-3.5" />
                        </Button>
                        <span className="min-w-16 text-center text-xs text-muted-foreground">
                            {bookingCurrentPage} / {bookingTotalPages}
                        </span>
                        <Button
                            type="button"
                            variant="outline"
                            size="icon"
                            className="size-7"
                            disabled={bookingCurrentPage === bookingTotalPages}
                            onClick={() => setBookingCurrentPage((page) => page + 1)}
                        >
                            <ChevronRight className="size-3.5" />
                        </Button>
                    </div>
                </div>
            ) : null}
        </div>
    );

    return (
        <>
            <Head title={`Customer: ${customer.name}`} />
            <div className="flex h-full flex-1 flex-col gap-6">
                <PageHeader
                    title={customer.name}
                    actions={
                        <div className="flex items-center gap-2">
                            <Button variant="outline" asChild>
                                <Link href={adminCustomers.index.url()}>
                                    Back to customers
                                </Link>
                            </Button>
                            <ResourceActionsMenu
                                onEdit={undefined}
                                onDelete={deleteCustomer}
                                deleteLabel="Delete customer"
                                deleteTitle="Delete customer?"
                                deleteDescription="This permanently removes the customer and related records."
                                confirmLabel="Delete customer"
                            />
                        </div>
                    }
                />

                <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
                    <Card size="sm">
                        <CardHeader>
                            <CardDescription>Total bookings</CardDescription>
                            <CardTitle>{customer.bookings.length}</CardTitle>
                        </CardHeader>
                        <CardContent className="flex items-center gap-2 text-muted-foreground">
                            <ReceiptText className="size-4" />
                            <span>{completedBookingsCount} completed</span>
                        </CardContent>
                    </Card>
                    <Card size="sm">
                        <CardHeader>
                            <CardDescription>Lifetime spend</CardDescription>
                            <CardTitle>{formatMoney(lifetimeSpend)}</CardTitle>
                        </CardHeader>
                        <CardContent className="flex items-center gap-2 text-muted-foreground">
                            <DollarSign className="size-4" />
                            <span>Across all bookings</span>
                        </CardContent>
                    </Card>
                    <Card size="sm">
                        <CardHeader>
                            <CardDescription>Saved vehicles</CardDescription>
                            <CardTitle>{customer.vehicles.length}</CardTitle>
                        </CardHeader>
                        <CardContent className="flex items-center gap-2 text-muted-foreground">
                            <Car className="size-4" />
                            <span>Customer garage</span>
                        </CardContent>
                    </Card>
                    <Card size="sm">
                        <CardHeader>
                            <CardDescription>Membership</CardDescription>
                            <CardTitle>
                                {activeMembership?.plan?.name ?? 'None'}
                            </CardTitle>
                        </CardHeader>
                        <CardContent>
                            <StatusBadge
                                status={activeMembership?.status ?? 'inactive'}
                            />
                        </CardContent>
                    </Card>
                </div>

                <Tabs defaultValue="profile">
                    <TabsList>
                        <TabsTrigger value="profile">
                            <CircleUserRound className="size-4" />
                            Profile
                        </TabsTrigger>
                        <TabsTrigger value="vehicles">
                            <Car className="size-4" />
                            Saved vehicles
                        </TabsTrigger>
                        <TabsTrigger value="bookings">
                            <NotebookPen className="size-4" />
                            Bookings
                        </TabsTrigger>
                        <TabsTrigger value="memberships">
                            <CreditCard className="size-4" />
                            Memberships
                        </TabsTrigger>
                    </TabsList>

                    <TabsContent value="profile">
                        <SectionCard title="Profile">
                            <form className="grid gap-3 md:grid-cols-2" onSubmit={submitProfile}>
                                <FormField label="Name" htmlFor="customer-profile-name">
                                    <Input
                                        id="customer-profile-name"
                                        value={profileForm.data.name}
                                        onChange={(event) =>
                                            profileForm.setData(
                                                'name',
                                                event.target.value,
                                            )
                                        }
                                    />
                                </FormField>
                                <FormField label="Email" htmlFor="customer-profile-email">
                                    <Input
                                        id="customer-profile-email"
                                        type="email"
                                        value={profileForm.data.email}
                                        onChange={(event) =>
                                            profileForm.setData(
                                                'email',
                                                event.target.value,
                                            )
                                        }
                                    />
                                </FormField>
                                <FormField label="Cell" htmlFor="customer-profile-cell">
                                    <Input
                                        id="customer-profile-cell"
                                        type="tel"
                                        placeholder="(555) 000-0000"
                                        autoComplete="tel"
                                        value={profileForm.data.cell}
                                        onChange={(event) =>
                                            profileForm.setData(
                                                'cell',
                                                formatUSPhone(event.target.value),
                                            )
                                        }
                                    />
                                </FormField>
                                <FormField label="Phone" htmlFor="customer-profile-phone">
                                    <Input
                                        id="customer-profile-phone"
                                        type="tel"
                                        placeholder="(555) 000-0000"
                                        autoComplete="tel"
                                        value={profileForm.data.phone}
                                        onChange={(event) =>
                                            profileForm.setData(
                                                'phone',
                                                formatUSPhone(event.target.value),
                                            )
                                        }
                                    />
                                </FormField>
                                <FormField
                                    label="Office / Suite Location"
                                    htmlFor="customer-profile-office-suite"
                                    className="md:col-span-2"
                                >
                                    <Input
                                        id="customer-profile-office-suite"
                                        placeholder="Suite 200, Building B"
                                        autoComplete="address-line2"
                                        value={profileForm.data.office_suite}
                                        onChange={(event) =>
                                            profileForm.setData(
                                                'office_suite',
                                                event.target.value,
                                            )
                                        }
                                    />
                                </FormField>
                                <FormField
                                    label="Internal notes"
                                    htmlFor="customer-profile-notes"
                                    className="md:col-span-2"
                                >
                                    <Textarea
                                        id="customer-profile-notes"
                                        rows={4}
                                        value={profileForm.data.internal_notes}
                                        onChange={(event) =>
                                            profileForm.setData(
                                                'internal_notes',
                                                event.target.value,
                                            )
                                        }
                                    />
                                </FormField>
                                <div className="md:col-span-2">
                                    <Button
                                        type="submit"
                                        disabled={profileForm.processing}
                                    >
                                        Save profile
                                    </Button>
                                </div>
                            </form>
                        </SectionCard>
                    </TabsContent>

                    <TabsContent value="vehicles">
                        <SectionCard
                            title="Saved vehicles"
                            actions={
                                <Button
                                    type="button"
                                    size="sm"
                                    onClick={() => setAddVehicleOpen(true)}
                                >
                                    Add vehicle
                                </Button>
                            }
                        >
                            {customer.vehicles.length === 0 ? (
                                <EmptyState
                                    title="No saved vehicles"
                                    description="Add a vehicle to this customer profile."
                                />
                            ) : (
                                <DataTable
                                    columns={vehicleColumns}
                                    data={customer.vehicles}
                                    searchPlaceholder="Search saved vehicles..."
                                />
                            )}

                            {editingVehicle ? (
                                <form
                                    className="mt-4 grid gap-3 rounded-md border p-4 md:grid-cols-2"
                                    onSubmit={submitVehicleEdit}
                                >
                                    <FormField label="Make" htmlFor="vehicle-edit-make">
                                        <Input
                                            id="vehicle-edit-make"
                                            value={editVehicleForm.data.make}
                                            onChange={(event) =>
                                                editVehicleForm.setData(
                                                    'make',
                                                    event.target.value,
                                                )
                                            }
                                        />
                                    </FormField>
                                    <FormField label="Model" htmlFor="vehicle-edit-model">
                                        <Input
                                            id="vehicle-edit-model"
                                            value={editVehicleForm.data.model}
                                            onChange={(event) =>
                                                editVehicleForm.setData(
                                                    'model',
                                                    event.target.value,
                                                )
                                            }
                                        />
                                    </FormField>
                                    <FormField label="Year" htmlFor="vehicle-edit-year">
                                        <Input
                                            id="vehicle-edit-year"
                                            type="number"
                                            value={editVehicleForm.data.year}
                                            onChange={(event) =>
                                                editVehicleForm.setData(
                                                    'year',
                                                    Number(event.target.value),
                                                )
                                            }
                                        />
                                    </FormField>
                                    <FormField label="Color" htmlFor="vehicle-edit-color">
                                        <Input
                                            id="vehicle-edit-color"
                                            value={editVehicleForm.data.color}
                                            onChange={(event) =>
                                                editVehicleForm.setData(
                                                    'color',
                                                    event.target.value,
                                                )
                                            }
                                        />
                                    </FormField>
                                    <FormField label="Size" htmlFor="vehicle-edit-size">
                                        <NativeSelect
                                            id="vehicle-edit-size"
                                            value={editVehicleForm.data.size}
                                            onChange={(event) =>
                                                editVehicleForm.setData(
                                                    'size',
                                                    event.target.value,
                                                )
                                            }
                                        >
                                            <option value="sedan">Sedan</option>
                                            <option value="suv">SUV</option>
                                            <option value="truck">Truck</option>
                                            <option value="van">Van</option>
                                            <option value="oversized">
                                                Oversized
                                            </option>
                                        </NativeSelect>
                                    </FormField>
                                    <FormField
                                        label="License plate"
                                        htmlFor="vehicle-edit-license"
                                    >
                                        <Input
                                            id="vehicle-edit-license"
                                            value={editVehicleForm.data.license_plate}
                                            onChange={(event) =>
                                                editVehicleForm.setData(
                                                    'license_plate',
                                                    event.target.value,
                                                )
                                            }
                                        />
                                    </FormField>
                                    <FormField
                                        label="Notes"
                                        htmlFor="vehicle-edit-notes"
                                        className="md:col-span-2"
                                    >
                                        <Textarea
                                            id="vehicle-edit-notes"
                                            value={editVehicleForm.data.notes}
                                            onChange={(event) =>
                                                editVehicleForm.setData(
                                                    'notes',
                                                    event.target.value,
                                                )
                                            }
                                        />
                                    </FormField>
                                    <div className="flex gap-2 md:col-span-2">
                                        <Button
                                            type="button"
                                            variant="outline"
                                            onClick={() => setEditingVehicle(null)}
                                        >
                                            Cancel
                                        </Button>
                                        <Button
                                            type="submit"
                                            disabled={editVehicleForm.processing}
                                        >
                                            Save vehicle
                                        </Button>
                                    </div>
                                </form>
                            ) : null}
                        </SectionCard>

                        <FormDrawer
                            open={addVehicleOpen}
                            onOpenChange={setAddVehicleOpen}
                            title="Add vehicle"
                            description="Save a vehicle to this customer profile."
                            direction="right"
                        >
                            <form
                                className="grid gap-4 pt-2 md:grid-cols-2"
                                onSubmit={submitVehicleCreate}
                            >
                                <FormField label="Make" htmlFor="vehicle-create-make">
                                    <Input
                                        id="vehicle-create-make"
                                        value={createVehicleForm.data.make}
                                        onChange={(event) =>
                                            createVehicleForm.setData(
                                                'make',
                                                event.target.value,
                                            )
                                        }
                                    />
                                </FormField>
                                <FormField label="Model" htmlFor="vehicle-create-model">
                                    <Input
                                        id="vehicle-create-model"
                                        value={createVehicleForm.data.model}
                                        onChange={(event) =>
                                            createVehicleForm.setData(
                                                'model',
                                                event.target.value,
                                            )
                                        }
                                    />
                                </FormField>
                                <FormField label="Year" htmlFor="vehicle-create-year">
                                    <Input
                                        id="vehicle-create-year"
                                        type="number"
                                        value={createVehicleForm.data.year}
                                        onChange={(event) =>
                                            createVehicleForm.setData(
                                                'year',
                                                Number(event.target.value),
                                            )
                                        }
                                    />
                                </FormField>
                                <FormField label="Color" htmlFor="vehicle-create-color">
                                    <Input
                                        id="vehicle-create-color"
                                        value={createVehicleForm.data.color}
                                        onChange={(event) =>
                                            createVehicleForm.setData(
                                                'color',
                                                event.target.value,
                                            )
                                        }
                                    />
                                </FormField>
                                <FormField label="Size" htmlFor="vehicle-create-size">
                                    <NativeSelect
                                        id="vehicle-create-size"
                                        value={createVehicleForm.data.size}
                                        onChange={(event) =>
                                            createVehicleForm.setData(
                                                'size',
                                                event.target.value,
                                            )
                                        }
                                    >
                                        <option value="sedan">Sedan</option>
                                        <option value="suv">SUV</option>
                                        <option value="truck">Truck</option>
                                        <option value="van">Van</option>
                                        <option value="oversized">
                                            Oversized
                                        </option>
                                    </NativeSelect>
                                </FormField>
                                <FormField
                                    label="License plate"
                                    htmlFor="vehicle-create-license"
                                >
                                    <Input
                                        id="vehicle-create-license"
                                        value={createVehicleForm.data.license_plate}
                                        onChange={(event) =>
                                            createVehicleForm.setData(
                                                'license_plate',
                                                event.target.value,
                                            )
                                        }
                                    />
                                </FormField>
                                <FormField
                                    label="Notes"
                                    htmlFor="vehicle-create-notes"
                                    className="md:col-span-2"
                                >
                                    <Textarea
                                        id="vehicle-create-notes"
                                        value={createVehicleForm.data.notes}
                                        onChange={(event) =>
                                            createVehicleForm.setData(
                                                'notes',
                                                event.target.value,
                                            )
                                        }
                                    />
                                </FormField>
                                <div className="md:col-span-2 flex gap-2">
                                    <Button
                                        type="button"
                                        variant="outline"
                                        onClick={() => setAddVehicleOpen(false)}
                                    >
                                        Cancel
                                    </Button>
                                    <Button
                                        type="submit"
                                        disabled={createVehicleForm.processing}
                                    >
                                        Add vehicle
                                    </Button>
                                </div>
                            </form>
                        </FormDrawer>
                    </TabsContent>

                    <TabsContent value="bookings">
                        <SectionCard title="Bookings">
                            {customer.bookings.length === 0 ? (
                                <EmptyState
                                    title="No bookings yet"
                                    description="This customer has not booked a wash yet."
                                />
                            ) : (
                                <div className="flex flex-col gap-5">
                                    <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:gap-3">
                                        <div className="min-w-0 flex-1">
                                            <FilterField label="Search">
                                                <div className="relative">
                                                    <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
                                                    <Input
                                                        value={bookingSearch}
                                                        onChange={(event) =>
                                                            setBookingSearch(event.target.value)
                                                        }
                                                        placeholder="Booking #, package, vehicle, status..."
                                                        className="pl-9 pr-9"
                                                    />
                                                    {bookingSearch.length > 0 ? (
                                                        <button
                                                            type="button"
                                                            className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                                                            onClick={() => setBookingSearch('')}
                                                        >
                                                            <X className="size-4" />
                                                        </button>
                                                    ) : null}
                                                </div>
                                            </FilterField>
                                        </div>

                                        <FilterField label="Status">
                                            <NativeSelect
                                                className="w-full sm:w-48"
                                                value={bookingStatusFilter}
                                                onChange={(event) =>
                                                    setBookingStatusFilter(event.target.value)
                                                }
                                            >
                                                {bookingStatusOptions.map((status) => (
                                                    <option key={status} value={status}>
                                                        {status === 'all'
                                                            ? 'All statuses'
                                                            : status.replaceAll('_', ' ')}
                                                    </option>
                                                ))}
                                            </NativeSelect>
                                        </FilterField>

                                        {hasActiveBookingFilters ? (
                                            <Button
                                                type="button"
                                                variant="ghost"
                                                size="sm"
                                                className="shrink-0"
                                                onClick={clearBookingFilters}
                                            >
                                                Clear filters
                                            </Button>
                                        ) : null}
                                    </div>

                                    <Tabs
                                        value={bookingListTab}
                                        onValueChange={(value) =>
                                            setBookingListTab(value as 'active' | 'completed')
                                        }
                                    >
                                        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                                            <TabsList className="w-full sm:w-auto">
                                                <TabsTrigger value="active" className="gap-2">
                                                    Active
                                                    {tabCountBadge(activeBookings.length, 'blue')}
                                                </TabsTrigger>
                                                <TabsTrigger value="completed" className="gap-2">
                                                    Completed
                                                    {tabCountBadge(completedBookings.length, 'green')}
                                                </TabsTrigger>
                                            </TabsList>
                                            {tabBookings.length > 0 ? (
                                                <Button
                                                    type="button"
                                                    variant="outline"
                                                    size="sm"
                                                    className="shrink-0"
                                                    onClick={toggleAllBookingsExpanded}
                                                >
                                                    {allBookingsExpanded ? (
                                                        <>
                                                            <Minimize2 className="size-4" />
                                                            Collapse all
                                                        </>
                                                    ) : (
                                                        <>
                                                            <Maximize2 className="size-4" />
                                                            Expand all
                                                        </>
                                                    )}
                                                </Button>
                                            ) : null}
                                        </div>

                                        <TabsContent value="active">
                                            {activeBookings.length === 0 ? (
                                                <div className="flex flex-col items-center gap-3">
                                                    <EmptyState
                                                        title={
                                                            hasActiveBookingFilters
                                                                ? 'No matching active bookings'
                                                                : 'No active bookings'
                                                        }
                                                        description={
                                                            hasActiveBookingFilters
                                                                ? 'Try a different search term or status filter.'
                                                                : 'This customer has no open or in-progress bookings.'
                                                        }
                                                    />
                                                    {hasActiveBookingFilters ? (
                                                        <Button
                                                            type="button"
                                                            variant="outline"
                                                            size="sm"
                                                            onClick={clearBookingFilters}
                                                        >
                                                            Clear filters
                                                        </Button>
                                                    ) : null}
                                                </div>
                                            ) : (
                                                renderBookingCards(
                                                    paginatedBookings,
                                                    true,
                                                )
                                            )}
                                        </TabsContent>

                                        <TabsContent value="completed">
                                            {completedBookings.length === 0 ? (
                                                <div className="flex flex-col items-center gap-3">
                                                    <EmptyState
                                                        title={
                                                            hasActiveBookingFilters
                                                                ? 'No matching completed bookings'
                                                                : 'No completed bookings'
                                                        }
                                                        description={
                                                            hasActiveBookingFilters
                                                                ? 'Try a different search term or status filter.'
                                                                : 'Completed, cancelled, and no-show bookings appear here.'
                                                        }
                                                    />
                                                    {hasActiveBookingFilters ? (
                                                        <Button
                                                            type="button"
                                                            variant="outline"
                                                            size="sm"
                                                            onClick={clearBookingFilters}
                                                        >
                                                            Clear filters
                                                        </Button>
                                                    ) : null}
                                                </div>
                                            ) : (
                                                renderBookingCards(
                                                    paginatedBookings,
                                                    false,
                                                )
                                            )}
                                        </TabsContent>
                                    </Tabs>
                                </div>
                            )}
                        </SectionCard>
                    </TabsContent>

                    <TabsContent value="memberships">
                        <SectionCard title="Memberships">
                            {activeMembership ? (
                                <div className="mb-4 rounded-md border p-4">
                                    <div className="mb-2 flex items-center justify-between">
                                        <div>
                                            <p className="font-medium">
                                                {activeMembership.plan?.name ??
                                                    'Active plan'}
                                            </p>
                                            <p className="text-sm text-muted-foreground">
                                                Period ends:{' '}
                                                {activeMembership.current_period_end ??
                                                    '-'}
                                            </p>
                                        </div>
                                        <StatusBadge
                                            status={activeMembership.status}
                                        />
                                    </div>
                                    <Button
                                        type="button"
                                        variant="destructive"
                                        onClick={() =>
                                            cancelMembership(activeMembership.id)
                                        }
                                    >
                                        Cancel membership
                                    </Button>
                                </div>
                            ) : (
                                <EmptyState
                                    title="No active membership"
                                    description="This customer currently has no active plan."
                                />
                            )}

                            {customer.memberships.length > 0 ? (
                                <div className="grid gap-2">
                                    {customer.memberships.map((membership) => (
                                        <div
                                            key={membership.id}
                                            className="rounded-md border px-3 py-2 text-sm"
                                        >
                                            <div className="flex items-center justify-between">
                                                <span>
                                                    {membership.plan?.name ??
                                                        'Unknown plan'}
                                                </span>
                                                <StatusBadge
                                                    status={membership.status}
                                                />
                                            </div>
                                            <p className="text-muted-foreground">
                                                {membership.current_period_start ??
                                                    '-'}{' '}
                                                to{' '}
                                                {membership.current_period_end ??
                                                    '-'}
                                            </p>
                                        </div>
                                    ))}
                                </div>
                            ) : null}
                        </SectionCard>
                    </TabsContent>
                </Tabs>
            </div>

            <FormDrawer
                open={viewingBooking !== null}
                onOpenChange={(open) => {
                    if (!open) {
                        setViewingBooking(null);
                    }
                }}
                title={`Booking #${viewingBooking?.uuid.slice(0, 8).toUpperCase() ?? ''}`}
                description={customer.name}
                direction="right"
                className="w-full sm:max-w-lg"
            >
                {viewingBooking ? (
                    <BookingDetailPanel
                        booking={viewingBooking}
                        footer={
                            <SheetFooter className="px-0 pb-0 sm:flex-row">
                                <Button
                                    type="button"
                                    variant="outline"
                                    onClick={() => setViewingBooking(null)}
                                >
                                    Close
                                </Button>
                                <Button type="button" onClick={openEditFromView}>
                                    Edit booking
                                </Button>
                            </SheetFooter>
                        }
                    />
                ) : null}
            </FormDrawer>

            <AdminBookingEditDrawer
                open={editingBooking !== null}
                onOpenChange={(open) => {
                    if (!open) {
                        setEditingBooking(null);
                    }
                }}
                booking={editingBooking}
                technicians={technicians}
                locations={locations}
                packages={packages}
                addons={addons}
                stripeEnabled={stripeEnabled}
                stripePublishableKey={stripePublishableKey}
            />
        </>
    );
}

AdminCustomerShow.layout = (page: ReactNode) => (
    <AppLayout
        breadcrumbs={[
            {
                title: 'Admin customers',
                href: '/admin/customers',
            },
            {
                title: 'Customer detail',
                href: '#',
            },
        ]}
    >
        {page}
    </AppLayout>
);