"use client";

import { useState, useEffect } from "react";
import { getPlansForProject, addPlan, removePlan, type Plan } from "@/lib/plans";
import AddPlanForm from "./AddPlanForm";
import PlanCard from "./PlanCard";
import PlanViewer from "./PlanViewer";

interface ProjectPlansProps {
	slug: string;
}

export default function ProjectPlans({ slug }: ProjectPlansProps) {
	const [plans, setPlans] = useState<Plan[]>([]);
	const [activeId, setActiveId] = useState<string | null>(null);

	useEffect(() => {
		setPlans(getPlansForProject(slug));
	}, [slug]);

	const activePlan = plans.find(p => p.id === activeId);

	function handleAdd(url: string, title: string) {
		const plan = addPlan(slug, url, title);
		setPlans(getPlansForProject(slug));
		setActiveId(plan.id);
	}

	function handleRemove(planId: string) {
		removePlan(slug, planId);
		setPlans(getPlansForProject(slug));
		if (activeId === planId) setActiveId(null);
	}

	function handleView(planId: string) {
		setActiveId(activeId === planId ? null : planId);
	}

	return (
		<section className="mt-8 space-y-4">
			<div className="flex items-center justify-between">
				<h2 className="text-lg font-semibold text-text-primary">Plans</h2>
				<AddPlanForm onAdd={handleAdd} />
			</div>

			{plans.length > 0 && (
				<div className="space-y-2">
					{plans.map(plan => (
						<PlanCard
							key={plan.id}
							plan={plan}
							isActive={activeId === plan.id}
							onView={() => handleView(plan.id)}
							onRemove={() => handleRemove(plan.id)}
						/>
					))}
				</div>
			)}

			{activePlan && <PlanViewer url={activePlan.url} />}
		</section>
	);
}