"use client"

import { use } from "react"
import Link from "next/link"
import { useLocale } from "@/lib/i18n/context"
import { ThreadList } from "@/components/forum/thread-list"
import { mockCategories, getThreadsByCategory } from "@/lib/mock-data"
import { Button } from "@/components/ui/button"
import { PenSquare, ArrowLeft } from "lucide-react"
import {
  Landmark,
  Scale,
  TrendingUp,
  Eye,
  Radio,
  Shield,
  MessageCircle,
} from "lucide-react"

const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
  Landmark,
  Scale,
  TrendingUp,
  Eye,
  Radio,
  Shield,
  MessageCircle,
}

export default function CategoryPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = use(params)
  const { locale, t } = useLocale()

  const category = mockCategories.find((c) => c.slug === slug)
  if (!category) {
    return (
      <div className="flex flex-col items-center gap-4 py-20">
        <p className="text-muted-foreground">
          {locale === "tr" ? "Kategori bulunamadi." : "Category not found."}
        </p>
        <Link href="/">
          <Button variant="outline" size="sm">
            <ArrowLeft className="mr-1.5 h-4 w-4" />
            {t.common.back}
          </Button>
        </Link>
      </div>
    )
  }

  const threads = getThreadsByCategory(slug)
  const Icon = iconMap[category.icon] || MessageCircle
  const name = locale === "tr" ? category.name_tr : category.name_en
  const desc = locale === "tr" ? category.description_tr : category.description_en

  return (
    <div className="flex flex-col gap-6">
      {/* Category Header */}
      <div className="flex flex-col gap-4 rounded-lg border border-border bg-card p-6 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex items-start gap-4">
          <div
            className="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg"
            style={{ backgroundColor: `${category.color}15`, color: category.color }}
          >
            <Icon className="h-6 w-6" />
          </div>
          <div>
            <h1 className="text-xl font-bold text-foreground">{name}</h1>
            <p className="mt-1 text-sm text-muted-foreground">{desc}</p>
            <span className="mt-1 text-xs text-muted-foreground">
              {category.thread_count} {locale === "tr" ? "konu" : "threads"}
            </span>
          </div>
        </div>
        <Link href="/threads/new" className="shrink-0">
          <Button size="sm" className="gap-1.5">
            <PenSquare className="h-4 w-4" />
            {t.nav.newThread}
          </Button>
        </Link>
      </div>

      {/* Threads */}
      <ThreadList threads={threads} />
    </div>
  )
}