/***********************************************************************************************************************************************************************
 * File Name    : TaskMultiSelect.jsx
 * Type         : Reusable Component
 * Description  : Searchable multi-select dropdown for sibling Tasks (used to pick
 *                a task's prerequisite tasks). Cloned from GroupMultiSelect.jsx's
 *                UI/UX — portal dropdown, badge + "+N" overflow, select all/clear —
 *                but takes `tasks` directly from the caller instead of fetching its
 *                own endpoint, since the parent page already has the sibling task
 *                list loaded.
 *
 * Props:
 *   value       : string[]                    — selected task_ids
 *   onChange    : (ids: string[]) => void
 *   tasks       : { task_id, name }[]          — candidate tasks (already excludes self)
 *   disabled?   : boolean
 *   placeholder?: string
 ***********************************************************************************************************************************************************************/
import { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import { Badge } from '@/components/ui/badge';
import { Input } from '@/components/ui/input';
import { cn } from '@/lib/utils';
import { Check, ChevronsUpDown, X, ListChecks } from 'lucide-react';

export default function TaskMultiSelect({
    value = [],
    onChange,
    tasks = [],
    disabled = false,
    placeholder = 'Select tasks…',
}) {
    const [open, setOpen] = useState(false);
    const [search, setSearch] = useState('');
    const [dropdownStyle, setDropdownStyle] = useState({});

    const triggerRef  = useRef(null);
    const dropdownRef = useRef(null);

    // ── Position portal dropdown under trigger ────────────────────────────────
    useLayoutEffect(() => {
        if (!open || !triggerRef.current) return;

        const reposition = () => {
            const rect = triggerRef.current.getBoundingClientRect();
            setDropdownStyle({
                position: 'fixed',
                top:   rect.bottom + 4,
                left:  rect.left,
                width: rect.width,
                zIndex: 9999,
            });
        };

        reposition();
        window.addEventListener('scroll', reposition, true);
        window.addEventListener('resize', reposition);
        return () => {
            window.removeEventListener('scroll', reposition, true);
            window.removeEventListener('resize', reposition);
        };
    }, [open]);

    // ── Close on outside click ────────────────────────────────────────────────
    useEffect(() => {
        if (!open) return;
        const handler = (e) => {
            if (
                triggerRef.current?.contains(e.target) ||
                dropdownRef.current?.contains(e.target)
            ) return;
            setOpen(false);
            setSearch('');
        };
        document.addEventListener('mousedown', handler);
        return () => document.removeEventListener('mousedown', handler);
    }, [open]);

    // ── Helpers ───────────────────────────────────────────────────────────────
    const filtered = tasks.filter((t) =>
        t.name.toLowerCase().includes(search.toLowerCase())
    );
    const selectedTasks  = tasks.filter((t) => value.includes(t.task_id));
    const overflowCount  = selectedTasks.length - 1;

    // All currently visible (filtered) IDs — used for select-all scope
    const filteredIds    = filtered.map((t) => t.task_id);
    const allFilteredSelected = filteredIds.length > 0 && filteredIds.every((id) => value.includes(id));

    const toggle = (taskId) =>
        onChange(value.includes(taskId)
            ? value.filter((id) => id !== taskId)
            : [...value, taskId]
        );

    const remove = (e, taskId) => {
        e.stopPropagation();
        onChange(value.filter((id) => id !== taskId));
    };

    // Select all visible (filtered) tasks
    const handleSelectAll = () => {
        const merged = Array.from(new Set([...value, ...filteredIds]));
        onChange(merged);
    };

    // Clear all selections
    const handleClear = () => onChange([]);

    // ── Portal dropdown ───────────────────────────────────────────────────────
    const dropdown = open && createPortal(
        <div
            ref={dropdownRef}
            style={dropdownStyle}
            className="rounded-md border border-border bg-popover shadow-lg"
        >
            {/* Search row */}
            <div className="p-2 border-b border-border">
                <Input
                    autoFocus
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                    placeholder="Search tasks…"
                    className="h-8 text-sm"
                />
            </div>

            {/* Select all / Clear row */}
            {tasks.length > 0 && (
                <div className="flex items-center justify-between px-3 py-1.5 border-b border-border bg-muted/40">
                    <button
                        type="button"
                        onMouseDown={(e) => e.preventDefault()}
                        onClick={allFilteredSelected ? handleClear : handleSelectAll}
                        className="text-xs text-primary hover:underline underline-offset-2 font-medium"
                    >
                        {allFilteredSelected ? 'Deselect all' : 'Select all'}
                        {search && ` (${filteredIds.length})`}
                    </button>
                    {value.length > 0 && (
                        <button
                            type="button"
                            onMouseDown={(e) => e.preventDefault()}
                            onClick={handleClear}
                            className="text-xs text-muted-foreground hover:text-destructive transition-colors"
                        >
                            Clear ({value.length})
                        </button>
                    )}
                </div>
            )}

            {/* Options */}
            <ul className="max-h-52 overflow-y-auto py-1">
                {filtered.length === 0 ? (
                    <li className="px-3 py-6 text-center text-xs text-muted-foreground">
                        No tasks found.
                    </li>
                ) : (
                    filtered.map((t) => {
                        const selected = value.includes(t.task_id);
                        return (
                            <li
                                key={t.task_id}
                                onMouseDown={(e) => e.preventDefault()}
                                onClick={() => toggle(t.task_id)}
                                className={cn(
                                    'flex items-center gap-2 px-3 py-2 text-sm cursor-pointer select-none',
                                    'hover:bg-accent hover:text-accent-foreground',
                                    selected && 'bg-accent/50'
                                )}
                            >
                                <div className={cn(
                                    'h-4 w-4 rounded border flex items-center justify-center shrink-0',
                                    selected
                                        ? 'bg-primary border-primary text-primary-foreground'
                                        : 'border-input'
                                )}>
                                    {selected && <Check className="h-3 w-3" />}
                                </div>
                                <ListChecks className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
                                <span className="truncate">{t.name}</span>
                            </li>
                        );
                    })
                )}
            </ul>
        </div>,
        document.body
    );

    return (
        <>
            {/* ── Trigger button ───────────────────────────────────────────── */}
            <button
                ref={triggerRef}
                type="button"
                disabled={disabled}
                onClick={() => { setOpen((o) => !o); setSearch(''); }}
                className={cn(
                    'w-full min-h-9 px-3 py-1.5 rounded-md border border-input bg-background text-sm',
                    'flex items-center gap-1.5 text-left',
                    'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1',
                    'disabled:opacity-50 disabled:cursor-not-allowed',
                    open && 'ring-2 ring-ring ring-offset-1'
                )}
            >
                {selectedTasks.length === 0 ? (
                    <span className="text-muted-foreground flex-1">{placeholder}</span>
                ) : (
                    <span className="flex items-center gap-1 flex-1 min-w-0">
                        {/* Always show only the first selected task */}
                        <Badge variant="secondary" className="gap-1 text-xs pr-1 shrink-0 max-w-[180px]">
                            <ListChecks className="h-3 w-3 shrink-0" />
                            <span className="truncate">{selectedTasks[0].name}</span>
                            <span
                                role="button"
                                tabIndex={0}
                                onClick={(e) => remove(e, selectedTasks[0].task_id)}
                                onKeyDown={(e) => e.key === 'Enter' && remove(e, selectedTasks[0].task_id)}
                                className="ml-0.5 rounded-full hover:bg-muted-foreground/20 p-0.5 cursor-pointer shrink-0"
                            >
                                <X className="h-2.5 w-2.5" />
                            </span>
                        </Badge>

                        {/* +N overflow chip */}
                        {overflowCount > 0 && (
                            <Badge variant="outline" className="text-xs px-1.5 shrink-0">
                                +{overflowCount}
                            </Badge>
                        )}
                    </span>
                )}
                <ChevronsUpDown className="h-3.5 w-3.5 text-muted-foreground shrink-0 ml-auto" />
            </button>

            {/* ── Portalled dropdown ────────────────────────────────────────── */}
            {dropdown}
        </>
    );
}