"use client";

import type { Memory, Project } from "@imemio/sdk";
import { useEffect, useState } from "react";

type MemoryWithProject = Memory & {
	project: Project | null;
};

type MemoryEditModalProps = {
	memory: MemoryWithProject;
	projects: Project[];
	onSave: (data: { content: string; projectId: string }) => void;
	onClose: () => void;
	isSaving?: boolean;
};

export function MemoryEditModal({
	memory,
	projects,
	onSave,
	onClose,
	isSaving,
}: MemoryEditModalProps) {
	const [content, setContent] = useState(memory.content);
	const [projectId, setProjectId] = useState(memory.projectId);

	useEffect(() => {
		setContent(memory.content);
		setProjectId(memory.projectId);
	}, [memory]);

	const handleSubmit = (formSubmitEvent: React.FormEvent) => {
		formSubmitEvent.preventDefault();

		if (content.trim()) {
			onSave({ content, projectId });
		}
	};

	return (
		<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80">
			<div className="w-full max-w-lg border border-[#2a2a2a] bg-[#0f0f0f] p-6">
				<div className="mb-4 flex items-center justify-between">
					<h2 className="text-lg text-white">
						<span className="text-[#999999]">&gt;</span> edit memory
					</h2>

					<button
						className="text-[#666666] transition hover:text-white"
						onClick={onClose}
						type="button"
					>
						[esc]
					</button>
				</div>

				<form className="flex flex-col gap-4" onSubmit={handleSubmit}>
					<div>
						<label className="mb-1 block text-xs text-[#666666]">content</label>
						<textarea
							className="w-full border border-[#2a2a2a] bg-[#070707] px-3 py-2 text-white placeholder:text-[#666666] focus:border-[#666666] focus:outline-none"
							onChange={(textareaChangeEvent) =>
								setContent(textareaChangeEvent.target.value)
							}
							rows={5}
							value={content}
						/>
					</div>

					<div>
						<label className="mb-1 block text-xs text-[#666666]">project</label>
						<select
							className="w-full border border-[#2a2a2a] bg-[#070707] px-3 py-2 text-white focus:border-[#666666] focus:outline-none"
							onChange={(selectChangeEvent) =>
								setProjectId(selectChangeEvent.target.value)
							}
							value={projectId}
						>
							{projects.map((project) => (
								<option key={project.id} value={project.id}>
									{project.isGlobal ? `* ${project.name} (global)` : project.name}
								</option>
							))}
						</select>
					</div>

					<div className="flex justify-end gap-2">
						<button
							className="border border-[#2a2a2a] bg-[#0f0f0f] px-4 py-2 text-[#999999] transition hover:border-[#666666] hover:text-white"
							onClick={onClose}
							type="button"
						>
							cancel
						</button>

						<button
							className="border border-[#2a2a2a] bg-[#0f0f0f] px-4 py-2 text-white transition hover:border-[#666666] disabled:text-[#666666] disabled:hover:border-[#2a2a2a]"
							disabled={isSaving || !content.trim()}
							type="submit"
						>
							{isSaving ? "saving ..." : "save changes"}
						</button>
					</div>
				</form>
			</div>
		</div>
	);
}