"use client";

import { Suspense, useState } from "react";
import { useSearchParams } from "next/navigation";
import Sidebar from "@/components/layout/Sidebar";
import TopBar from "@/components/layout/TopBar";
import RepayHeader from "@/components/lending/repay/RepayHeader";
import RepaySupplyCollateral from "@/components/lending/repay/RepaySupplyCollateral";
import RepayBorrowDebt from "@/components/lending/repay/RepayBorrowDebt";
import RepayStats from "@/components/lending/repay/RepayStats";
import RepayPoolStats from "@/components/lending/repay/RepayPoolStats";
import { useRouter } from "next/navigation";
import { useApp } from "@/contexts/AppContext";
import { useTokenList } from "@/hooks/useTokenList";

function RepayContent() {
  const { t } = useApp();
  const router = useRouter();
  const searchParams = useSearchParams();
  const { yieldTokens } = useTokenList();
  const rawToken = searchParams.get('token') || '';
  const validSymbols = yieldTokens.map(t => t.symbol);
  const tokenType = validSymbols.includes(rawToken) ? rawToken : (validSymbols[0] ?? 'YT-A');
  const [collateralVersion, setCollateralVersion] = useState(0);

  const handleBackToLending = () => {
    router.push("/lending");
  };

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

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

        <div className="flex-1 px-4 md:px-8 py-4 md:py-8 bg-[#F3F4F6] dark:bg-gray-900 flex flex-col gap-4 md:gap-8">
          {/* Back to lending link */}
          <button
            onClick={handleBackToLending}
            className="flex items-center gap-2 self-start group"
          >
            <svg
              width="20"
              height="20"
              viewBox="0 0 16 16"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              className="group-hover:translate-x-[-2px] transition-transform"
            >
              <path
                d="M10 12L6 8L10 4"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="text-text-tertiary dark:text-gray-400"
              />
            </svg>
            <span className="text-body-large font-semibold text-text-tertiary dark:text-gray-400 group-hover:text-text-primary dark:group-hover:text-white transition-colors">
              {t("repay.backToLending")}
            </span>
          </button>

          <RepayHeader tokenType={tokenType} />
          <div className="flex flex-col md:flex-row gap-4 md:gap-8">
            <RepaySupplyCollateral
              tokenType={tokenType}
              onCollateralChanged={() => setCollateralVersion(v => v + 1)}
            />
            <RepayBorrowDebt refreshTrigger={collateralVersion} />
            <RepayStats />
          </div>
          <RepayPoolStats tokenType={tokenType} />
        </div>
      </div>
    </div>
  );
}

export default function RepayPage() {
  return (
    <Suspense fallback={<div className="min-h-screen bg-[#F3F4F6] dark:bg-gray-900" />}>
      <RepayContent />
    </Suspense>
  );
}