"use client";

import { useCallback, useEffect, useId, useState } from "react";

interface SessionContext {
	summary: string;
	last_updated: string | null;
}

interface ContextPanelProps {
	isOpen: boolean;
	onClose: () => void;
	sessionContext: SessionContext | null;
	initialContext?: string;
	onInitialContextChange?: (value: string) => void;
	isLocked?: boolean;
}

function formatRelativeTime(isoString: string): string {
	const date = new Date(isoString);
	const now = new Date();
	const diffMs = now.getTime() - date.getTime();
	const diffSec = Math.floor(diffMs / 1000);
	const diffMin = Math.floor(diffSec / 60);
	const diffHour = Math.floor(diffMin / 60);

	if (diffSec < 60) {
		return "just now";
	}
	if (diffMin < 60) {
		return `${diffMin} minute${diffMin === 1 ? "" : "s"} ago`;
	}
	if (diffHour < 24) {
		return `${diffHour} hour${diffHour === 1 ? "" : "s"} ago`;
	}
	return date.toLocaleDateString();
}

function BrainIcon() {
	return (
		<svg
			width="24"
			height="24"
			viewBox="0 0 24 24"
			fill="none"
			stroke="currentColor"
			strokeWidth="1.5"
			strokeLinecap="round"
			strokeLinejoin="round"
		>
			<path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" />
			<path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z" />
			<path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4" />
			<path d="M17.599 6.5a3 3 0 0 0 .399-1.375" />
			<path d="M6.003 5.125A3 3 0 0 0 6.401 6.5" />
			<path d="M3.477 10.896a4 4 0 0 1 .585-.396" />
			<path d="M19.938 10.5a4 4 0 0 1 .585.396" />
			<path d="M6 18a4 4 0 0 1-1.967-.516" />
			<path d="M19.967 17.484A4 4 0 0 1 18 18" />
		</svg>
	);
}

export default function ContextPanel({
	isOpen,
	onClose,
	sessionContext,
	initialContext = "",
	onInitialContextChange,
	isLocked = false,
}: ContextPanelProps) {
	const titleId = useId();
	const [localValue, setLocalValue] = useState(initialContext);

	useEffect(() => {
		if (isOpen) {
			setLocalValue(initialContext);
		}
	}, [isOpen, initialContext]);

	const handleKeyDown = useCallback(
		(e: React.KeyboardEvent) => {
			if (e.key === "Escape") {
				onClose();
			}
		},
		[onClose],
	);

	const handleSave = useCallback(() => {
		onInitialContextChange?.(localValue);
		onClose();
	}, [localValue, onInitialContextChange, onClose]);

	if (!isOpen) {
		return null;
	}

	const hasSessionContext = sessionContext?.summary?.trim();
	// Show edit mode when: not locked AND no session context yet
	const isEditMode = !isLocked && !hasSessionContext;

	return (
		<>
			<style>{`
				.context-modal-overlay {
					position: fixed;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: rgba(0, 0, 0, 0.5);
					display: flex;
					align-items: center;
					justify-content: center;
					z-index: 1000;
				}
				.context-modal {
					background: white;
					border-radius: 12px;
					padding: 1.5rem;
					width: 90%;
					max-width: 600px;
					max-height: 80vh;
					overflow: auto;
					position: relative;
					box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
				}
				.context-modal-header {
					display: flex;
					align-items: center;
					gap: 0.75rem;
					margin-bottom: 0.5rem;
				}
				.context-modal-icon {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 40px;
					height: 40px;
					border-radius: 10px;
					background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
					color: #3b82f6;
				}
				.context-modal-title {
					margin: 0;
					font-size: 1.25rem;
					font-weight: 600;
					color: #1e293b;
				}
				.context-modal-description {
					margin: 0 0 1rem 0;
					font-size: 0.875rem;
					color: #64748b;
					line-height: 1.5;
				}
				.context-content {
					background: #f8fafc;
					border: 1px solid #e2e8f0;
					border-radius: 8px;
					padding: 1rem;
					font-size: 0.875rem;
					line-height: 1.6;
					color: #334155;
					white-space: pre-wrap;
					max-height: 400px;
					overflow-y: auto;
				}
				.context-textarea {
					width: 100%;
					min-height: 200px;
					padding: 1rem;
					font-size: 0.875rem;
					line-height: 1.6;
					color: #334155;
					background: white;
					border: 1px solid #e2e8f0;
					border-radius: 8px;
					resize: vertical;
					font-family: inherit;
				}
				.context-textarea:focus {
					outline: none;
					border-color: #3b82f6;
					box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
				}
				.context-empty {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 2rem 1rem;
					text-align: center;
					color: #94a3b8;
				}
				.context-empty-icon {
					margin-bottom: 0.75rem;
					opacity: 0.5;
				}
				.context-empty-text {
					font-size: 0.875rem;
					line-height: 1.5;
				}
				.context-footer {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 1rem;
					padding-top: 1rem;
					border-top: 1px solid #e2e8f0;
				}
				.context-timestamp {
					font-size: 0.75rem;
					color: #94a3b8;
				}
				.context-btn {
					padding: 0.5rem 1rem;
					font-size: 0.875rem;
					font-weight: 500;
					border-radius: 6px;
					cursor: pointer;
					transition: all 0.15s;
				}
				.context-btn-close {
					background: white;
					color: #475569;
					border: 1px solid #e2e8f0;
				}
				.context-btn-close:hover {
					background: #f8fafc;
					border-color: #cbd5e1;
				}
				.context-btn-save {
					background: #3b82f6;
					color: white;
					border: 1px solid #3b82f6;
					margin-left: 0.5rem;
				}
				.context-btn-save:hover {
					background: #2563eb;
					border-color: #2563eb;
				}
				.context-footer-buttons {
					display: flex;
					gap: 0.5rem;
				}
			`}</style>
			<div
				className="context-modal-overlay"
				onClick={onClose}
				onKeyDown={handleKeyDown}
				role="dialog"
				aria-modal="true"
				aria-labelledby={titleId}
			>
				{/* biome-ignore lint/a11y/noStaticElementInteractions: modal content wrapper */}
				<div
					className="context-modal"
					onClick={(e) => e.stopPropagation()}
					onKeyDown={(e) => e.stopPropagation()}
				>
					<div className="context-modal-header">
						<div className="context-modal-icon">
							<BrainIcon />
						</div>
						<h2 id={titleId} className="context-modal-title">
							{isEditMode ? "Initial Context" : "Session Context"}
						</h2>
					</div>
					<p className="context-modal-description">
						{isEditMode
							? "Set background context to guide the conversation. This will be locked after you send your first message."
							: "This is what the assistant has learned from your conversation so far. It uses this context to provide more relevant answers."}
					</p>
					{isEditMode ? (
						<textarea
							className="context-textarea"
							placeholder="Enter any background context or instructions for the assistant..."
							value={localValue}
							onChange={(e) => setLocalValue(e.target.value)}
						/>
					) : hasSessionContext ? (
						<div className="context-content">{sessionContext.summary}</div>
					) : (
						<div className="context-empty">
							<div className="context-empty-icon">
								<BrainIcon />
							</div>
							<div className="context-empty-text">
								No context yet. Ask some questions to build context.
							</div>
						</div>
					)}
					<div className="context-footer">
						<span className="context-timestamp">
							{sessionContext?.last_updated
								? `Last updated: ${formatRelativeTime(sessionContext.last_updated)}`
								: ""}
						</span>
						<div className="context-footer-buttons">
							<button
								type="button"
								className="context-btn context-btn-close"
								onClick={onClose}
							>
								{isEditMode ? "Cancel" : "Close"}
							</button>
							{isEditMode && (
								<button
									type="button"
									className="context-btn context-btn-save"
									onClick={handleSave}
								>
									Save
								</button>
							)}
						</div>
					</div>
				</div>
			</div>
		</>
	);
}