"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Download, ChevronLeft, ChevronRight, TrendingUp, Minus, TrendingDown } from "lucide-react"

const financialTabs = [
  { id: "key-stats", label: "Key Stats" },
  { id: "income-statement", label: "Income Statement" },
  { id: "balance-sheet", label: "Balance Sheet" },
  { id: "cash-flow", label: "Cash Flow" },
]

const financialData = {
  years: ["12/31/2025", "12/31/2024", "12/31/2023", "12/31/2022", "12/31/2021"],
  metrics: [
    {
      label: "Market Cap",
      values: ["-", "$1,291,076", "$788,551", "$385,553", "$1,042,337"],
      type: "currency",
    },
    {
      label: "- Cash",
      values: ["-", "16,139", "16,398", "16,253", "17,576"],
      type: "number",
      indent: true,
    },
    {
      label: "+ Debt",
      values: ["-", "13,623", "9,573", "5,748", "8,873"],
      type: "number",
      indent: true,
    },
    {
      label: "Enterprise Value",
      values: ["-", "1,288,560", "781,726", "375,048", "1,033,634"],
      type: "currency",
      highlight: true,
    },
    {
      label: "Revenue",
      values: ["92,915", "97,690", "96,773", "81,462", "53,823"],
      type: "currency",
    },
    {
      label: "% Growth",
      values: ["-4.9%", "0.9%", "18.8%", "51.4%", "-"],
      type: "percentage",
      indent: true,
      italic: true,
    },
    {
      label: "Gross Profit",
      values: ["15,912", "17,450", "17,660", "20,853", "13,606"],
      type: "currency",
    },
    {
      label: "% Margin",
      values: ["17.1%", "17.9%", "18.2%", "25.6%", "25.3%"],
      type: "percentage",
      indent: true,
      italic: true,
    },
    {
      label: "EBITDA",
      values: ["13,428", "14,708", "14,796", "17,657", "9,625"],
      type: "currency",
    },
    {
      label: "% Margin",
      values: ["14.5%", "15.1%", "15.3%", "21.7%", "17.9%"],
      type: "percentage",
      indent: true,
      italic: true,
    },
    {
      label: "Net Income",
      values: ["5,018", "7,130", "14,999", "12,583", "5,524"],
      type: "currency",
    },
    {
      label: "% Margin",
      values: ["5.4%", "7.3%", "15.5%", "15.4%", "10.3%"],
      type: "percentage",
      indent: true,
      italic: true,
    },
    {
      label: "EPS Diluted",
      values: ["3.84", "2.04", "4.31", "3.62", "1.63"],
      type: "number",
    },
    {
      label: "% Growth",
      values: ["88.0%", "-52.7%", "19.1%", "122.1%", "-"],
      type: "percentage",
      indent: true,
      italic: true,
    },
    {
      label: "Operating Cash Flow",
      values: ["12,484", "14,923", "13,256", "14,724", "11,497"],
      type: "currency",
    },
    {
      label: "Capital Expenditures",
      values: ["-9,714", "-11,342", "-8,899", "-7,172", "-8,014"],
      type: "currency",
    },
    {
      label: "Free Cash Flow",
      values: ["4,011", "3,581", "4,357", "7,552", "3,483"],
      type: "currency",
      highlight: true,
    },
  ],
}

const allInsights = [
  {
    title: "Strong EV Market Leadership Position",
    content:
      "Tesla maintains its position as the world's leading electric vehicle manufacturer with consistent delivery growth and expanding global market presence, particularly in key markets like China and Europe.",
    signal: "bullish",
  },
  {
    title: "Autonomous Driving Technology Advancement",
    content:
      "Significant progress in Full Self-Driving capabilities and neural network improvements position Tesla ahead of traditional automakers in the autonomous vehicle race.",
    signal: "bullish",
  },
  {
    title: "Energy Business Expansion",
    content:
      "Tesla's energy storage and solar business continues to grow, providing diversification beyond automotive and creating additional revenue streams with higher margins.",
    signal: "bullish",
  },
  {
    title: "Market Capitalization Volatility amid Industry Events",
    content:
      "Tesla's market capitalization fluctuated dramatically from $1.04 trillion in 2021 to a low of $385.6 billion in 2022, before rebounding to over $1.29 trillion by the end of 2024.",
    signal: "neutral",
  },
  {
    title: "Revenue Growth Stabilization",
    content:
      "Revenue growth has stabilized after the rapid expansion phase, with modest growth rates indicating market maturation in core segments.",
    signal: "neutral",
  },
  {
    title: "Production Capacity Utilization",
    content:
      "Current production facilities are operating at high capacity, requiring significant capital investment for further expansion to meet growing demand.",
    signal: "neutral",
  },
  {
    title: "Compressed Gross Margins Post-2022",
    content:
      "Gross profit margins declined significantly from a peak of 25.6% in 2022 to 17.9% in 2024, indicating aggressive pricing cuts and increased production costs.",
    signal: "bearish",
  },
  {
    title: "Increased Competition in EV Market",
    content:
      "Traditional automakers and new EV startups are rapidly expanding their electric vehicle offerings, intensifying competition and potentially impacting Tesla's market share.",
    signal: "bearish",
  },
  {
    title: "Regulatory and Policy Uncertainty",
    content:
      "Changes in government EV incentives and regulations across different markets could impact demand and profitability in key regions.",
    signal: "bearish",
  },
]

export function Financials() {
  const [activeFinancialTab, setActiveFinancialTab] = useState("key-stats")
  const [period, setPeriod] = useState("annual")
  const [currency, setCurrency] = useState("M")
  const [currentInsightIndex, setCurrentInsightIndex] = useState(0)

  const insightsPerPage = 3
  const totalPages = Math.ceil(allInsights.length / insightsPerPage)
  const currentInsights = allInsights.slice(currentInsightIndex, currentInsightIndex + insightsPerPage)

  const nextInsights = () => {
    if (currentInsightIndex + insightsPerPage < allInsights.length) {
      setCurrentInsightIndex(currentInsightIndex + insightsPerPage)
    }
  }

  const prevInsights = () => {
    if (currentInsightIndex > 0) {
      setCurrentInsightIndex(Math.max(0, currentInsightIndex - insightsPerPage))
    }
  }

  const getSignalStyle = (signal: string) => {
    switch (signal) {
      case "bullish":
        return {
          icon: TrendingUp,
          color: "text-green-500",
          bg: "bg-green-500/10",
          label: "Bullish Signal",
        }
      case "bearish":
        return {
          icon: TrendingDown,
          color: "text-red-500",
          bg: "bg-red-500/10",
          label: "Bearish Signal",
        }
      default:
        return {
          icon: Minus,
          color: "text-gray-500",
          bg: "bg-gray-500/10",
          label: "Neutral Effect",
        }
    }
  }

  return (
    <div className="space-y-4">
      <Card>
        <CardHeader className="pb-4">
          <div className="flex items-center justify-between">
            <div className="flex space-x-1">
              {financialTabs.map((tab) => (
                <Button
                  key={tab.id}
                  variant={activeFinancialTab === tab.id ? "default" : "ghost"}
                  size="sm"
                  onClick={() => setActiveFinancialTab(tab.id)}
                  className="text-sm"
                >
                  {tab.label}
                </Button>
              ))}
            </div>
            <div className="flex items-center space-x-2">
              <Select value={period} onValueChange={setPeriod}>
                <SelectTrigger className="w-20">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="annual">Annual</SelectItem>
                  <SelectItem value="quarterly">Quarterly</SelectItem>
                </SelectContent>
              </Select>
              <Select value={currency} onValueChange={setCurrency}>
                <SelectTrigger className="w-12">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="M">M</SelectItem>
                  <SelectItem value="B">B</SelectItem>
                </SelectContent>
              </Select>
              <Button size="sm" variant="outline">
                <Download className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b border-border">
                  <th className="text-left py-1 text-sm font-medium text-muted-foreground leading-tight"></th>
                  {financialData.years.map((year) => (
                    <th
                      key={year}
                      className="text-right py-1 px-4 text-sm font-medium text-muted-foreground leading-tight"
                    >
                      {year}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {financialData.metrics.map((metric, index) => (
                  <tr key={index} className="border-b border-border/50">
                    <td
                      className={`py-1 text-sm leading-tight ${metric.indent ? "pl-6 text-muted-foreground" : "font-medium"} ${metric.italic ? "italic" : ""} ${metric.highlight ? "font-semibold" : ""}`}
                    >
                      {metric.label}
                    </td>
                    {metric.values.map((value, valueIndex) => (
                      <td
                        key={valueIndex}
                        className={`text-right py-1 px-4 text-sm leading-tight ${metric.highlight ? "font-semibold" : ""}`}
                      >
                        {value}
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <CardTitle className="text-lg flex items-center space-x-2">
              <span className="text-muted-foreground">💡</span>
              <span>Insights</span>
            </CardTitle>
            <div className="flex items-center space-x-2 text-sm text-muted-foreground">
              <span>{allInsights.length} insights</span>
              <div className="flex space-x-1">
                <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                <div className="w-2 h-2 bg-gray-500 rounded-full"></div>
                <div className="w-2 h-2 bg-red-500 rounded-full"></div>
              </div>
              <Button variant="ghost" size="sm" onClick={prevInsights} disabled={currentInsightIndex === 0}>
                <ChevronLeft className="h-4 w-4" />
              </Button>
              <span className="text-xs">
                {Math.floor(currentInsightIndex / insightsPerPage) + 1} / {totalPages}
              </span>
              <Button
                variant="ghost"
                size="sm"
                onClick={nextInsights}
                disabled={currentInsightIndex + insightsPerPage >= allInsights.length}
              >
                <ChevronRight className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {currentInsights.map((insight, index) => {
              const signalStyle = getSignalStyle(insight.signal)
              const IconComponent = signalStyle.icon

              return (
                <div key={index} className={`p-4 rounded-lg border ${signalStyle.bg} space-y-3`}>
                  <div className="flex items-center space-x-2">
                    <IconComponent className={`h-4 w-4 ${signalStyle.color}`} />
                    <span className={`text-xs font-medium ${signalStyle.color}`}>{signalStyle.label}</span>
                  </div>
                  <h4 className="font-medium text-sm">{insight.title}</h4>
                  <p className="text-sm text-muted-foreground leading-relaxed">{insight.content}</p>
                </div>
              )
            })}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}