"use client";
import React, { FormEvent, useState } from "react";

const Dashboard = () => {
	const [newEntry, setNewEntry] = useState({ task: "", duration: "" });
	const [entries, setEntries] = useState([
		{ id: 1, task: "Meeting", duration: "1h 30m", date: "2024-12-30" },
		{ id: 2, task: "Development", duration: "3h 45m", date: "2024-12-29" },
		{ id: 3, task: "Code Review", duration: "2h", date: "2024-12-28" },
	]);

	const handleInputChange = (e: FormEvent) => {
		const { name, value } = e.target as HTMLInputElement;
		setNewEntry({ ...newEntry, [name]: value });
	};

	const handleAddEntry = () => {
		if (!newEntry.task || !newEntry.duration) return;
		const newId = entries.length ? entries[entries.length - 1].id + 1 : 1;
		setEntries([
			...entries,
			{ id: newId, ...newEntry, date: new Date().toISOString().split("T")[0] },
		]);
		setNewEntry({ task: "", duration: "" });
	};

	return (
		<main className="min-h-screen bg-gray-100 py-10 px-4">
			<div className="max-w-4xl mx-auto bg-white rounded-lg shadow-lg p-6">
				{/* Timer Section */}
				<section className="mb-8">
					<h2 className="text-2xl font-bold text-gray-800 mb-4">New Entry</h2>
					<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
						<input
							type="text"
							name="task"
							value={newEntry.task}
							onChange={handleInputChange}
							placeholder="Task Name"
							className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:outline-none"
						/>
						<input
							type="text"
							name="duration"
							value={newEntry.duration}
							onChange={handleInputChange}
							placeholder="Duration (e.g., 1h 30m)"
							className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:outline-none"
						/>
						<button
							onClick={handleAddEntry}
							className="w-full bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-500 transition duration-200"
						>
							Add Entry
						</button>
					</div>
				</section>

				{/* Past Entries Section */}
				<section>
					<h2 className="text-2xl font-bold text-gray-800 mb-4">
						Past Entries
					</h2>
					<div className="bg-gray-50 p-4 rounded-lg shadow-inner">
						{entries.length
							? (
								<ul className="divide-y divide-gray-300">
									{entries.map((entry) => (
										<li
											key={entry.id}
											className="py-3 flex justify-between items-center"
										>
											<div>
												<p className="text-lg font-medium text-gray-700">
													{entry.task}
												</p>
												<p className="text-sm text-gray-500">
													{entry.date} - {entry.duration}
												</p>
											</div>
										</li>
									))}
								</ul>
							)
							: (
								<p className="text-gray-500">
									No entries yet. Start adding some!
								</p>
							)}
					</div>
				</section>
			</div>
		</main>
	);
};

export default Dashboard;
