"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import Sidebar from "@/components/layout/Sidebar";
import TopBar from "@/components/layout/TopBar";
import PageTitle from "@/components/layout/PageTitle";
import SectionHeader from "@/components/layout/SectionHeader";
import ViewToggle from "@/components/fundmarket/ViewToggle";
import StatsCards from "@/components/fundmarket/StatsCards";
import ProductCard from "@/components/fundmarket/ProductCard";
import ProductCardList from "@/components/fundmarket/ProductCardList";
import { fundMarketStats, fundMarketProducts } from "@/data/fundMarket";

export default function Home() {
  const router = useRouter();
  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
  const [isTransitioning, setIsTransitioning] = useState(false);

  const breadcrumbItems = [
    { label: "ASSETX", href: "/" },
    { label: "Fund Market" },
  ];

  const handleViewChange = (newMode: "grid" | "list") => {
    if (newMode === viewMode) return;
    setIsTransitioning(true);
    setTimeout(() => {
      setViewMode(newMode);
      setIsTransitioning(false);
    }, 200);
  };

  const handleInvest = (productId: number) => {
    router.push(`/product/${productId}`);
  };

  return (
    <div className="min-h-screen bg-white dark:bg-gray-900 flex">
      <Sidebar />
      <div className="flex-1 flex flex-col ml-[222px]">
        {/* Top Bar */}
        <div className="bg-gray-100 dark:bg-gray-800 border-b border-border-normal dark:border-gray-700 px-8 py-3">
          <TopBar breadcrumbItems={breadcrumbItems} />
        </div>

        {/* Main Content */}
        <div className="flex-1 px-8 py-8 bg-gray-100 dark:bg-gray-800">
          {/* Page Title */}
          <PageTitle title="AssetX Fund Market" />

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

          {/* Assets Section */}
          <div className="flex flex-col gap-6">
            {/* Section Header with View Toggle */}
            <SectionHeader title="Assets">
              <ViewToggle value={viewMode} onChange={handleViewChange} />
            </SectionHeader>

            {/* Product Cards - Grid or List View */}
            <div
              className="transition-opacity duration-200"
              style={{ opacity: isTransitioning ? 0 : 1 }}
            >
              {viewMode === "grid" ? (
                <div className="flex flex-row gap-6">
                  {fundMarketProducts.map((product, index) => (
                    <div
                      key={product.id}
                      className="flex-1 animate-fade-in"
                      style={{
                        animationDelay: `${index * 0.1}s`,
                        animationFillMode: "backwards",
                      }}
                    >
                      <ProductCard
                        name={product.name}
                        category={product.category}
                        categoryColor={product.categoryColor}
                        iconType={product.iconType}
                        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={() => handleInvest(product.id)}
                      />
                    </div>
                  ))}
                </div>
              ) : (
                <div className="flex flex-col gap-4">
                  {fundMarketProducts.map((product, index) => (
                    <div
                      key={product.id}
                      className="animate-fade-in"
                      style={{
                        animationDelay: `${index * 0.08}s`,
                        animationFillMode: "backwards",
                      }}
                    >
                      <ProductCardList
                        name={product.name}
                        category={product.category}
                        categoryColor={product.categoryColor}
                        iconType={product.iconType}
                        poolCap={product.poolCap}
                        lockUp={product.lockUp}
                        poolCapacityPercent={product.poolCapacityPercent}
                        onInvest={() => handleInvest(product.id)}
                      />
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}