"use client";

import { AnimatePresence, motion } from "framer-motion";
import {
	Bot,
	CalendarPlus,
	Download,
	FileUp,
	ImageIcon,
	Info,
	Loader2,
	LogIn,
	Sparkles,
	Trash2,
	X,
} from "lucide-react";
import Image from "next/image";
import { useEffect, useRef, useState } from "react";
import { IcsFilePicker } from "@/components/ics-file-picker";
import { ImagePicker } from "@/components/image-picker";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
	HoverCard,
	HoverCardContent,
	HoverCardTrigger,
} from "@/components/ui/hover-card";
import { Kbd, KbdGroup } from "@/components/ui/kbd";
import {
	Popover,
	PopoverContent,
	PopoverTrigger,
} from "@/components/ui/popover";
import { Skeleton } from "@/components/ui/skeleton";
import { Textarea } from "@/components/ui/textarea";
import {
	SHORTCUT_DEFINITIONS,
	detectOs,
	resolveKeys,
	type Os,
} from "@/lib/keyboard-shortcuts";
import type { CalendarEvent } from "@/lib/types";

// ─── OS detection hook ────────────────────────────────────────────────────────

function useOs(): Os {
	// Start with "unknown" for SSR — effect sets the real value after hydration
	const [os, setOs] = useState<Os>("unknown");
	useEffect(() => {
		setOs(detectOs());
	}, []);
	return os;
}

// ─── Shared shortcuts list (rendered in both HoverCard and Popover) ───────────

function ShortcutsList({ os }: { os: Os }) {
	return (
		<>
			<p className="text-xs font-semibold text-foreground mb-2.5">
				Keyboard shortcuts
			</p>
			<ul className="space-y-2">
				{SHORTCUT_DEFINITIONS.map((shortcut) => (
					<li
						key={shortcut.label}
						className="flex items-center justify-between gap-3"
					>
						<span className="text-xs text-muted-foreground">
							{shortcut.label}
						</span>
						<KbdGroup>
							{resolveKeys(shortcut.modifiers, os).map((key) => (
								<Kbd key={key}>{key}</Kbd>
							))}
						</KbdGroup>
					</li>
				))}
			</ul>
		</>
	);
}

// ─── Types ────────────────────────────────────────────────────────────────────

interface AIToolbarProps {
	isAuthenticated: boolean;
	isPending: boolean;
	aiPrompt: string;
	setAiPrompt: (prompt: string) => void;
	aiLoading: boolean;
	imagePreview: string | null;
	onImageSelect: (file: File) => void;
	onImageClear: () => void;
	onAiCreate: () => void;
	onAiSummarize: () => void;
	onSummaryDismiss: () => void;
	summary: string | null;
	summaryUpdated: string | null;
	// event actions
	events: CalendarEvent[];
	onAddEvent: () => void;
	onImport: (file: File) => void;
	onExport: () => void;
	onClearAll: () => void;
}

// ─── Component ────────────────────────────────────────────────────────────────

export const AIToolbar = ({
	isAuthenticated,
	isPending,
	aiPrompt,
	setAiPrompt,
	aiLoading,
	imagePreview,
	onImageSelect,
	onImageClear,
	onAiCreate,
	onAiSummarize,
	onSummaryDismiss,
	summary,
	summaryUpdated,
	events,
	onAddEvent,
	onImport,
	onExport,
	onClearAll,
}: AIToolbarProps) => {
	// Ref to imperatively open the file picker from the keyboard shortcut
	const imageTriggerRef = useRef<{ open: () => void }>(null);

	// When the popover is pinned open, suppress the hover card so they don't overlap
	const [isPopoverOpen, setIsPopoverOpen] = useState(false);

	// Detect OS after hydration for keyboard shortcut glyphs
	const os = useOs();

	if (isPending) {
		return (
			<div className="mb-6 space-y-2">
				<Skeleton className="h-[90px] w-full rounded-lg" />
				<Skeleton className="h-9 w-full rounded-lg" />
			</div>
		);
	}

	return (
		<div className="mb-6 space-y-2">
			{/* ── Zone 1: AI ───────────────────────────────────────────────────────── */}
			<div className="rounded-lg border border-primary/20 bg-primary/5 p-3">
				{isAuthenticated ? (
					/* ── Authenticated: full prompt composer ── */
					<div className="space-y-2">
						{/* Header */}
						<div className="flex items-center gap-1.5">
							<Sparkles className="h-3.5 w-3.5 text-primary shrink-0" />
							<span className="text-xs font-semibold tracking-wide text-primary uppercase">
								AI
							</span>
						</div>

						{/* Textarea */}
						<Textarea
							className="wrap-anywhere field-sizing-content resize-none w-full min-h-[2.5rem] max-h-48 overflow-y-auto bg-transparent border-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 px-3 py-1 text-sm placeholder:text-muted-foreground/60 placeholder:italic"
							placeholder="Describe an event, paste details, or attach a flyer…"
							value={aiPrompt}
							onChange={(e) => setAiPrompt(e.target.value)}
							onKeyDown={(e) => {
								// ⌘↵ — generate
								if (
									e.key === "Enter" &&
									(e.metaKey || e.ctrlKey) &&
									(aiPrompt.trim() || imagePreview)
								) {
									e.preventDefault();
									onAiCreate();
								}
								// ⌘⇧A — attach image
								if (
									e.key === "A" &&
									e.shiftKey &&
									(e.metaKey || e.ctrlKey) &&
									!aiLoading
								) {
									e.preventDefault();
									imageTriggerRef.current?.open();
								}
								// Esc — clear prompt (only when not composing a native action)
								if (e.key === "Escape" && aiPrompt) {
									e.preventDefault();
									setAiPrompt("");
								}
							}}
						/>

						{/* Attached image preview */}
						<AnimatePresence>
							{imagePreview && (
								<motion.div
									initial={{ opacity: 0, scale: 0.9 }}
									animate={{ opacity: 1, scale: 1 }}
									exit={{ opacity: 0, scale: 0.9 }}
									transition={{ duration: 0.15 }}
									className="relative inline-block ml-3"
								>
									<Image
										src={imagePreview}
										alt="Attached event flyer"
										className="h-16 w-16 rounded-md object-cover ring-1 ring-primary/30"
										width={64}
										height={64}
										unoptimized
									/>
									<Button
										variant="destructive"
										size="icon"
										className="absolute -top-1.5 -right-1.5 h-5 w-5 rounded-full"
										onClick={onImageClear}
										aria-label="Remove image"
									>
										<X className="h-2.5 w-2.5" />
									</Button>
								</motion.div>
							)}
						</AnimatePresence>

						{/* ── Footer bar: Attach (left) · Info + Generate (right) ── */}
						{/*
						 * Layout contract: flex items-center justify-between gap-2
						 * Attach aligns to the START (left), Info+Generate to the END (right).
						 */}
						<div className="flex items-center justify-between gap-2">
							{/* LEFT: Attach image — labeled ghost button */}
							<ImagePicker
								onFileSelect={onImageSelect}
								disabled={aiLoading}
								variant="ghost"
								size="sm"
								className="gap-1.5 text-xs h-7 px-2 text-muted-foreground hover:text-foreground"
								triggerRef={imageTriggerRef}
							>
								<ImageIcon className="h-3.5 w-3.5" />
								Attach image
							</ImagePicker>

							{/* RIGHT: Info popover + Generate button */}
							<div className="flex items-center gap-1.5">
								{/* Info icon — HoverCard (transient preview) + Popover (pinned) */}
								{/* Both use bg-popover surface → identical appearance, correct theming */}
								<HoverCard
									openDelay={300}
									closeDelay={100}
									open={isPopoverOpen ? false : undefined}
								>
									<Popover
										open={isPopoverOpen}
										onOpenChange={setIsPopoverOpen}
									>
										<HoverCardTrigger asChild>
											<PopoverTrigger asChild>
												<Button
													variant="ghost"
													size="icon"
													className="h-6 w-6 text-muted-foreground/50 hover:text-muted-foreground"
													aria-label="Keyboard shortcuts"
												>
													<Info className="h-3.5 w-3.5" />
												</Button>
											</PopoverTrigger>
										</HoverCardTrigger>
										<PopoverContent
											align="end"
											side="top"
											sideOffset={6}
											className="w-52 p-3"
										>
											<ShortcutsList os={os} />
										</PopoverContent>
									</Popover>
									<HoverCardContent
										align="end"
										side="top"
										sideOffset={6}
										className="w-52 p-3"
									>
										<ShortcutsList os={os} />
									</HoverCardContent>
								</HoverCard>

								{/* Summarize — ghost, only visible when events exist */}
								{events.length > 0 && (
									<Button
										variant="ghost"
										size="sm"
										onClick={onAiSummarize}
										disabled={aiLoading}
										className="h-7 gap-1.5 text-xs text-muted-foreground hover:text-primary px-2"
									>
										<Bot className="h-3 w-3" />
										Summarize
									</Button>
								)}

								{/* Generate — primary, labeled */}
								<Button
									size="sm"
									className="h-7 gap-1.5 text-xs"
									onClick={onAiCreate}
									disabled={aiLoading || (!aiPrompt.trim() && !imagePreview)}
								>
									{aiLoading ? (
										<Loader2 className="h-3.5 w-3.5 animate-spin" />
									) : (
										<Sparkles className="h-3.5 w-3.5" />
									)}
									{aiLoading ? "Generating…" : "Generate"}
								</Button>
							</div>
						</div>
					</div>
				) : (
					/* ── Unauthenticated: locked CTA ── */
					<div className="flex items-center gap-3 py-2">
						<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
							<Sparkles className="h-4 w-4" />
						</div>
						<div className="flex-1 min-w-0">
							<p className="text-sm font-medium text-foreground leading-tight">
								Create events with AI
							</p>
							<p className="text-xs text-muted-foreground mt-0.5">
								Describe in plain language, attach a flyer — done.
							</p>
						</div>
						<Button
							size="sm"
							variant="outline"
							className="shrink-0 gap-1.5 h-8 text-xs border-primary/30 text-primary hover:bg-primary/10 hover:text-primary"
							asChild
						>
							<a href="/auth/signin">
								<LogIn className="h-3.5 w-3.5" />
								Sign in
							</a>
						</Button>
					</div>
				)}
			</div>

			{/* ── Zone 2: Data management ──────────────────────────────────────────── */}
			<div className="glass-card px-3 py-2">
				<div className="flex items-center gap-2 flex-wrap">
					<Button size="sm" onClick={onAddEvent} className="h-8 text-xs gap-1.5">
						<CalendarPlus className="h-3.5 w-3.5" />
						Add Event
					</Button>

					<IcsFilePicker
						onFileSelect={onImport}
						variant="outline"
						size="sm"
						className="h-8 text-xs gap-1.5"
					>
						<FileUp className="h-3.5 w-3.5" />
						Import
					</IcsFilePicker>

					{events.length > 0 && (
						<>
							<Button
								variant="outline"
								size="sm"
								onClick={onExport}
								className="h-8 text-xs gap-1.5"
							>
								<Download className="h-3.5 w-3.5" />
								Export
							</Button>

							<Button
								variant="ghost"
								size="sm"
								onClick={onClearAll}
								className="h-8 text-xs gap-1.5 text-muted-foreground hover:text-destructive"
							>
								<Trash2 className="h-3.5 w-3.5" />
								Clear
							</Button>
						</>
					)}

					{events.length > 0 && (
						<Badge variant="secondary" className="ml-auto text-xs tabular-nums">
							{events.length} event{events.length !== 1 ? "s" : ""}
						</Badge>
					)}
				</div>
			</div>

			{/* ── AI Summary panel ─────────────────────────────────────────────────── */}
			<AnimatePresence>
				{summary && (
					<motion.div
						initial={{ opacity: 0, y: -4, height: 0 }}
						animate={{ opacity: 1, y: 0, height: "auto" }}
						exit={{ opacity: 0, y: -4, height: 0 }}
						transition={{ duration: 0.2, ease: "easeOut" }}
						className="overflow-hidden"
					>
						<div className="rounded-lg border border-primary/15 bg-primary/5 p-3.5">
							<div className="flex items-start justify-between gap-2 mb-2">
								<div className="flex items-center gap-1.5">
									<Bot className="h-3.5 w-3.5 text-primary shrink-0 mt-px" />
									<span className="text-xs font-semibold text-primary">
										AI Summary
									</span>
								</div>
								<div className="flex items-center gap-2 shrink-0">
									{summaryUpdated && (
										<span className="text-xs text-muted-foreground/60">
											{summaryUpdated}
										</span>
									)}
									<Button
										variant="ghost"
										size="icon"
										className="h-5 w-5 text-muted-foreground hover:text-foreground"
										onClick={onSummaryDismiss}
										aria-label="Dismiss AI summary"
									>
										<X className="h-3 w-3" />
									</Button>
								</div>
							</div>
							<p className="text-sm leading-relaxed text-foreground/90">{summary}</p>
						</div>
					</motion.div>
				)}
			</AnimatePresence>
		</div>
	);
};