"use client";

import { useState } from "react";
import Image from "next/image";
import { useApp } from "@/contexts/AppContext";
import { Tabs, Tab, Button } from "@heroui/react";
import ReviewModal from "@/components/common/ReviewModal";
import WithdrawModal from "@/components/common/WithdrawModal";
import { buttonStyles } from "@/lib/buttonStyles";
export default function MintSwapPanel() {
  const { t } = useApp();
  const [activeAction, setActiveAction] = useState<"deposit" | "withdraw">("deposit");
  const [amount, setAmount] = useState<string>("");
  const [isReviewModalOpen, setIsReviewModalOpen] = useState(false);
  const [isWithdrawModalOpen, setIsWithdrawModalOpen] = useState(false);

  return (
    <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 flex flex-col overflow-hidden">
      {/* Content */}
      <div className="flex flex-col gap-6 p-6">
        {/* Deposit/Withdraw Toggle */}
        <Tabs
          selectedKey={activeAction}
          onSelectionChange={(key) => setActiveAction(key as "deposit" | "withdraw")}
          variant="solid"
          classNames={{
            base: "w-full",
            tabList: "bg-[#f9fafb] dark:bg-gray-700 rounded-xl p-1 gap-0 w-full",
            cursor: "bg-bg-surface dark:bg-gray-600 shadow-sm",
            tab: "h-8 px-4",
            tabContent: "text-body-small font-medium text-text-tertiary dark:text-gray-400 group-data-[selected=true]:font-bold group-data-[selected=true]:text-text-primary dark:group-data-[selected=true]:text-white",
          }}
        >
          <Tab key="deposit" title={t("mintSwap.deposit")} />
          <Tab key="withdraw" title={t("mintSwap.withdraw")} />
        </Tabs>

        {/* Input Area */}
        <div className="flex flex-col gap-2">
          <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-3">
            {/* Label and Balance */}
            <div className="flex items-center justify-between">
              <span className="text-caption-tiny font-medium text-[#4b5563] dark:text-gray-400">
                {t("mintSwap.deposit")}
              </span>
              <div className="flex items-center gap-1">
                <Image src="/icon0.svg" alt="" width={12} height={12} />
                <span className="text-caption-tiny font-medium text-[#4b5563] dark:text-gray-400">
                  {t("mintSwap.balance")}: $12,500.00
                </span>
              </div>
            </div>

            {/* Input Row */}
            <div className="flex items-center justify-between gap-2">
              <div className="flex flex-col items-start flex-1">
                <input
                  type="number"
                  placeholder="0.00"
                  value={amount}
                  onChange={(e) => setAmount(e.target.value)}
                  className="w-full text-left text-heading-h3 font-bold text-text-primary dark:text-white placeholder:text-[#d1d5db] dark:placeholder:text-gray-500 bg-transparent border-none outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                />
                <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400">
                  {amount ? `≈ $${amount}` : "--"}
                </span>
              </div>
              <div className="flex items-center gap-2">
                <Button
                  size="sm"
                  className={buttonStyles({ intent: "max" })}
                  onPress={() => setAmount("12500")}
                >
                  {t("mintSwap.max")}
                </Button>
                <button className="bg-bg-surface dark:bg-gray-600 rounded-full border border-border-normal dark:border-gray-500 px-2 h-[46px] flex items-center gap-2">
                  <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">USDC</span>
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* Estimated Returns */}
        <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-2">
          <div className="flex items-center justify-between h-5">
            <span className="text-body-small font-bold text-[#4b5563] dark:text-gray-300">
              {t("mintSwap.estimatedReturns")}
            </span>
          </div>
          <div className="flex items-center justify-between h-5">
            <span className="text-body-small font-regular text-text-tertiary dark:text-gray-400">
              {t("mintSwap.estAPY")}
            </span>
            <span className="text-body-small font-bold text-[#ff6900] dark:text-orange-400">
              22%
            </span>
          </div>
          <div className="flex items-center justify-between h-5">
            <span className="text-body-small font-regular text-text-tertiary dark:text-gray-400">
              {t("mintSwap.estReturns")}
            </span>
            <span className="text-body-small font-bold text-[#10b981] dark:text-green-400">
              ~ $0.50
            </span>
          </div>
        </div>

        {/* Transaction Summary */}
        <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-2">
          <div className="flex items-center justify-between h-5">
            <span className="text-body-small font-bold text-[#4b5563] dark:text-gray-300">
              {t("mintSwap.transactionSummary")}
            </span>
          </div>
          <div className="flex items-center justify-between h-5">
            <span className="text-body-small font-regular text-text-tertiary dark:text-gray-400">
              {t("mintSwap.youGet")}
            </span>
            <span className="text-body-small font-bold text-[#10b981] dark:text-green-400">
              9852.21 GYUS
            </span>
          </div>
          <div className="flex items-center justify-between h-5">
            <span className="text-body-small font-regular text-text-tertiary dark:text-gray-400">
              {t("mintSwap.salesPrice")}
            </span>
            <span className="text-body-small font-bold text-text-primary dark:text-white">$1.04 USDC</span>
          </div>
          <div className="flex items-center justify-between h-5">
            <span className="text-body-small font-regular text-text-tertiary dark:text-gray-400">
              {t("mintSwap.fee")}
            </span>
            <span className="text-body-small font-bold text-[#dc2626] dark:text-red-400">
              -$50 (0.5%)
            </span>
          </div>
          <div className="flex items-center justify-between h-5">
            <span className="text-body-small font-regular text-text-tertiary dark:text-gray-400">
              {t("mintSwap.gas")}
            </span>
            <span className="text-body-small font-bold text-[#dc2626] dark:text-red-400">
              -$0.09
            </span>
          </div>
        </div>

        {/* Submit Button */}
        <Button
          isDisabled={!amount || parseFloat(amount) <= 0}
          color="default"
          variant="solid"
          className={buttonStyles({ intent: "theme" })}
          endContent={<Image src="/icon11.svg" alt="" width={20} height={20} />}
          onPress={() => {
            if (amount && parseFloat(amount) > 0) {
              if (activeAction === "deposit") {
                setIsReviewModalOpen(true);
              } else {
                setIsWithdrawModalOpen(true);
              }
            }
          }}
        >
          {activeAction === "deposit"
            ? t("mintSwap.approveDeposit")
            : "Approve and Withdraw"}
        </Button>

        {/* Review Modal for Deposit */}
        <ReviewModal
          isOpen={isReviewModalOpen}
          onClose={() => setIsReviewModalOpen(false)}
          amount={amount}
        />

        {/* Withdraw Modal */}
        <WithdrawModal
          isOpen={isWithdrawModalOpen}
          onClose={() => setIsWithdrawModalOpen(false)}
          amount={amount}
        />

        {/* Terms */}
        <div className="flex flex-col gap-0 text-center">
          <div className="text-caption-tiny font-regular">
            <span className="text-[#9ca1af] dark:text-gray-400">
              {t("mintSwap.termsText")}{" "}
            </span>
            <span className="text-[#10b981] dark:text-green-400">
              {t("mintSwap.termsOfService")}
            </span>
            <span className="text-[#9ca1af] dark:text-gray-400">
              {" "}{t("mintSwap.and")}
            </span>
          </div>
          <span className="text-caption-tiny font-regular text-[#10b981] dark:text-green-400">
            {t("mintSwap.privacyPolicy")}
          </span>
        </div>
      </div>
    </div>
  );
}