import React from "react";
import { HashRouter as Router, Routes, Route, useNavigate, useSearchParams } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { Settings as SettingsIcon, RefreshCw } from "lucide-react";
import { __ } from "@wordpress/i18n";

// Custom hooks
import { usePollManagement } from "./hooks/usePollManagement";
import { useSettings } from "./hooks/useSettings";

// Components
import PollTable from "./components/PollTable";
import Pagination from "./components/Pagination";
import PerPageSelector from "./components/PerPageSelector";
import PollDetail from "./components/PollDetail";
import EditPoll from "./components/EditPoll";
import CreatePoll from "./components/CreatePoll";
import Settings from "./components/Settings";
import DeletePollDialog from "./components/modals/DeletePollDialog";

// Main App Content component that uses router hooks
function AppContent() {
	const {
		polls,
		isLoading,
		isDeleteDialogOpen,
		isDeleteDialogLoading,
		pollToDelete,
		newPoll,
		editedPoll,
		paginationData,
		filters,

		// Modal handlers
		setIsDeleteDialogOpen,
		openDeleteDialog,

		// Poll operations
		handleSavePoll,
		handleCreatePoll,
		handleDeletePoll,
		refreshPolls,
		loadStatsData,

		// Pagination handlers
		handlePageChange,
		handlePerPageChange,
		handleSort,

		// Poll and option management
		handlePollChange,
		handleOptionChange,
		addOption,
		removeOption,
		handleOptionSort,

		// State setters (needed in App.jsx)
		setEditedPoll,
		setNewPoll,
	} = usePollManagement();

	const { settingsData, isSettingsLoading, handleUpdateSettings } = useSettings();

	// Dashboard component (main page)
	const Dashboard = () => {
		const navigate = useNavigate();
		const [searchParams] = useSearchParams();

		const handleSettingsClick = () => {
			navigate("/settings");
		};

		const handleCreateClick = () => {
			const params = searchParams.toString();
			navigate(`/create${params ? `?${params}` : ""}`);
		};

		return (
			<div className="socialpoll-admin-app mt-5 mr-5 ml-1">
				<div className="bg-white p-5 rounded-xl flex flex-col gap-5">
					<div className="w-full flex flex-row items-center gap-5 justify-between">
						<h1 className="!text-2xl font-bold !mb-0 !mt-0">
							{__("SocialPoll - Create simple polls for user engagement", "socialpoll")}
						</h1>
						<div className="flex items-center gap-3">
							<Button variant="outline" size="icon" onClick={refreshPolls} disabled={isLoading}>
								<RefreshCw className={isLoading ? "animate-spin" : ""} />
							</Button>
							<Button size="icon" onClick={handleSettingsClick}>
								<SettingsIcon />
							</Button>
						</div>
					</div>

					{/* Main Poll Table with Loading State */}
					<PollTable
						polls={polls}
						isLoading={isLoading}
						onDelete={openDeleteDialog}
						filters={filters}
						onSort={handleSort}
					/>

					{!paginationData || paginationData.total_items > 0 ? (
						<div className="w-full flex flex-row items-center gap-5 justify-between">
							<Button onClick={handleCreateClick}>{__("Create Poll", "socialpoll")}</Button>

							{/* Pagination Controls */}
							{paginationData && (
								<div className="flex flex-col sm:flex-row gap-5 items-start sm:items-center justify-between">
									<Pagination pagination={paginationData} onPageChange={handlePageChange} />
									<PerPageSelector
										perPage={paginationData?.per_page || 10}
										onPerPageChange={handlePerPageChange}
										className="shrink-0"
									/>
								</div>
							)}
						</div>
					) : (
						<div className="w-full flex flex-row items-center gap-5 justify-start">
							<Button onClick={handleCreateClick}>{__("Create your first poll", "socialpoll")}</Button>
						</div>
					)}
				</div>
			</div>
		);
	};

	return (
		<div>
			<Routes>
				<Route path="/" element={<Dashboard />} />
				<Route path="/poll/:pollId" element={<PollDetail polls={polls} loadStatsData={loadStatsData} />} />
				<Route
					path="/edit/:pollId"
					element={
						<EditPoll
							polls={polls}
							handleSavePoll={handleSavePoll}
							handlePollChange={handlePollChange}
							handleOptionChange={handleOptionChange}
							addOption={addOption}
							removeOption={removeOption}
							handleOptionSort={handleOptionSort}
							setEditedPoll={setEditedPoll}
							editedPoll={editedPoll}
						/>
					}
				/>
				<Route
					path="/settings"
					element={
						<Settings
							settingsData={settingsData}
							isSettingsLoading={isSettingsLoading}
							handleUpdateSettings={handleUpdateSettings}
						/>
					}
				/>
				<Route
					path="/create"
					element={
						<CreatePoll
							handleCreatePoll={handleCreatePoll}
							handlePollChange={handlePollChange}
							handleOptionChange={handleOptionChange}
							addOption={addOption}
							removeOption={removeOption}
							handleOptionSort={handleOptionSort}
							newPoll={newPoll}
							setNewPoll={setNewPoll}
						/>
					}
				/>
			</Routes>

			{/* Modals */}
			<DeletePollDialog
				isOpen={isDeleteDialogOpen}
				isModalLoading={isDeleteDialogLoading}
				setIsOpen={setIsDeleteDialogOpen}
				pollToDelete={pollToDelete}
				onDelete={handleDeletePoll}
			/>
		</div>
	);
}

// Root App component
function App() {
	return (
		<Router>
			<AppContent />
		</Router>
	);
}

export default App;