import { Checkbox } from '@/components/ui/checkbox';
import { cn } from '@/lib/utils';
import { CheckSquare, Square } from 'lucide-react';
import type { ModuleGroup } from './types';

export default function ModulesTab({
    modules,
    selectedSlugs,
    onToggleSlug,
    onToggleModule,
    onSelectAll,
    onClearAll,
}: {
    modules: ModuleGroup[];
    selectedSlugs: Set<string>;
    onToggleSlug: (slug: string) => void;
    onToggleModule: (group: ModuleGroup) => void;
    onSelectAll: () => void;
    onClearAll: () => void;
}) {
    return (
        <div className="pf-glass rounded-xl p-5">
            <div className="mb-4 flex items-center justify-between">
                <p className="text-muted-foreground text-xs">
                    Core sub-modules are always enabled and cannot be
                    deselected.
                </p>
                <div className="flex gap-2">
                    <button
                        type="button"
                        onClick={onSelectAll}
                        className="text-primary hover:text-primary/80 flex items-center gap-1 text-xs font-medium"
                    >
                        <CheckSquare className="h-3.5 w-3.5" /> All
                    </button>
                    <span className="text-muted-foreground dark:text-muted-foreground/40">
                        ·
                    </span>
                    <button
                        type="button"
                        onClick={onClearAll}
                        className="text-muted-foreground hover:text-foreground flex items-center gap-1 text-xs font-medium"
                    >
                        <Square className="h-3.5 w-3.5" /> None
                    </button>
                </div>
            </div>

            <div className="space-y-5">
                {modules.map((group) => {
                    const nonCore = group.sub_modules.filter((s) => !s.is_core);
                    const allSel =
                        nonCore.length > 0 &&
                        nonCore.every((s) => selectedSlugs.has(s.slug));
                    const someSel = nonCore.some((s) =>
                        selectedSlugs.has(s.slug),
                    );

                    return (
                        <div key={group.id}>
                            {/* Module header */}
                            <button
                                type="button"
                                onClick={() => onToggleModule(group)}
                                className={cn(
                                    'mb-2 flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors',
                                    'hover:bg-muted/40',
                                )}
                            >
                                <Checkbox
                                    checked={allSel}
                                    data-state={
                                        someSel && !allSel
                                            ? 'indeterminate'
                                            : undefined
                                    }
                                    onCheckedChange={() =>
                                        onToggleModule(group)
                                    }
                                    onClick={(e) => e.stopPropagation()}
                                />
                                <span className="text-foreground text-sm font-semibold">
                                    {group.name}
                                </span>
                                <span className="text-muted-foreground ml-auto text-xs">
                                    {
                                        nonCore.filter((s) =>
                                            selectedSlugs.has(s.slug),
                                        ).length
                                    }
                                    /{nonCore.length}
                                </span>
                            </button>

                            {/* Sub-modules */}
                            <div className="ml-6 grid grid-cols-1 gap-1 sm:grid-cols-2 lg:grid-cols-3">
                                {group.sub_modules.map((sm) => (
                                    <label
                                        key={sm.id}
                                        className={cn(
                                            'flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5 transition-colors',
                                            sm.is_core
                                                ? 'cursor-default opacity-60'
                                                : 'hover:bg-muted/30',
                                        )}
                                    >
                                        <Checkbox
                                            checked={
                                                sm.is_core ||
                                                selectedSlugs.has(sm.slug)
                                            }
                                            disabled={sm.is_core}
                                            onCheckedChange={() =>
                                                !sm.is_core &&
                                                onToggleSlug(sm.slug)
                                            }
                                        />
                                        <span className="text-foreground text-xs">
                                            {sm.name}
                                        </span>
                                        {sm.is_core && (
                                            <span className="text-muted-foreground dark:text-muted-foreground/50 ml-auto text-[10px]">
                                                core
                                            </span>
                                        )}
                                    </label>
                                ))}
                            </div>
                        </div>
                    );
                })}
            </div>
        </div>
    );
}