"use client";

import Sidebar from "@/components/layout/Sidebar";
import TopBar from "@/components/layout/TopBar";
import ALPStatsCards from "@/components/alp/ALPStatsCards";
import PriceHistoryCard from "@/components/alp/PriceHistoryCard";
import TradePanel from "@/components/common/TradePanel";
import LiquidityAllocationTable from "@/components/alp/LiquidityAllocationTable";
import { useApp } from "@/contexts/AppContext";

export default function ALPPage() {
  const { t } = useApp();

  const breadcrumbItems = [
    { label: "ASSETX", href: "/" },
    { label: t("nav.alp") },
  ];

  return (
    <div className="min-h-screen bg-white dark:bg-gray-900 flex">
      <Sidebar />
      <div className="flex-1 flex flex-col ml-[222px]">
        <div className="bg-[#F3F4F6] dark:bg-gray-800 border-b border-border-normal dark:border-gray-700 px-8 py-3">
          <TopBar breadcrumbItems={breadcrumbItems} />
        </div>

        <div className="flex-1 px-8 py-8 bg-[#F3F4F6] dark:bg-gray-900">
          {/* Page Title and Stats Cards Section */}
          <div className="bg-white dark:bg-gray-900 rounded-3xl border border-border-gray dark:border-gray-700 px-6 py-8 mb-8">
            <div className="mb-6">
              <h1 className="text-[32px] font-bold leading-[130%] tracking-[-0.01em] text-text-primary dark:text-white">
                {t("alp.title")}
              </h1>
            </div>

            {/* Stats Cards */}
            <div>
              <ALPStatsCards />
            </div>
          </div>

          {/* Main Content - Price History and Trade Panel */}
          <div className="grid grid-cols-[32fr_24fr] gap-8 mb-8">
            <PriceHistoryCard />
            <TradePanel />
          </div>

          {/* Liquidity Allocation Table */}
          <div>
            <LiquidityAllocationTable />
          </div>
        </div>
      </div>
    </div>
  );
}