import * as React from "react";
import {
    CommandDialog,
    CommandEmpty,
    CommandGroup,
    CommandInput,
    CommandItem,
    CommandList,
    CommandSeparator,
} from "@/components/ui/command";
import { searchItems } from "@/lib/searchData";
import { useNavigate } from "react-router-dom";
import { Search, Monitor, Briefcase, HelpCircle, FileText, Globe } from "lucide-react";

export function SearchDialog({
    open,
    onOpenChange,
}: {
    open: boolean;
    onOpenChange: (open: boolean) => void;
}) {
    const navigate = useNavigate();

    const runCommand = React.useCallback((command: () => unknown) => {
        onOpenChange(false);
        command();
    }, [onOpenChange]);

    const getIcon = (type: string) => {
        switch (type) {
            case "Page":
                return <Monitor className="mr-2 h-4 w-4" />;
            case "Business":
                return <Briefcase className="mr-2 h-4 w-4" />;
            case "Support":
                return <HelpCircle className="mr-2 h-4 w-4" />;
            case "Legal":
                return <FileText className="mr-2 h-4 w-4" />;
            default:
                return <Search className="mr-2 h-4 w-4" />;
        }
    };

    const pages = searchItems.filter((item) => item.type === "Page");
    const business = searchItems.filter((item) => item.type === "Business");
    const support = searchItems.filter((item) => item.type === "Support");

    return (
        <CommandDialog open={open} onOpenChange={onOpenChange}>
            <CommandInput placeholder="Rechercher une page ou un service..." />
            <CommandList>
                <CommandEmpty>Aucun résultat trouvé.</CommandEmpty>

                {pages.length > 0 && (
                    <CommandGroup heading="Pages Principales">
                        {pages.map((item) => (
                            <CommandItem
                                key={item.id}
                                value={`${item.title} ${item.keywords?.join(" ")}`}
                                onSelect={() => {
                                    if (item.url.startsWith("http")) {
                                        runCommand(() => window.open(item.url, "_blank"));
                                    } else {
                                        runCommand(() => navigate(item.url));
                                    }
                                }}
                            >
                                {getIcon(item.type)}
                                <span>{item.title}</span>
                                {item.id === "client-portal" && <Globe className="ml-auto h-4 w-4 text-muted-foreground" />}
                            </CommandItem>
                        ))}
                    </CommandGroup>
                )}

                <CommandSeparator />

                {business.length > 0 && (
                    <CommandGroup heading="Solutions Affaires">
                        {business.map((item) => (
                            <CommandItem
                                key={item.id}
                                value={`${item.title} ${item.keywords?.join(" ")}`}
                                onSelect={() => {
                                    if (item.url.startsWith("http")) {
                                        runCommand(() => window.open(item.url, "_blank"));
                                    } else {
                                        runCommand(() => navigate(item.url));
                                    }
                                }}
                            >
                                {getIcon(item.type)}
                                <span>{item.title}</span>
                            </CommandItem>
                        ))}
                    </CommandGroup>
                )}

                <CommandSeparator />

                {support.length > 0 && (
                    <CommandGroup heading="Support & Aide">
                        {support.map((item) => (
                            <CommandItem
                                key={item.id}
                                value={`${item.title} ${item.keywords?.join(" ")}`}
                                onSelect={() => {
                                    if (item.url.startsWith("http")) {
                                        runCommand(() => window.open(item.url, "_blank"));
                                    } else {
                                        runCommand(() => navigate(item.url));
                                    }
                                }}
                            >
                                {getIcon(item.type)}
                                <span>{item.title}</span>
                                {item.id === "client-portal" && <Globe className="ml-auto h-4 w-4 text-muted-foreground" />}
                            </CommandItem>
                        ))}
                    </CommandGroup>
                )}
            </CommandList>
        </CommandDialog>
    );
}
