import React from 'react';
import { Button } from '@/components/ui/button';
import { ButtonLarge } from '@/components/ui/button-large';
import { Input } from '@/components/ui/input';
import { toast } from 'sonner';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from '@/components/ui/dialog';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { RiAddLine, RiAiAgentFill, RiAiAgentLine, RiDeleteBinLine, RiFileCopyLine, RiMore2Line, RiRobot2Line, RiRobotLine } from '@remixicon/react';
import { useAgentsStore } from '@/stores/useAgentsStore';
import { useUIStore } from '@/stores/useUIStore';
import { useDeviceInfo } from '@/lib/device';
import { cn } from '@/lib/utils';
import type { Agent } from '@opencode-ai/sdk';
import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';

export const AgentsSidebar: React.FC = () => {
    const [newAgentName, setNewAgentName] = React.useState('');
    const [isCreateDialogOpen, setIsCreateDialogOpen] = React.useState(false);

    const {
        selectedAgentName,
        agents,
        setSelectedAgent,
        deleteAgent,
        loadAgents,
    } = useAgentsStore();

    const { setSidebarOpen } = useUIStore();
    const { isMobile } = useDeviceInfo();

    React.useEffect(() => {
        loadAgents();
    }, [loadAgents]);

    const handleCreateAgent = () => {
        if (!newAgentName.trim()) {
            toast.error('Agent name is required');
            return;
        }

        if (agents.some((agent) => agent.name === newAgentName)) {
            toast.error('An agent with this name already exists');
            return;
        }

        setSelectedAgent(newAgentName);
        setNewAgentName('');
        setIsCreateDialogOpen(false);

        if (isMobile) {
            setSidebarOpen(false);
        }
    };

    const handleDeleteAgent = async (agent: Agent) => {
        if (agent.builtIn) {
            toast.error('Built-in agents cannot be deleted');
            return;
        }

        if (window.confirm(`Are you sure you want to delete agent "${agent.name}"?`)) {
            const success = await deleteAgent(agent.name);
            if (success) {
                toast.success(`Agent "${agent.name}" deleted successfully`);
            } else {
                toast.error('Failed to delete agent');
            }
        }
    };

    const handleDuplicateAgent = (agent: Agent) => {
        const baseName = agent.name;
        let copyNumber = 1;
        let newName = `${baseName} Copy`;

        while (agents.some((a) => a.name === newName)) {
            copyNumber++;
            newName = `${baseName} Copy ${copyNumber}`;
        }

        setSelectedAgent(newName);
        setIsCreateDialogOpen(false);

        if (isMobile) {
            setSidebarOpen(false);
        }
    };

    const getAgentModeIcon = (mode?: string) => {
        switch (mode) {
            case 'primary':
                return <RiAiAgentLine className="h-3 w-3 text-primary" />;
            case 'all':
                return <RiAiAgentFill className="h-3 w-3 text-primary" />;
            case 'subagent':
                return <RiRobotLine className="h-3 w-3 text-primary" />;
            default:
                return null;
        }
    };

    const builtInAgents = agents.filter((agent) => agent.builtIn);
    const customAgents = agents.filter((agent) => !agent.builtIn);

    return (
        <div className="flex h-full flex-col bg-sidebar">
            <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
                <div className={cn('border-b border-border/40 px-3 dark:border-white/10', isMobile ? 'mt-2 py-3' : 'py-3')}>
                    <div className="flex items-center justify-between gap-2">
                        <h2 className="typography-ui-label font-semibold text-foreground">Agents</h2>
                        <div className="flex items-center gap-1">
                            <span className="typography-meta text-muted-foreground">{agents.length}</span>
                            <DialogTrigger asChild>
                                <Button type="button" variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground">
                                    <RiAddLine className="size-4" />
                                </Button>
                            </DialogTrigger>
                        </div>
                    </div>
                </div>

                <ScrollableOverlay outerClassName="flex-1 min-h-0" className="space-y-1 px-3 py-2 overflow-x-hidden">
                    {agents.length === 0 ? (
                        <div className="py-12 px-4 text-center text-muted-foreground">
                            <RiRobot2Line className="mx-auto mb-3 h-10 w-10 opacity-50" />
                            <p className="typography-ui-label font-medium">No agents configured</p>
                            <p className="typography-meta mt-1 opacity-75">Use the + button above to create one</p>
                        </div>
                    ) : (
                        <>
                            {builtInAgents.length > 0 && (
                                <>
                                    <div className="px-2 pb-1.5 pt-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                                        Built-in Agents
                                    </div>
                                    {builtInAgents.map((agent) => (
                                        <AgentListItem
                                            key={agent.name}
                                            agent={agent}
                                            isSelected={selectedAgentName === agent.name}
                                            onSelect={() => {
                                                setSelectedAgent(agent.name);
                                                if (isMobile) {
                                                    setSidebarOpen(false);
                                                }
                                            }}
                                            onDuplicate={() => handleDuplicateAgent(agent)}
                                            getAgentModeIcon={getAgentModeIcon}
                                        />
                                    ))}
                                </>
                            )}

                            {customAgents.length > 0 && (
                                <>
                                    <div className="px-2 pb-1.5 pt-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                                        Custom Agents
                                    </div>
                                    {customAgents.map((agent) => (
                                        <AgentListItem
                                            key={agent.name}
                                            agent={agent}
                                            isSelected={selectedAgentName === agent.name}
                                            onSelect={() => {
                                                setSelectedAgent(agent.name);
                                                if (isMobile) {
                                                    setSidebarOpen(false);
                                                }
                                            }}
                                            onDelete={() => handleDeleteAgent(agent)}
                                            onDuplicate={() => handleDuplicateAgent(agent)}
                                            getAgentModeIcon={getAgentModeIcon}
                                        />
                                    ))}
                                </>
                            )}
                        </>
                    )}
                </ScrollableOverlay>

                <DialogContent>
                    <DialogHeader>
                        <DialogTitle>Create New Agent</DialogTitle>
                        <DialogDescription>
                            Enter a unique name for your new agent
                        </DialogDescription>
                    </DialogHeader>
                    <Input
                        value={newAgentName}
                        onChange={(e) => setNewAgentName(e.target.value)}
                        placeholder="Agent name..."
                        className="text-foreground placeholder:text-muted-foreground"
                        onKeyDown={(e) => {
                            if (e.key === 'Enter') {
                                handleCreateAgent();
                            }
                        }}
                    />
                    <DialogFooter>
                        <Button
                            variant="ghost"
                            onClick={() => setIsCreateDialogOpen(false)}
                            className="text-foreground hover:bg-muted hover:text-foreground"
                        >
                            Cancel
                        </Button>
                        <ButtonLarge onClick={handleCreateAgent}>
                            Create
                        </ButtonLarge>
                    </DialogFooter>
                </DialogContent>
            </Dialog>
        </div>
    );
};

interface AgentListItemProps {
    agent: Agent;
    isSelected: boolean;
    onSelect: () => void;
    onDelete?: () => void;
    onDuplicate: () => void;
    getAgentModeIcon: (mode?: string) => React.ReactNode;
}

const AgentListItem: React.FC<AgentListItemProps> = ({
    agent,
    isSelected,
    onSelect,
    onDelete,
    onDuplicate,
    getAgentModeIcon,
}) => {
    return (
        <div className="group transition-all duration-200">
            <div className="relative">
                <div className="w-full flex items-center justify-between py-1.5 px-2 pr-1">
                    <button
                        onClick={onSelect}
                        className="flex-1 text-left overflow-hidden"
                        inputMode="none"
                        tabIndex={0}
                    >
                        <div className="flex items-center gap-1.5">
                            <div className={cn(
                                "typography-ui-label font-medium truncate",
                                isSelected
                                    ? "text-primary"
                                    : "text-foreground hover:text-primary/80"
                            )}>
                                {agent.name}
                            </div>

                            {}
                            {getAgentModeIcon(agent.mode)}
                        </div>

                        {}
                        {agent.description && (
                            <div className="typography-meta text-muted-foreground truncate mt-0.5">
                                {agent.description}
                            </div>
                        )}
                    </button>

                    <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                            <Button
                                size="icon"
                                variant="ghost"
                                className="h-6 w-6 flex-shrink-0 -mr-1 opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100"
                            >
                                <RiMore2Line className="h-3.5 w-3.5" />
                            </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end" className="w-fit min-w-20">
                            <DropdownMenuItem
                                onClick={(e) => {
                                    e.stopPropagation();
                                    onDuplicate();
                                }}
                            >
                                <RiFileCopyLine className="h-4 w-4 mr-px" />
                                Duplicate
                            </DropdownMenuItem>

                            {!agent.builtIn && onDelete && (
                                <DropdownMenuItem
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        onDelete();
                                    }}
                                    className="text-destructive focus:text-destructive"
                                >
                                    <RiDeleteBinLine className="h-4 w-4 mr-px" />
                                    Delete
                                </DropdownMenuItem>
                            )}
                        </DropdownMenuContent>
                    </DropdownMenu>
                </div>
            </div>
        </div>
    );
};