import { createFileRoute } from "@tanstack/react-router"
import { useState } from "react"
import { useTranslation } from "react-i18next"
import { Calendar, ChevronDown, ExternalLink, Film, Globe, MapPin, User } from "lucide-react"
import { Link } from "@tanstack/react-router"
import { BackButton } from "@/components/back-button"
import { EmptyState } from "@/components/empty-state"
import { HorizontalStrip } from "@/components/horizontal-strip"
import { SwipeTabs } from "@/components/swipe-tabs"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { Skeleton } from "@/components/ui/skeleton"
import { posterUrl, tmdbProfileUrl } from "@/lib/api/client"
import { usePersonCredits } from "@/hooks/use-search"
import { useDocumentTitle } from "@/hooks/use-document-title"
import { shortDate } from "@/lib/date"
import { differenceInYears, parseISO } from "date-fns"

export const Route = createFileRoute("/_app/people/$id")({
  component: PersonDetailPage,
})

function PersonDetailPage() {
  const { t } = useTranslation()
  const { id } = Route.useParams()
  const { data, isPending } = usePersonCredits(id)
  useDocumentTitle(data?.person.name)

  if (isPending) return <PersonSkeleton />
  if (!data) return null

  const { person, cast, crew } = data

  const age = person.birthday
    ? differenceInYears(
        person.deathday ? parseISO(person.deathday) : new Date(),
        parseISO(person.birthday),
      )
    : null

  const creditTabs = [
    ...(cast.length > 0 ? [{ value: "cast", label: t("movie.cast") + ` (${cast.length})` }] : []),
    ...(crew.length > 0 ? [{ value: "crew", label: t("movie.crew") + ` (${crew.length})` }] : []),
  ] as const

  return (
    <div className="space-y-4 p-4">
      <BackButton />

      {/* Header */}
      <div className="flex gap-4">
        <div className="size-24 flex-shrink-0 overflow-hidden rounded-xl bg-muted">
          {person.profile_path ? (
            <img src={tmdbProfileUrl(person.profile_path)} alt="" className="size-full object-cover" />
          ) : (
            <div className="flex size-full items-center justify-center">
              <User className="size-10 text-muted-foreground/40" />
            </div>
          )}
        </div>
        <div className="min-w-0 flex-1 space-y-1">
          <h1 className="text-xl font-bold">{person.name}</h1>
          {person.known_for_department && (
            <Badge variant="secondary">{person.known_for_department}</Badge>
          )}
          {(person.homepage || person.imdb_url) && (
            <div className="flex gap-1.5 pt-1">
              {person.imdb_url && (
                <a href={person.imdb_url} target="_blank" rel="noopener noreferrer">
                  <Badge variant="outline" className="gap-1 text-[10px]">
                    <ExternalLink className="size-2.5" />
                    IMDb
                  </Badge>
                </a>
              )}
              {person.homepage && (
                <a href={person.homepage} target="_blank" rel="noopener noreferrer">
                  <Badge variant="outline" className="gap-1 text-[10px]">
                    <Globe className="size-2.5" />
                    {t("person.homepage")}
                  </Badge>
                </a>
              )}
            </div>
          )}
        </div>
      </div>

      {/* Details card */}
      {(person.birthday || person.place_of_birth) && (
        <Card size="sm">
          <CardContent className="space-y-2">
            {person.birthday && (
              <div className="flex items-center gap-2 text-sm">
                <Calendar className="size-3.5 text-muted-foreground" />
                <span>{shortDate(person.birthday)}</span>
                {age != null && (
                  <span className="text-muted-foreground">({age})</span>
                )}
              </div>
            )}
            {person.deathday && (
              <div className="flex items-center gap-2 text-sm">
                <Calendar className="size-3.5 text-muted-foreground" />
                <span>{shortDate(person.deathday)}</span>
                <span className="text-muted-foreground">({t("person.deathday").toLowerCase()})</span>
              </div>
            )}
            {person.place_of_birth && (
              <div className="flex items-center gap-2 text-sm">
                <MapPin className="size-3.5 text-muted-foreground" />
                <span>{person.place_of_birth}</span>
              </div>
            )}
          </CardContent>
        </Card>
      )}

      {/* Biography */}
      {person.biography && <BiographySection text={person.biography} />}

      {/* Also known as */}
      {person.also_known_as?.length > 0 && (
        <Card size="sm">
          <CardHeader>
            <CardTitle className="text-xs">{t("person.alsoKnownAs")}</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex flex-wrap gap-1">
              {person.also_known_as.map((name) => (
                <Badge key={name} variant="outline" className="text-xs font-normal">
                  {name}
                </Badge>
              ))}
            </div>
          </CardContent>
        </Card>
      )}

      <Separator />

      {/* Filmography */}
      {creditTabs.length > 0 ? (
        <SwipeTabs tabs={creditTabs} defaultValue={creditTabs[0].value} tabsListClassName="w-full">
          {(tab) => (
            <>
              {tab === "cast" && <FilmStrip items={cast.map((c) => ({ movieId: c.movie_id, title: c.title, year: c.release_year, posterPath: c.poster_path, subtitle: c.character }))} />}
              {tab === "crew" && <FilmStrip items={crew.map((c) => ({ movieId: c.movie_id, title: c.title, year: c.release_year, posterPath: c.poster_path, subtitle: `${c.job}` }))} />}
            </>
          )}
        </SwipeTabs>
      ) : (
        <EmptyState icon={Film} title={t("movie.noCredits")} />
      )}
    </div>
  )
}

type FilmStripItem = {
  movieId: string
  title: string
  year?: number
  posterPath?: string
  subtitle: string
}

function FilmStrip({ items }: { items: FilmStripItem[] }) {
  return (
    <HorizontalStrip>
      {items.map((item, i) => (
        <Link key={`${item.movieId}-${i}`} to="/movies/$id" params={{ id: item.movieId }} className="w-28 flex-shrink-0">
          <div className="aspect-[2/3] overflow-hidden rounded-xl bg-muted">
            {item.posterPath ? (
              <img src={posterUrl(item.posterPath)} alt="" className="size-full object-cover" loading="lazy" />
            ) : (
              <div className="flex size-full items-center justify-center">
                <Film className="size-6 text-muted-foreground/40" />
              </div>
            )}
          </div>
          <p className="mt-1.5 truncate text-xs font-semibold">{item.title}</p>
          {item.year && <p className="text-[10px] text-muted-foreground">{item.year}</p>}
          <p className="truncate text-[10px] italic text-muted-foreground">{item.subtitle}</p>
        </Link>
      ))}
    </HorizontalStrip>
  )
}

const BIO_COLLAPSE_THRESHOLD = 300

function BiographySection({ text }: { text: string }) {
  const { t } = useTranslation()
  const isLong = text.length > BIO_COLLAPSE_THRESHOLD
  const [expanded, setExpanded] = useState(!isLong)

  return (
    <Card size="sm">
      <CardHeader>
        <CardTitle className="text-xs">{t("person.biography")}</CardTitle>
      </CardHeader>
      <CardContent>
        <p className={`text-sm leading-relaxed text-muted-foreground ${!expanded ? "line-clamp-4" : ""}`}>
          {text}
        </p>
        {isLong && (
          <Button
            variant="ghost"
            size="sm"
            className="mt-1 h-auto p-0 text-xs text-primary"
            onClick={() => setExpanded((v) => !v)}
          >
            <ChevronDown className={`mr-1 size-3 transition-transform ${expanded ? "rotate-180" : ""}`} />
            {expanded ? t("common.less") : t("common.more")}
          </Button>
        )}
      </CardContent>
    </Card>
  )
}

function PersonSkeleton() {
  return (
    <div className="space-y-4 p-4">
      <Skeleton className="h-5 w-16" />
      <div className="flex gap-4">
        <Skeleton className="size-24 rounded-xl" />
        <div className="flex-1 space-y-2">
          <Skeleton className="h-6 w-32" />
          <Skeleton className="h-5 w-20 rounded-full" />
          <Skeleton className="h-4 w-24" />
        </div>
      </div>
      <Skeleton className="h-20 rounded-xl" />
      <Skeleton className="h-32 rounded-xl" />
      <Skeleton className="h-1 w-full" />
      <div className="space-y-2">
        {[1, 2, 3, 4].map((i) => (
          <Skeleton key={i} className="h-10 rounded-lg" />
        ))}
      </div>
    </div>
  )
}