import React, { useEffect, useState } from "react";
import { useParams, useNavigate, useSearchParams } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { ArrowLeft, LoaderCircle, Pencil } from "lucide-react";
import { Skeleton } from "@/components/ui/skeleton";
import { __ } from "@wordpress/i18n";

import ParticipationCard from "../stats/ParticipationCard";
import ResponseChart from "../stats/ResponseChart";
import DataTable from "../stats/DataTable";

/**
 * PollDetail - Detail page for displaying poll statistics and visualizations
 */
export const PollDetail = ({ polls, loadStatsData }) => {
	const { pollId } = useParams();
	const navigate = useNavigate();
	const [searchParams] = useSearchParams();
	const [isLoading, setIsLoading] = useState(true);
	const [statsData, setStatsData] = useState(null);
	const [poll, setPoll] = useState(null);

	// Find the poll by ID
	useEffect(() => {
		if (polls && pollId) {
			const foundPoll = polls.find((p) => p.id.toString() === pollId);
			if (foundPoll) {
				setPoll(foundPoll);
				// Load stats data for this poll
				loadStatsForPoll(foundPoll);
			} else {
				// Poll not found, redirect to main page
				navigate("/");
			}
		}
	}, [polls, pollId, navigate]);

	const loadStatsForPoll = async (pollData) => {
		setIsLoading(true);
		try {
			const data = await loadStatsData(pollData);
			setStatsData(data);
		} catch (error) {
			console.error("Error loading stats:", error);
		} finally {
			setIsLoading(false);
		}
	};

	const handleBackClick = () => {
		navigate(-1);
	};

	const handleEditClick = () => {
		const params = searchParams.toString();
		navigate(`/edit/${pollId}${params ? `?${params}` : ''}`);
	};

	if (!poll) {
		return (
			<div className="flex justify-center items-center h-64">
				<LoaderCircle className="animate-spin h-8 w-8 text-primary" />
			</div>
		);
	}

	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">
				{/* Header with back button and edit button */}
				<div className="flex items-center justify-between">
					<div className="flex items-center gap-4">
						<Button variant="outline" size="icon" onClick={handleBackClick}>
							<ArrowLeft />
						</Button>
						<div>
							<h1 className="!text-2xl font-bold !mb-0 !mt-0">{poll.name}</h1>
						</div>
					</div>
					<Button variant="outline" onClick={handleEditClick} className="flex items-center gap-2">
						<Pencil size={16} />
						{__("Edit Poll", "socialpoll")}
					</Button>
				</div>

				{/* Stats content */}
				<div className="grid gap-4">
					{isLoading ? (
						// Loading skeleton
						<div className="flex flex-col space-y-4">
							<Skeleton className="w-full h-20" />
							<Skeleton className="w-full h-64" />
							<Skeleton className="w-full h-40" />
						</div>
					) : (
						<div className="grid gap-4">
							<ParticipationCard statsData={statsData} />
							<ResponseChart statsData={statsData} />
							<DataTable statsData={statsData} />
						</div>
					)}
				</div>
			</div>
		</div>
	);
};

export default PollDetail;