import { createFileRoute } from "@tanstack/react-router";
import { Link } from "@tanstack/react-router";
import { useState } from "react";
import {
  Users, Server, Gavel, ShoppingBag, Palette, Newspaper, ScrollText, Trophy,
  MicOff, Ban, Activity, ChevronRight,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { StatCard } from "@/components/common/StatCard";
import { SectionHeader } from "@/components/common/PageHeader";
import { ServerCard } from "@/features/servers/ServerCard";
import { PlayerRow } from "@/features/players/PlayerRow";
import { stats, servers, news, rankings, punishments } from "@/features/_mock/data";
import { HomeSlider } from "@/features/home/HomeSlider";

export const Route = createFileRoute("/_public/")({
  head: () => ({
    meta: [
      { title: "Purple Zone — CS2 Community Platform" },
      { name: "description", content: "Servers, rankings, skins and store for a modern Counter-Strike 2 community." },
      { property: "og:title", content: "Purple Zone — CS2 Community Platform" },
      { property: "og:description", content: "Servers, rankings, skins and store for a modern Counter-Strike 2 community." },
    ],
  }),
  component: HomePage,
});

function HomePage() {
  const [rankingPeriod, setRankingPeriod] = useState("week");

  return (
    <div className="mx-auto max-w-[1400px] px-4 py-6">
      <HomeSlider />

      {/* Quick nav cards */}
      <section className="mt-8 grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-8">
        {[
          { to: "/servers", label: "Servers", icon: Server },
          { to: "/rankings", label: "Rankings", icon: Trophy },
          { to: "/store", label: "Store", icon: ShoppingBag },
          { to: "/skins", label: "Skins", icon: Palette },
          { to: "/punishments", label: "Punishments", icon: Gavel },
          { to: "/news", label: "News", icon: Newspaper },
          { to: "/rules", label: "Rules", icon: ScrollText },
          { to: "/players", label: "Players", icon: Users },
        ].map((c) => (
          <Link
            key={c.to}
            to={c.to}
            className="group flex flex-col items-center gap-2 rounded-xl border border-border bg-card p-4 text-center transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-elevated"
          >
            <div className="grid h-10 w-10 place-items-center rounded-md bg-surface-elevated text-secondary transition-colors group-hover:text-primary-foreground group-hover:gradient-primary">
              <c.icon className="h-5 w-5" />
            </div>
            <span className="text-xs font-medium">{c.label}</span>
          </Link>
        ))}
      </section>

      {/* Platform stats */}
      <section className="mt-10">
        <SectionHeader title="Platform pulse" description="Live activity across every Purple Zone server and this site." />
        <div className="grid grid-cols-2 gap-3 md:grid-cols-4 xl:grid-cols-6">
          <StatCard label="Total players" value={stats.totalPlayers.toLocaleString()} icon={<Users className="h-4 w-4" />} />
          <StatCard label="On website" value={stats.onlineWebsite} hint="Signed in right now" tone="primary" icon={<Activity className="h-4 w-4" />} />
          <StatCard label="On servers" value={stats.onlineServers.toLocaleString()} tone="success" icon={<Server className="h-4 w-4" />} />
          <StatCard label="Active servers" value={`${stats.activeServers}/${stats.totalServers}`} icon={<Server className="h-4 w-4" />} />
          <StatCard label="Active bans" value={stats.activeBans} tone="destructive" icon={<Ban className="h-4 w-4" />} />
          <StatCard label="Active mutes" value={stats.activeMutes} tone="warning" icon={<MicOff className="h-4 w-4" />} />
        </div>
      </section>

      {/* Server monitoring + top players side by side */}
      <section className="mt-10 grid gap-6 lg:grid-cols-[1.6fr_1fr]">
        <div>
          <SectionHeader
            title="Live servers"
            description="Real-time status, players and maps across the network."
            action={<Button variant="outline" size="sm" asChild><Link to="/servers">All servers <ChevronRight className="h-4 w-4" /></Link></Button>}
          />
          <div className="grid gap-3 sm:grid-cols-2">
            {servers.slice(0, 4).map((s) => <ServerCard key={s.id} server={s} />)}
          </div>
        </div>

        <div>
          <SectionHeader
            title="Top players"
            action={<Button variant="outline" size="sm" asChild><Link to="/rankings">Full rankings</Link></Button>}
          />
          <div className="rounded-xl border border-border bg-card p-3">
            <Tabs value={rankingPeriod} onValueChange={setRankingPeriod}>
              <TabsList className="grid w-full grid-cols-5 bg-surface">
                <TabsTrigger value="today">Today</TabsTrigger>
                <TabsTrigger value="week">Week</TabsTrigger>
                <TabsTrigger value="month">Month</TabsTrigger>
                <TabsTrigger value="season">Season</TabsTrigger>
                <TabsTrigger value="all">All</TabsTrigger>
              </TabsList>
            </Tabs>

            {/* Top 3 podium */}
            <div className="mt-4 grid grid-cols-3 gap-2">
              {rankings.slice(0, 3).map((r, i) => (
                <div key={r.player.id} className={`rounded-lg border p-3 text-center transition-transform ${i === 0 ? "border-primary/40 bg-primary/5 -translate-y-1" : "border-border bg-surface"}`}>
                  <div className="text-2xl">{["🥇", "🥈", "🥉"][i]}</div>
                  <div className="mt-1 truncate text-sm font-semibold">{r.player.name}</div>
                  <div className="font-mono text-xs text-secondary">{r.rating.toFixed(2)}</div>
                </div>
              ))}
            </div>

            <div className="mt-3 divide-y divide-border/50">
              {rankings.slice(3, 10).map((r) => (
                <PlayerRow key={r.player.id} player={r.player} position={r.position} />
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Recent punishments + News */}
      <section className="mt-10 grid gap-6 lg:grid-cols-[1fr_1fr]">
        <div>
          <SectionHeader
            title="Recent punishments"
            action={<Button variant="outline" size="sm" asChild><Link to="/punishments">See all</Link></Button>}
          />
          <div className="overflow-hidden rounded-xl border border-border bg-card">
            <table className="w-full text-sm">
              <thead className="bg-surface text-left text-xs uppercase tracking-wider text-muted-foreground">
                <tr>
                  <th className="px-3 py-2.5 font-medium">Player</th>
                  <th className="px-3 py-2.5 font-medium">Type</th>
                  <th className="px-3 py-2.5 font-medium">Reason</th>
                  <th className="px-3 py-2.5 font-medium">Admin</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-border/40">
                {punishments.slice(0, 6).map((p) => (
                  <tr key={p.id} className="transition-colors hover:bg-accent/40">
                    <td className="px-3 py-2.5 font-medium">{p.playerName}</td>
                    <td className="px-3 py-2.5">
                      <Badge variant="outline" className={`capitalize ${p.type === "ban" ? "border-destructive/40 text-destructive" : p.type === "mute" ? "border-warning/40 text-warning" : "border-border text-muted-foreground"}`}>{p.type}</Badge>
                    </td>
                    <td className="px-3 py-2.5 text-muted-foreground">{p.reason}</td>
                    <td className="px-3 py-2.5 text-muted-foreground">{p.admin}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        <div>
          <SectionHeader
            title="Latest news"
            action={<Button variant="outline" size="sm" asChild><Link to="/news">All news</Link></Button>}
          />
          <div className="grid gap-3">
            {news.slice(0, 4).map((n) => (
              <Link
                key={n.id}
                to="/news/$slug"
                params={{ slug: n.slug }}
                className="group flex items-start gap-4 rounded-xl border border-border bg-card p-4 transition-all duration-200 hover:border-primary/40 hover:shadow-elevated"
              >
                <div className="grid h-14 w-14 shrink-0 place-items-center rounded-lg bg-surface-elevated text-2xl">{n.cover}</div>
                <div className="min-w-0 flex-1">
                  <div className="flex items-center gap-2">
                    <Badge variant="outline" className="border-primary/30 text-secondary">{n.category}</Badge>
                    <span className="text-xs text-muted-foreground">{n.date} · {n.readMin} min read</span>
                  </div>
                  <h3 className="mt-1 truncate font-display text-base font-semibold transition-colors group-hover:text-secondary">{n.title}</h3>
                  <p className="mt-0.5 line-clamp-1 text-sm text-muted-foreground">{n.excerpt}</p>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}