"use client";

import { useApp } from "@/contexts/AppContext";
import Sidebar from "@/components/Sidebar";
import TopBar from "@/components/TopBar";
import StatsCards from "@/components/StatsCards";
import ProductCard from "@/components/ProductCard";
import Image from "next/image";
import { Button } from "@heroui/react";

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

  const statsData = [
    {
      label: "Total Value Locked",
      value: "$465.0M",
      change: "+2.4%",
      isPositive: true,
    },
    {
      label: "Cumulative Yield",
      value: "$505,232",
      change: "+2.4%",
      isPositive: true,
    },
    {
      label: "Your Total Balance",
      value: "$10,000",
      change: "+2.4%",
      isPositive: true,
    },
    {
      label: "Your Total Earning",
      value: "--",
      change: "+2.4%",
      isPositive: true,
    },
  ];

  const products = [
    {
      id: 1,
      name: "High-Yield US Equity",
      category: "Quant Strategy",
      icon: "/product-us-equity.svg",
      yieldAPY: "22.0%",
      poolCap: "10M",
      maturity: "05 Feb 2026",
      risk: "Medium",
      riskLevel: 2,
      lockUp: "12 Months",
      circulatingSupply: "$2.5M",
      poolCapacityPercent: 75,
    },
    {
      id: 2,
      name: "HK Commercial RE",
      category: "Real Estate",
      icon: "/product-hk-re.svg",
      yieldAPY: "22.0%",
      poolCap: "10M",
      maturity: "05 Feb 2026",
      risk: "LOW",
      riskLevel: 1,
      lockUp: "12 Months",
      circulatingSupply: "$2.5M",
      poolCapacityPercent: 75,
    },
    {
      id: 3,
      name: "High-Yield US Equity",
      category: "Quant Strategy",
      icon: "/product-us-equity-2.svg",
      yieldAPY: "22.0%",
      poolCap: "10M",
      maturity: "05 Feb 2026",
      risk: "High",
      riskLevel: 3,
      lockUp: "12 Months",
      circulatingSupply: "$2.5M",
      poolCapacityPercent: 75,
    },
  ];

  return (
    <div className="min-h-screen bg-bg-subtle dark:bg-gray-900 flex">
      <Sidebar />
      <div className="flex-1 flex flex-col ml-[222px]">
        <div className="bg-bg-surface dark:bg-gray-800 border-b border-border-normal dark:border-gray-700 px-8 py-6">
          <TopBar />
        </div>

        <div className="flex-1 px-8 py-8">
          {/* Page Title */}
          <div className="mb-8">
            <h1 className="text-heading-h2 font-bold text-text-primary dark:text-white">
              AssetX Fund Market
            </h1>
          </div>

          {/* Stats Cards */}
          <div className="mb-8">
            <StatsCards stats={statsData} />
          </div>

          {/* Assets Section */}
          <div className="flex flex-col gap-6">
            {/* Section Header */}
            <div className="flex items-center justify-between">
              <h2 className="text-heading-h3 font-bold text-text-primary dark:text-white">
                Assets
              </h2>
              <div className="flex items-center gap-2">
                <button className="p-2 rounded-lg hover:bg-bg-subtle dark:hover:bg-gray-700 transition-colors">
                  <Image
                    src="/edit-list-unordered0.svg"
                    alt="List view"
                    width={20}
                    height={20}
                  />
                </button>
                <button className="p-2 rounded-lg hover:bg-bg-subtle dark:hover:bg-gray-700 transition-colors">
                  <Image
                    src="/menu-more-grid-small0.svg"
                    alt="Grid view"
                    width={20}
                    height={20}
                  />
                </button>
              </div>
            </div>

            {/* Product Cards Grid */}
            <div className="grid grid-cols-1 gap-6">
              {products.map((product) => (
                <ProductCard
                  key={product.id}
                  name={product.name}
                  category={product.category}
                  icon={product.icon}
                  yieldAPY={product.yieldAPY}
                  poolCap={product.poolCap}
                  maturity={product.maturity}
                  risk={product.risk}
                  riskLevel={product.riskLevel}
                  lockUp={product.lockUp}
                  circulatingSupply={product.circulatingSupply}
                  poolCapacityPercent={product.poolCapacityPercent}
                  onInvest={() => console.log("Invest in", product.name)}
                />
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}