import { Heart, MessageCircle, Eye, Pin } from "lucide-react";
import { cn } from "@/lib/utils";
import {
  type ArticleItem,
  articleColor,
  articleInitial,
  formatRelativeTime,
  formatCount,
} from "./article-types";

type Props = {
  article: ArticleItem;
  onClick?: (id: string) => void;
  className?: string;
};

export default function ArticleCard({ article, onClick, className }: Props) {
  const authorName =
    article.author.display_name || article.author.username || "Anonymous";
  const color = articleColor(authorName);
  const initial = articleInitial(authorName);

  return (
    <article
      className={cn(
        "group relative flex cursor-pointer flex-col overflow-hidden rounded-2xl border border-border/30 bg-card shadow-sm transition-[background-color,border-color,color,opacity,box-shadow,transform] duration-300 hover:shadow-lg hover:-translate-y-0.5",
        article.is_pinned && "ring-1 ring-amber-500/20",
        className,
      )}
      onClick={() => onClick?.(article.id)}
    >
      {/* Cover image */}
      <div className="relative aspect-[4/3] w-full overflow-hidden bg-muted/30">
        {article.cover_url ? (
          <img
            alt={article.title}
            className="size-full object-cover transition-transform duration-500 group-hover:scale-105"
            loading="lazy"
            src={article.cover_url}
          />
        ) : (
          <div
            className={cn(
              "flex size-full items-center justify-center bg-gradient-to-br",
              color,
            )}
          >
            <span className="text-4xl font-bold text-foreground/15 select-none">
              {initial}
            </span>
          </div>
        )}

        {/* Pinned badge */}
        {article.is_pinned && (
          <span className="absolute left-2 top-2 inline-flex items-center gap-1 rounded-full bg-warning/90 px-2 py-0.5 text-[10px] font-medium text-warning-foreground backdrop-blur-sm">
            <Pin className="size-2.5" />
            Pinned
          </span>
        )}
      </div>

      {/* Body */}
      <div className="flex flex-1 flex-col gap-2 p-4">
        {/* Tags */}
        {article.tags.length > 0 && (
          <div className="flex flex-wrap gap-1">
            {article.tags.slice(0, 3).map((tag) => (
              <span
                className="rounded-md bg-primary/[0.06] px-1.5 py-[2px] text-[10px] font-medium text-primary/60"
                key={tag}
              >
                {tag}
              </span>
            ))}
          </div>
        )}

        {/* Title */}
        <h3 className="line-clamp-2 text-[15px] font-semibold leading-snug text-foreground group-hover:text-primary/80 transition-colors">
          {article.title}
        </h3>

        {/* Summary */}
        {article.summary && (
          <p className="line-clamp-2 text-[13px] leading-relaxed text-muted-foreground/60">
            {article.summary}
          </p>
        )}

        {/* Spacer */}
        <div className="flex-1" />

        {/* Author + Stats */}
        <div className="flex items-center gap-2 pt-1">
          {/* Author avatar */}
          {article.author.avatar_url ? (
            <img
              alt={authorName}
              className="size-5 shrink-0 rounded-full object-cover"
              src={article.author.avatar_url}
            />
          ) : (
            <div
              className={cn(
                "grid size-5 shrink-0 place-items-center rounded-full bg-gradient-to-br text-[8px] font-bold text-white",
                color,
              )}
            >
              {initial}
            </div>
          )}
          <span className="min-w-0 flex-1 truncate text-[12px] text-muted-foreground/50">
            {authorName}
          </span>

          <div className="flex items-center gap-2 text-[11px] text-muted-foreground/35">
            <span className="inline-flex items-center gap-0.5">
              <Eye className="size-3" />
              {formatCount(article.view_count)}
            </span>
            <span className="inline-flex items-center gap-0.5">
              <Heart className="size-3" />
              {formatCount(article.like_count)}
            </span>
            <span className="inline-flex items-center gap-0.5">
              <MessageCircle className="size-3" />
              {formatCount(article.comment_count)}
            </span>
          </div>
        </div>

        {/* Time */}
        <div className="text-[11px] text-muted-foreground/30">
          {formatRelativeTime(article.created_at)}
        </div>
      </div>
    </article>
  );
}
