"use client";

import { useState } from "react";
import Image from "next/image";
import { useApp } from "@/contexts/AppContext";

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

  return (
    <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 flex flex-col">
      {/* Mint/Swap Tabs */}
      <div className="flex border-b border-border-gray dark:border-gray-700">
        <button
          onClick={() => setActiveMode("mint")}
          className={`flex-1 h-[53px] flex items-center justify-center text-body-small font-bold rounded-tl-3xl transition-colors ${
            activeMode === "mint"
              ? "bg-bg-subtle dark:bg-gray-700 border-b-2 border-text-primary dark:border-blue-500 text-[#0f172b] dark:text-white"
              : "text-text-tertiary dark:text-gray-400"
          }`}
        >
          {t("mintSwap.mint")}
        </button>
        <button
          onClick={() => setActiveMode("swap")}
          className={`flex-1 h-[53px] flex items-center justify-center text-body-small font-bold transition-colors ${
            activeMode === "swap"
              ? "bg-bg-subtle dark:bg-gray-700 border-b-2 border-text-primary dark:border-blue-500 text-[#0f172b] dark:text-white"
              : "text-text-tertiary dark:text-gray-400"
          }`}
        >
          {t("mintSwap.swap")}
        </button>
      </div>

      {/* Content */}
      <div className="flex flex-col gap-6 p-6">
        {/* Deposit/Withdraw Toggle */}
        <div className="bg-[#f9fafb] dark:bg-gray-700 rounded-xl p-1 flex gap-0">
          <button
            onClick={() => setActiveAction("deposit")}
            className={`flex-1 h-8 px-4 rounded-lg text-body-small transition-all ${
              activeAction === "deposit"
                ? "bg-bg-surface dark:bg-gray-600 font-bold text-text-primary dark:text-white shadow-sm"
                : "font-medium text-text-tertiary dark:text-gray-400"
            }`}
          >
            {t("mintSwap.deposit")}
          </button>
          <button
            onClick={() => setActiveAction("withdraw")}
            className={`flex-1 h-8 px-4 rounded-lg text-body-small transition-all ${
              activeAction === "withdraw"
                ? "bg-bg-surface dark:bg-gray-600 font-bold text-text-primary dark:text-white shadow-sm"
                : "font-medium text-text-tertiary dark:text-gray-400"
            }`}
          >
            {t("mintSwap.withdraw")}
          </button>
        </div>

        {/* 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 className="rounded-full px-3 h-[22px] text-[10px] font-medium bg-[#e5e7eb] dark:bg-gray-600 text-[#111827] dark:text-white">
                  {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">
                <span className="text-heading-h3 font-bold text-[#d1d5db] dark:text-gray-500">
                  0.00
                </span>
                <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400">--</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
          className="rounded-xl h-12 flex items-center justify-center gap-2 bg-[#9ca1af] dark:bg-gray-600"
          disabled
        >
          <span className="text-lg font-bold text-white leading-7">
            {t("mintSwap.approveDeposit")}
          </span>
          <Image src="/icon8.svg" alt="" width={20} height={20} />
        </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>
  );
}