import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Calendar, Clock, User, ArrowLeft, Share2, Bookmark, ExternalLink } from "lucide-react"
import Link from "next/link"
import { fetchApi } from "@/lib/api-client"

interface NewsArticle {
  id: number;
  title: string;
  source: string;
  published_at: string;
  category: string;
  summary: string;
  content?: string;
  url?: string;
  image_url?: string;
}

export default async function NewsDetailPage({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  
  let article: NewsArticle | null = null

  try {
    article = await fetchApi(`news.php?id=${id}`)
  } catch (error) {
    console.error("Failed to fetch news article:", error)
  }

  if (!article) {
    return (
      <div className="container mx-auto px-4 py-20 text-center">
        <h1 className="text-2xl font-bold">News article not found</h1>
        <Button asChild className="mt-4">
          <Link href="/news">Back to News</Link>
        </Button>
      </div>
    )
  }

  return (
    <main className="flex-1 pb-20">
      <div className="container mx-auto px-4 py-8">
        <Button variant="ghost" className="mb-8 gap-2" asChild>
          <Link href="/news">
            <ArrowLeft className="h-4 w-4" />
            Back to News
          </Link>
        </Button>

        <div className="max-w-4xl mx-auto space-y-8">
          <div className="space-y-4">
            <div className="flex items-center gap-3">
              <Badge variant="secondary" className="bg-primary/10 text-primary border-primary/20">
                {article.category}
              </Badge>
              <span className="text-sm text-muted-foreground flex items-center gap-1">
                <Calendar className="h-4 w-4" />
                {new Date(article.published_at).toLocaleDateString()}
              </span>
            </div>
            <h1 className="text-4xl md:text-5xl font-extrabold tracking-tight leading-tight">
              {article.title}
            </h1>
            <div className="flex items-center justify-between py-4 border-y">
              <div className="flex items-center gap-2">
                <span className="text-sm font-bold text-muted-foreground uppercase">Source: {article.source}</span>
              </div>
              <div className="flex items-center gap-2">
                <Button variant="ghost" size="sm" className="gap-2">
                  <Share2 className="h-4 w-4" />
                  Share
                </Button>
                <Button variant="ghost" size="sm" className="gap-2">
                  <Bookmark className="h-4 w-4" />
                  Save
                </Button>
              </div>
            </div>
          </div>

          {article.image_url && (
            <div className="aspect-video w-full overflow-hidden rounded-2xl bg-muted">
              <img
                src={article.image_url}
                alt={article.title}
                className="w-full h-full object-cover"
              />
            </div>
          )}

          <div className="prose prose-lg prose-slate max-w-none">
            <p className="text-xl text-muted-foreground leading-relaxed font-medium mb-8">
              {article.summary}
            </p>
            <div className="space-y-6 leading-relaxed whitespace-pre-wrap">
              {article.content || "Full article content is currently being processed. Please check back shortly or visit the source link below."}
            </div>
          </div>

          {article.url && (
            <div className="pt-12 border-t">
              <Card className="bg-primary/5 border-none">
                <CardContent className="p-8 flex flex-col md:flex-row items-center justify-between gap-6">
                  <div className="space-y-2">
                    <h3 className="font-bold text-lg">Read the full story at {article.source}</h3>
                    <p className="text-sm text-muted-foreground">
                      This article was originally published on {article.source}.
                    </p>
                  </div>
                  <Button className="gap-2 shadow-lg" asChild>
                    <a href={article.url} target="_blank" rel="noopener noreferrer">
                      View Original Article <ExternalLink className="h-4 w-4" />
                    </a>
                  </Button>
                </CardContent>
              </Card>
            </div>
          )}
        </div>
      </div>
    </main>
  )
}

function Card({ children, className }: { children: React.ReactNode, className?: string }) {
  return (
    <div className={`rounded-xl border bg-card text-card-foreground shadow ${className}`}>
      {children}
    </div>
  )
}

function CardContent({ children, className }: { children: React.ReactNode, className?: string }) {
  return <div className={`p-6 ${className}`}>{children}</div>
}
