"use client";

import { Button } from "@heroui/react";
import { useRouter } from "next/navigation";
import { useApp } from "@/contexts/AppContext";
import BorderedButton from "@/components/common/BorderedButton";

interface BorrowMarketItem {
  icon: string;
  iconBg: string;
  name: string;
  nameEn?: string;
  category: string;
  badge?: string;
  yourBalance: string;
  yourInterest: string;
  borrowed: string;
  ltv: string;
  ltvColor: string;
  ltvProgress: number;
}

export default function BorrowMarket() {
  const { t } = useApp();
  const router = useRouter();

  const items: BorrowMarketItem[] = [
    {
      icon: "GY",
      iconBg: "linear-gradient(135deg, #FF8904 0%, #F54900 100%)",
      name: "高盈美股量化策略",
      category: "Quant Strategy • RWA-042",
      yourBalance: "$25,000",
      yourInterest: "+$1,250",
      borrowed: "$12,500",
      ltv: "50%",
      ltvColor: "text-[#ff6900]",
      ltvProgress: 50,
    },
    {
      icon: "LOGO",
      iconBg: "linear-gradient(135deg, #00BBA7 0%, #007A55 100%)",
      name: "HK Commercial RE",
      nameEn: "PI Only",
      category: "Real Estate • RWA-109",
      yourBalance: "$25,000",
      yourInterest: "+$1,250",
      borrowed: "$12,500",
      ltv: "40%",
      ltvColor: "text-[#ff6900]",
      ltvProgress: 40,
    },
    {
      icon: "LOGO",
      iconBg: "linear-gradient(135deg, #00BBA7 0%, #007A55 100%)",
      name: "HK Commercial RE",
      category: "Real Estate • RWA-109",
      yourBalance: "$25,000",
      yourInterest: "+$1,250",
      borrowed: "$12,500",
      ltv: "0%",
      ltvColor: "text-text-tertiary",
      ltvProgress: 0,
    },
  ];

  return (
    <div className="flex flex-col gap-3">
      {/* Title */}
      <h2 className="text-heading-h3 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.005em]">
        {t("lending.borrowMarket")}
      </h2>

      {/* Cards Grid */}
      <div className="flex flex-col gap-3">
        {items.map((item, index) => (
          <div
            key={index}
            className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-6 flex items-center gap-8"
          >
            {/* Left Section - Token Info */}
            <div className="flex items-center gap-4 w-[280px]">
              {/* Token Icon */}
              <div
                className="w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-bold shadow-md"
                style={{ background: item.iconBg }}
              >
                {item.icon}
              </div>

              {/* Token Name */}
              <div className="flex flex-col h-10">
                <div className="flex items-center gap-2">
                  <span className="text-body-default font-bold text-text-primary dark:text-white leading-[150%]">
                    {item.name}
                  </span>
                  {item.nameEn && (
                    <span className="bg-bg-subtle dark:bg-gray-700 rounded px-1.5 py-0.5 text-[10px] font-medium text-text-tertiary dark:text-gray-400">
                      {item.nameEn}
                    </span>
                  )}
                </div>
                <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
                  {item.category}
                </span>
              </div>
            </div>

            {/* Middle Section - Stats */}
            <div className="flex items-center justify-between flex-1">
              {/* Your Balance */}
              <div className="flex flex-col w-[112.9px]">
                <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
                  {t("lending.yourBalance")}
                </span>
                <span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
                  {item.yourBalance}
                </span>
              </div>

              {/* Your Interest */}
              <div className="flex flex-col w-[112.9px]">
                <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
                  {t("lending.yourInterest")}
                </span>
                <span className="text-body-small font-bold text-[#10b981] dark:text-green-400 leading-[150%]">
                  {item.yourInterest}
                </span>
              </div>

              {/* Borrowed */}
              <div className="flex flex-col w-[112.9px]">
                <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
                  {t("lending.borrowed")}
                </span>
                <span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
                  {item.borrowed}
                </span>
              </div>

              {/* LTV */}
              <div className="flex flex-col gap-2 w-[112.9px]">
                <div className="flex items-center justify-between">
                  <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
                    {t("lending.ltv")}
                  </span>
                  <span className={`text-caption-tiny font-bold leading-[150%] tracking-[0.01em] ${item.ltvColor} dark:text-orange-400`}>
                    {item.ltv}
                  </span>
                </div>
                {/* Progress Bar */}
                {item.ltvProgress > 0 && (
                  <div className="w-full h-2 bg-fill-secondary-click dark:bg-gray-700 rounded-full overflow-hidden">
                    <div
                      className="h-full bg-[#ff6900] dark:bg-orange-500 rounded-full"
                      style={{ width: `${item.ltvProgress}%` }}
                    />
                  </div>
                )}
              </div>
            </div>

            {/* Right Section - Buttons */}
            <div className="flex items-center gap-3">
              <Button
                className="rounded-xl h-10 px-6 text-body-small font-bold bg-foreground text-background"
                isDisabled={index === 2}
                onPress={() => router.push("/repay")}
              >
                {t("lending.repay")}
              </Button>

              <BorderedButton
                size="md"
                isTheme
                className="whitespace-nowrap"
              >
                {t("lending.borrow")}
              </BorderedButton>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}