"use client"

import { useLocale } from "@/lib/i18n/context"
import { ThreadList } from "@/components/forum/thread-list"
import { mockThreads, mockCategories } from "@/lib/mock-data"
import { Button } from "@/components/ui/button"
import { MysteriousBackground } from "@/components/ui/mysterious-background"
import Link from "next/link"
import {
  Sparkles,
  Landmark,
  Scale,
  TrendingUp,
  Eye,
  Radio,
  Shield,
  MessageCircle,
  Users,
  FileText,
  MessageSquare,
  Flame,
  Lock,
  AlertTriangle,
} from "lucide-react"

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

export default function HomePage() {
  const { locale, t } = useLocale()

  const totalThreads = mockThreads.length
  const totalComments = mockThreads.reduce((acc, t) => acc + t.comment_count, 0)

  return (
    <div className="flex flex-col gap-8">
      {/* Hero Banner with Mysterious Background */}
      <div className="relative overflow-hidden rounded-3xl border border-border/30 bg-gradient-to-br from-card via-card to-background">
        <MysteriousBackground variant="hero" />
        
        <div className="relative p-8 sm:p-10">
          <div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
            <div className="max-w-xl">
              {/* Secret badge */}
              <div className="mb-4 flex items-center gap-3">
                <span className="flex h-7 items-center gap-2 rounded-full border border-primary/30 bg-primary/10 px-4 text-xs font-semibold text-primary">
                  <Eye className="h-3.5 w-3.5" />
                  SINIFLANDIRILMIS BILGI
                </span>
                <span className="flex h-7 items-center gap-2 rounded-full border border-accent/30 bg-accent/10 px-3 text-xs font-semibold text-accent">
                  <Lock className="h-3 w-3" />
                  GİZLİ
                </span>
              </div>
              
              <h1 className="text-3xl font-black tracking-tight text-foreground sm:text-4xl lg:text-5xl text-balance">
                Gercekler Gizlenemez
              </h1>
              <p className="mt-4 text-base leading-relaxed text-muted-foreground max-w-md">
                {locale === "tr" 
                  ? "Derin devlet operasyonlari, gizli ajandalar ve perdenin arkasindaki guc yapilarini arastiran bagimsiz topluluk."
                  : "Independent community researching deep state operations, hidden agendas, and power structures behind the curtain."
                }
              </p>
              
              {/* Warning banner */}
              <div className="mt-5 flex items-center gap-2 rounded-lg border border-accent/20 bg-accent/5 px-4 py-2 text-xs text-accent">
                <AlertTriangle className="h-4 w-4 shrink-0" />
                <span>{locale === "tr" ? "Kritik dusunce gerektirir. Resmi kaynaklari dogrulayin." : "Critical thinking required. Verify official sources."}</span>
              </div>
            </div>
            
            <Link href="/threads/new" className="shrink-0">
              <Button size="lg" className="gap-2 bg-gradient-to-r from-accent via-accent to-amber-600 text-accent-foreground shadow-xl shadow-accent/30 transition-all hover:shadow-accent/50 hover:scale-[1.02] font-semibold">
                <Sparkles className="h-5 w-5" />
                {t.forum.startDiscussion}
              </Button>
            </Link>
          </div>

          {/* Stats with glowing effect */}
          <div className="relative mt-10 grid grid-cols-3 gap-4 rounded-2xl border border-border/30 bg-secondary/20 p-5 backdrop-blur-sm">
            <div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-primary/5 via-transparent to-accent/5" />
            <div className="relative flex flex-col items-center gap-1.5 text-center">
              <div className="flex items-center gap-2">
                <FileText className="h-4 w-4 text-primary" />
                <span className="text-2xl font-bold text-foreground">{totalThreads}</span>
              </div>
              <span className="text-xs text-muted-foreground">{locale === "tr" ? "Dosya" : "Files"}</span>
            </div>
            <div className="relative flex flex-col items-center gap-1.5 text-center border-x border-border/30">
              <div className="flex items-center gap-2">
                <MessageSquare className="h-4 w-4 text-accent" />
                <span className="text-2xl font-bold text-foreground">{totalComments}</span>
              </div>
              <span className="text-xs text-muted-foreground">{locale === "tr" ? "Istihbarat" : "Intel"}</span>
            </div>
            <div className="relative flex flex-col items-center gap-1.5 text-center">
              <div className="flex items-center gap-2">
                <Users className="h-4 w-4 text-emerald-400" />
                <span className="text-2xl font-bold text-foreground">847</span>
              </div>
              <span className="text-xs text-muted-foreground">{locale === "tr" ? "Ajan" : "Agents"}</span>
            </div>
          </div>
        </div>
      </div>

      {/* Mobile Categories */}
      <div className="lg:hidden">
        <div className="mb-4 flex items-center gap-2">
          <Eye className="h-4 w-4 text-primary" />
          <h3 className="text-sm font-bold uppercase tracking-wider text-foreground">{t.nav.categories}</h3>
        </div>
        <div className="flex flex-wrap gap-2">
          {mockCategories.map((category) => {
            const Icon = iconMap[category.icon] || MessageCircle
            const name = locale === "tr" ? category.name_tr : category.name_en
            return (
              <Link key={category.id} href={`/categories/${category.slug}`}>
                <Button variant="outline" size="sm" className="gap-2 rounded-xl border-border/30 bg-card/50 text-xs hover:bg-card hover:border-primary/50 transition-all">
                  <Icon className="h-3.5 w-3.5 text-primary" />
                  {name}
                  <span className="rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-bold text-primary">
                    {category.thread_count}
                  </span>
                </Button>
              </Link>
            )
          })}
        </div>
      </div>

      {/* Thread List */}
      <div className="relative">
        <MysteriousBackground variant="subtle" />
        <div className="relative">
          <div className="mb-6 flex items-center gap-3">
            <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-primary via-primary to-cyan-500 shadow-lg shadow-primary/30">
              <Flame className="h-4 w-4 text-primary-foreground" />
            </div>
            <div>
              <h2 className="text-xl font-bold text-foreground">{locale === "tr" ? "Son Dosyalar" : "Latest Files"}</h2>
              <p className="text-xs text-muted-foreground">{locale === "tr" ? "En guncel istihbarat raporlari" : "Most recent intelligence reports"}</p>
            </div>
          </div>
          <ThreadList threads={mockThreads} />
        </div>
      </div>
    </div>
  )
}