"use client"

import { useState } from "react"
import { useParams, useRouter } from "next/navigation"
import Image from "next/image"
import {ArrowLeft, Star, Calendar, Database, BookOpen, ChevronDown} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent } from "@/components/ui/card"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import { ThemeToggle } from "@/components/theme-toggle"
import {useFetchMangaChapters, useGetManga} from "@/api/mangamochi";
import {MangaChapter} from "@/components/manga-chapter";
import {useQueryClient} from "@tanstack/react-query";

export default function MangaDetailPage() {
  const params = useParams()
  const router = useRouter()
  const mangaId = Number(params.id)

  const queryClient = useQueryClient();

  const { data: mangaData, queryKey } = useGetManga(mangaId);

  const { mutate, isPending } = useFetchMangaChapters({mutation: {
    onSuccess: () => queryClient.invalidateQueries({queryKey})
    }})

  const [openProviders, setOpenProviders] = useState<Set<number>>(new Set())

  if (!mangaData) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-background">
        <div className="text-center">
          <h1 className="text-2xl font-bold text-foreground">Manga not found</h1>
          <Button onClick={() => router.push("/")} className="mt-4">
            Go back home
          </Button>
        </div>
      </div>
    )
  }

  const toggleProvider = (providerId: number) => {
    setOpenProviders((prev) => {
      const next = new Set(prev)
      if (next.has(providerId)) {
        next.delete(providerId)
      } else {
        next.add(providerId)
      }
      return next
    })
  }

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

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

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

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

  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="px-8 py-6">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-6">
              <Button variant="ghost" onClick={() => router.push("/")} className="gap-2">
                <ArrowLeft className="h-4 w-4" />
                Back to Library
              </Button>
              <h1 className="text-xl font-bold text-foreground">MangaMochi</h1>
            </div>
            <ThemeToggle />
          </div>
        </div>
      </header>

      {/* Content */}
      <main className="px-8 py-8">
        <div className="mx-auto max-w-7xl">
          {/* Manga Info Section */}
          <div className="grid gap-8 lg:grid-cols-[300px_1fr]">
            {/* Cover */}
            <div className="relative aspect-[2/3] overflow-hidden rounded-lg border border-border bg-muted lg:sticky lg:top-8 lg:h-fit">
              <Image src={(mangaData.coverImageKey && "http://omv.badger-pirarucu.ts.net:9000/mangamochi/" + mangaData.coverImageKey) || "/placeholder.svg"} alt={mangaData.title} fill className="object-cover" />
            </div>

            {/* Details */}
            <div className="space-y-6">
              <div>
                <div className="mb-3 flex items-start justify-between gap-4">
                  <h1 className="text-balance text-4xl font-bold tracking-tight text-foreground">{mangaData.title}</h1>
                  <Badge variant="secondary" className="border border-border bg-card text-foreground">
                    {mangaData.status}
                  </Badge>
                </div>
                <p className="text-lg text-muted-foreground">{author}</p>
              </div>

              {mangaData.alternativeTitles && mangaData.alternativeTitles.length > 0 && (
                <div>
                  <h3 className="mb-2 text-sm font-medium text-muted-foreground">Alternative Titles</h3>
                  <div className="flex flex-wrap gap-2">
                    {mangaData.alternativeTitles.map((title, index) => (
                      <span key={index} className="rounded-md bg-muted px-3 py-1 text-sm text-foreground">
                        {title}
                      </span>
                    ))}
                  </div>
                </div>
              )}

              <p className="text-pretty text-justify leading-relaxed text-foreground">{mangaData.synopsis}</p>

              <div className="grid gap-4 sm:grid-cols-2">
                <div className="flex items-center gap-3 rounded-lg border border-border bg-card p-4">
                  <Star className="h-5 w-5 fill-primary text-primary" />
                  <div>
                    <p className="text-sm text-muted-foreground">Rating</p>
                    <p className="text-lg font-semibold text-foreground">{mangaData.score}/5.0</p>
                  </div>
                </div>

                <div className="flex items-center gap-3 rounded-lg border border-border bg-card p-4">
                  <BookOpen className="h-5 w-5 text-primary" />
                  <div>
                    <p className="text-sm text-muted-foreground">Chapters</p>
                    {/*<p className="text-lg font-semibold text-foreground">{manga.chapters}</p>*/}
                  </div>
                </div>

                <div className="flex items-center gap-3 rounded-lg border border-border bg-card p-4">
                  <Calendar className="h-5 w-5 text-primary" />
                  <div>
                    <p className="text-sm text-muted-foreground">Published</p>
                    <p className="text-lg font-semibold text-foreground">{dateRange}</p>
                  </div>
                </div>

                <div className="flex items-center gap-3 rounded-lg border border-border bg-card p-4">
                  <Database className="h-5 w-5 text-primary" />
                  <div>
                    <p className="text-sm text-muted-foreground">Providers</p>
                    <p className="text-lg font-semibold text-foreground">{mangaData.providerCount}</p>
                  </div>
                </div>
              </div>

              <div className="flex flex-wrap gap-2">
                {mangaData.genres.map((genre) => (
                  <Badge key={genre} variant="outline" className="border-border text-foreground">
                    {genre}
                  </Badge>
                ))}
              </div>
            </div>
          </div>

          <div className="mt-12">
            <h2 className="mb-6 text-2xl font-bold text-foreground">Chapters by Provider</h2>

            <div className="space-y-4">
              {mangaData?.providers.map((provider) => (
                <Card key={provider.id} className="border-border bg-card">
                  <Collapsible
                    open={openProviders.has(provider.id)}
                    onOpenChange={() => toggleProvider(provider.id)}
                  >
                    <CollapsibleTrigger className="w-full">
                      <CardContent className="flex items-center justify-between p-4">
                        <div className="flex items-center justify-between w-full">
                        <div className="flex items-center gap-4">
                          <Database className="h-5 w-5 text-primary" />
                            <div className="text-left">
                              <p className="font-semibold text-foreground">{provider.providerName}</p>
                              <p className="text-sm text-muted-foreground">
                                {provider.chaptersDownloaded} downloaded • {provider.chaptersAvailable} available
                              </p>
                            </div>
                          </div>
                          <div className={"pr-4"}>
                            <Button
                              size="sm"
                              variant="outline"
                              disabled={isPending}
                              onClick={() => mutate({mangaProviderId: provider.id})}
                              className="gap-2"
                          >
                            <Database className="h-4 w-4" />
                            Fetch from Provider
                          </Button></div>
                        </div>
                        <ChevronDown
                          className={`h-5 w-5 text-muted-foreground transition-transform ${
                            openProviders.has(provider.id) ? "rotate-180" : ""
                          }`}
                        />
                      </CardContent>
                    </CollapsibleTrigger>
                    <CollapsibleContent>
                      <MangaChapter mangaId={mangaId} mangaProviderId={provider.id} />
                    </CollapsibleContent>
                  </Collapsible>
                </Card>
              ))}
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}