import { createFileRoute, notFound } from "@tanstack/react-router";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { StatCard } from "@/components/common/StatCard";
import { players, punishments } from "@/features/_mock/data";
import { UserPlus, MessageCircle, Flag, Trophy, Target, Zap, Crown, Flame, Skull } from "lucide-react";
import { ReportDialog } from "@/features/reports/ReportDialog";
import { LineChart, Line, XAxis, YAxis, ResponsiveContainer, Tooltip } from "recharts";
import { formatGEL, LariMark } from "@/lib/currency";
import { usePagination, Pager } from "@/components/common/DataPager";
import { useState } from "react";

export const Route = createFileRoute("/_public/players/$playerId")({
  loader: ({ params }) => {
    const p = players.find((x) => x.id === params.playerId);
    if (!p) throw notFound();
    return { player: p };
  },
  head: ({ loaderData }) => ({
    meta: [{ title: loaderData ? `${loaderData.player.name} — Player profile` : "Player" }],
  }),
  component: PlayerProfile,
});

function PlayerProfile() {
  const { player } = Route.useLoaderData();
  const chartData = Array.from({ length: 12 }, (_, i) => ({ m: `M${i + 1}`, r: 0.9 + Math.random() * 0.6 }));
  const playerPunishments = punishments.filter((p) => p.playerId === player.id);

  const matches = generateMatches(player.id, 34);
  const purchases = generatePurchases(player.id, 12);
  const achievements = ACHIEVEMENTS;
  const [mp, setMp] = useState(1);
  const perPage = 8;
  const pagedMatches = matches.slice((mp - 1) * perPage, mp * perPage);
  const matchPages = Math.max(1, Math.ceil(matches.length / perPage));

  return (
    <div className="mx-auto max-w-[1400px] px-4 py-6">
      <div className="relative overflow-hidden rounded-2xl border border-border gradient-hero p-6">
        <div className="grid gap-6 md:grid-cols-[auto_1fr_auto] md:items-center">
          <div className="relative">
            <Avatar className="h-24 w-24 border-2 border-primary/40 shadow-glow"><AvatarImage src={player.avatar} /><AvatarFallback>{player.name[0]}</AvatarFallback></Avatar>
            <span className={`absolute bottom-1 right-1 h-4 w-4 rounded-full border-2 border-background ${player.onlineStatus === "in-server" ? "bg-success" : player.onlineStatus === "online" ? "bg-info" : "bg-muted-foreground/40"}`} />
          </div>
          <div className="min-w-0">
            <div className="flex flex-wrap items-center gap-2">
              <h1 className="font-display text-3xl font-bold">{player.name}</h1>
              {player.privileges.map((pv: string) => <Badge key={pv} className="gradient-primary text-primary-foreground">{pv}</Badge>)}
            </div>
            <div className="mt-1 font-mono text-xs text-muted-foreground">{player.steamId}</div>
            <div className="mt-3 flex flex-wrap gap-4 text-sm">
              <span>{player.rank} · Level {player.level}</span>
              <span className="text-muted-foreground">Country: {player.country}</span>
              <span className="text-muted-foreground">{player.currentServer ? `On ${player.currentServer}` : `Last seen ${player.lastSeen}`}</span>
            </div>
          </div>
          <div className="flex flex-wrap gap-2">
            <Button className="gradient-primary text-primary-foreground shadow-glow hover:opacity-95"><UserPlus className="mr-1.5 h-4 w-4" /> Add friend</Button>
            <Button variant="outline"><MessageCircle className="mr-1.5 h-4 w-4" /> Message</Button>
            <ReportDialog
              playerId={player.id}
              playerName={player.name}
              serverId={player.currentServer ?? undefined}
              trigger={<Button variant="outline" size="icon" title="Report player"><Flag className="h-4 w-4" /></Button>}
            />
          </div>
        </div>
      </div>

      <div className="mt-6 grid grid-cols-2 gap-3 md:grid-cols-4 xl:grid-cols-8">
        <StatCard label="Rating" value={player.rating} tone="primary" />
        <StatCard label="K/D" value={player.kd} tone="success" />
        <StatCard label="Kills" value={player.kills.toLocaleString()} />
        <StatCard label="Deaths" value={player.deaths.toLocaleString()} />
        <StatCard label="HS %" value={`${player.headshotPct}%`} />
        <StatCard label="MVPs" value={player.mvps} />
        <StatCard label="Wins" value={player.wins} />
        <StatCard label="Playtime" value={`${player.playtimeHours}h`} />
      </div>

      <Tabs defaultValue="stats" className="mt-8">
        <TabsList>
          <TabsTrigger value="stats">Statistics</TabsTrigger>
          <TabsTrigger value="matches">Matches</TabsTrigger>
          <TabsTrigger value="purchases">Purchases</TabsTrigger>
          <TabsTrigger value="punishments">Punishments</TabsTrigger>
        </TabsList>
        <TabsContent value="stats">
          <div className="grid gap-4 md:grid-cols-[1fr_320px]">
            <div className="rounded-xl border border-border bg-card p-4">
              <div className="mb-2 text-sm font-medium">Rating history</div>
              <div className="h-64">
                <ResponsiveContainer width="100%" height="100%">
                  <LineChart data={chartData}>
                    <XAxis dataKey="m" stroke="currentColor" className="text-xs text-muted-foreground" />
                    <YAxis stroke="currentColor" className="text-xs text-muted-foreground" />
                    <Tooltip contentStyle={{ background: "var(--color-card)", border: "1px solid var(--color-border)", borderRadius: 8 }} />
                    <Line type="monotone" dataKey="r" stroke="var(--color-primary)" strokeWidth={2} dot={false} />
                  </LineChart>
                </ResponsiveContainer>
              </div>
            </div>
            <div className="rounded-xl border border-border bg-card p-4">
              <div className="mb-3 text-sm font-medium">Favorite weapons</div>
              <div className="space-y-3 text-sm">
                {[
                  { name: "AK-47", kills: 4820, pct: 82 },
                  { name: "M4A4",  kills: 3140, pct: 61 },
                  { name: "AWP",   kills: 1980, pct: 44 },
                  { name: "Desert Eagle", kills: 970, pct: 22 },
                ].map((w) => (
                  <div key={w.name}>
                    <div className="mb-1 flex justify-between text-xs">
                      <span>{w.name}</span>
                      <span className="text-muted-foreground">{w.kills.toLocaleString()} kills</span>
                    </div>
                    <div className="h-1.5 overflow-hidden rounded-full bg-surface">
                      <div className="h-full gradient-primary" style={{ width: `${w.pct}%` }} />
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="mt-4 rounded-xl border border-border bg-card p-4">
            <div className="mb-3 flex items-center gap-2 text-sm font-medium"><Trophy className="h-4 w-4 text-secondary" /> Achievements</div>
            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
              {achievements.map((a) => {
                const Icon = a.icon;
                return (
                  <div key={a.name} className={`flex items-start gap-3 rounded-lg border p-3 ${a.unlocked ? "border-primary/40 bg-primary/5" : "border-border bg-surface/40 opacity-70"}`}>
                    <div className="grid h-9 w-9 place-items-center rounded-md bg-surface-elevated">
                      <Icon className="h-4 w-4 text-secondary" />
                    </div>
                    <div>
                      <div className="text-sm font-medium">{a.name}</div>
                      <div className="text-xs text-muted-foreground">{a.desc}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </TabsContent>
        <TabsContent value="matches">
          <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 text-muted-foreground">
                <tr><th className="px-3 py-2.5">Date</th><th className="px-3 py-2.5">Map</th><th className="px-3 py-2.5">Result</th><th className="px-3 py-2.5">Score</th><th className="px-3 py-2.5">K/D/A</th><th className="px-3 py-2.5">HS%</th><th className="px-3 py-2.5">Rating</th></tr>
              </thead>
              <tbody className="divide-y divide-border/40">
                {pagedMatches.map((m) => (
                  <tr key={m.id} className="hover:bg-accent/40">
                    <td className="px-3 py-2.5 text-muted-foreground">{m.date}</td>
                    <td className="px-3 py-2.5 font-mono uppercase text-secondary">{m.map}</td>
                    <td className="px-3 py-2.5"><Badge variant="outline" className={m.win ? "border-success/40 text-success" : "border-destructive/40 text-destructive"}>{m.win ? "Win" : "Loss"}</Badge></td>
                    <td className="px-3 py-2.5 font-mono">{m.score}</td>
                    <td className="px-3 py-2.5 font-mono">{m.k}/{m.d}/{m.a}</td>
                    <td className="px-3 py-2.5">{m.hs}%</td>
                    <td className="px-3 py-2.5 font-mono font-semibold text-secondary">{m.rating}</td>
                  </tr>
                ))}
              </tbody>
            </table>
            <div className="px-3 pb-3"><Pager page={mp} totalPages={matchPages} onChange={setMp} total={matches.length} /></div>
          </div>
        </TabsContent>
        <TabsContent value="purchases">
          <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 text-muted-foreground">
                <tr><th className="px-3 py-2.5">Date</th><th className="px-3 py-2.5">Item</th><th className="px-3 py-2.5">Type</th><th className="px-3 py-2.5">Amount</th></tr>
              </thead>
              <tbody className="divide-y divide-border/40">
                {purchases.map((p) => (
                  <tr key={p.id} className="hover:bg-accent/40">
                    <td className="px-3 py-2.5 text-muted-foreground">{p.date}</td>
                    <td className="px-3 py-2.5">{p.item}</td>
                    <td className="px-3 py-2.5 text-muted-foreground">{p.type}</td>
                    <td className="px-3 py-2.5 flex items-center gap-1 font-mono"><LariMark className="h-3.5 w-3.5 text-secondary" />{formatGEL(p.amount, { withSymbol: false })}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </TabsContent>
        <TabsContent value="punishments">
          <div className="overflow-hidden rounded-xl border border-border bg-card">
            {playerPunishments.length === 0 ? (
              <div className="p-6 text-center text-sm text-muted-foreground">No punishments on record.</div>
            ) : (
              <table className="w-full text-sm">
                <thead className="bg-surface text-left text-xs uppercase text-muted-foreground"><tr><th className="px-3 py-2">Type</th><th className="px-3 py-2">Reason</th><th className="px-3 py-2">Admin</th><th className="px-3 py-2">Date</th></tr></thead>
                <tbody className="divide-y divide-border/40">
                  {playerPunishments.map((p) => (
                    <tr key={p.id}><td className="px-3 py-2 capitalize">{p.type}</td><td className="px-3 py-2">{p.reason}</td><td className="px-3 py-2 text-muted-foreground">{p.admin}</td><td className="px-3 py-2 text-muted-foreground">{p.issuedAt}</td></tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
}

const ACHIEVEMENTS = [
  { name: "Ace!",        desc: "Get 5 kills in a single round", icon: Zap,    unlocked: true  },
  { name: "Clutch King", desc: "Win 100 clutches",              icon: Crown,  unlocked: true  },
  { name: "Marksman",    desc: "Reach 60% headshot ratio",      icon: Target, unlocked: true  },
  { name: "Wildfire",    desc: "5 kill streak with pistol",     icon: Flame,  unlocked: false },
  { name: "Untouchable", desc: "Survive full round 50 times",   icon: Trophy, unlocked: true  },
  { name: "Sniper Elite",desc: "1000 AWP kills",                icon: Target, unlocked: false },
  { name: "Rampage",     desc: "Kill 6 enemies in 15s",         icon: Skull,  unlocked: false },
  { name: "MVP x100",    desc: "Earn 100 MVPs",                 icon: Trophy, unlocked: true  },
];

function generateMatches(seed: string, n: number) {
  const maps = ["de_mirage", "de_dust2", "de_inferno", "de_nuke", "de_ancient", "de_anubis", "de_vertigo", "de_overpass"];
  const rng = mulberry32(hash(seed));
  const out = [];
  for (let i = 0; i < n; i++) {
    const map = maps[Math.floor(rng() * maps.length)];
    const win = rng() > 0.42;
    const s1 = 13 + Math.floor(rng() * 3);
    const s2 = Math.floor(rng() * 13);
    const score = win ? `${s1}:${s2}` : `${s2}:${s1}`;
    const k = 12 + Math.floor(rng() * 22);
    const d = 8  + Math.floor(rng() * 18);
    const a = 2  + Math.floor(rng() * 10);
    const hs = 30 + Math.floor(rng() * 45);
    const rating = (0.7 + rng() * 1.2).toFixed(2);
    const day = 1 + i;
    out.push({ id: `m-${i}`, date: `2026-07-${String(day).padStart(2, "0")}`, map, win, score, k, d, a, hs, rating });
  }
  return out;
}
function generatePurchases(seed: string, n: number) {
  const items = [
    { item: "VIP · 30 days",       type: "Privilege", amount: 15 },
    { item: "Premium · 30 days",   type: "Privilege", amount: 30 },
    { item: "XP Boost 24h",        type: "Boost",     amount: 3 },
    { item: "Purple Zone+ Monthly",type: "Subscription", amount: 9.99 },
    { item: "AWP | Neo-Noir skin", type: "Cosmetic",  amount: 5.5 },
    { item: "Custom tag",          type: "Cosmetic",  amount: 4 },
  ];
  const rng = mulberry32(hash(seed + "p"));
  return Array.from({ length: n }, (_, i) => {
    const it = items[Math.floor(rng() * items.length)];
    return { id: `pu-${i}`, date: `2026-0${(i % 9) + 1}-${String((i * 3) % 27 + 1).padStart(2, "0")}`, ...it };
  });
}
function hash(s: string) { let h = 2166136261; for (let i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h = Math.imul(h, 16777619); } return h >>> 0; }
function mulberry32(a: number) { return function () { a |= 0; a = a + 0x6D2B79F5 | 0; let t = Math.imul(a ^ a >>> 15, 1 | a); t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t; return ((t ^ t >>> 14) >>> 0) / 4294967296; }; }