"use client"

import { useState } from "react"
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Info } from "lucide-react"

const quarterlyData = [
  { quarter: "Q3 2025", status: "Upcoming", change: null, color: "text-muted-foreground" },
  { quarter: "Q2 2025", status: "-30.77%", change: -30.77, color: "text-red-400" },
  { quarter: "Q1 2025", status: "-65.91%", change: -65.91, color: "text-red-400" },
  { quarter: "Q4 2024", status: "-12%", change: -12, color: "text-red-400" },
  { quarter: "Q3 2024", status: "+6.9%", change: 6.9, color: "text-green-400" },
  { quarter: "Q2 2024", status: "-32.26%", change: -32.26, color: "text-red-400" },
  { quarter: "Q1 2024", status: "", change: null, color: "text-muted-foreground" },
]

const analysisPoints = [
  "Tesla successfully launched its robo-taxi service with paying customers in Austin, plans hyper-exponential expansion to additional US cities pending regulatory approval, and targets covering half the US population by year-end; expected material financial impact by end of next year, with long-term robotaxi cost per mile potentially as low as $0.25-$0.30 for purpose-built vehicles.",
  "Adoption of Full Self-Driving (FSD) increased 25% since v12 launch and with new lower subscription pricing; Tesla reports vehicles on FSD are 10x safer than without, and further expansion of FSD—including unsupervised personal use—expected in certain geographies by year-end.",
  "Lower-cost Tesla vehicle production began in H1 2025; ramping will be slower than initially expected due to focus on maximizing deliveries before US EV tax credits expire and the additional complexity of new models, with broader availability anticipated in Q4.",
  "Tesla's Optimus humanoid robot v3 prototype will begin production at the start of next year, with scale targeted at 100,000 robots per month within five years; Optimus is anticipated to be Tesla's biggest product ever, with initial revenues expected to be immaterial until production ramps.",
  "Near-term challenges include loss of US EV aid storage tax credits and increased tariffs, affecting both revenue and costs; CapEx for 2025 is expected to exceed $9 billion, driven by investment in AI, manufacturing, and energy storage—with record Powerwall deployments and strong MegaPack demand despite policy/tariff headwinds.",
]

export function Earnings() {
  const [activeSubTab, setActiveSubTab] = useState("analysis")

  return (
    <div className="space-y-6">
      {/* Quarterly Timeline */}
      <div className="flex flex-wrap gap-2">
        {quarterlyData.map((quarter, index) => (
          <Button
            key={quarter.quarter}
            variant={index === 0 ? "default" : "outline"}
            size="sm"
            className={`${quarter.color} ${
              index === 0
                ? "bg-muted text-foreground"
                : quarter.change && quarter.change > 0
                  ? "border-green-400/20 hover:border-green-400/40"
                  : quarter.change && quarter.change < 0
                    ? "border-red-400/20 hover:border-red-400/40"
                    : "border-muted"
            }`}
          >
            {quarter.quarter} {quarter.status}
          </Button>
        ))}
      </div>

      {/* Key Metrics */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 p-6 bg-muted/20 rounded-lg">
        <div className="space-y-4">
          <div>
            <div className="text-sm text-muted-foreground mb-1">Report Date</div>
            <div className="text-lg font-semibold">Jul 24, 2025</div>
          </div>
          <div>
            <div className="text-sm text-muted-foreground mb-1">Report Period</div>
            <div className="text-lg font-semibold">Q2 2025</div>
          </div>
        </div>

        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <div>
              <div className="flex items-center gap-2 text-sm text-muted-foreground mb-1">
                Reported Revenue
                <div className="flex items-center gap-2 text-sm text-muted-foreground mb-1">
                  Avg 1d Change <Info className="w-3 h-3" />
                </div>
              </div>
              <div className="text-lg font-semibold">22억원</div>
            </div>
            <div className="text-right">
              <div className="text-sm text-green-400">Beat +0.97%</div>
              <div className="text-lg font-semibold">10%</div>
            </div>
          </div>

          <div className="flex items-center justify-between">
            <div>
              <div className="flex items-center gap-2 text-sm text-muted-foreground mb-1">
                Reported EPS
                <div className="flex items-center gap-2 text-sm text-muted-foreground mb-1">
                  Implied Move 1d <Info className="w-3 h-3" />
                </div>
              </div>
              <div className="text-lg font-semibold">0.27</div>
            </div>
            <div className="text-right">
              <div className="text-sm text-red-400">Miss -30.77%</div>
              <div className="text-lg font-semibold">6.12%</div>
            </div>
          </div>
        </div>
      </div>

      {/* Sub Navigation */}
      <Tabs value={activeSubTab} onValueChange={setActiveSubTab} className="w-full">
        <TabsList className="grid w-full grid-cols-3 bg-muted/20">
          <TabsTrigger value="analysis" className="data-[state=active]:bg-background">
            Analysis
          </TabsTrigger>
          <TabsTrigger value="transcript" className="data-[state=active]:bg-background">
            Transcript
          </TabsTrigger>
          <TabsTrigger value="documents" className="data-[state=active]:bg-background">
            Documents
          </TabsTrigger>
        </TabsList>

        <TabsContent value="analysis" className="mt-6">
          <div className="space-y-4">
            {analysisPoints.map((point, index) => (
              <div key={index} className="flex gap-3">
                <div className="w-2 h-2 rounded-full bg-primary mt-2 flex-shrink-0" />
                <p className="text-sm leading-relaxed text-muted-foreground">{point}</p>
              </div>
            ))}
          </div>
        </TabsContent>

        <TabsContent value="transcript" className="mt-6">
          <div className="text-center py-8 text-muted-foreground">
            Earnings call transcript will be available after the call.
          </div>
        </TabsContent>

        <TabsContent value="documents" className="mt-6">
          <div className="text-center py-8 text-muted-foreground">
            SEC filings and related documents will be available here.
          </div>
        </TabsContent>
      </Tabs>

      {/* Footer */}
      <div className="text-xs text-muted-foreground pt-4 border-t border-muted/20">
        Financial information provided by Financial Modeling Prep. Options data provided by Unusual Whales. Live
        transcripts provided by Quartz. Reported revenue and EPS data from Earnings powered by Fiscal.ai. All data is
        provided for informational purposes only, and is not intended for trading purposes or financial, investment,
        tax, legal, accounting or other advice.
      </div>
    </div>
  )
}