"use client";

import * as React from "react";
import { useParams, useRouter } from "next/navigation";
import { ArrowLeft } from "lucide-react";
import { Button } from "@/components/ui/button";
import { BusinessDealDetailView } from "@/components/deals/business-deal-detail-view";
import { useAuthToken } from "@/hooks/use-auth-token";

export default function SalesDealDetailPage() {
  const params = useParams();
  const router = useRouter();
  const { token } = useAuthToken();
  const id = params.id as string;

  if (!token) return null;

  return (
    <div className="flex h-full flex-col">
      <header className="z-10 flex shrink-0 items-center justify-between border-b border-gray-200 px-6 py-4">
        <div className="flex items-center gap-4">
          <Button
            variant="ghost"
            size="icon"
            onClick={() => router.push("/sales-deals")}
            className="h-9 w-9 rounded-xl hover:bg-gray-100"
          >
            <ArrowLeft size={18} />
          </Button>
          <div className="mx-1 h-6 w-px bg-gray-200" />
          <div>
            <h1 className="font-['Lexend'] text-sm font-bold uppercase tracking-widest text-gray-900 opacity-50">
              Deal Detail
            </h1>
          </div>
        </div>
      </header>

      <main className="min-h-0 flex-1">
        <BusinessDealDetailView
          businessDealId={id}
          isFullPage
          onClose={() => router.push("/sales-deals")}
        />
      </main>
    </div>
  );
}