"use client"

import * as React from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import {
    Command,
    Frame,
    HelpCircle,
    Settings,
    Settings2,
    Terminal,
    Target,
    Plus,
    ArrowUpRight,
    ChevronsUpDown
} from "lucide-react"

import { NavUser } from "@/components/nav-user"
import {
    Sidebar,
    SidebarContent,
    SidebarFooter,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarGroup,
    SidebarGroupLabel,
    SidebarGroupContent,
} from "@/components/ui/sidebar"
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { useQuery, useMutation } from "convex/react"
import { api } from "@/convex/_generated/api"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { useProject } from "@/components/project-context"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { AnalysisTimeline } from "@/components/analysis-timeline"

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
    const pathname = usePathname()
    const projects = useQuery(api.projects.getProjects);
    const currentUser = useQuery(api.users.getCurrent);
    const { selectedProjectId, setSelectedProjectId } = useProject();
    const addDataSource = useMutation(api.dataSources.addDataSource);
    const updateDataSourceStatus = useMutation(api.dataSources.updateDataSourceStatus);
    const createAnalysis = useMutation(api.analyses.createAnalysis);
    const createAnalysisJob = useMutation(api.analysisJobs.create);
    const updateAnalysisJob = useMutation(api.analysisJobs.update);
    const [isAdding, setIsAdding] = React.useState(false);
    const [isCreatingProject, setIsCreatingProject] = React.useState(false);
    const [projectName, setProjectName] = React.useState("");
    const [projectDefault, setProjectDefault] = React.useState(true);
    const [projectError, setProjectError] = React.useState<string | null>(null);
    const [isSubmittingProject, setIsSubmittingProject] = React.useState(false);
    const createProject = useMutation(api.projects.createProject);
    const updateProject = useMutation(api.projects.updateProject);
    const [isEditingProject, setIsEditingProject] = React.useState(false);
    const [editingProjectId, setEditingProjectId] = React.useState<string | null>(null);
    const [editingProjectName, setEditingProjectName] = React.useState("");
    const [editingProjectDefault, setEditingProjectDefault] = React.useState(false);
    const [editingProjectError, setEditingProjectError] = React.useState<string | null>(null);
    const [isSubmittingEdit, setIsSubmittingEdit] = React.useState(false);
    const [sourceUrl, setSourceUrl] = React.useState("");
    const [sourceName, setSourceName] = React.useState("");
    const [sourceError, setSourceError] = React.useState<string | null>(null);
    const [sourceNotice, setSourceNotice] = React.useState<string | null>(null);
    const [isSubmittingSource, setIsSubmittingSource] = React.useState(false);
    const [manualMode, setManualMode] = React.useState(false);
    const [manualProductName, setManualProductName] = React.useState("");
    const [manualDescription, setManualDescription] = React.useState("");
    const [manualFeatures, setManualFeatures] = React.useState("");
    const [pendingSourceId, setPendingSourceId] = React.useState<string | null>(null);
    const [pendingProjectId, setPendingProjectId] = React.useState<string | null>(null);
    const [pendingJobId, setPendingJobId] = React.useState<string | null>(null);
    const analysisJob = useQuery(
        api.analysisJobs.getById,
        pendingJobId ? { jobId: pendingJobId as any } : "skip"
    );

    // Set default selected project
    React.useEffect(() => {
        if (projects && projects.length > 0 && !selectedProjectId) {
            // Prefer default project, otherwise first
            const defaultProj = projects.find(p => p.isDefault);
            setSelectedProjectId(defaultProj ? defaultProj._id : projects[0]._id);
        }
    }, [projects, selectedProjectId]);

    // Data Sources Query
    const dataSources = useQuery(
        api.dataSources.getProjectDataSources,
        selectedProjectId ? { projectId: selectedProjectId as any } : "skip"
    );

    const toggleConfig = useMutation(api.projects.toggleDataSourceConfig);

    const selectedProject = projects?.find(p => p._id === selectedProjectId);
    const selectedSourceIds = selectedProject?.dorkingConfig?.selectedSourceIds || [];
    const selectedProjectName = selectedProject?.name || "Select Project";

    const handleToggle = async (sourceId: string, checked: boolean) => {
        if (!selectedProjectId) return;
        await toggleConfig({
            projectId: selectedProjectId as any,
            sourceId: sourceId as any,
            selected: checked
        });
    };

    const handleAddSource = async () => {
        if (!sourceUrl) {
            setSourceError("Please enter a URL.");
            return;
        }

        setSourceError(null);
        setIsSubmittingSource(true);

        try {
            const result = await addDataSource({
                projectId: selectedProjectId as any,
                url: sourceUrl,
                name: sourceName || sourceUrl,
                type: "website",
            });

            if ((result as any).isExisting) {
                setSourceNotice("This source already exists and was reused.");
            }

            const jobId = await createAnalysisJob({
                projectId: result.projectId,
                dataSourceId: result.sourceId,
            });
            setPendingSourceId(result.sourceId);
            setPendingProjectId(result.projectId);
            setPendingJobId(jobId);

            await updateDataSourceStatus({
                dataSourceId: result.sourceId,
                analysisStatus: "pending",
                lastError: undefined,
                lastAnalyzedAt: undefined,
            });

            const response = await fetch("/api/analyze", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ url: sourceUrl, jobId }),
            });

            const data = await response.json();

            if (!response.ok) {
                if (data.needsManualInput) {
                    setManualMode(true);
                    setManualProductName(
                        sourceName || sourceUrl.replace(/^https?:\/\//, "").replace(/\/$/, "")
                    );
                    setPendingSourceId(result.sourceId);
                    setPendingProjectId(result.projectId);
                    setSourceError(data.error || "Manual input required.");
                    return;
                }

                await updateDataSourceStatus({
                    dataSourceId: result.sourceId,
                    analysisStatus: "failed",
                    lastError: data.error || "Analysis failed",
                    lastAnalyzedAt: Date.now(),
                });
                throw new Error(data.error || "Analysis failed");
            }

            await createAnalysis({
                projectId: result.projectId,
                dataSourceId: result.sourceId,
                analysis: data.data,
            });

            await updateDataSourceStatus({
                dataSourceId: result.sourceId,
                analysisStatus: "completed",
                lastError: undefined,
                lastAnalyzedAt: Date.now(),
            });

            setSourceUrl("");
            setSourceName("");
            setSourceNotice(null);
            setManualMode(false);
            setManualProductName("");
            setManualDescription("");
            setManualFeatures("");
            setPendingSourceId(null);
            setPendingProjectId(null);
            setPendingJobId(null);
            setIsAdding(false);
        } catch (err: any) {
            setSourceError(err?.message || "Failed to add source.");
        } finally {
            setIsSubmittingSource(false);
        }
    };

    const handleManualAnalyze = async () => {
        if (!manualProductName || !manualDescription) {
            setSourceError("Product name and description are required.");
            return;
        }

        if (!pendingSourceId || !pendingProjectId) {
            setSourceError("Missing pending source.");
            return;
        }

        setIsSubmittingSource(true);
        setSourceError(null);

        try {
            const response = await fetch("/api/analyze-manual", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    productName: manualProductName,
                    description: manualDescription,
                    features: manualFeatures,
                    jobId: pendingJobId || undefined,
                }),
            });

            const data = await response.json();

            if (!response.ok) {
                await updateDataSourceStatus({
                    dataSourceId: pendingSourceId as any,
                    analysisStatus: "failed",
                    lastError: data.error || "Manual analysis failed",
                    lastAnalyzedAt: Date.now(),
                });
                throw new Error(data.error || "Manual analysis failed");
            }

            await createAnalysis({
                projectId: pendingProjectId as any,
                dataSourceId: pendingSourceId as any,
                analysis: data.data,
            });

            await updateDataSourceStatus({
                dataSourceId: pendingSourceId as any,
                analysisStatus: "completed",
                lastError: undefined,
                lastAnalyzedAt: Date.now(),
            });

            setSourceUrl("");
            setSourceName("");
            setManualMode(false);
            setManualProductName("");
            setManualDescription("");
            setManualFeatures("");
            setPendingSourceId(null);
            setPendingProjectId(null);
            setPendingJobId(null);
            setIsAdding(false);
        } catch (err: any) {
            setSourceError(err?.message || "Manual analysis failed.");
        } finally {
            setIsSubmittingSource(false);
        }
    };

    return (
        <Sidebar variant="inset" {...props}>
            <SidebarHeader>
                <SidebarMenu>
                    <SidebarMenuItem>
                        <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                                <SidebarMenuButton size="lg">
                                    <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                                        <Command className="size-4" />
                                    </div>
                                    <div className="grid flex-1 text-left text-sm leading-tight">
                                        <span className="truncate font-semibold">{selectedProjectName}</span>
                                        <span className="truncate text-xs text-muted-foreground">Projects</span>
                                    </div>
                                    <ChevronsUpDown className="ml-auto size-4" />
                                </SidebarMenuButton>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent side="bottom" align="start" className="w-64">
                                <DropdownMenuLabel>Switch project</DropdownMenuLabel>
                                <DropdownMenuSeparator />
                                {projects?.map((project) => (
                                    <DropdownMenuItem
                                        key={project._id}
                                        className="justify-between"
                                        onSelect={(event) => {
                                            if (event.defaultPrevented) return
                                            setSelectedProjectId(project._id)
                                        }}
                                    >
                                        <div className="flex items-center gap-2">
                                            <Frame className="text-muted-foreground" />
                                            <span className="truncate">{project.name}</span>
                                        </div>
                                        <button
                                            type="button"
                                            data-project-settings
                                            className="rounded-md p-1 text-muted-foreground hover:text-foreground"
                                            onPointerDown={(event) => {
                                                event.preventDefault()
                                                event.stopPropagation()
                                            }}
                                            onClick={(event) => {
                                                event.preventDefault()
                                                event.stopPropagation();
                                                setEditingProjectId(project._id);
                                                setEditingProjectName(project.name);
                                                setEditingProjectDefault(project.isDefault);
                                                setEditingProjectError(null);
                                                setIsEditingProject(true);
                                            }}
                                            aria-label={`Project settings for ${project.name}`}
                                        >
                                            <Settings className="size-4" />
                                        </button>
                                    </DropdownMenuItem>
                                ))}
                                <DropdownMenuSeparator />
                                <DropdownMenuItem onSelect={() => setIsCreatingProject(true)}>
                                    <Plus />
                                    Create Project
                                </DropdownMenuItem>
                            </DropdownMenuContent>
                        </DropdownMenu>
                    </SidebarMenuItem>
                </SidebarMenu>
            </SidebarHeader>
            <SidebarContent>
                {/* Platform Nav */}
                <SidebarGroup>
                    <SidebarGroupLabel>Platform</SidebarGroupLabel>
                    <SidebarGroupContent>
                        <SidebarMenu>
                            <SidebarMenuItem>
                                <SidebarMenuButton
                                    asChild
                                    tooltip="Dashboard"
                                    isActive={pathname === "/dashboard"}
                                >
                                    <Link href="/dashboard">
                                        <Terminal />
                                        <span>Dashboard</span>
                                    </Link>
                                </SidebarMenuButton>
                            </SidebarMenuItem>
                            <SidebarMenuItem>
                                <SidebarMenuButton
                                    asChild
                                    tooltip="Opportunities"
                                    isActive={pathname === "/opportunities"}
                                >
                                    <Link href="/opportunities">
                                        <Target />
                                        <span>Opportunities</span>
                                    </Link>
                                </SidebarMenuButton>
                            </SidebarMenuItem>
                            <SidebarMenuItem>
                                <SidebarMenuButton
                                    asChild
                                    tooltip="Settings"
                                    isActive={pathname === "/settings"}
                                >
                                    <Link href="/settings">
                                        <Settings2 />
                                        <span>Settings</span>
                                    </Link>
                                </SidebarMenuButton>
                            </SidebarMenuItem>
                            <SidebarMenuItem>
                                <SidebarMenuButton
                                    asChild
                                    tooltip="Help"
                                    isActive={pathname === "/help"}
                                >
                                    <Link href="/help">
                                        <HelpCircle />
                                        <span>Help</span>
                                    </Link>
                                </SidebarMenuButton>
                            </SidebarMenuItem>
                        </SidebarMenu>
                    </SidebarGroupContent>
                </SidebarGroup>

                {/* Data Sources Config */}
                {selectedProjectId && (
                    <SidebarGroup>
                        <SidebarGroupLabel>
                            Active Data Sources
                            <span className="ml-2 text-xs font-normal text-muted-foreground">({selectedProject?.name})</span>
                        </SidebarGroupLabel>
                        <SidebarGroupContent>
                            <div className="flex flex-col gap-2 p-2">
                                {(!dataSources || dataSources.length === 0) && (
                                    <div className="text-sm text-muted-foreground pl-2">No data sources yet.</div>
                                )}
                                {dataSources?.map((source) => (
                                    <div
                                        key={source._id}
                                        className="flex items-center justify-between gap-2 rounded-md px-2 py-1 hover:bg-muted/40"
                                    >
                                        <div className="flex min-w-0 items-center gap-2">
                                            <Checkbox
                                                id={source._id}
                                                checked={selectedSourceIds.includes(source._id)}
                                                onCheckedChange={(checked) => handleToggle(source._id, checked === true)}
                                            />
                                            <Label
                                                htmlFor={source._id}
                                                className="truncate text-sm font-medium leading-none cursor-pointer"
                                            >
                                                {source.name || source.url}
                                            </Label>
                                        </div>
                                        <Link
                                            href={`/data-sources/${source._id}`}
                                            className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
                                        >
                                            Details
                                            <ArrowUpRight className="size-3" />
                                        </Link>
                                    </div>
                                ))}
                                <Button
                                    variant="outline"
                                    size="sm"
                                    onClick={() => setIsAdding(true)}
                                >
                                    Add Data Source
                                </Button>
                            </div>
                        </SidebarGroupContent>
                    </SidebarGroup>
                )}
            </SidebarContent>
            <SidebarFooter>
                {currentUser && (currentUser.name || currentUser.email) && (
                    <NavUser
                        user={{
                            name: currentUser.name || currentUser.email || "",
                            email: currentUser.email || "",
                            avatar: currentUser.image || "",
                        }}
                    />
                )}
            </SidebarFooter>
            <Dialog
                open={isAdding}
                onOpenChange={(open) => {
                    if (!open && manualMode && pendingSourceId) {
                        updateDataSourceStatus({
                            dataSourceId: pendingSourceId as any,
                            analysisStatus: "failed",
                            lastError: "Manual input cancelled",
                            lastAnalyzedAt: Date.now(),
                        });
                    }
                    if (!open && manualMode && pendingJobId) {
                        updateAnalysisJob({
                            jobId: pendingJobId as any,
                            status: "failed",
                            error: "Manual input cancelled",
                        });
                    }
                    if (!open) {
                        setManualMode(false);
                        setSourceError(null);
                        setSourceNotice(null);
                        setPendingSourceId(null);
                        setPendingProjectId(null);
                        setPendingJobId(null);
                    }
                    setIsAdding(open);
                }}
            >
                <DialogContent>
                    <DialogHeader>
                        <DialogTitle>Add Data Source</DialogTitle>
                        <DialogDescription>
                            Add a website to analyze for this project.
                        </DialogDescription>
                    </DialogHeader>
                    <div className="space-y-3">
                        {!manualMode && (
                            <>
                                <div className="space-y-2">
                                    <Label htmlFor="sourceUrl">Website URL</Label>
                                    <Input
                                        id="sourceUrl"
                                        placeholder="https://example.com"
                                        value={sourceUrl}
                                        onChange={(event) => setSourceUrl(event.target.value)}
                                        disabled={isSubmittingSource}
                                    />
                                </div>
                                <div className="space-y-2">
                                    <Label htmlFor="sourceName">Name (optional)</Label>
                                    <Input
                                        id="sourceName"
                                        placeholder="Product name"
                                        value={sourceName}
                                        onChange={(event) => setSourceName(event.target.value)}
                                        disabled={isSubmittingSource}
                                    />
                                </div>
                            </>
                        )}
                        {manualMode && (
                            <>
                                <div className="space-y-2">
                                    <Label htmlFor="manualProductName">Product Name</Label>
                                    <Input
                                        id="manualProductName"
                                        value={manualProductName}
                                        onChange={(event) => setManualProductName(event.target.value)}
                                        disabled={isSubmittingSource}
                                    />
                                </div>
                                <div className="space-y-2">
                                    <Label htmlFor="manualDescription">Description</Label>
                                    <Textarea
                                        id="manualDescription"
                                        value={manualDescription}
                                        onChange={(event) => setManualDescription(event.target.value)}
                                        disabled={isSubmittingSource}
                                        rows={3}
                                    />
                                </div>
                                <div className="space-y-2">
                                    <Label htmlFor="manualFeatures">Key Features (one per line)</Label>
                                    <Textarea
                                        id="manualFeatures"
                                        value={manualFeatures}
                                        onChange={(event) => setManualFeatures(event.target.value)}
                                        disabled={isSubmittingSource}
                                        rows={3}
                                    />
                                </div>
                            </>
                        )}
                        {sourceNotice && (
                            <div className="text-sm text-muted-foreground">{sourceNotice}</div>
                        )}
                        {sourceError && (
                            <div className="text-sm text-destructive">{sourceError}</div>
                        )}
                        {analysisJob?.timeline?.length ? (
                            <AnalysisTimeline items={analysisJob.timeline} />
                        ) : null}
                        <div className="flex justify-end gap-2">
                            <Button
                                variant="outline"
                                onClick={() => setIsAdding(false)}
                                disabled={isSubmittingSource}
                            >
                                Cancel
                            </Button>
                            {manualMode ? (
                                <Button onClick={handleManualAnalyze} disabled={isSubmittingSource}>
                                    {isSubmittingSource ? "Analyzing..." : "Analyze Manually"}
                                </Button>
                            ) : (
                                <Button onClick={handleAddSource} disabled={isSubmittingSource}>
                                    {isSubmittingSource ? "Analyzing..." : "Add Source"}
                                </Button>
                            )}
                        </div>
                    </div>
                </DialogContent>
            </Dialog>
            <Dialog open={isEditingProject} onOpenChange={setIsEditingProject}>
                <DialogContent>
                    <DialogHeader>
                        <DialogTitle>Project Settings</DialogTitle>
                        <DialogDescription>
                            Update the project name and default status.
                        </DialogDescription>
                    </DialogHeader>
                    <div className="space-y-3">
                        <div className="space-y-2">
                            <Label htmlFor="editProjectName">Project Name</Label>
                            <Input
                                id="editProjectName"
                                value={editingProjectName}
                                onChange={(event) => setEditingProjectName(event.target.value)}
                                disabled={isSubmittingEdit}
                            />
                        </div>
                        <div className="flex items-center gap-2">
                            <Checkbox
                                id="editProjectDefault"
                                checked={editingProjectDefault}
                                onCheckedChange={(checked) => setEditingProjectDefault(checked === true)}
                                disabled={isSubmittingEdit}
                            />
                            <Label htmlFor="editProjectDefault">Set as default</Label>
                        </div>
                        {editingProjectError && (
                            <div className="text-sm text-destructive">{editingProjectError}</div>
                        )}
                        <div className="flex justify-end gap-2">
                            <Button
                                variant="outline"
                                onClick={() => setIsEditingProject(false)}
                                disabled={isSubmittingEdit}
                            >
                                Cancel
                            </Button>
                            <Button
                                onClick={async () => {
                                    if (!editingProjectId) return;
                                    if (!editingProjectName.trim()) {
                                        setEditingProjectError("Project name is required.");
                                        return;
                                    }
                                    setIsSubmittingEdit(true);
                                    setEditingProjectError(null);
                                    try {
                                        await updateProject({
                                            projectId: editingProjectId as any,
                                            name: editingProjectName.trim(),
                                            isDefault: editingProjectDefault,
                                        });
                                        setIsEditingProject(false);
                                    } catch (err: any) {
                                        setEditingProjectError(err?.message || "Failed to update project.");
                                    } finally {
                                        setIsSubmittingEdit(false);
                                    }
                                }}
                                disabled={isSubmittingEdit}
                            >
                                Save Changes
                            </Button>
                        </div>
                    </div>
                </DialogContent>
            </Dialog>
            <Dialog open={isCreatingProject} onOpenChange={setIsCreatingProject}>
                <DialogContent>
                    <DialogHeader>
                        <DialogTitle>Create Project</DialogTitle>
                        <DialogDescription>
                            Add a new project for a separate product or workflow.
                        </DialogDescription>
                    </DialogHeader>
                    <div className="space-y-3">
                        <div className="space-y-2">
                            <Label htmlFor="projectName">Project Name</Label>
                            <Input
                                id="projectName"
                                value={projectName}
                                onChange={(event) => setProjectName(event.target.value)}
                                disabled={isSubmittingProject}
                            />
                        </div>
                        <div className="flex items-center gap-2 text-sm">
                            <Checkbox
                                id="projectDefault"
                                checked={projectDefault}
                                onCheckedChange={(checked) => setProjectDefault(checked === true)}
                            />
                            <Label htmlFor="projectDefault">Make this the default project</Label>
                        </div>
                        {projectError && (
                            <div className="text-sm text-destructive">{projectError}</div>
                        )}
                        <div className="flex justify-end gap-2">
                            <Button
                                variant="outline"
                                onClick={() => setIsCreatingProject(false)}
                                disabled={isSubmittingProject}
                            >
                                Cancel
                            </Button>
                            <Button
                                onClick={async () => {
                                    if (!projectName.trim()) {
                                        setProjectError("Project name is required.");
                                        return;
                                    }
                                    setProjectError(null);
                                    setIsSubmittingProject(true);
                                    try {
                                        const projectId = await createProject({
                                            name: projectName.trim(),
                                            isDefault: projectDefault,
                                        });
                                        setSelectedProjectId(projectId as any);
                                        setProjectName("");
                                        setProjectDefault(true);
                                        setIsCreatingProject(false);
                                    } catch (err: any) {
                                        setProjectError(err?.message || "Failed to create project.");
                                    } finally {
                                        setIsSubmittingProject(false);
                                    }
                                }}
                                disabled={isSubmittingProject}
                            >
                                {isSubmittingProject ? "Creating..." : "Create Project"}
                            </Button>
                        </div>
                    </div>
                </DialogContent>
            </Dialog>
        </Sidebar>
    )
}