import { FormField } from '@/components/form-field';
import {
    LocationMultiSelect,
    type LocationOption,
} from '@/components/location-multi-select';
import { MoneyInput } from '@/components/money-input';
import type { VehicleSizeCategoryOption } from '@/lib/vehicle-sizes';
import { buildDefaultPrices } from '@/lib/vehicle-sizes';
import { cn } from '@/lib/utils';
import { Link } from '@inertiajs/react';
import { Car } from 'lucide-react';
import { Button } from '@/components/ui/button';
import adminVehicleSizes from '@/routes/admin/vehicle-sizes';

export type PackageRow = {
    id: number;
    name: string;
    description: string | null;
    duration_minutes: number;
    prices: Record<string, number>;
    is_active: boolean;
    is_featured: boolean;
    icon: string | null;
    icon_svg: string | null;
    display_order: number;
    location_ids: number[];
};

export type PackageFormData = {
    name: string;
    description: string;
    duration_minutes: number;
    prices: Record<string, number>;
    is_active: boolean;
    is_featured: boolean;
    icon: string;
    display_order: number;
    location_ids: number[];
};

export const emptyPackageForm = (
    categories: VehicleSizeCategoryOption[],
): PackageFormData => ({
    name: '',
    description: '',
    duration_minutes: 0,
    prices: buildDefaultPrices(categories),
    is_active: true,
    is_featured: false,
    icon: 'default',
    display_order: 0,
    location_ids: [],
});

export const packageToFormData = (item: PackageRow): PackageFormData => ({
    name: item.name,
    description: item.description ?? '',
    duration_minutes: item.duration_minutes,
    prices: item.prices,
    is_active: item.is_active,
    is_featured: item.is_featured,
    icon: item.icon ?? 'default',
    display_order: item.display_order,
    location_ids: item.location_ids,
});

export function VehicleSizePricingFields({
    categories,
    values,
    onChange,
    idPrefix,
    layout = 'page',
}: {
    categories: VehicleSizeCategoryOption[];
    values: Pick<PackageFormData, 'prices'>;
    onChange: (slug: string, value: number) => void;
    idPrefix: string;
    layout?: 'page' | 'compact';
}) {
    return (
        <div className="space-y-3">
            <div className="flex flex-wrap items-start justify-between gap-2">
                <div>
                    <p className="text-sm font-medium">Pricing by vehicle size</p>
                    <p className="text-xs text-muted-foreground">
                        Enter prices in USD for each active vehicle size in the
                        catalog.
                    </p>
                </div>
                <Button className="bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300" size="sm" asChild>
                    <Link href={adminVehicleSizes.index.url()}>
                        <Car data-icon="inline-start" />
                        Manage vehicle sizes
                    </Link>
                </Button>
            </div>
            <div
                className={cn(
                    'grid gap-3',
                    layout === 'compact'
                        ? 'grid-cols-2'
                        : 'sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5',
                )}
            >
                {categories.map((category) => (
                    <FormField
                        key={category.slug}
                        label={
                            category.emoji_fallback
                                ? `${category.emoji_fallback} ${category.name}`
                                : category.name
                        }
                        htmlFor={`${idPrefix}-${category.slug}`}
                    >
                        <MoneyInput
                            id={`${idPrefix}-${category.slug}`}
                            cents={values.prices[category.slug] ?? 0}
                            onCentsChange={(cents) =>
                                onChange(category.slug, cents)
                            }
                        />
                    </FormField>
                ))}
            </div>
        </div>
    );
}

export function LocationAssignmentFields({
    locations,
    selectedIds,
    onChange,
}: {
    locations: LocationOption[];
    selectedIds: number[];
    onChange: (ids: number[]) => void;
}) {
    return (
        <div className="space-y-3">
            <div>
                <p className="text-sm font-medium">Location availability</p>
                <p className="text-xs text-muted-foreground">
                    Leave empty to offer at every location. Search and select
                    locations only when this package needs equipment not
                    available everywhere.
                </p>
            </div>
            <LocationMultiSelect
                locations={locations}
                selectedIds={selectedIds}
                onChange={onChange}
            />
            {selectedIds.length > 0 ? (
                <p className="text-xs text-muted-foreground">
                    Restricted to {selectedIds.length} location
                    {selectedIds.length === 1 ? '' : 's'}.
                </p>
            ) : (
                <p className="text-xs text-muted-foreground">
                    Available at all locations.
                </p>
            )}
        </div>
    );
}