"use client"

import { useState } from "react"
import { useLocale } from "@/lib/i18n/context"
import { ThreadCard } from "./thread-card"
import { Button } from "@/components/ui/button"
import { ArrowUpDown, Clock, TrendingUp, Eye } from "lucide-react"
import { cn } from "@/lib/utils"
import type { Thread } from "@/lib/mock-data"

type SortOption = "newest" | "oldest" | "most-voted" | "most-viewed"

const sortIcons: Record<SortOption, React.ComponentType<{ className?: string }>> = {
  newest: Clock,
  oldest: Clock,
  "most-voted": TrendingUp,
  "most-viewed": Eye,
}

export function ThreadList({
  threads,
  title,
}: {
  threads: Thread[]
  title?: string
}) {
  const { t } = useLocale()
  const [sortBy, setSortBy] = useState<SortOption>("newest")

  const sortedThreads = [...threads].sort((a, b) => {
    // Pinned threads always come first
    if (a.is_pinned && !b.is_pinned) return -1
    if (!a.is_pinned && b.is_pinned) return 1

    switch (sortBy) {
      case "newest":
        return new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
      case "oldest":
        return new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
      case "most-voted":
        return b.vote_count - a.vote_count
      case "most-viewed":
        return b.view_count - a.view_count
      default:
        return 0
    }
  })

  const sortOptions: { key: SortOption; label: string }[] = [
    { key: "newest", label: t.common.newest },
    { key: "oldest", label: t.common.oldest },
    { key: "most-voted", label: t.common.mostVoted },
    { key: "most-viewed", label: t.common.mostViewed },
  ]

  return (
    <div className="flex flex-col gap-5">
      {/* Sort Controls */}
      <div className="flex items-center gap-2 overflow-x-auto pb-1">
        <div className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
          <ArrowUpDown className="h-3.5 w-3.5" />
          <span className="hidden sm:inline">{t.common.sortBy}:</span>
        </div>
        <div className="flex items-center gap-1 rounded-xl bg-secondary/50 p-1">
          {sortOptions.map((option) => {
            const Icon = sortIcons[option.key]
            const isActive = sortBy === option.key
            return (
              <Button
                key={option.key}
                variant="ghost"
                size="sm"
                className={cn(
                  "h-8 gap-1.5 rounded-lg px-3 text-xs font-medium transition-all",
                  isActive 
                    ? "bg-card text-foreground shadow-sm" 
                    : "text-muted-foreground hover:text-foreground"
                )}
                onClick={() => setSortBy(option.key)}
              >
                <Icon className="h-3.5 w-3.5" />
                <span className="hidden sm:inline">{option.label}</span>
              </Button>
            )
          })}
        </div>
      </div>

      {/* Threads */}
      {sortedThreads.length === 0 ? (
        <div className="flex flex-col items-center justify-center gap-3 rounded-2xl border border-dashed border-border/50 bg-card/30 p-16 text-center">
          <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-muted">
            <ArrowUpDown className="h-6 w-6 text-muted-foreground" />
          </div>
          <p className="text-sm text-muted-foreground">{t.forum.noThreads}</p>
        </div>
      ) : (
        <div className="flex flex-col gap-3">
          {sortedThreads.map((thread) => (
            <ThreadCard key={thread.id} thread={thread} />
          ))}
        </div>
      )}
    </div>
  )
}