"use client"

import * as React from "react"
import { Suspense } from "react"
import { useParams, useRouter, useSearchParams } from "next/navigation"
import { ArrowLeft } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Loading } from "@/components/ui/loading"
import { DealDetailView } from "@/components/deals/deal-detail-view"
import { markKanbanReturnResetPending } from "@/components/deals/kanban-helpers/kanban-return-reset"

function LeadDetailContent() {
    const params = useParams()
    const router = useRouter()
    const searchParams = useSearchParams()
    const dealId = params.id as string
    const defaultTab = searchParams.get("tab") ?? undefined

    return (
        <DealDetailView
            dealId={dealId}
            isFullPage={true}
            defaultTab={defaultTab}
            onClose={() => {
                markKanbanReturnResetPending()
                router.push("/leads")
            }}
        />
    )
}

export default function DealPage() {
    const router = useRouter()

    React.useEffect(() => {
        if (typeof window === "undefined") return;

        window.history.pushState(null, "", window.location.href);

        const handlePopState = () => {
            markKanbanReturnResetPending();
            router.replace("/leads");
        };

        window.addEventListener("popstate", handlePopState);

        const handleKeyDown = (e: KeyboardEvent) => {
            if (e.altKey && e.key === "ArrowLeft") {
                router.replace("/leads");
            }
        };
        window.addEventListener("keydown", handleKeyDown);

        const handlePageShow = (event: PageTransitionEvent) => {
            if (event.persisted) {
                window.history.pushState(null, "", window.location.href);
            }
        };
        window.addEventListener("pageshow", handlePageShow);

        return () => {
            window.removeEventListener("popstate", handlePopState);
            window.removeEventListener("keydown", handleKeyDown);
            window.removeEventListener("pageshow", handlePageShow);
        };
    }, [router]);

    return (
        <div className="flex flex-col h-full">
            <header className="z-10 flex shrink-0 items-center border-b border-gray-200 px-4 py-2.5 sm:px-6">
                <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => {
                        markKanbanReturnResetPending();
                        router.push("/leads");
                    }}
                    className="h-8 w-8 rounded-xl hover:bg-gray-100"
                >
                    <ArrowLeft size={16} />
                </Button>
                <div className="mx-3 h-5 w-px bg-gray-200" />
                <h1 className="text-xs font-bold uppercase tracking-widest text-gray-500 font-['Lexend']">
                    Lead Detail
                </h1>
            </header>

            <main className="flex-1 min-h-0">
                <Suspense
                    fallback={
                        <Loading
                            layout="page"
                            message="Loading lead details..."
                        />
                    }
                >
                    <LeadDetailContent />
                </Suspense>
            </main>
        </div>
    )
}