"use client";

import { useState } from "react";
import Sidebar from "@/components/layout/Sidebar";
import TopBar from "@/components/layout/TopBar";
import SupplyContent from "@/components/lending/supply/SupplyContent";
import SupplyPanel from "@/components/lending/supply/SupplyPanel";
import WithdrawPanel from "@/components/lending/supply/WithdrawPanel";
import { useRouter } from "next/navigation";
import { useApp } from "@/contexts/AppContext";

export default function SupplyPage() {
  const { t } = useApp();
  const router = useRouter();
  const [activeTab, setActiveTab] = useState<"supply" | "withdraw">("supply");

  const handleBackToLending = () => {
    router.push("/lending");
  };

  const breadcrumbItems = [
    { label: "ASSETX", href: "/" },
    { label: t("nav.lending"), href: "/lending" },
    { label: t("supply.supply") },
  ];

  return (
    <div className="min-h-screen bg-white dark:bg-gray-900 flex">
      <Sidebar />
      <div className="flex-1 flex flex-col ml-[222px]">
        <div className="bg-[#F3F4F6] dark:bg-gray-800 border-b border-border-normal dark:border-gray-700 px-8 py-3">
          <TopBar breadcrumbItems={breadcrumbItems} />
        </div>

        <div className="flex-1 px-8 py-8 bg-[#F3F4F6] dark:bg-gray-900 flex flex-col gap-8">
          {/* Back to lending link */}
          <button
            onClick={handleBackToLending}
            className="flex items-center gap-2 self-start group"
          >
            <svg
              width="20"
              height="20"
              viewBox="0 0 16 16"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              className="group-hover:translate-x-[-2px] transition-transform"
            >
              <path
                d="M10 12L6 8L10 4"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="text-text-tertiary dark:text-gray-400"
              />
            </svg>
            <span className="text-body-large font-semibold text-text-tertiary dark:text-gray-400 group-hover:text-text-primary dark:group-hover:text-white transition-colors">
              {t("repay.backToLending")}
            </span>
          </button>

          <div className="flex gap-8 w-full flex-1 items-stretch">
            <div className="flex-[2]">
              <SupplyContent />
            </div>
            <div className="flex-[1] flex flex-col bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 min-w-[360px] max-w-[460px]">
            {/* Supply/Withdraw Buttons */}
            <div className="flex gap-0 px-4 pt-4 relative">
              {/* Supply Button */}
              <button
                onClick={() => setActiveTab("supply")}
                className={`flex items-center justify-center gap-2 py-4 flex-1 transition-all duration-300 ease-in-out relative z-10 ${
                  activeTab === "supply"
                    ? ""
                    : "hover:bg-bg-subtle/50 dark:hover:bg-gray-700/30"
                }`}
              >
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M9 3.75V14.25" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className={activeTab === "supply" ? "text-text-primary dark:text-white" : "text-text-tertiary dark:text-gray-400"}/>
                  <path d="M14.25 9L9 14.25L3.75 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className={activeTab === "supply" ? "text-text-primary dark:text-white" : "text-text-tertiary dark:text-gray-400"}/>
                </svg>
                <span className={`text-body-small font-bold leading-[20px] tracking-[-0.15px] transition-colors duration-300 ${
                  activeTab === "supply" ? "text-text-primary dark:text-white" : "text-text-tertiary dark:text-gray-400"
                }`}>
                  {t("supply.supply")}
                </span>
              </button>

              {/* Withdraw Button */}
              <button
                onClick={() => setActiveTab("withdraw")}
                className={`flex items-center justify-center gap-2 py-4 flex-1 transition-all duration-300 ease-in-out relative z-10 ${
                  activeTab === "withdraw"
                    ? ""
                    : "hover:bg-bg-subtle/50 dark:hover:bg-gray-700/30"
                }`}
              >
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M9 14.25V3.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className={activeTab === "withdraw" ? "text-text-primary dark:text-white" : "text-text-tertiary dark:text-gray-400"}/>
                  <path d="M3.75 9L9 3.75L14.25 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className={activeTab === "withdraw" ? "text-text-primary dark:text-white" : "text-text-tertiary dark:text-gray-400"}/>
                </svg>
                <span className={`text-body-small font-bold leading-[20px] tracking-[-0.15px] transition-colors duration-300 ${
                  activeTab === "withdraw" ? "text-text-primary dark:text-white" : "text-text-tertiary dark:text-gray-400"
                }`}>
                  {t("supply.withdraw")}
                </span>
              </button>

              {/* Sliding indicator line */}
              <div
                className={`absolute bottom-0 h-[3px] bg-text-primary dark:bg-white transition-all duration-300 ease-in-out ${
                  activeTab === "supply" ? "left-0 w-1/2" : "left-1/2 w-1/2"
                }`}
              />
            </div>

            {/* Divider Line */}
            <div className="h-px bg-border-gray dark:bg-gray-700 mx-4" />

            {/* Panel Content */}
            <div className="flex-1">
              {activeTab === "supply" ? <SupplyPanel /> : <WithdrawPanel />}
            </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}