"use client";

import { useApp } from "@/contexts/AppContext";

export default function LiquidityAllocationTable() {
  const { t } = useApp();

  const allocations = [
    {
      icon: "GY",
      iconBg: "linear-gradient(135deg, #FF8904 0%, #F54900 100%)",
      name: "YT-GY",
      category: t("alp.quantStrategy"),
      poolSize: "$25,000",
      poolAmount: "24,1938 YTGY",
      currentWeight: "47%",
      targetWeight: "33%",
      currentPrice: "$1.03",
    },
    {
      icon: "LOGO",
      iconBg: "linear-gradient(135deg, #00BBA7 0%, #007A55 100%)",
      name: "YT-GY",
      category: t("alp.quantStrategy"),
      poolSize: "$25,000",
      poolAmount: "24,1938 YTGY",
      currentWeight: "47%",
      targetWeight: "33%",
      currentPrice: "$1.03",
    },
    {
      icon: "LOGO",
      iconBg: "linear-gradient(135deg, #1447E6 0%, #032BBD 100%)",
      name: "YT-GY",
      category: t("alp.quantStrategy"),
      poolSize: "$25,000",
      poolAmount: "24,1938 YTGY",
      currentWeight: "47%",
      targetWeight: "33%",
      currentPrice: "$1.03",
    },
  ];

  return (
    <div className="flex flex-col gap-3">
      {/* Title */}
      <h2 className="text-heading-h3 font-bold text-text-primary dark:text-white">
        {t("alp.liquidityAllocation")}
      </h2>

      {/* Table */}
      <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 overflow-hidden">
        <div className="flex flex-col">
          {/* Header */}
          <div className="flex border-b border-border-gray dark:border-gray-700 flex-shrink-0">
            <div className="flex-1 px-6 py-4">
              <div className="text-caption-tiny font-medium text-[#4b5563] dark:text-gray-400">
                {t("alp.token")}
              </div>
            </div>
            <div className="flex-1 px-6 py-4">
              <div className="text-caption-tiny font-medium text-[#4b5563] dark:text-gray-400">
                {t("alp.poolSize")}
              </div>
            </div>
            <div className="flex-1 px-6 py-4">
              <div className="text-caption-tiny font-medium text-[#4b5563] dark:text-gray-400">
                {t("alp.currentTargetWeight")}
              </div>
            </div>
            <div className="flex-1 px-6 py-4">
              <div className="text-caption-tiny font-medium text-[#4b5563] dark:text-gray-400">
                {t("alp.currentPrice")}
              </div>
            </div>
          </div>

          {/* Body */}
          {allocations.map((item, index) => (
            <div
              key={index}
              className="flex items-center border-b border-border-gray dark:border-gray-700"
            >
              {/* Token Column */}
              <div className="flex-1 px-6 py-4 flex items-center gap-3">
                <div
                  className="w-8 h-8 rounded-full flex items-center justify-center text-white text-[13.57px] font-bold"
                  style={{ background: item.iconBg }}
                >
                  {item.icon}
                </div>
                <div className="flex flex-col">
                  <span className="text-body-small font-bold text-text-primary dark:text-white">
                    {item.name}
                  </span>
                  <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400">
                    {item.category}
                  </span>
                </div>
              </div>

              {/* Pool Size Column */}
              <div className="flex-1 px-6 py-4">
                <div className="flex flex-col">
                  <span className="text-body-small font-bold text-text-primary dark:text-white">
                    {item.poolSize}
                  </span>
                  <span className="text-caption-tiny font-regular text-[#6b7280] dark:text-gray-400">
                    {item.poolAmount}
                  </span>
                </div>
              </div>

              {/* Weight Column */}
              <div className="flex-1 px-6 py-4">
                <span className="text-body-small font-bold">
                  <span className="text-text-primary dark:text-white">{item.currentWeight}</span>
                  <span className="text-text-tertiary dark:text-gray-400"> / </span>
                  <span className="text-text-primary dark:text-white">{item.targetWeight}</span>
                </span>
              </div>

              {/* Price Column */}
              <div className="flex-1 px-6 py-4">
                <span className="text-body-small font-bold text-text-primary dark:text-white">
                  {item.currentPrice}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}