assetx/components/MintSwapPanel.tsx

"use client";

import { useState } from "react";
import Image from "next/image";
import { useApp } from "@/contexts/AppContext";
import { Tabs, Tab, Button } from "@heroui/react";

export default function MintSwapPanel() {
  const { t } = useApp();
  const [activeMode, setActiveMode] = useState<"mint" | "swap">("mint");
  const [activeAction, setActiveAction] = useState<"deposit" | "withdraw">("deposit");
  const [amount, setAmount] = useState<string>("");

  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">
      {/* Mint/Swap Tabs */}
      <Tabs
        selectedKey={activeMode}
        onSelectionChange={(key) => setActiveMode(key as "mint" | "swap")}
        variant="underlined"
        classNames={{
          base: "w-full",
          tabList: "w-full gap-0 p-0 rounded-none border-b border-border-gray dark:border-gray-700",
          cursor: "bg-text-primary dark:bg-blue-500 h-[2px]",
          tab: "h-[53px] flex-1 rounded-none data-[selected=true]:bg-bg-subtle dark:data-[selected=true]:bg-gray-700",
          tabContent: "text-body-small font-bold text-text-tertiary dark:text-gray-400 group-data-[selected=true]:text-[#0f172b] dark:group-data-[selected=true]:text-white",
        }}
      >
        <Tab key="mint" title={t("mintSwap.mint")} />
        <Tab key="swap" title={t("mintSwap.swap")} />
      </Tabs>

      {/* 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="/icon7.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>
                <Button
                  size="sm"
                  className="rounded-full px-3 h-[22px] min-w-0 text-[10px] font-medium bg-[#e5e7eb] dark:bg-gray-600 text-[#111827] dark:text-white"
                  onPress={() => setAmount("12500")}
                >
                  {t("mintSwap.max")}
                </Button>
              </div>
            </div>

            {/* Input Row */}
            <div className="flex items-center justify-between">
              <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 className="flex flex-col items-end flex-1">
                <input
                  type="number"
                  placeholder="0.00"
                  value={amount}
                  onChange={(e) => setAmount(e.target.value)}
                  className="w-full text-right 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>
          </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
          className="rounded-xl h-12 bg-[#9ca1af] dark:bg-gray-600 text-lg font-bold text-white"
          endContent={<Image src="/icon8.svg" alt="" width={20} height={20} />}
        >
          {t("mintSwap.approveDeposit")}
        </Button>

        {/* 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>
  );
}