import { TableListToolbar } from '@/components/common/TableListToolbar';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import type { DocumentAccountantStatus, DocumentsFilters } from '@/features/documents/types';
import { useI18n } from '@/hooks/use-i18n';

type ClientDocumentsToolbarProps = {
    search: string;
    onSearchChange: (value: string) => void;
    onSearchSubmit: () => void;
    filters: Required<DocumentsFilters>;
    onApplyFilters: (filters: Partial<DocumentsFilters>) => void;
    onResetFilters: () => void;
};

const accountantStatuses: DocumentAccountantStatus[] = [
    'waiting',
    'in_review',
    'needs_info',
    'error',
    'validated',
    'rejected',
];

const accountantStatusLabels: Record<DocumentAccountantStatus, string> = {
    waiting: 'In asteptare',
    in_review: 'In review',
    needs_info: 'Necesare info',
    error: 'Eroare',
    validated: 'Validat',
    rejected: 'Respins',
};

export function ClientDocumentsToolbar({
    search,
    onSearchChange,
    onSearchSubmit,
    filters,
    onApplyFilters,
    onResetFilters,
}: ClientDocumentsToolbarProps) {
    const { t } = useI18n();

    return (
        <TableListToolbar
            align="end"
            search={{
                value: search,
                onChange: onSearchChange,
                onSubmit: onSearchSubmit,
                placeholder: t('documents.admin_index.toolbar.search_placeholder'),
            }}
        >
            <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
                <div className="space-y-1">
                    <Label htmlFor="client-documents-accountant-status" className="text-xs">
                        Status contabil
                    </Label>
                    <Select
                        value={filters.accountant_status || 'all'}
                        onValueChange={(value) =>
                            onApplyFilters({
                                page: 1,
                                accountant_status: value === 'all' ? '' : (value as DocumentAccountantStatus),
                            })
                        }
                    >
                        <SelectTrigger id="client-documents-accountant-status" className="h-10 min-w-[170px]">
                            <SelectValue placeholder="Toate statusurile" />
                        </SelectTrigger>
                        <SelectContent>
                            <SelectItem value="all">Toate statusurile</SelectItem>
                            {accountantStatuses.map((status) => (
                                <SelectItem key={status} value={status}>
                                    {accountantStatusLabels[status]}
                                </SelectItem>
                            ))}
                        </SelectContent>
                    </Select>
                </div>

                <div className="flex items-end">
                    <Button type="button" variant="ghost" className="h-10 w-full" onClick={onResetFilters}>
                        Reseteaza
                    </Button>
                </div>
            </div>
        </TableListToolbar>
    );
}