import { cn } from '@/lib/utils';
import { Link } from '@inertiajs/react';
import { BarChart3, ClipboardList, List } from 'lucide-react';

interface CurrentFilters {
    dateRange?: { from: string; to: string } | null;
    state?: string | null;
    logement?: string | null;
    minRating?: string | null;
    source?: string | null;
    coHost?: string | null;
}

/**
 * Three-tab navigation between the three flavors of guest feedback:
 *   - Reviews        → external OTA reviews (/reviews)
 *   - Questionnaire  → internal post-stay surveys (/questionnaires)
 *   - Statistique    → aggregated stats (/reviews/stats)
 *
 * Preserves all currently-active filters in the URL so switching tabs doesn't reset the
 * user's scope.
 */
export function TabsSwitcher({
    active,
    filters,
    t,
}: {
    active: 'reviews' | 'questionnaires' | 'stats';
    filters: CurrentFilters;
    t: (ns: string, k: string) => string;
}) {
    const params: Record<string, unknown> = {};
    if (filters.dateRange) params.dateRange = filters.dateRange;
    if (filters.state && filters.state !== 'tous') params.state = filters.state;
    if (filters.logement && filters.logement !== 'tous') params.logement = filters.logement;
    if (filters.minRating && filters.minRating !== '0') params.minRating = filters.minRating;
    if (filters.source && filters.source !== 'tous') params.source = filters.source;
    if (filters.coHost) params.coHost = filters.coHost;

    const tabs: Array<{ key: typeof active; route: string; icon: React.ReactNode; label: string }> = [
        { key: 'reviews', route: 'reviews', icon: <List className="h-4 w-4" />, label: t('reviews', 'view_reviews') },
        { key: 'questionnaires', route: 'questionnaires', icon: <ClipboardList className="h-4 w-4" />, label: t('reviews', 'view_questionnaires') },
        { key: 'stats', route: 'reviews.stats', icon: <BarChart3 className="h-4 w-4" />, label: t('reviews', 'view_stats') },
    ];

    return (
        <div className="mb-3 inline-flex rounded-full bg-white p-1 shadow-sm">
            {tabs.map((tab) => (
                <Link
                    key={tab.key}
                    href={route(tab.route, params as never)}
                    preserveState={false}
                    className={cn(
                        'inline-flex items-center gap-2 rounded-full px-4 py-1.5 text-sm font-medium transition-colors',
                        active === tab.key ? 'bg-primary text-white' : 'text-gray-600 hover:bg-gray-100',
                    )}
                >
                    {tab.icon}
                    {tab.label}
                </Link>
            ))}
        </div>
    );
}

export type { CurrentFilters };