"use client"

import { useState } from "react"
import { StockHeader } from "./stock-header"
import { StockChart } from "./stock-chart"
import { CompanyInfo } from "./company-info"
import { RecentDevelopments } from "./recent-developments"
import { LatestPriceMovement } from "./latest-price-movement"
import { Watchlist } from "./watchlist"
import { Navigation } from "./navigation"
import { KeyIssues } from "./key-issues"
import { HistoricalData } from "./historical-data"
import { Financials } from "./financials"
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
import { Earnings } from "./earnings"
import { Research } from "./research"

export function StockDashboard() {
  const [selectedStock, setSelectedStock] = useState("TSLA")
  const [activeTab, setActiveTab] = useState("overview")

  return (
    <div className="min-h-screen bg-background text-foreground">
      <Navigation />
      <div className="flex">
        <main className="flex-1 p-1 sm:p-2 md:p-3 lg:p-4">
          <div className="space-y-1 sm:space-y-2 md:space-y-3 lg:space-y-4">
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-1 sm:gap-2 md:gap-3 lg:gap-4">
              {/* Left main content area with tabs */}
              <div className="lg:col-span-2 space-y-1 sm:space-y-2 md:space-y-3 lg:space-y-4">
                <StockHeader symbol={selectedStock} activeTab={activeTab} onTabChange={setActiveTab} />

                <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
                  <TabsList className="hidden">
                    <TabsTrigger value="overview">Overview</TabsTrigger>
                    <TabsTrigger value="historical">Historical Data</TabsTrigger>
                    <TabsTrigger value="financials">Financials</TabsTrigger>
                    <TabsTrigger value="earnings">Earnings</TabsTrigger>
                    <TabsTrigger value="research">Research</TabsTrigger>
                  </TabsList>

                  <TabsContent value="overview" className="space-y-1 sm:space-y-2 md:space-y-3 lg:space-y-4">
                    <StockChart symbol={selectedStock} />
                    <RecentDevelopments />
                    <KeyIssues />
                    <LatestPriceMovement />
                  </TabsContent>

                  <TabsContent value="historical" className="space-y-1 sm:space-y-2 md:space-y-3 lg:space-y-4">
                    <HistoricalData />
                  </TabsContent>

                  <TabsContent value="financials" className="space-y-1 sm:space-y-2 md:space-y-3 lg:space-y-4">
                    <Financials />
                  </TabsContent>

                  <TabsContent value="earnings" className="space-y-1 sm:space-y-2 md:space-y-3 lg:space-y-4">
                    <Earnings />
                  </TabsContent>

                  <TabsContent value="research" className="space-y-1 sm:space-y-2 md:space-y-3 lg:space-y-4">
                    <Research />
                  </TabsContent>
                </Tabs>
              </div>

              {/* Right sidebar with company info and watchlist */}
              <div className="space-y-1 sm:space-y-2 md:space-y-3 lg:space-y-4">
                <CompanyInfo symbol={selectedStock} />
                <Watchlist onSelectStock={setSelectedStock} />
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  )
}