import Image from 'next/image';
import Link from 'next/link';
import { formatDate, getImageUrl, truncate } from '@/utils';

interface Article {
  id: number;
  title: string;
  slug: string;
  excerpt?: string;
  coverImage?: string;
  publishedAt?: string;
  category?: { name: string; slug: string };
  author?: { name: string };
  views?: number;
}

interface Props {
  article: Article;
  variant?: 'default' | 'featured' | 'horizontal' | 'compact';
  priority?: boolean;
}

function CategoryTag({ category, light = false }: { category?: Article['category']; light?: boolean }) {
  if (!category) return null;
  return (
    <Link
      href={`/category/${category.slug}`}
      className={
        light
          ? 'inline-block rounded bg-accent-500 px-2 py-0.5 text-[11px] font-bold uppercase tracking-wide text-white'
          : 'text-[11px] font-bold uppercase tracking-wide text-brand-700 dark:text-brand-300 hover:underline'
      }
    >
      {category.name}
    </Link>
  );
}

export default function ArticleCard({ article, variant = 'default', priority = false }: Props) {
  const imageUrl = getImageUrl(article.coverImage);

  if (variant === 'featured') {
    return (
      <article className="group relative overflow-hidden rounded-card">
        <div className="relative h-72 sm:h-[26rem] bg-surface-sunken">
          <Image
            src={imageUrl}
            alt={article.title}
            fill
            priority={priority}
            sizes="(max-width: 1024px) 100vw, 66vw"
            className="object-cover transition-transform duration-500 group-hover:scale-105"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/30 to-transparent" />
        </div>
        <div className="absolute inset-x-0 bottom-0 p-5 sm:p-7 text-white">
          <CategoryTag category={article.category} light />
          <Link href={`/article/${article.slug}`}>
            <h2 className="mt-3 font-serif text-2xl sm:text-4xl font-extrabold leading-tight group-hover:text-white/90">
              {article.title}
            </h2>
          </Link>
          {article.excerpt && (
            <p className="mt-2 hidden sm:block max-w-2xl text-sm text-white/80 line-clamp-2">
              {truncate(article.excerpt, 160)}
            </p>
          )}
          <div className="mt-3 text-xs text-white/70">
            {article.author && <span>{article.author.name}</span>}
            {article.publishedAt && <span className="ml-2">{formatDate(article.publishedAt)}</span>}
          </div>
        </div>
      </article>
    );
  }

  if (variant === 'horizontal') {
    return (
      <article className="flex gap-4 border-b border-surface pb-4 last:border-0 last:pb-0">
        <Link href={`/article/${article.slug}`} className="relative h-20 w-28 flex-shrink-0 overflow-hidden rounded-md bg-surface-sunken">
          <Image src={imageUrl} alt={article.title} fill sizes="112px" className="object-cover" />
        </Link>
        <div className="min-w-0 flex-1">
          <CategoryTag category={article.category} />
          <Link href={`/article/${article.slug}`}>
            <h3 className="mt-1 font-serif text-sm font-bold leading-snug hover:text-brand-700 dark:hover:text-brand-300 line-clamp-2">
              {article.title}
            </h3>
          </Link>
          {article.publishedAt && <p className="mt-1 text-xs text-muted">{formatDate(article.publishedAt)}</p>}
        </div>
      </article>
    );
  }

  if (variant === 'compact') {
    return (
      <article className="border-b border-surface py-3 last:border-0">
        <CategoryTag category={article.category} />
        <Link
          href={`/article/${article.slug}`}
          className="mt-1 block font-serif text-sm font-semibold leading-snug hover:text-brand-700 dark:hover:text-brand-300"
        >
          {article.title}
        </Link>
      </article>
    );
  }

  return (
    <article className="group flex flex-col">
      <Link href={`/article/${article.slug}`} className="relative mb-3 block h-48 overflow-hidden rounded-card bg-surface-sunken">
        <Image
          src={imageUrl}
          alt={article.title}
          fill
          sizes="(max-width: 768px) 100vw, 33vw"
          className="object-cover transition-transform duration-500 group-hover:scale-105"
        />
      </Link>
      <CategoryTag category={article.category} />
      <Link href={`/article/${article.slug}`}>
        <h3 className="mt-1 font-serif text-lg font-bold leading-snug group-hover:text-brand-700 dark:group-hover:text-brand-300 line-clamp-2">
          {article.title}
        </h3>
      </Link>
      {article.excerpt && <p className="mt-1 text-sm text-muted line-clamp-2">{truncate(article.excerpt, 110)}</p>}
      <div className="mt-2 flex items-center gap-2 text-xs text-muted">
        {article.author && <span>{article.author.name}</span>}
        {article.publishedAt && (
          <>
            <span>·</span>
            <span>{formatDate(article.publishedAt)}</span>
          </>
        )}
      </div>
    </article>
  );
}