"use client"

import Link from "next/link"
import { useLocale } from "@/lib/i18n/context"
import { VoteButton } from "./vote-button"
import { CategoryBadge } from "./category-badge"
import { formatRelativeTime, type Thread } from "@/lib/mock-data"
import { Eye, MessageSquare, Pin, Lock, Clock, TrendingUp } from "lucide-react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

export function ThreadCard({ thread }: { thread: Thread }) {
  const { locale, t } = useLocale()

  return (
    <article className="group relative flex gap-4 rounded-2xl border border-border/50 bg-card/50 p-5 transition-all duration-300 hover:bg-card hover:border-border hover:shadow-xl hover:shadow-black/5">
      {/* Vote Column */}
      <div className="hidden sm:flex sm:flex-col sm:items-center sm:gap-1">
        <VoteButton initialCount={thread.vote_count} />
      </div>

      {/* Content */}
      <div className="flex min-w-0 flex-1 flex-col gap-3">
        {/* Badges Row */}
        <div className="flex flex-wrap items-center gap-2">
          {thread.is_pinned && (
            <span className="inline-flex items-center gap-1.5 rounded-full bg-gradient-to-r from-accent/20 to-accent/10 px-2.5 py-1 text-xs font-semibold text-accent ring-1 ring-accent/20">
              <Pin className="h-3 w-3" />
              {t.forum.pinned}
            </span>
          )}
          {thread.is_locked && (
            <span className="inline-flex items-center gap-1.5 rounded-full bg-muted px-2.5 py-1 text-xs font-medium text-muted-foreground">
              <Lock className="h-3 w-3" />
              {t.forum.locked}
            </span>
          )}
          <CategoryBadge category={thread.category} />
        </div>

        {/* Title */}
        <Link href={`/threads/${thread.id}`} className="block">
          <h3 className="text-lg font-bold leading-snug text-foreground transition-colors group-hover:text-primary text-balance">
            {thread.title}
          </h3>
        </Link>

        {/* Preview */}
        <p className="line-clamp-2 text-sm leading-relaxed text-muted-foreground">
          {thread.content}
        </p>

        {/* Meta Row */}
        <div className="flex flex-wrap items-center gap-4 pt-1">
          {/* Author */}
          <Link
            href={`/profile/${thread.author.username}`}
            className="flex items-center gap-2 transition-colors hover:text-primary"
          >
            <Avatar className="h-6 w-6 ring-2 ring-border">
              <AvatarImage src={thread.author.avatar_url || undefined} />
              <AvatarFallback className="bg-secondary text-[10px] font-bold text-muted-foreground">
                {thread.author.display_name.charAt(0)}
              </AvatarFallback>
            </Avatar>
            <span className="text-sm font-medium text-foreground/80">
              {thread.author.display_name}
            </span>
          </Link>

          <div className="flex items-center gap-3 text-xs text-muted-foreground">
            <span className="flex items-center gap-1">
              <Clock className="h-3.5 w-3.5" />
              {formatRelativeTime(thread.created_at, locale)}
            </span>
            <span className="flex items-center gap-1">
              <Eye className="h-3.5 w-3.5" />
              {thread.view_count}
            </span>
            <span className="flex items-center gap-1.5 rounded-full bg-primary/10 px-2 py-0.5 font-medium text-primary">
              <MessageSquare className="h-3 w-3" />
              {thread.comment_count}
            </span>
          </div>

          {/* Mobile vote display */}
          <div className="ml-auto sm:hidden">
            <VoteButton initialCount={thread.vote_count} orientation="horizontal" />
          </div>
        </div>
      </div>

      {/* Hot indicator for high engagement */}
      {thread.vote_count > 100 && (
        <div className="absolute -right-1 -top-1 flex h-6 w-6 items-center justify-center rounded-full bg-gradient-to-r from-accent to-destructive text-[10px] font-bold text-white shadow-lg">
          <TrendingUp className="h-3 w-3" />
        </div>
      )}
    </article>
  )
}