"use client";

import { useState } from "react";
import Image from "next/image";
import { Button } from "@heroui/react";
import { useApp } from "@/contexts/AppContext";
import ConfirmModal from "@/components/common/ConfirmModal";
import { buttonVariants, disabledButtonClasses } from "@/lib/buttonStyles";
import { cn } from "@/lib/cn";
interface TradePanelProps {
  showHeader?: boolean;
  title?: string;
  subtitle?: string;
}

export default function TradePanel({
  showHeader = false,
  title = "",
  subtitle = "",
}: TradePanelProps) {
  const { t } = useApp();
  const [sellAmount, setSellAmount] = useState<string>("");
  const [buyAmount, setBuyAmount] = useState<string>("");
  const [isConfirmModalOpen, setIsConfirmModalOpen] = useState(false);

  return (
    <div className={`flex flex-col gap-6 ${showHeader ? "w-full max-w-[600px]" : "w-full"}`}>
      {/* Header Section - Optional */}
      {showHeader && (
        <div className="flex flex-col gap-2">
          <h1 className="text-heading-h2 font-bold text-text-primary dark:text-white text-center">
            {title}
          </h1>
          <p className="text-body-default font-medium text-text-secondary dark:text-gray-400 text-center">
            {subtitle}
          </p>
        </div>
      )}

      {/* Trade Panel */}
      <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-6">
        <div className="flex flex-col gap-4">
          {/* SELL and BUY Container with Exchange Icon */}
          <div className="flex flex-col gap-2 relative">
            {/* SELL Section */}
            <div className="bg-bg-subtle dark:bg-gray-700 rounded-2xl p-4 flex flex-col gap-4">
              {/* Label and Buttons */}
              <div className="flex items-center justify-between">
                <span className="text-body-small font-bold text-text-primary dark:text-white">
                  {t("alp.sell")}
                </span>
                <div className="flex items-center gap-2">
                  <Button size="sm" color="default" className="rounded-full px-3 h-[24px] min-w-0 text-[12px] font-bold">
                    25%
                  </Button>
                  <Button size="sm" color="default" className="rounded-full px-3 h-[24px] min-w-0 text-[12px] font-bold">
                    50%
                  </Button>
                  <Button size="sm" color="default" className="rounded-full px-3 h-[24px] min-w-0 text-[12px] font-bold">
                    75%
                  </Button>
                  <Button size="sm" color="default" className={cn(buttonVariants.max)}>
                    {t("mintSwap.max")}
                  </Button>
                </div>
              </div>

              {/* Input Row */}
              <div className="flex items-center justify-between gap-2 h-[70px]">
                <div className="flex flex-col items-start justify-between flex-1 h-full">
                  <input
                    type="number"
                    placeholder="1,000"
                    value={sellAmount}
                    onChange={(e) => setSellAmount(e.target.value)}
                    className="w-full text-left text-[32px] font-bold leading-[130%] tracking-[-0.01em] 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-body-small font-medium text-text-tertiary dark:text-gray-400">
                    $10,000.00 USD
                  </span>
                </div>
                <div className="flex flex-col items-end justify-between gap-1 h-full">
                  <button className="bg-bg-surface dark:bg-gray-600 rounded-full border border-border-normal dark:border-gray-500 px-3 h-[40px] flex items-center gap-2">
                    <Image
                      src="/usd-coin-usdc-logo-10.svg"
                      alt="USDC"
                      width={24}
                      height={24}
                    />
                    <span className="text-body-small font-bold text-text-primary dark:text-white">USDC</span>
                    <Image src="/icon8.svg" alt="" width={12} height={12} />
                  </button>
                  <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400">
                    45,230.00 USDC
                  </span>
                </div>
              </div>
            </div>

            {/* Exchange Icon */}
            <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10">
              <div className="bg-bg-surface dark:bg-gray-700 rounded-full w-10 h-10 flex items-center justify-center border border-border-gray dark:border-gray-600 shadow-sm">
                <Image
                  src="/icon4.svg"
                  alt="Exchange"
                  width={18}
                  height={18}
                />
              </div>
            </div>

            {/* BUY Section */}
            <div className="bg-bg-subtle dark:bg-gray-700 rounded-2xl p-4 flex flex-col gap-4">
              {/* Label */}
              <div className="flex items-center justify-between">
                <span className="text-body-small font-bold text-text-primary dark:text-white">
                  {t("alp.buy")}
                </span>
              </div>

              {/* Input Row */}
              <div className="flex items-center justify-between gap-2 h-[70px]">
                <div className="flex flex-col items-start justify-between flex-1 h-full">
                  <input
                    type="number"
                    placeholder="1,000"
                    value={buyAmount}
                    onChange={(e) => setBuyAmount(e.target.value)}
                    className="w-full text-left text-[32px] font-bold leading-[130%] tracking-[-0.01em] 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-body-small font-medium text-text-tertiary dark:text-gray-400">
                    $10,000.00 USD
                  </span>
                </div>
                <div className="flex flex-col items-end justify-between gap-1 h-full">
                  <button className="bg-bg-surface dark:bg-gray-600 rounded-full border border-border-normal dark:border-gray-500 px-3 h-[40px] flex items-center gap-2">
                    <Image
                      src="/component-70.svg"
                      alt="YTGY"
                      width={24}
                      height={24}
                    />
                    <span className="text-body-small font-bold text-text-primary dark:text-white">YTGY</span>
                    <Image src="/icon8.svg" alt="" width={12} height={12} />
                  </button>
                  <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400">
                    45,230.00 USDC
                  </span>
                </div>
              </div>
            </div>
          </div>

          {/* Submit Button */}
          <Button
            isDisabled={!sellAmount && !buyAmount}
            color="default"
            className="rounded-xl h-12 px-6 text-body-small font-bold"
            onPress={() => setIsConfirmModalOpen(true)}
          >
            {t("alp.buyUsdc")}
          </Button>

          {/* Rate Info */}
          <div className="flex items-center justify-between px-4 py-3 bg-bg-subtle dark:bg-gray-700 rounded-xl border border-border-gray dark:border-gray-600">
            <div className="flex items-center gap-2">
              <span className="text-body-small font-regular text-black dark:text-white">
                1 USDC = 0.99 YTGY
              </span>
              <span className="text-body-small font-regular text-text-tertiary dark:text-gray-400">
                ($1.00)
              </span>
            </div>
            <div className="flex items-center gap-2">
              <Image src="/icon7.svg" alt="" width={16} height={16} />
              <span className="text-body-small font-bold text-[#dc2626] dark:text-red-400">
                -$5.30
              </span>
              <Image src="/icon8.svg" alt="" width={12} height={12} />
            </div>
          </div>
        </div>
      </div>

      {/* Confirm Modal */}
      <ConfirmModal
        isOpen={isConfirmModalOpen}
        onClose={() => setIsConfirmModalOpen(false)}
      />
    </div>
  );
}