import Link from "next/link"
import Image from "next/image"
import { Star, Calendar, Database } from "lucide-react"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

interface Manga {
  id: number
  title: string
  coverImageKey?: string
  status?: string
  publishedFrom?: string
  publishedTo?: string
  providerCount?: number
  authors: string[]
  genres: string[]
  score: number
  // chapters: number
}

interface MangaCardProps {
  manga: Manga
}

export function MangaCard({ manga }: MangaCardProps) {
  const formatter = new Intl.DateTimeFormat('en-US', {
    month: '2-digit',
        day: '2-digit',
        year: 'numeric'
  });

  const publishedTo = manga.publishedTo ? formatter.format(new Date(manga.publishedTo)) : null;
  const publishedFrom = manga.publishedFrom ? formatter.format(new Date(manga.publishedFrom)) : null;

  const dateRange = publishedTo ? `${publishedFrom} - ${publishedTo}` : `${publishedFrom} - Present`

  const author = manga.authors.join(', ');

  return (
    <Link href={`/manga/${manga.id}`}>
      <Card className="group overflow-hidden border-border bg-card py-0 gap-0 transition-all hover:border-primary/50 hover:shadow-lg hover:shadow-primary/10 cursor-pointer">
        <CardContent className="p-0">
          <div className="relative aspect-[2/3] overflow-hidden bg-muted">
            <Image
              src={(manga.coverImageKey && "http://omv.badger-pirarucu.ts.net:9000/mangamochi/" + manga.coverImageKey) || "/placeholder.svg"}
              alt={manga.title}
              fill
              className="object-cover transition-transform duration-300 group-hover:scale-105"
            />
            <div className="absolute right-2 top-2">
              <Badge
                variant="secondary"
                className="border border-border/50 bg-background/80 text-foreground backdrop-blur-sm"
              >
                {manga.status}
              </Badge>
            </div>
          </div>

          {/* Info */}
          <div className="space-y-2 p-4">
            <h3 className="line-clamp-2 text-sm font-semibold leading-tight text-foreground">{manga.title}</h3>

            <p className="text-xs text-muted-foreground">{author}</p>

            {publishedFrom &&
            <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
              <Calendar className="h-3 w-3" />
               <span>{dateRange}</span>
            </div>}

            <div className="flex items-center justify-between">
              <div className="flex items-center gap-1">
                <Star className="h-3.5 w-3.5 fill-primary text-primary" />
                <span className="text-xs font-medium text-foreground">{manga.score}</span>
              </div>
              {/*<span className="text-xs text-muted-foreground">Ch. {manga.chapters}</span>*/}
            </div>

            <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
              <Database className="h-3 w-3" />
              <span>
                {manga.providerCount} {manga.providerCount === 1 ? "provider" : "providers"}
              </span>
            </div>

            <div className="flex flex-wrap gap-1">
              {manga.genres.map((genre) => (
                <Badge key={genre} variant="outline" className="border-border text-xs text-muted-foreground">
                  {genre}
                </Badge>
              ))}
            </div>
          </div>
        </CardContent>
      </Card>
    </Link>
  )
}