"use client";
import { withPageAuthRequired, getSession } from "@auth0/nextjs-auth0";
import { useEffect, useState } from "react";

export default withPageAuthRequired(
	function Dashboard() {
		const savedPrompts = [
			{
				id: 1,
				prompt: "Write a blog post about AI advancements",
				use: "Blogging",
			},
			{
				id: 2,
				prompt: "Create a story set in a futuristic world",
				use: "Story Writing",
			},
			// ... other saved prompts
		];
		const [prompt, setPrompt] = useState("");
		const [promptUse, setPromptUse] = useState("");
		const [superPrompt, setSuperPrompt] = useState("");
		const handleSubmit = (event) => {
			event.preventDefault();
			fetch("/api/handleSubmit", {
				method: "POST",
				headers: {
					"content-type": "application/json",
				},
				body: JSON.stringify({ prompt, promptUse, superPrompt }),
			});
		};

		return (
			<div className="container mx-auto px-4 py-8">
				<h1 className="text-3xl font-semibold mb-6">
					Create Your Super Prompt
				</h1>
				<div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
					<form onSubmit={handleSubmit}>
						<div className="mb-4">
							<label
								className="block text-gray-700 text-sm font-bold mb-2"
								htmlFor="prompt">
								Your Initial Prompt
							</label>
							<input
								className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
								id="prompt"
								type="text"
								placeholder="Write a blog post"
								value={prompt}
								onChange={(e) => setPrompt(e.target.value)}
							/>
						</div>
						<div className="mb-6">
							<label
								className="block text-gray-700 text-sm font-bold mb-2"
								htmlFor="prompt-use">
								What will the prompt be used for?
							</label>
							<input
								className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
								id="prompt-use"
								type="text"
								placeholder="E.g., Blogging, Story Writing, etc."
								value={promptUse}
								onChange={(e) => setPromptUse(e.target.value)}
							/>
						</div>
						<div className="mb-6">
							<label
								className="block text-gray-700 text-sm font-bold mb-2"
								htmlFor="super-prompt">
								Super Prompt Requirement
							</label>
							<textarea
								className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
								id="super-prompt"
								placeholder="Describe your requirements for the super prompt"
								value={superPrompt}
								onChange={(e) => setSuperPrompt(e.target.value)}></textarea>
						</div>
						<div className="flex items-center justify-between">
							<button
								className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
								type="submit">
								Generate Super Prompt
							</button>
						</div>
					</form>
				</div>

				<div className="mt-10">
					<h2 className="text-2xl font-semibold mb-4">Your Saved Prompts</h2>
					<div className="bg-white shadow-md rounded px-8 pt-6 pb-8">
						{savedPrompts.length > 0 ? (
							<ul>
								{savedPrompts.map((prompt) => (
									<li key={prompt.id} className="border-b border-gray-200 py-3">
										<p className="text-lg font-semibold">{prompt.prompt}</p>
										<p className="text-sm text-gray-600">Use: {prompt.use}</p>
									</li>
								))}
							</ul>
						) : (
							<p>No saved prompts yet.</p>
						)}
					</div>
				</div>
			</div>
		);
	},
	{ returnTo: "/profile" }
);