assetx/webapp/components/fundmarket/ProductCard.tsx

"use client";

import Image from "next/image";
import { Button, Card, CardHeader, CardBody, CardFooter } from "@heroui/react";
import { buttonStyles } from "@/lib/buttonStyles";
import { useApp } from "@/contexts/AppContext";

const COLOR_KEYS = ["orange", "green", "blue", "purple", "red", "teal", "indigo", "rose", "amber", "cyan"] as const;
type ColorKey = typeof COLOR_KEYS[number];

const COLOR_MAP: Record<ColorKey, { bg: string; text: string; border: string; gradient: string }> = {
  orange:  { bg: "bg-orange-50",  text: "text-orange-600",  border: "border-orange-300",  gradient: "from-orange-500/5 via-orange-300/3 to-white/0" },
  green:   { bg: "bg-green-50",   text: "text-green-600",   border: "border-green-300",   gradient: "from-green-500/5 via-green-300/3 to-white/0" },
  blue:    { bg: "bg-blue-50",    text: "text-blue-600",    border: "border-blue-300",    gradient: "from-blue-500/5 via-blue-300/3 to-white/0" },
  purple:  { bg: "bg-purple-50",  text: "text-purple-600",  border: "border-purple-300",  gradient: "from-purple-500/5 via-purple-300/3 to-white/0" },
  red:     { bg: "bg-red-50",     text: "text-red-600",     border: "border-red-300",     gradient: "from-red-500/5 via-red-300/3 to-white/0" },
  teal:    { bg: "bg-teal-50",    text: "text-teal-600",    border: "border-teal-300",    gradient: "from-teal-500/5 via-teal-300/3 to-white/0" },
  indigo:  { bg: "bg-indigo-50",  text: "text-indigo-600",  border: "border-indigo-300",  gradient: "from-indigo-500/5 via-indigo-300/3 to-white/0" },
  rose:    { bg: "bg-rose-50",    text: "text-rose-600",    border: "border-rose-300",    gradient: "from-rose-500/5 via-rose-300/3 to-white/0" },
  amber:   { bg: "bg-amber-50",   text: "text-amber-600",   border: "border-amber-300",   gradient: "from-amber-500/5 via-amber-300/3 to-white/0" },
  cyan:    { bg: "bg-cyan-50",    text: "text-cyan-600",    border: "border-cyan-300",    gradient: "from-cyan-500/5 via-cyan-300/3 to-white/0" },
};

function resolveColor(categoryColor: string, productId: number) {
  if ((COLOR_KEYS as readonly string[]).includes(categoryColor)) {
    return COLOR_MAP[categoryColor as ColorKey];
  }
  return COLOR_MAP[COLOR_KEYS[productId % COLOR_KEYS.length]];
}

interface ProductCardProps {
  productId: number;
  name: string;
  category: string;
  categoryColor: string;
  iconUrl: string;
  yieldAPY: string;
  poolCap: string;
  maturity: string;
  risk: string;
  riskLevel: 1 | 2 | 3;
  lockUp: string;
  circulatingSupply: string;
  poolCapacityPercent: number;
  status?: 'active' | 'full' | 'ended';
  onInvest?: () => void;
}

export default function ProductCard({
  productId,
  name,
  category,
  categoryColor,
  iconUrl,
  yieldAPY,
  poolCap,
  maturity,
  risk,
  riskLevel,
  lockUp,
  circulatingSupply,
  poolCapacityPercent,
  status,
  onInvest,
}: ProductCardProps) {
  const getRiskBars = () => {
    const bars = [
      { height: "h-[5px]", active: riskLevel >= 1 },
      { height: "h-[7px]", active: riskLevel >= 2 },
      { height: "h-[11px]", active: riskLevel >= 3 },
    ];
    const activeColor =
      riskLevel === 1 ? "bg-green-500" : riskLevel === 2 ? "bg-amber-400" : "bg-red-500";
    return bars.map((bar, index) => (
      <div key={index} className={`${bar.height} w-[3px] rounded-sm ${bar.active ? activeColor : "bg-gray-400"}`} />
    ));
  };

  const colors = resolveColor(categoryColor, productId);
  const { t } = useApp();

  const statusCfg = status
    ? status === 'ended'
      ? { label: t("product.statusEnded"), dot: "bg-gray-400", bg: "bg-gray-100", border: "border-gray-300", text: "text-gray-500" }
      : status === 'full'
      ? { label: t("product.statusFull"), dot: "bg-orange-500", bg: "bg-orange-50", border: "border-orange-200", text: "text-orange-600" }
      : { label: t("product.statusActive"), dot: "bg-green-500", bg: "bg-green-50", border: "border-green-200", text: "text-green-600" }
    : null;

  return (
    <Card className={`bg-bg-subtle dark:bg-gray-800 border border-border-gray dark:border-gray-700 shadow-lg h-full relative overflow-hidden bg-gradient-to-br rounded-xl ${colors.gradient}`}>
      {/* Product Header */}
      <CardHeader className="pb-6 px-6 pt-6">
        <div className="flex gap-4 items-center w-full">
          {/* Icon Container */}
          <div className="bg-white/40 dark:bg-gray-700/40 rounded-2xl border border-white/80 dark:border-gray-600/80 w-16 h-16 flex items-center justify-center shadow-[0_0_0_4px_rgba(255,255,255,0.1)] flex-shrink-0">
            <div className="w-12 h-12 relative rounded-3xl border-[0.5px] border-gray-100 dark:border-gray-600 overflow-hidden flex items-center justify-center">
              <div className="bg-white dark:bg-gray-800 rounded-full w-12 h-12 absolute left-0 top-0" />
              <div className="relative z-10 flex items-center justify-center w-12 h-12">
                <Image
                  src={iconUrl || "/assets/tokens/default.svg"}
                  alt={name}
                  width={48}
                  height={48}
                  className="w-full h-full object-cover"
                />
              </div>
            </div>
          </div>

          {/* Title, Category, Status */}
          <div className="flex flex-col gap-0 flex-1 min-w-0">
            <div className="flex items-center justify-between gap-2">
              <h3 className="text-text-primary dark:text-white text-body-large font-bold font-inter truncate">
                {name}
              </h3>
              {statusCfg && (
                <div className={`inline-flex items-center gap-1 flex-shrink-0 rounded-full border px-2 py-0.5 ${statusCfg.bg} ${statusCfg.border}`}>
                  <span className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${statusCfg.dot}`} />
                  <span className={`text-[10px] font-semibold ${statusCfg.text}`}>{statusCfg.label}</span>
                </div>
              )}
            </div>
            {/* Category badge: white bg + colored border, always visible against gradient */}
            <div className={`bg-white/80 dark:bg-gray-700/80 rounded-full border ${colors.border} px-2 py-0.5 inline-flex self-start mt-0.5`}>
              <span className={`${colors.text} text-caption-tiny font-medium font-inter`}>
                {category}
              </span>
            </div>
          </div>
        </div>
      </CardHeader>

      <CardBody className="py-0 px-6">
        {/* Yield APY & Pool Cap */}
        <div className="border-b border-gray-50 dark:border-gray-700 pb-6 flex">
          <div className="flex-1 flex flex-col">
            <span className="text-gray-600 dark:text-gray-400 text-caption-tiny font-bold font-inter">
              {t("productPage.yieldAPY")}
            </span>
            <span className="text-text-primary dark:text-white text-heading-h3 font-extrabold font-inter">
              {yieldAPY}
            </span>
          </div>
          <div className="flex-1 flex flex-col items-end">
            <span className="text-gray-600 dark:text-gray-400 text-caption-tiny font-bold font-inter text-right">
              {t("productPage.poolCap")}
            </span>
            <span className="text-green-500 dark:text-green-400 text-heading-h3 font-extrabold font-inter text-right">
              {poolCap}
            </span>
          </div>
        </div>

        {/* Details Section */}
        <div className="pt-6 flex flex-col gap-4">
          {/* Maturity & Risk */}
          <div className="flex gap-4">
            <div className="flex-1 flex flex-col">
              <span className="text-text-tertiary dark:text-gray-400 text-[10px] font-medium leading-[150%] tracking-[0.01em] font-inter">
                {t("productPage.maturity")}
              </span>
              <span className="text-gray-600 dark:text-gray-300 text-body-small font-bold font-inter">
                {maturity || "--"}
              </span>
            </div>
            <div className="flex-1 flex flex-col items-end">
              <span className="text-text-tertiary dark:text-gray-400 text-[10px] font-medium leading-[150%] tracking-[0.01em] font-inter text-right">
                {t("productPage.risk")}
              </span>
              <div className="flex gap-1 items-center">
                <span className="text-gray-600 dark:text-gray-300 text-body-small font-bold font-inter">
                  {risk || "--"}
                </span>
                <div className="flex gap-0.5 items-end">{getRiskBars()}</div>
              </div>
            </div>
          </div>

          {/* Lock-Up & Circulating Supply */}
          <div className="flex gap-4">
            <div className="flex-1 flex flex-col">
              <span className="text-text-tertiary dark:text-gray-400 text-[10px] font-medium leading-[150%] tracking-[0.01em] font-inter">
                {t("productPage.lockUp")}
              </span>
              <span className="text-gray-600 dark:text-gray-300 text-body-small font-bold font-inter">
                {lockUp || "--"}
              </span>
            </div>
            <div className="flex-1 flex flex-col items-end">
              <span className="text-text-tertiary dark:text-gray-400 text-[10px] font-medium leading-[150%] tracking-[0.01em] font-inter text-right">
                {t("productPage.circulatingSupply")}
              </span>
              <span className="text-gray-600 dark:text-gray-300 text-body-small font-bold font-inter text-right">
                {circulatingSupply || "--"}
              </span>
            </div>
          </div>
        </div>
      </CardBody>

      {/* Pool Capacity & Invest Button */}
      <CardFooter className="pt-8 pb-6 px-6 flex-col gap-4">
        <div className="flex flex-col gap-2 w-full">
          <div className="flex justify-between">
            <span className="text-text-tertiary dark:text-gray-400 text-caption-tiny font-bold font-inter">
              {t("productPage.poolCapacity")}
            </span>
            <span className="text-text-primary dark:text-white text-body-small font-bold font-inter">
              {poolCapacityPercent.toFixed(4)}% {t("productPage.filled")}
            </span>
          </div>
          <div className="bg-gray-50 dark:bg-gray-700 rounded-full h-2 relative overflow-hidden">
            <div
              className="absolute left-0 top-0 bottom-0 rounded-full shadow-[0_0_15px_0_rgba(15,23,42,0.2)]"
              style={{
                background: "linear-gradient(90deg, rgba(30, 41, 59, 1) 0%, rgba(51, 65, 85, 1) 50%, rgba(15, 23, 42, 1) 100%)",
                width: `${poolCapacityPercent}%`,
              }}
            />
          </div>
        </div>
        <Button
          color="default"
          variant="solid"
          onPress={status === 'full' && lockUp !== 'Matured' ? undefined : onInvest}
          isDisabled={status === 'full' && lockUp !== 'Matured'}
          className={
            status === 'full' && lockUp !== 'Matured'
              ? `${buttonStyles({ intent: "theme" })} !bg-[#E5E7EB] !text-[#9CA1AF] cursor-not-allowed`
              : buttonStyles({ intent: "theme" })
          }
        >
          {status === 'full' && lockUp !== 'Matured' ? t("productPage.soldOut") : t("productPage.invest")}
        </Button>
      </CardFooter>
    </Card>
  );
}