"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Download, ExternalLink } from "lucide-react"

const newsArticles = [
  {
    title: "Tesla: Shares Rally as Robotaxi Testing Expands to Arizona",
    author: "Seth Goldstein for Morningstar",
    date: "September 23, 2025",
  },
  {
    title: "Tesla: Shares Soar on CEO Elon Musk's Share Purchase",
    author: "Seth Goldstein for Morningstar",
    date: "September 15, 2025",
  },
  {
    title: "Tesla: Shares Rally on Expanded Robotaxi Testing",
    author: "Seth Goldstein for Morningstar",
    date: "September 13, 2025",
  },
  {
    title: "Tesla: Shares Rise on Board Proposal for New Compensation Plan for CEO Elon Musk",
    author: "Seth Goldstein for Morningstar",
    date: "September 5, 2025",
  },
  {
    title: "Tesla: Board Announces New Pay Package for CEO Elon Musk",
    author: "Seth Goldstein for Morningstar",
    date: "August 5, 2025",
    updated: "Updated August 8, 2025 at 7:49 AM",
  },
  {
    title: "Tesla Earnings: Affordable Vehicle to Enter Production by End of Year as Robotaxi Testing Underway",
    author: "Seth Goldstein for Morningstar",
    date: "July 24, 2025",
  },
  {
    title: "Tesla: Shares Fall as US Law Set To Eliminate EV Tax Credits Early; Musk Plans to Start New Party",
    author: "Seth Goldstein for Morningstar",
    date: "July 8, 2025",
    updated: "Updated July 17, 2025 at 9:55 AM",
  },
  {
    title: "Tesla: Second-Quarter Deliveries Decline Confirms Our View for Lower 2025 Deliveries",
    author: "Seth Goldstein for Morningstar",
    date: "July 2, 2025",
  },
  {
    title: "Tesla: Robotaxi Begins Testing With Non-Tesla Employees but With Limitations",
    author: "Seth Goldstein for Morningstar",
    date: "June 23, 2025",
    updated: "Updated July 2, 2025 at 8:12 AM",
  },
  {
    title: "Tesla: Shares Rise as CEO Elon Musk's Feud With US President Donald Trump Cools",
    author: "Seth Goldstein for Morningstar",
    date: "June 7, 2025",
    updated: "Updated June 21, 2025 at 2:56 PM",
  },
  {
    title: "Tesla: Shares Sink as CEO Elon Musk Feuds With US President Donald Trump",
    author: "Seth Goldstein for Morningstar",
    date: "June 6, 2025",
  },
]

const perplexityReports = [
  {
    title: "TSLA Initiation of Coverage Report",
    author: "Perplexity Labs",
    date: "Generated September 29, 2025 at 6:02 PM",
  },
]

const independentReports = [
  {
    title: "Tesla - US EQUITY Research",
    author: "DBS Bank",
    date: "September 22, 2025",
    outlook: "neutral",
  },
  {
    title: "Morningstar Equity Analyst Report",
    author: "Morningstar",
    date: "June 10, 2025",
    outlook: "bearish",
  },
  {
    title: "Tesla Inc. (TSLA) Research Analysis",
    author: "Goldman Sachs",
    date: "September 15, 2025",
    outlook: "neutral",
  },
]

export function Research() {
  return (
    <div className="space-y-6">
      {/* News Articles */}
      <div className="space-y-3">
        {newsArticles.map((article, index) => (
          <Card key={index} className="bg-card border-border">
            <CardContent className="p-4">
              <div className="flex items-start justify-between">
                <div className="flex-1 space-y-1">
                  <h3 className="font-medium text-foreground leading-snug">{article.title}</h3>
                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
                    <div className="w-2 h-2 bg-green-500 rounded-full" />
                    <span>By {article.author}</span>
                    <span>•</span>
                    <span>{article.date}</span>
                    {article.updated && (
                      <>
                        <span>•</span>
                        <span>{article.updated}</span>
                      </>
                    )}
                  </div>
                </div>
                <Button variant="outline" size="sm" className="ml-4 bg-transparent">
                  View
                </Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Perplexity Labs Reports */}
      {perplexityReports.map((report, index) => (
        <Card key={index} className="bg-card border-border">
          <CardContent className="p-2">
            <div className="flex items-start justify-between">
              <div className="flex-1 space-y-0">
                <div className="flex items-center gap-2">
                  <h3 className="font-medium text-foreground leading-tight">{report.title}</h3>
                  <Badge variant="secondary" className="text-xs">
                    BETA
                  </Badge>
                </div>
                <div className="text-sm text-muted-foreground leading-tight">
                  By {report.author} • {report.date}
                </div>
              </div>
              <Button variant="outline" size="sm" className="ml-4 bg-transparent">
                <Download className="w-4 h-4 mr-2" />
                Download Report
              </Button>
            </div>
          </CardContent>
        </Card>
      ))}

      {/* Independent Research Reports */}
      {independentReports.map((report, index) => (
        <Card key={index} className="bg-card border-border">
          <CardContent className="p-2">
            <div className="flex items-start justify-between">
              <div className="flex-1 space-y-0">
                <div className="flex items-center gap-2">
                  <span className="text-muted-foreground">▷</span>
                  <h3 className="font-medium text-foreground leading-tight">{report.title}</h3>
                </div>
                <div className="flex items-center gap-2 text-sm text-muted-foreground ml-6 leading-tight">
                  <span>By {report.author}</span>
                  <span>•</span>
                  <span>{report.date}</span>
                  <span>•</span>
                  <span
                    className={`capitalize ${
                      report.outlook === "bearish"
                        ? "text-red-400"
                        : report.outlook === "neutral"
                          ? "text-gray-400"
                          : "text-green-400"
                    }`}
                  >
                    Outlook: {report.outlook}
                  </span>
                </div>
              </div>
              <Button variant="outline" size="sm" className="ml-4 bg-transparent">
                <ExternalLink className="w-4 h-4 mr-2" />
                View Source
              </Button>
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  )
}