"use client";

import { useState } from "react";
import Image from "next/image";
import { Button } from "@heroui/react";
import { useApp } from "@/contexts/AppContext";
import { buttonStyles } from "@/lib/buttonStyles";
export default function SupplyPanel() {
  const { t } = useApp();
  const [amount, setAmount] = useState("");

  return (
    <div className="p-6 flex flex-col gap-6 flex-1">
      {/* Token Balance & Supplied */}
      <div className="flex flex-col gap-4">
        {/* Token Balance */}
        <div className="bg-bg-subtle dark:bg-gray-700 rounded-xl border border-border-gray dark:border-gray-600 p-3 flex flex-col gap-1">
          <span className="text-[10px] font-medium text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
            {t("supply.tokenBalance")}
          </span>
          <div className="flex items-center justify-between">
            <span className="text-body-large font-bold text-text-primary dark:text-white leading-[150%]">
              45,230.00
            </span>
            <span className="text-caption-tiny font-medium text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
              JLP
            </span>
          </div>
          <span className="text-[10px] font-medium text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
            $45,230.00
          </span>
        </div>

        {/* Supplied */}
        <div className="bg-bg-subtle dark:bg-gray-700 rounded-xl border border-border-gray dark:border-gray-600 p-3 flex flex-col gap-1">
          <span className="text-[10px] font-medium text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
            {t("supply.supplied")}
          </span>
          <div className="flex items-center justify-between">
            <span className="text-body-large font-bold text-text-primary dark:text-white leading-[150%]">
              0.00
            </span>
            <span className="text-caption-tiny font-medium text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
              USDC
            </span>
          </div>
          <span className="text-[10px] font-medium text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
            $0.00
          </span>
        </div>
      </div>

      {/* Deposit Section */}
      <div className="bg-bg-subtle dark:bg-gray-700 rounded-xl border border-border-gray dark:border-gray-600 p-4 flex flex-col gap-4">
        {/* Deposit Label and Available */}
        <div className="flex items-center gap-2">
          <span className="text-caption-tiny font-medium text-text-secondary dark:text-gray-300 leading-[150%] tracking-[0.01em]">
            {t("supply.deposit")}
          </span>
          <div className="flex items-center gap-2 ml-auto">
            <Image src="/wallet-icon.svg" alt="" width={12} height={12} />
            <span className="text-caption-tiny font-medium text-text-secondary dark:text-gray-300 leading-[150%] tracking-[0.01em]">
              45,230.00 USDC
            </span>
          </div>
          <Button size="sm" color="default" variant="solid" className={buttonStyles({ intent: "max" })}>
            {t("supply.max")}
          </Button>
        </div>

        {/* Input Row */}
        <div className="flex items-center justify-between h-12">
          {/* USDC Token Button */}
          <div className="bg-bg-surface dark:bg-gray-800 rounded-full border border-border-normal dark:border-gray-600 p-2 flex items-center gap-2 h-12">
            <Image
              src="/usd-coin-usdc-logo-10.svg"
              alt="USDC"
              width={32}
              height={32}
            />
            <span className="text-body-default font-bold text-text-primary dark:text-white leading-[150%]">
              USDC
            </span>
          </div>

          {/* Amount Input */}
          <div className="flex flex-col items-end">
            <input
              type="text"
              value={amount}
              onChange={(e) => setAmount(e.target.value)}
              placeholder="0.00"
              className="text-heading-h3 font-bold text-text-input-box dark:text-gray-500 leading-[130%] tracking-[-0.005em] text-right bg-transparent outline-none w-24"
            />
            <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
              --
            </span>
          </div>
        </div>
      </div>

      {/* Health Factor */}
      <div className="flex flex-col gap-3">
        <div className="flex items-center justify-between">
          <div className="flex flex-col gap-1">
            <span className="text-[10px] font-medium text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
              {t("supply.healthFactor")}
            </span>
            <span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
              0% {t("supply.utilization")}
            </span>
          </div>
          <span className="text-caption-tiny font-bold text-[#10b981] dark:text-green-400 leading-[150%] tracking-[0.01em]">
            {t("supply.safe")}
          </span>
        </div>

        {/* Progress Bar */}
        <div className="w-full h-2 bg-fill-secondary-click dark:bg-gray-700 rounded-full overflow-hidden">
          <div
            className="h-full rounded-full"
            style={{
              background: "linear-gradient(90deg, #10b981 0%, #ffb933 100%)",
              width: "0%",
            }}
          />
        </div>
      </div>

      {/* Estimated Returns */}
      <div className="bg-bg-subtle dark:bg-gray-700 rounded-2xl p-4 flex flex-col gap-2">
        <span className="text-body-small font-medium text-text-secondary dark:text-gray-300 leading-[150%]">
          {t("supply.estimatedReturns")}
        </span>
        <div className="flex items-center justify-between">
          <span className="text-body-small font-regular text-text-tertiary dark:text-gray-400 leading-[150%]">
            {t("supply.estApy")}
          </span>
          <span className="text-body-small font-bold text-[#ff6900] dark:text-orange-400 leading-[150%]">
            22%
          </span>
        </div>
        <div className="flex items-center justify-between">
          <span className="text-body-small font-regular text-text-tertiary dark:text-gray-400 leading-[150%]">
            {t("supply.estReturnsYear")}
          </span>
          <span className="text-body-small font-bold text-[#10b981] dark:text-green-400 leading-[150%]">
            ~ $0.50
          </span>
        </div>
      </div>

      {/* Supply Button */}
      <Button color="default" variant="solid" className={`${buttonStyles({ intent: "theme" })} mt-auto`} endContent={<Image src="/arrow-right-icon.svg" alt="" width={20} height={20} />}>
        {t("supply.supply")}
      </Button>
    </div>
  );
}