"use client";

import Image from "next/image";
import { useRouter } from "next/navigation";
import { Button } from "@heroui/react";
import { useApp } from "@/contexts/AppContext";
import { buttonStyles } from "@/lib/buttonStyles";
import { useAccount } from "wagmi";
import { useSuppliedBalance } from "@/hooks/useLendingSupply";
import { useCollateralValue } from "@/hooks/useCollateral";
import { useTokenList } from "@/hooks/useTokenList";

export default function LendingPlaceholder() {
  const { t } = useApp();
  const router = useRouter();
  const { isConnected } = useAccount();
  const { bySymbol } = useTokenList();
  const { formattedBalance: suppliedBalance } = useSuppliedBalance();
  const { valueRaw: valueA } = useCollateralValue(bySymbol['YT-A']);
  const { valueRaw: valueB } = useCollateralValue(bySymbol['YT-B']);
  const { valueRaw: valueC } = useCollateralValue(bySymbol['YT-C']);

  const totalPortfolio = isConnected
    ? parseFloat(suppliedBalance) + valueA + valueB + valueC
    : 0;
  const portfolioDisplay = `$${totalPortfolio.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
  const collateralTotal = valueA + valueB + valueC;

  return (
    <div className="relative rounded-2xl h-[180px] overflow-hidden">
      {/* Dark Background */}
      <div className="absolute inset-0 bg-[#0f172b]" />

      {/* Green Glow Effect */}
      <div
        className="absolute w-32 h-32 rounded-full right-0 top-[-64px]"
        style={{
          background: "rgba(0, 188, 125, 0.2)",
          filter: "blur(40px)",
        }}
      />

      {/* Content - Centered */}
      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col gap-4 w-[90%]">
        {/* Your Portfolio Section */}
        <div className="flex flex-col gap-2">
          {/* Label Row */}
          <div className="flex items-center justify-between h-[21px]">
            <span className="text-[10px] font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
              {t("lending.yourPortfolio")}
            </span>
            {collateralTotal > 0 && (
              <span className="text-[10px] font-bold text-[#10b981] dark:text-green-400 leading-[150%] tracking-[0.01em]">
                +${collateralTotal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} {t("lending.collateral")}
              </span>
            )}
          </div>

          {/* Amount */}
          <div className="flex items-center gap-2">
            <span className="text-heading-h2 font-bold text-white leading-[130%] tracking-[-0.01em]">
              {portfolioDisplay}
            </span>
          </div>
        </div>

        {/* Supply USDC Button */}
        <Button
          color="default"
          variant="solid"
          className="h-11 rounded-xl px-6 text-body-small font-bold bg-[#282E3F] dark:bg-white dark:text-[#282E3F] text-background"
          onPress={() => router.push("/lending/supply")}
          endContent={<Image src="/icons/actions/arrow-right-icon.svg" alt="" width={20} height={20} />}
        >
          {t("lending.supplyUsdc")}
        </Button>
      </div>
    </div>
  );
}