import { Link, usePage } from '@inertiajs/react';
import { Search } from 'lucide-react';
import { useMemo, useState } from 'react';
import { Input } from '@/components/ui/input';
import { searchDocPages } from '@/docs/content';
import { getDocsNavigation } from '@/docs/navigation';
import { docsUrl } from '@/docs/urls';
import { cn } from '@/lib/utils';
import type { UserRole } from '@/types/auth';

type Props = {
    currentSlug: string;
    onNavigate?: () => void;
};

export function DocsSearch({ currentSlug, onNavigate }: Props) {
    const { auth } = usePage().props;
    const role = auth.user.role as UserRole | undefined;
    const [query, setQuery] = useState('');

    const results = useMemo(
        () => searchDocPages(query, role).slice(0, 8),
        [query, role],
    );

    const showResults = query.trim().length > 0;

    return (
        <div className="relative mb-4">
            <Search className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
            <Input
                type="search"
                placeholder="Search docs..."
                value={query}
                onChange={(event) => setQuery(event.target.value)}
                className="h-9 bg-background pl-9"
            />
            {showResults ? (
                <div className="absolute z-20 mt-1 w-full rounded-lg border border-border bg-popover p-1 shadow-md">
                    {results.length === 0 ? (
                        <p className="px-3 py-2 text-sm text-muted-foreground">
                            No results found.
                        </p>
                    ) : (
                        results.map((page) => (
                            <Link
                                key={page.slug}
                                href={docsUrl(page.slug)}
                                onClick={() => {
                                    setQuery('');
                                    onNavigate?.();
                                }}
                                className={cn(
                                    'block rounded-md px-3 py-2 text-sm transition-colors hover:bg-muted',
                                    currentSlug === page.slug &&
                                        'bg-muted font-medium',
                                )}
                            >
                                <span className="block text-foreground">
                                    {page.title}
                                </span>
                                <span className="line-clamp-1 text-xs text-muted-foreground">
                                    {page.description}
                                </span>
                            </Link>
                        ))
                    )}
                </div>
            ) : null}
        </div>
    );
}

export function DocsSidebarNav({ currentSlug, onNavigate }: Props) {
    const { auth } = usePage().props;
    const role = auth.user.role as UserRole | undefined;
    const navigation = getDocsNavigation(role);

    const handleNavigate = (): void => {
        onNavigate?.();
    };

    return (
        <div>
            <DocsSearch
                currentSlug={currentSlug}
                onNavigate={handleNavigate}
            />
            <nav className="space-y-6 pb-6">
                {navigation.map((group) => (
                    <div key={group.label}>
                        <p className="mb-2 px-2 text-xs font-bold tracking-wide text-primary uppercase">
                            {group.label}
                        </p>
                        <ul className="space-y-0.5">
                            {group.items.map((item) =>
                                item.slug ? (
                                    <li key={item.slug}>
                                        <Link
                                            href={docsUrl(item.slug)}
                                            onClick={handleNavigate}
                                            className={cn(
                                                'block rounded-md px-2 py-1.5 text-sm transition-colors',
                                                currentSlug === item.slug
                                                    ? 'bg-primary/10 font-medium text-primary'
                                                    : 'text-muted-foreground hover:bg-muted hover:text-foreground',
                                            )}
                                        >
                                            {item.title}
                                        </Link>
                                    </li>
                                ) : null,
                            )}
                        </ul>
                    </div>
                ))}
            </nav>
        </div>
    );
}