"use client"

import { useState } from "react"
import { ChevronDown, ChevronUp, TrendingUp, TrendingDown, Users } from "lucide-react"
import { Card } from "@/components/ui/card"

interface KeyIssue {
  id: string
  title: string
  bullishView: {
    content: string
    sources: number
  }
  bearishView: {
    content: string
    sources: number
  }
}

const keyIssues: KeyIssue[] = [
  {
    id: "valuation",
    title: "Valuation and profitability trajectory",
    bullishView: {
      content:
        "Tesla commands a premium valuation due to its leadership in electric vehicles, rapid innovation, and expanding service segment. Analysts point to margin improvements and the potential for a profit inflection driven by AI and Robotaxi expansion that can justify high multiples.",
      sources: 2,
    },
    bearishView: {
      content:
        "Tesla's valuation is disconnected from fundamentals, with slowing revenue growth and a sharp decline in earnings. Elevated PE ratios are unsustainable, and the anticipated margin expansion may be limited by intensifying competition and the loss of regulatory credit revenue.",
      sources: 2,
    },
  },
  {
    id: "robotaxi",
    title: "Impact and timeline of autonomous Robotaxi rollout",
    bullishView: {
      content:
        "Rapid progress in AI and regulatory approvals signal Tesla's robotaxi launch is imminent, creating new business lines and boosting revenue. Approval to test autonomous vehicles and CEO confidence suggest commercialization could begin as early as next year.",
      sources: 2,
    },
    bearishView: {
      content:
        "Milestones for mass-deployment of robotaxis are aggressive, with regulatory, technical, and safety hurdles likely delaying meaningful revenue. Some analysts see the Arizona pilot as incremental rather than transformative, and question whether full autonomy will be reached within the year.",
      sources: 3,
    },
  },
  {
    id: "competition",
    title: "Competitive pressures and market share outlook",
    bullishView: {
      content:
        "Tesla remains at the forefront of EV innovation and is positioned to achieve record deliveries due to its global manufacturing scale and technological edge. International expansion and diversified offerings are expected to sustain market share and offset new entrants.",
      sources: 2,
    },
    bearishView: {
      content:
        "Tesla faces rising competition from established automakers and emerging Chinese EV rivals, which erodes pricing power and squeezes margins. Analysts argue that global EV saturation and pricing pressures will stunt growth and diminish profitability.",
      sources: 1,
    },
  },
]

export function KeyIssues() {
  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set(["valuation"]))

  const toggleExpanded = (id: string) => {
    const newExpanded = new Set(expandedItems)
    if (newExpanded.has(id)) {
      newExpanded.delete(id)
    } else {
      newExpanded.add(id)
    }
    setExpandedItems(newExpanded)
  }

  return (
    <Card className="p-4 bg-card border-border">
      <h2 className="text-xl font-semibold mb-4 text-foreground">Key Issues</h2>
      <div className="space-y-4">
        {keyIssues.map((issue) => {
          const isExpanded = expandedItems.has(issue.id)
          return (
            <div key={issue.id} className="border-b border-border last:border-b-0">
              <button
                onClick={() => toggleExpanded(issue.id)}
                className="w-full flex items-center justify-between py-3 text-left hover:bg-muted/50 transition-colors"
              >
                <h3 className="text-base font-medium text-foreground">{issue.title}</h3>
                {isExpanded ? (
                  <ChevronUp className="h-5 w-5 text-muted-foreground" />
                ) : (
                  <ChevronDown className="h-5 w-5 text-muted-foreground" />
                )}
              </button>

              {isExpanded && (
                <div className="pb-4 grid grid-cols-1 md:grid-cols-2 gap-4">
                  {/* Bullish View */}
                  <div className="space-y-3">
                    <div className="flex items-center gap-2">
                      <TrendingUp className="h-4 w-4 text-blue-400" />
                      <span className="text-sm font-medium text-blue-400">Bullish view</span>
                    </div>
                    <p className="text-sm text-muted-foreground leading-relaxed">{issue.bullishView.content}</p>
                    <div className="flex items-center gap-2 text-xs text-muted-foreground">
                      <Users className="h-3 w-3" />
                      <span>{issue.bullishView.sources} sources</span>
                    </div>
                  </div>

                  {/* Bearish View */}
                  <div className="space-y-3">
                    <div className="flex items-center gap-2">
                      <TrendingDown className="h-4 w-4 text-orange-400" />
                      <span className="text-sm font-medium text-orange-400">Bearish view</span>
                    </div>
                    <p className="text-sm text-muted-foreground leading-relaxed">{issue.bearishView.content}</p>
                    <div className="flex items-center gap-2 text-xs text-muted-foreground">
                      <Users className="h-3 w-3" />
                      <span>
                        {issue.bearishView.sources} source{issue.bearishView.sources !== 1 ? "s" : ""}
                      </span>
                    </div>
                  </div>
                </div>
              )}
            </div>
          )
        })}
      </div>
    </Card>
  )
}
