import Link from 'next/link'
import React from 'react'

import { Media } from '@/components/Media'
import { TagBadge } from '@/components/TagBadge'
import RichText from '@/components/RichText'

type StoryHeroProps = {
  story: {
    title: string
    slug: string
    coverImage?: any | null
    synopsis?: any | null
    author?: string | null
    translator?: string | null
    category?: any | null
    tags?: any[] | null
  }
  firstChapterSlug?: string | null
  totalChapters?: number
}

export const StoryHero: React.FC<StoryHeroProps> = ({ story, firstChapterSlug, totalChapters }) => {
  const { title, coverImage, synopsis, author, translator, category, tags } = story

  const categoryTitle = category && typeof category === 'object' ? category.title : null
  const categorySlug = category && typeof category === 'object' ? category.slug : null

  const parentBreadcrumb =
    category?.breadcrumbs?.[0] ?? null

  const tagList: Array<{ id: string | number; title: string; slug: string }> =
    (tags ?? []).filter(
      (t: any): t is { id: string | number; title: string; slug: string } =>
        typeof t === 'object' && 'title' in t,
    )

  return (
    <div className="container py-8">
      <div className="flex flex-col md:flex-row gap-8">
        {/* Cover */}
        <div className="w-full md:w-48 flex-shrink-0">
          <div className="aspect-[2/3] relative rounded-lg overflow-hidden bg-muted shadow-md">
            {coverImage && typeof coverImage !== 'string' ? (
              <Media resource={coverImage} fill imgClassName="object-cover" />
            ) : (
              <div className="absolute inset-0 bg-gradient-to-b from-muted to-muted-foreground/20" />
            )}
          </div>
        </div>

        {/* Info */}
        <div className="flex-1 min-w-0">
          <h1 className="text-2xl md:text-3xl font-bold mb-4 leading-tight">{title}</h1>

          <dl className="space-y-1.5 text-sm mb-4">
            {author && (
              <div className="flex gap-2">
                <dt className="font-medium text-foreground w-24 flex-shrink-0">Tác giả</dt>
                <dd className="text-muted-foreground">{author}</dd>
              </div>
            )}
            {translator && (
              <div className="flex gap-2">
                <dt className="font-medium text-foreground w-24 flex-shrink-0">Dịch giả</dt>
                <dd className="text-muted-foreground">{translator}</dd>
              </div>
            )}
            {categoryTitle && categorySlug && (
              <div className="flex gap-2">
                <dt className="font-medium text-foreground w-24 flex-shrink-0">Thể loại</dt>
                <dd>
                  {parentBreadcrumb?.url ? (
                    <Link
                      href={parentBreadcrumb.url}
                      className="text-muted-foreground hover:text-primary transition-colors"
                    >
                      {categoryTitle}
                    </Link>
                  ) : (
                    <Link
                      href={`/the-loai/${categorySlug}`}
                      className="text-muted-foreground hover:text-primary transition-colors"
                    >
                      {categoryTitle}
                    </Link>
                  )}
                </dd>
              </div>
            )}
            {totalChapters !== undefined && (
              <div className="flex gap-2">
                <dt className="font-medium text-foreground w-24 flex-shrink-0">Số chương</dt>
                <dd className="text-muted-foreground">{totalChapters}</dd>
              </div>
            )}
          </dl>

          {tagList.length > 0 && (
            <div className="flex flex-wrap gap-1.5 mb-5">
              {tagList.map((tag) => (
                <TagBadge key={String(tag.id)} tag={tag} />
              ))}
            </div>
          )}

          {synopsis && (
            <div className="mb-6 text-sm">
              <RichText
                data={synopsis}
                enableGutter={false}
                enableProse={false}
                className="text-muted-foreground leading-relaxed line-clamp-5"
              />
            </div>
          )}

          {firstChapterSlug && (
            <Link
              href={`/truyen/${story.slug}/${firstChapterSlug}`}
              className="inline-flex items-center gap-2 bg-primary text-primary-foreground px-6 py-2.5 rounded-lg font-medium hover:bg-primary/90 transition-colors text-sm"
            >
              Đọc từ đầu →
            </Link>
          )}
        </div>
      </div>
    </div>
  )
}