import { DateRangePicker } from '@/components/date-range';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { router } from '@inertiajs/react';
import { RefreshCcw } from 'lucide-react';
import React, { useEffect, useRef } from 'react';

export interface CurrentFilters {
    search?: string;
    status?: string;
    dateField?: 'created' | 'paid';
    dateRange?: { from?: string; to?: string };
    amountMin?: string;
    amountMax?: string;
    createdBy?: string;
    coHost?: string;
}

interface FiltersCardProps {
    currentFilters: CurrentFilters;
    statusOptions: { value: string; label: string }[];
    creators: { id: number; name: string }[];
    franchises: { id: number; name: string }[];
    t: (namespace: string, key: string) => string;
}

const ALL = 'tous';
const MAIN_ACCOUNT = 'thelandlord';

export function FiltersCard({ currentFilters, statusOptions, creators, franchises, t }: FiltersCardProps) {
    const [search, setSearch] = React.useState(currentFilters.search ?? '');
    const [status, setStatus] = React.useState(currentFilters.status ?? ALL);
    const [dateField, setDateField] = React.useState<'created' | 'paid'>(currentFilters.dateField ?? 'created');
    const [dateRange, setDateRange] = React.useState<{ from: string; to: string }>({
        from: currentFilters.dateRange?.from ?? '',
        to: currentFilters.dateRange?.to ?? '',
    });
    const [amountMin, setAmountMin] = React.useState(currentFilters.amountMin ?? '');
    const [amountMax, setAmountMax] = React.useState(currentFilters.amountMax ?? '');
    const [createdBy, setCreatedBy] = React.useState(currentFilters.createdBy ?? ALL);
    const [coHost, setCoHost] = React.useState(currentFilters.coHost ?? MAIN_ACCOUNT);

    const isFirstRender = useRef(true);

    useEffect(() => {
        if (isFirstRender.current) {
            isFirstRender.current = false;
            return;
        }
        const delayDebounceFn = setTimeout(() => {
            const data: Record<string, string | object | undefined> = {
                search,
                status,
                dateField,
                amountMin,
                amountMax,
                createdBy,
            };
            if (dateRange.from || dateRange.to) data.dateRange = dateRange;
            if (coHost !== MAIN_ACCOUNT) data.coHost = coHost;
            router.get(route('clictopay.index'), data as never, { preserveState: true, replace: true });
        }, 300);

        return () => clearTimeout(delayDebounceFn);
    }, [search, status, dateField, dateRange, amountMin, amountMax, createdBy, coHost]);

    const handleReset = () => {
        router.get(route('clictopay.index'), {}, { preserveState: false, replace: true });
    };

    return (
        <Card id="filter-container" className="mb-3">
            <CardContent className="px-4 py-3">
                <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
                    <div className="sm:col-span-2">
                        <Label className="mb-2 block">{t('clictopay', 'search')}</Label>
                        <Input
                            value={search}
                            onChange={(e) => setSearch(e.target.value)}
                            placeholder={t('clictopay', 'search_placeholder')}
                            className="text-secondary bg-white"
                        />
                    </div>
                    <div>
                        <Label className="mb-2 block">{t('clictopay', 'status')}</Label>
                        <Select value={status} onValueChange={setStatus}>
                            <SelectTrigger className="text-secondary bg-white">
                                <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectGroup>
                                    {statusOptions.map((s) => (
                                        <SelectItem key={s.value} value={s.value}>
                                            {s.label}
                                        </SelectItem>
                                    ))}
                                </SelectGroup>
                            </SelectContent>
                        </Select>
                    </div>
                    <div>
                        <Label className="mb-2 block">{t('clictopay', 'date_field')}</Label>
                        <Select value={dateField} onValueChange={(v) => setDateField(v as 'created' | 'paid')}>
                            <SelectTrigger className="text-secondary bg-white">
                                <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectGroup>
                                    <SelectItem value="created">{t('clictopay', 'date_created')}</SelectItem>
                                    <SelectItem value="paid">{t('clictopay', 'date_paid')}</SelectItem>
                                </SelectGroup>
                            </SelectContent>
                        </Select>
                    </div>
                    <div>
                        <Label className="mb-2 block">{t('clictopay', 'date_range')}</Label>
                        <DateRangePicker date={dateRange} setDate={setDateRange} />
                    </div>
                    <div>
                        <Label className="mb-2 block">{t('clictopay', 'amount_min')}</Label>
                        <Input
                            type="number"
                            min={0}
                            step="0.001"
                            value={amountMin}
                            onChange={(e) => setAmountMin(e.target.value)}
                            className="text-secondary bg-white"
                        />
                    </div>
                    <div>
                        <Label className="mb-2 block">{t('clictopay', 'amount_max')}</Label>
                        <Input
                            type="number"
                            min={0}
                            step="0.001"
                            value={amountMax}
                            onChange={(e) => setAmountMax(e.target.value)}
                            className="text-secondary bg-white"
                        />
                    </div>
                    <div>
                        <Label className="mb-2 block">{t('clictopay', 'created_by')}</Label>
                        <Select value={createdBy} onValueChange={setCreatedBy}>
                            <SelectTrigger className="text-secondary bg-white">
                                <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectGroup>
                                    <SelectItem value={ALL}>{t('clictopay', 'all')}</SelectItem>
                                    {creators.map((c) => (
                                        <SelectItem key={c.id} value={String(c.id)}>
                                            {c.name}
                                        </SelectItem>
                                    ))}
                                </SelectGroup>
                            </SelectContent>
                        </Select>
                    </div>
                    {franchises.length > 0 && (
                        <div>
                            <Label className="mb-2 block">{t('clictopay', 'franchise')}</Label>
                            <Select value={coHost} onValueChange={setCoHost}>
                                <SelectTrigger className="text-secondary bg-white">
                                    <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectGroup>
                                        <SelectItem value={MAIN_ACCOUNT}>{t('clictopay', 'headquarters')}</SelectItem>
                                        {franchises.map((f) => (
                                            <SelectItem key={f.id} value={String(f.id)}>
                                                {f.name}
                                            </SelectItem>
                                        ))}
                                    </SelectGroup>
                                </SelectContent>
                            </Select>
                        </div>
                    )}
                    <div className="flex items-end">
                        <Button variant="ghost" className="gap-2" onClick={handleReset}>
                            <RefreshCcw className="h-4 w-4" />
                            {t('clictopay', 'reset')}
                        </Button>
                    </div>
                </div>
            </CardContent>
        </Card>
    );
}