"use client";

import { useState } from "react";
import TabNavigation from "./TabNavigation";
import OverviewTab from "./OverviewTab";
import { useApp } from "@/contexts/AppContext";

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

  const tabs = [
    { id: "overview", label: t("tabs.overview") },
    { id: "asset-description", label: t("tabs.assetDescription") },
    { id: "analytics", label: t("tabs.analytics") },
    { id: "performance-analysis", label: t("tabs.performanceAnalysis") },
    { id: "asset-custody", label: t("tabs.assetCustody") },
  ];

  const [activeTab, setActiveTab] = useState("overview");

  const handleTabChange = (tabId: string) => {
    // If clicking asset-description, performance-analysis, or asset-custody, scroll to that section
    if (tabId === "asset-description" || tabId === "performance-analysis" || tabId === "asset-custody") {
      setTimeout(() => {
        const element = document.getElementById(tabId);
        if (element) {
          element.scrollIntoView({ behavior: "smooth", block: "start" });
        }
      }, 100);
      // Keep active tab as overview
      setActiveTab("overview");
    } else {
      setActiveTab(tabId);
    }
  };

  // Show OverviewTab for overview, asset-description, analytics, performance-analysis, and asset-custody
  const showOverview = ["overview", "asset-description", "analytics", "performance-analysis", "asset-custody"].includes(activeTab);

  return (
    <div className="flex flex-col gap-6 w-full">
      {/* Tab Navigation */}
      <TabNavigation
        tabs={tabs}
        defaultActiveId="overview"
        onTabChange={handleTabChange}
      />

      {/* Content Area */}
      <div className="w-full">
        {showOverview && <OverviewTab />}
        {!showOverview && (
          <div className="bg-bg-surface rounded-2xl border border-border-normal p-6">
            <p className="text-text-tertiary">
              {tabs.find((t) => t.id === activeTab)?.label} content will be
              displayed here...
            </p>
          </div>
        )}
      </div>
    </div>
  );
}