"use client";

import Image from "next/image";
import { useApp } from "@/contexts/AppContext";

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

  const holdings = [
    {
      custodian: t("transparency.morganStanley"),
      custodianType: t("transparency.primeBroker"),
      assetType: t("transparency.usEquityPortfolio"),
      maturityDate: "05 Feb 2026",
      daysRemaining: `77 ${t("transparency.days")}`,
      value: "$12,500,000.00",
      status: t("transparency.verified"),
    },
    {
      custodian: t("transparency.morganStanley"),
      custodianType: t("transparency.primeBroker"),
      assetType: t("transparency.usEquityPortfolio"),
      maturityDate: "05 Feb 2026",
      daysRemaining: `77 ${t("transparency.days")}`,
      value: "$12,500,000.00",
      status: t("transparency.verified"),
    },
    {
      custodian: t("transparency.morganStanley"),
      custodianType: t("transparency.primeBroker"),
      assetType: t("transparency.usEquityPortfolio"),
      maturityDate: "05 Feb 2026",
      daysRemaining: `77 ${t("transparency.days")}`,
      value: "$12,500,000.00",
      status: t("transparency.verified"),
    },
    {
      custodian: t("transparency.morganStanley"),
      custodianType: t("transparency.primeBroker"),
      assetType: t("transparency.usEquityPortfolio"),
      maturityDate: "05 Feb 2026",
      daysRemaining: `77 ${t("transparency.days")}`,
      value: "$12,500,000.00",
      status: t("transparency.verified"),
    },
  ];

  return (
    <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 overflow-hidden">
      {/* Header */}
      <div className="bg-bg-surface dark:bg-gray-800 border-b border-border-gray dark:border-gray-700 px-6 py-6 flex items-center justify-between">
        <div className="flex flex-col gap-1">
          <h2 className="text-[20px] font-bold text-text-primary dark:text-white leading-[140%]">
            {t("transparency.rwaHoldings")}
          </h2>
          <p className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
            {t("transparency.rwaSubtitle")}
          </p>
        </div>

        <div className="flex items-center gap-2 rounded-full">
          <Image src="/component-10.svg" alt="" width={16} height={16} />
          <span className="text-caption-tiny font-regular text-text-secondary dark:text-gray-300 leading-[150%] tracking-[0.01em]">
            {t("transparency.lastUpdated")}: 2 {t("transparency.minutesAgo")}
          </span>
        </div>
      </div>

      {/* Table */}
      <div className="overflow-auto">
        {/* Table Header */}
        <div className="flex bg-bg-subtle dark:bg-gray-700 border-b border-border-gray dark:border-gray-600">
          <div className="flex-1 px-6 py-4">
            <span className="text-caption-tiny font-medium text-text-secondary dark:text-gray-300 leading-[150%] tracking-[0.01em]">
              {t("transparency.custodian")}
            </span>
          </div>
          <div className="flex-1 px-6 py-4">
            <span className="text-caption-tiny font-medium text-text-secondary dark:text-gray-300 leading-[150%] tracking-[0.01em]">
              {t("transparency.assetType")}
            </span>
          </div>
          <div className="flex-1 px-6 py-4">
            <span className="text-caption-tiny font-medium text-text-secondary dark:text-gray-300 leading-[150%] tracking-[0.01em]">
              {t("transparency.maturity")}
            </span>
          </div>
          <div className="flex-1 px-6 py-4">
            <span className="text-caption-tiny font-medium text-text-secondary dark:text-gray-300 leading-[150%] tracking-[0.01em]">
              {t("transparency.valueUsd")}
            </span>
          </div>
          <div className="flex-1 px-6 py-4">
            <span className="text-caption-tiny font-medium text-text-secondary dark:text-gray-300 leading-[150%] tracking-[0.01em]">
              {t("transparency.status")}
            </span>
          </div>
        </div>

        {/* Table Body */}
        {holdings.map((holding, index) => (
          <div
            key={index}
            className={`flex items-center ${
              index !== holdings.length - 1
                ? "border-b border-border-gray dark:border-gray-600"
                : ""
            }`}
          >
            {/* Custodian */}
            <div className="flex-1 px-6 py-6 flex items-center gap-3">
              <div className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 bg-gradient-to-br from-[#ff8904] to-[#f54900] shadow-[0px_2.01px_3.02px_-2.01px_rgba(255,105,0,0.2)]">
                <span className="text-[10px] font-bold text-white leading-[14px] tracking-[-0.23px]">
                  GY
                </span>
              </div>
              <div className="flex flex-col">
                <span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
                  {holding.custodian}
                </span>
                <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
                  {holding.custodianType}
                </span>
              </div>
            </div>

            {/* Asset Type */}
            <div className="flex-1 px-6 py-6">
              <span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
                {holding.assetType}
              </span>
            </div>

            {/* Maturity */}
            <div className="flex-1 px-6 py-6 flex flex-col">
              <span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
                {holding.maturityDate}
              </span>
              <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
                ({holding.daysRemaining})
              </span>
            </div>

            {/* Value */}
            <div className="flex-1 px-6 py-6">
              <span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
                {holding.value}
              </span>
            </div>

            {/* Status */}
            <div className="flex-1 px-6 py-6">
              <div className="inline-flex items-center gap-0.5 bg-[#e1f8ec] dark:bg-green-900/30 border border-[#b8ecd2] dark:border-green-700 rounded-full px-3 py-1">
                <Image
                  src="/component-11.svg"
                  alt=""
                  width={14}
                  height={14}
                />
                <span className="text-[10px] font-bold text-[#10b981] dark:text-green-400 leading-[15px]">
                  {holding.status}
                </span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}