"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { useLocale } from "@/lib/i18n/context"
import { mockCategories } from "@/lib/mock-data"
import { cn } from "@/lib/utils"
import {
  Landmark,
  Scale,
  TrendingUp,
  Eye,
  Radio,
  Shield,
  MessageCircle,
  ChevronRight,
  Lock,
  FileWarning,
  Zap,
} from "lucide-react"

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

export function Sidebar() {
  const { locale, t } = useLocale()
  const pathname = usePathname()

  return (
    <aside className="hidden w-64 shrink-0 lg:block">
      <div className="sticky top-20 py-6">
        {/* Secret Classification Banner */}
        <div className="mb-4 rounded-xl border border-red-500/20 bg-red-500/5 p-3">
          <div className="flex items-center gap-2 text-red-400">
            <FileWarning className="h-4 w-4" />
            <span className="text-xs font-bold uppercase tracking-wider">Gizlilik Seviyesi</span>
          </div>
          <div className="mt-2 flex gap-1">
            <span className="rounded bg-red-500/20 px-2 py-0.5 text-[10px] font-bold text-red-400">COK GIZLI</span>
            <span className="rounded bg-amber-500/20 px-2 py-0.5 text-[10px] font-bold text-amber-400">OZEL</span>
            <span className="rounded bg-emerald-500/20 px-2 py-0.5 text-[10px] font-bold text-emerald-400">ACIK</span>
          </div>
        </div>

        {/* Categories Section */}
        <div className="rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-4">
          <h3 className="mb-4 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-muted-foreground">
            <span className="flex h-6 w-6 items-center justify-center rounded-lg bg-gradient-to-br from-primary/20 to-primary/10">
              <Eye className="h-3.5 w-3.5 text-primary" />
            </span>
            DOSYA KATEGORILERI
          </h3>
          <nav className="flex flex-col gap-1">
            {mockCategories.map((category) => {
              const Icon = iconMap[category.icon] || MessageCircle
              const isActive = pathname === `/categories/${category.slug}`
              const name = locale === "tr" ? category.name_tr : category.name_en

              return (
                <Link
                  key={category.id}
                  href={`/categories/${category.slug}`}
                  className={cn(
                    "group flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm transition-all duration-200",
                    isActive
                      ? "bg-primary/10 text-primary shadow-sm shadow-primary/10 border border-primary/20"
                      : "text-muted-foreground hover:bg-secondary/50 hover:text-foreground border border-transparent"
                  )}
                >
                  <span className={cn(
                    "flex h-8 w-8 items-center justify-center rounded-lg transition-all",
                    isActive
                      ? "bg-primary/20 text-primary shadow-sm shadow-primary/20"
                      : "bg-secondary/50 text-muted-foreground group-hover:bg-secondary group-hover:text-foreground"
                  )}>
                    <Icon className="h-4 w-4" />
                  </span>
                  <span className={cn("truncate font-medium", isActive && "font-semibold")}>
                    {name}
                  </span>
                  <span className={cn(
                    "ml-auto flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-[10px] font-bold tabular-nums",
                    isActive
                      ? "bg-primary text-primary-foreground shadow-sm shadow-primary/30"
                      : "bg-secondary/70 text-muted-foreground"
                  )}>
                    {category.thread_count}
                  </span>
                </Link>
              )
            })}
          </nav>
        </div>

        {/* Intel Stats */}
        <div className="mt-4 rounded-2xl border border-border/30 bg-gradient-to-br from-card/50 via-card/30 to-primary/5 p-4">
          <h3 className="mb-3 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-muted-foreground">
            <Zap className="h-3 w-3 text-accent" />
            ISTIHBARAT OZETI
          </h3>
          <div className="space-y-3">
            <div className="flex items-center justify-between rounded-lg bg-secondary/30 px-3 py-2">
              <span className="text-xs text-muted-foreground">Aktif Dosya</span>
              <span className="font-mono text-sm font-bold text-foreground">189</span>
            </div>
            <div className="flex items-center justify-between rounded-lg bg-secondary/30 px-3 py-2">
              <span className="text-xs text-muted-foreground">Istihbarat Notu</span>
              <span className="font-mono text-sm font-bold text-primary">2,147</span>
            </div>
            <div className="flex items-center justify-between rounded-lg bg-secondary/30 px-3 py-2">
              <span className="text-xs text-muted-foreground">Kayitli Ajan</span>
              <span className="font-mono text-sm font-bold text-accent">847</span>
            </div>
            <div className="flex items-center justify-between rounded-lg bg-emerald-500/10 px-3 py-2 border border-emerald-500/20">
              <span className="text-xs text-emerald-400">Aktif Simdi</span>
              <span className="flex items-center gap-1.5 font-mono text-sm font-bold text-emerald-400">
                <span className="h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse" />
                12
              </span>
            </div>
          </div>
        </div>

        {/* CTA */}
        <Link href="/threads/new" className="mt-4 block">
          <div className="group relative overflow-hidden rounded-2xl bg-gradient-to-r from-accent via-amber-500 to-accent p-4 text-accent-foreground shadow-lg shadow-accent/30 transition-all hover:shadow-accent/50 hover:scale-[1.01]">
            {/* Animated shine effect */}
            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700" />
            
            <div className="relative flex items-center justify-between">
              <div className="flex items-center gap-3">
                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-black/20">
                  <Lock className="h-5 w-5" />
                </div>
                <div>
                  <p className="font-bold">Dosya Ac</p>
                  <p className="text-xs text-accent-foreground/70">Yeni istihbarat paylas</p>
                </div>
              </div>
              <ChevronRight className="h-5 w-5 transition-transform group-hover:translate-x-1" />
            </div>
          </div>
        </Link>

        {/* Warning */}
        <div className="mt-4 rounded-xl border border-muted/30 bg-muted/10 p-3 text-center">
          <p className="text-[10px] uppercase tracking-wider text-muted-foreground">
            Tum paylasimlarin kayit altina alinir
          </p>
        </div>
      </div>
    </aside>
  )
}