"use client"

import { useIsMobile } from "@/hooks/use-mobile"
import {
	Collapsible,
	CollapsibleContent,
	CollapsibleTrigger,
} from "@/ui/collapsible"
import { GlassMenuEffect } from "@/ui/glass-effect"
import { Brain, ChevronDown, ChevronUp, FileText } from "lucide-react"
import { memo, useEffect, useState } from "react"
import { colors } from "@/constants"
import type { GraphEdge, GraphNode, LegendProps } from "@/types"
import * as styles from "./legend.css"

// Cookie utility functions for legend state
const setCookie = (name: string, value: string, days = 365) => {
	if (typeof document === "undefined") return
	const expires = new Date()
	expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000)
	document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`
}

const getCookie = (name: string): string | null => {
	if (typeof document === "undefined") return null
	const nameEQ = `${name}=`
	const ca = document.cookie.split(";")
	for (let i = 0; i < ca.length; i++) {
		let c = ca[i]
		if (!c) continue
		while (c.charAt(0) === " ") c = c.substring(1, c.length)
		if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length)
	}
	return null
}

interface ExtendedLegendProps extends LegendProps {
	id?: string
	nodes?: GraphNode[]
	edges?: GraphEdge[]
	isLoading?: boolean
}

export const Legend = memo(function Legend({
	variant = "console",
	id,
	nodes = [],
	edges = [],
	isLoading = false,
}: ExtendedLegendProps) {
	const isMobile = useIsMobile()
	const [isExpanded, setIsExpanded] = useState(true)
	const [isInitialized, setIsInitialized] = useState(false)

	// Load saved preference on client side
	useEffect(() => {
		if (!isInitialized) {
			const savedState = getCookie("legendCollapsed")
			if (savedState === "true") {
				setIsExpanded(false)
			} else if (savedState === "false") {
				setIsExpanded(true)
			} else {
				// Default: collapsed on mobile, expanded on desktop
				setIsExpanded(!isMobile)
			}
			setIsInitialized(true)
		}
	}, [isInitialized, isMobile])

	// Save to cookie when state changes
	const handleToggleExpanded = (expanded: boolean) => {
		setIsExpanded(expanded)
		setCookie("legendCollapsed", expanded ? "false" : "true")
	}

	// Get container class based on variant and mobile state
	const getContainerClass = () => {
		if (variant === "console") {
			return isMobile
				? styles.legendContainer.consoleMobile
				: styles.legendContainer.consoleDesktop
		}
		return isMobile
			? styles.legendContainer.consumerMobile
			: styles.legendContainer.consumerDesktop
	}

	// Calculate stats
	const memoryCount = nodes.filter((n) => n.type === "memory").length
	const documentCount = nodes.filter((n) => n.type === "document").length

	const containerClass =
		isMobile && !isExpanded
			? `${getContainerClass()} ${styles.mobileSize.collapsed}`
			: isMobile
				? `${getContainerClass()} ${styles.mobileSize.expanded}`
				: getContainerClass()

	return (
		<div className={containerClass} id={id}>
			<Collapsible onOpenChange={handleToggleExpanded} open={isExpanded}>
				{/* Glass effect background */}
				<GlassMenuEffect rounded="xl" />

				<div className={styles.legendContent}>
					{/* Mobile and Desktop collapsed state */}
					{!isExpanded && (
						<CollapsibleTrigger className={styles.collapsedTrigger}>
							<div className={styles.collapsedContent}>
								<div className={styles.collapsedText}>?</div>
								<ChevronUp className={styles.collapsedIcon} />
							</div>
						</CollapsibleTrigger>
					)}

					{/* Expanded state */}
					{isExpanded && (
						<>
							{/* Header with toggle */}
							<div className={styles.legendHeader}>
								<div className={styles.legendTitle}>Legend</div>
								<CollapsibleTrigger className={styles.headerTrigger}>
									<ChevronDown className={styles.headerIcon} />
								</CollapsibleTrigger>
							</div>

							<CollapsibleContent>
								<div className={styles.sectionsContainer}>
									{/* Stats Section */}
									{!isLoading && (
										<div className={styles.sectionWrapper}>
											<div className={styles.sectionTitle}>Statistics</div>
											<div className={styles.itemsList}>
												<div className={styles.legendItem}>
													<Brain
														className={styles.legendIcon}
														style={{ color: "rgb(96, 165, 250)" }}
													/>
													<span className={styles.legendText}>
														{memoryCount} memories
													</span>
												</div>
												<div className={styles.legendItem}>
													<FileText
														className={styles.legendIcon}
														style={{ color: "rgb(203, 213, 225)" }}
													/>
													<span className={styles.legendText}>
														{documentCount} documents
													</span>
												</div>
												<div className={styles.legendItem}>
													<div className={styles.gradientCircle} />
													<span className={styles.legendText}>
														{edges.length} connections
													</span>
												</div>
											</div>
										</div>
									)}

									{/* Node Types */}
									<div className={styles.sectionWrapper}>
										<div className={styles.sectionTitle}>Nodes</div>
										<div className={styles.itemsList}>
											<div className={styles.legendItem}>
												<div className={styles.documentNode} />
												<span className={styles.legendText}>Document</span>
											</div>
											<div className={styles.legendItem}>
												<div className={styles.memoryNode} />
												<span className={styles.legendText}>
													Memory (latest)
												</span>
											</div>
											<div className={styles.legendItem}>
												<div className={styles.memoryNodeOlder} />
												<span className={styles.legendText}>
													Memory (older)
												</span>
											</div>
										</div>
									</div>

									{/* Status Indicators */}
									<div className={styles.sectionWrapper}>
										<div className={styles.sectionTitle}>Status</div>
										<div className={styles.itemsList}>
											<div className={styles.legendItem}>
												<div className={styles.forgottenNode}>
													<div className={styles.forgottenIcon}>✕</div>
												</div>
												<span className={styles.legendText}>Forgotten</span>
											</div>
											<div className={styles.legendItem}>
												<div className={styles.expiringNode} />
												<span className={styles.legendText}>Expiring soon</span>
											</div>
											<div className={styles.legendItem}>
												<div className={styles.newNode}>
													<div className={styles.newBadge} />
												</div>
												<span className={styles.legendText}>New memory</span>
											</div>
										</div>
									</div>

									{/* Connection Types */}
									<div className={styles.sectionWrapper}>
										<div className={styles.sectionTitle}>Connections</div>
										<div className={styles.itemsList}>
											<div className={styles.legendItem}>
												<div className={styles.connectionLine} />
												<span className={styles.legendText}>Doc → Memory</span>
											</div>
											<div className={styles.legendItem}>
												<div className={styles.similarityLine} />
												<span className={styles.legendText}>
													Doc similarity
												</span>
											</div>
										</div>
									</div>

									{/* Relation Types */}
									<div className={styles.sectionWrapper}>
										<div className={styles.sectionTitle}>Relations</div>
										<div className={styles.itemsList}>
											{[
												["updates", colors.relations.updates],
												["extends", colors.relations.extends],
												["derives", colors.relations.derives],
											].map(([label, color]) => (
												<div className={styles.legendItem} key={label}>
													<div
														className={styles.relationLine}
														style={{ borderColor: color }}
													/>
													<span
														className={styles.legendText}
														style={{
															color: color,
															textTransform: "capitalize",
														}}
													>
														{label}
													</span>
												</div>
											))}
										</div>
									</div>

									{/* Similarity Strength */}
									<div className={styles.sectionWrapper}>
										<div className={styles.sectionTitle}>Similarity</div>
										<div className={styles.itemsList}>
											<div className={styles.legendItem}>
												<div className={styles.weakSimilarity} />
												<span className={styles.legendText}>Weak</span>
											</div>
											<div className={styles.legendItem}>
												<div className={styles.strongSimilarity} />
												<span className={styles.legendText}>Strong</span>
											</div>
										</div>
									</div>
								</div>
							</CollapsibleContent>
						</>
					)}
				</div>
			</Collapsible>
		</div>
	)
})

Legend.displayName = "Legend"