"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="/components/transparency/icon-clock.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>

      {/* ── 移动端：卡片布局 ── */}
      <div className="md:hidden flex flex-col divide-y divide-border-gray dark:divide-gray-600">
        {holdings.map((holding, index) => (
          <div key={index} className="p-4 flex flex-col gap-3">
            {/* Custodian 行 */}
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 bg-gradient-to-br from-[#ff8904] to-[#f54900]">
                <span className="text-sm font-bold text-white">GY</span>
              </div>
              <div className="flex flex-col">
                <span className="text-body-small font-bold text-text-primary dark:text-white">{holding.custodian}</span>
                <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400">{holding.custodianType}</span>
              </div>
              {/* Status badge 右对齐 */}
              <div className="ml-auto inline-flex items-center gap-[2px] bg-[#e1f8ec] dark:bg-green-900/30 border border-[#b8ecd2] dark:border-green-700 rounded-full px-3 py-1">
                <Image src="/components/transparency/icon-verified.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>

            {/* 信息网格：2列 */}
            <div className="grid grid-cols-2 gap-3">
              <div className="p-3 bg-bg-subtle dark:bg-gray-700/50 rounded-xl">
                <span className="text-caption-tiny font-medium text-text-tertiary dark:text-gray-400 block mb-1">{t("transparency.assetType")}</span>
                <span className="text-body-small font-bold text-text-primary dark:text-white">{holding.assetType}</span>
              </div>
              <div className="p-3 bg-bg-subtle dark:bg-gray-700/50 rounded-xl">
                <span className="text-caption-tiny font-medium text-text-tertiary dark:text-gray-400 block mb-1">{t("transparency.maturity")}</span>
                <span className="text-body-small font-bold text-text-primary dark:text-white">{holding.maturityDate}</span>
                <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 block">({holding.daysRemaining})</span>
              </div>
              <div className="col-span-2 p-3 bg-bg-subtle dark:bg-gray-700/50 rounded-xl flex items-center justify-between">
                <span className="text-body-small font-bold text-text-primary dark:text-white">{t("transparency.valueUsd")}</span>
                <span className="text-body-small font-bold text-text-primary dark:text-white">{holding.value}</span>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* ── 桌面端：表格布局 ── */}
      <div className="hidden md:block 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"
                : ""
            }`}
          >
            <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>
            <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>
            <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>
            <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>
            <div className="flex-1 px-6 py-6">
              <div className="inline-flex items-center gap-[2px] bg-[#e1f8ec] dark:bg-green-900/30 border border-[#b8ecd2] dark:border-green-700 rounded-full px-3 py-1">
                <Image src="/components/transparency/icon-verified.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>
  );
}