"use client"

import { Badge } from "@/ui/badge"
import { Button } from "@/ui/button"
import { GlassMenuEffect } from "@/ui/glass-effect"
import { Brain, Calendar, ExternalLink, FileText, Hash, X } from "lucide-react"
import { motion } from "motion/react"
import { memo } from "react"
import {
	GoogleDocs,
	GoogleDrive,
	GoogleSheets,
	GoogleSlides,
	MicrosoftExcel,
	MicrosoftOneNote,
	MicrosoftPowerpoint,
	MicrosoftWord,
	NotionDoc,
	OneDrive,
	PDF,
} from "@/assets/icons"
import { HeadingH3Bold } from "@/ui/heading"
import type { DocumentWithMemories, MemoryEntry } from "@/types"
import type { NodeDetailPanelProps } from "@/types"
import * as styles from "./node-detail-panel.css"

const formatDocumentType = (type: string) => {
	// Special case for PDF
	if (type.toLowerCase() === "pdf") return "PDF"

	// Replace underscores with spaces and capitalize each word
	return type
		.split("_")
		.map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
		.join(" ")
}

const getDocumentIcon = (type: string) => {
	const iconProps = { className: "w-5 h-5 text-slate-300" }

	switch (type) {
		case "google_doc":
			return <GoogleDocs {...iconProps} />
		case "google_sheet":
			return <GoogleSheets {...iconProps} />
		case "google_slide":
			return <GoogleSlides {...iconProps} />
		case "google_drive":
			return <GoogleDrive {...iconProps} />
		case "notion":
		case "notion_doc":
			return <NotionDoc {...iconProps} />
		case "word":
		case "microsoft_word":
			return <MicrosoftWord {...iconProps} />
		case "excel":
		case "microsoft_excel":
			return <MicrosoftExcel {...iconProps} />
		case "powerpoint":
		case "microsoft_powerpoint":
			return <MicrosoftPowerpoint {...iconProps} />
		case "onenote":
		case "microsoft_onenote":
			return <MicrosoftOneNote {...iconProps} />
		case "onedrive":
			return <OneDrive {...iconProps} />
		case "pdf":
			return <PDF {...iconProps} />
		default:
			{
				/*@ts-ignore */
			}
			return <FileText {...iconProps} />
	}
}

export const NodeDetailPanel = memo(function NodeDetailPanel({
	node,
	onClose,
	variant = "console",
}: NodeDetailPanelProps) {
	if (!node) return null

	const isDocument = node.type === "document"
	const data = node.data

	return (
		<motion.div
			animate={{ opacity: 1 }}
			className={styles.container}
			exit={{ opacity: 0 }}
			initial={{ opacity: 0 }}
			transition={{
				duration: 0.2,
				ease: "easeInOut",
			}}
		>
			{/* Glass effect background */}
			<GlassMenuEffect rounded="xl" />

			<motion.div
				animate={{ opacity: 1 }}
				className={styles.content}
				initial={{ opacity: 0 }}
				transition={{ delay: 0.05, duration: 0.15 }}
			>
				<div className={styles.header}>
					<div className={styles.headerLeft}>
						{isDocument ? (
							getDocumentIcon((data as DocumentWithMemories).type ?? "")
						) : (
							// @ts-ignore
							<Brain className={styles.headerIconMemory} />
						)}
						<HeadingH3Bold>{isDocument ? "Document" : "Memory"}</HeadingH3Bold>
					</div>
					<motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
						<Button
							className={styles.closeButton}
							onClick={onClose}
							size="sm"
							variant="ghost"
						>
							{/* @ts-ignore */}
							<X className={styles.closeIcon} />
						</Button>
					</motion.div>
				</div>

				<div className={styles.sections}>
					{isDocument ? (
						<>
							<div className={styles.section}>
								<span className={styles.sectionLabel}>Title</span>
								<p className={styles.sectionValue}>
									{(data as DocumentWithMemories).title || "Untitled Document"}
								</p>
							</div>

							{(data as DocumentWithMemories).summary && (
								<div className={styles.section}>
									<span className={styles.sectionLabel}>Summary</span>
									<p className={styles.sectionValueTruncated}>
										{(data as DocumentWithMemories).summary}
									</p>
								</div>
							)}

							<div className={styles.section}>
								<span className={styles.sectionLabel}>Type</span>
								<p className={styles.sectionValue}>
									{formatDocumentType(
										(data as DocumentWithMemories).type ?? "",
									)}
								</p>
							</div>

							<div className={styles.section}>
								<span className={styles.sectionLabel}>Memory Count</span>
								<p className={styles.sectionValue}>
									{(data as DocumentWithMemories).memoryEntries.length} memories
								</p>
							</div>

							{((data as DocumentWithMemories).url ||
								(data as DocumentWithMemories).customId) && (
								<div className={styles.section}>
									<span className={styles.sectionLabel}>URL</span>
									<a
										className={styles.link}
										href={(() => {
											const doc = data as DocumentWithMemories
											if (doc.type === "google_doc" && doc.customId) {
												return `https://docs.google.com/document/d/${doc.customId}`
											}
											if (doc.type === "google_sheet" && doc.customId) {
												return `https://docs.google.com/spreadsheets/d/${doc.customId}`
											}
											if (doc.type === "google_slide" && doc.customId) {
												return `https://docs.google.com/presentation/d/${doc.customId}`
											}
											return doc.url ?? undefined
										})()}
										rel="noopener noreferrer"
										target="_blank"
									>
										{/* @ts-ignore */}
										<ExternalLink className={styles.linkIcon} />
										View Document
									</a>
								</div>
							)}
						</>
					) : (
						<>
							<div className={styles.section}>
								<span className={styles.sectionLabel}>Memory</span>
								<p className={styles.sectionValue}>
									{(data as MemoryEntry).memory}
								</p>
								{(data as MemoryEntry).isForgotten && (
									<Badge className={styles.badge} variant="destructive">
										Forgotten
									</Badge>
								)}
								{(data as MemoryEntry).forgetAfter && (
									<p className={styles.expiryText}>
										Expires:{" "}
										{(data as MemoryEntry).forgetAfter
											? new Date(
													(data as MemoryEntry).forgetAfter!,
												).toLocaleDateString()
											: ""}{" "}
										{"forgetReason" in data && (data as any).forgetReason
											? `- ${(data as any).forgetReason}`
											: null}
									</p>
								)}
							</div>

							<div className={styles.section}>
								<span className={styles.sectionLabel}>Space</span>
								<p className={styles.sectionValue}>
									{(data as MemoryEntry).spaceId || "Default"}
								</p>
							</div>
						</>
					)}

					<div className={styles.footer}>
						<div className={styles.metadata}>
							<span className={styles.metadataItem}>
								{/* @ts-ignore */}
								<Calendar className={styles.metadataIcon} />
								{new Date(data.createdAt).toLocaleDateString()}
							</span>
							<span className={styles.metadataItem}>
								{/* @ts-ignore */}
								<Hash className={styles.metadataIcon} />
								{node.id}
							</span>
						</div>
					</div>
				</div>
			</motion.div>
		</motion.div>
	)
})

NodeDetailPanel.displayName = "NodeDetailPanel"