import { useForm } from '@inertiajs/react';
import { type FormEvent } from 'react';
import ProductController from '@/actions/App/Http/Controllers/Admin/ProductController';
import InputError from '@/components/input-error';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';

export type CategoryOption = {
    id: number;
    name: string;
};

export type UnitOfMeasureOption = {
    value: string;
    label: string;
    symbol: string;
};

export type ProductFormData = {
    id: number;
    code: string;
    name: string;
    category_id: number | null;
    unit_of_measure: string;
    description: string | null;
    sale_price: string | number;
    cost_price: string | number;
    min_stock: number;
    is_active: boolean;
};

type Props = {
    categories: CategoryOption[];
    unitsOfMeasure: UnitOfMeasureOption[];
    product?: ProductFormData | null;
    onCancel: () => void;
};

export function ProductForm({
    categories,
    unitsOfMeasure,
    product = null,
    onCancel,
}: Props) {
    const isEditing = product !== null;

    const form = useForm({
        name: product?.name ?? '',
        category_id: product?.category_id ? String(product.category_id) : '',
        unit_of_measure: product?.unit_of_measure ?? 'piece',
        description: product?.description ?? '',
        sale_price: product ? String(product.sale_price) : '',
        cost_price: product ? String(product.cost_price) : '',
        min_stock: product ? String(product.min_stock) : '0',
        is_active: product?.is_active ?? true,
    });

    function submit(event: FormEvent) {
        event.preventDefault();

        if (isEditing && product) {
            form.put(ProductController.update.url(product.id));
            return;
        }

        form.post(ProductController.store.url());
    }

    return (
        <form onSubmit={submit} className="max-w-xl space-y-6">
            {isEditing && product && (
                <div className="grid gap-2">
                    <Label>Code</Label>
                    <Input
                        value={product.code}
                        disabled
                        readOnly
                        className="font-mono"
                    />
                </div>
            )}

            <div className="grid gap-2">
                <Label htmlFor="product-name">Nom</Label>
                <Input
                    id="product-name"
                    value={form.data.name}
                    onChange={(event) =>
                        form.setData('name', event.target.value)
                    }
                    required
                    autoFocus
                />
                <InputError message={form.errors.name} />
            </div>

            <div className="grid gap-4 sm:grid-cols-2">
                <div className="grid gap-2">
                    <Label htmlFor="product-category">Catégorie</Label>
                    <Select
                        value={form.data.category_id || undefined}
                        onValueChange={(value) =>
                            form.setData('category_id', value)
                        }
                    >
                        <SelectTrigger id="product-category" className="w-full">
                            <SelectValue placeholder="Choisir une catégorie…" />
                        </SelectTrigger>
                        <SelectContent>
                            {categories.map((category) => (
                                <SelectItem
                                    key={category.id}
                                    value={String(category.id)}
                                >
                                    {category.name}
                                </SelectItem>
                            ))}
                        </SelectContent>
                    </Select>
                    <InputError message={form.errors.category_id} />
                </div>

                <div className="grid gap-2">
                    <Label htmlFor="product-unit">Unité de mesure</Label>
                    <Select
                        value={form.data.unit_of_measure}
                        onValueChange={(value) =>
                            form.setData('unit_of_measure', value)
                        }
                    >
                        <SelectTrigger id="product-unit" className="w-full">
                            <SelectValue placeholder="Choisir une unité…" />
                        </SelectTrigger>
                        <SelectContent>
                            {unitsOfMeasure.map((unit) => (
                                <SelectItem key={unit.value} value={unit.value}>
                                    {unit.label} ({unit.symbol})
                                </SelectItem>
                            ))}
                        </SelectContent>
                    </Select>
                    <InputError message={form.errors.unit_of_measure} />
                </div>
            </div>

            <div className="grid gap-2">
                <Label htmlFor="product-description">Description</Label>
                <Textarea
                    id="product-description"
                    rows={3}
                    value={form.data.description ?? ''}
                    onChange={(event) =>
                        form.setData('description', event.target.value)
                    }
                />
                <InputError message={form.errors.description} />
            </div>

            <div className="grid gap-4 sm:grid-cols-2">
                <div className="grid gap-2">
                    <Label htmlFor="product-sale-price">Prix de vente</Label>
                    <Input
                        id="product-sale-price"
                        type="number"
                        step="0.01"
                        min="0"
                        value={form.data.sale_price}
                        onChange={(event) =>
                            form.setData('sale_price', event.target.value)
                        }
                        required
                    />
                    <InputError message={form.errors.sale_price} />
                </div>

                <div className="grid gap-2">
                    <Label htmlFor="product-cost-price">Prix d’achat</Label>
                    <Input
                        id="product-cost-price"
                        type="number"
                        step="0.01"
                        min="0"
                        value={form.data.cost_price}
                        onChange={(event) =>
                            form.setData('cost_price', event.target.value)
                        }
                        required
                    />
                    <InputError message={form.errors.cost_price} />
                </div>
            </div>

            <div className="grid gap-2">
                <Label htmlFor="product-min-stock">
                    Seuil d’alerte stock minimum
                </Label>
                <Input
                    id="product-min-stock"
                    type="number"
                    min="0"
                    step="1"
                    value={form.data.min_stock}
                    onChange={(event) =>
                        form.setData('min_stock', event.target.value)
                    }
                    required
                />
                <InputError message={form.errors.min_stock} />
            </div>

            <label className="flex items-center gap-2 text-sm">
                <Checkbox
                    checked={form.data.is_active}
                    onCheckedChange={(checked) =>
                        form.setData('is_active', checked === true)
                    }
                />
                <span>Actif</span>
            </label>
            <InputError message={form.errors.is_active} />

            <div className="flex gap-3">
                <Button type="submit" disabled={form.processing}>
                    {isEditing ? 'Enregistrer' : 'Créer'}
                </Button>
                <Button type="button" variant="outline" onClick={onCancel}>
                    Annuler
                </Button>
            </div>
        </form>
    );
}