import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { PageHeader } from "@/components/common/PageHeader";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { players, servers } from "@/features/_mock/data";
import { cn } from "@/lib/utils";
import { Send, Search, Ban, VolumeX } from "lucide-react";

export const Route = createFileRoute("/admin/chat")({
  head: () => ({ meta: [{ title: "Chat — Admin" }, { name: "description", content: "Monitor and moderate live chat across servers." }] }),
  component: AdminChatPage,
});

const channels = [
  { id: "global", name: "Global lobby", online: 214, kind: "global" },
  ...servers.slice(0, 6).map((s) => ({ id: s.id, name: s.name, online: s.players, kind: "server" as const })),
];

function AdminChatPage() {
  const [selected, setSelected] = useState(channels[0].id);
  const active = channels.find((c) => c.id === selected)!;
  const [q, setQ] = useState("");
  const [draft, setDraft] = useState("");

  const messages = Array.from({ length: 14 }, (_, i) => ({
    id: i, player: players[i % players.length], time: `20:${(10 + i).toString().padStart(2, "0")}`,
    body: [
      "gg wp", "nice shot", "who wants to trade?", "AWP too broken", "queue up", "map ban?", "clutch !", "rip me",
      "any admin online?", "server laggy", "mid pushing", "eco round", "rush b", "smoke xbox",
    ][i], flagged: i === 3 || i === 8,
  }));

  return (
    <div>
      <PageHeader title="Chat moderation" description="Monitor global and per-server chat live." />
      <div className="grid overflow-hidden rounded-xl border border-border bg-card md:grid-cols-[260px_1fr] md:h-[600px]">
        <aside className="border-b border-border/60 md:border-b-0 md:border-r">
          <div className="p-2"><Input placeholder="Filter channels…" /></div>
          <ul className="max-h-[540px] overflow-y-auto">
            {channels.map((c) => (
              <li key={c.id}>
                <button onClick={() => setSelected(c.id)} className={cn("flex w-full items-center justify-between px-3 py-2 text-left text-sm transition-colors", selected === c.id ? "bg-primary/10" : "hover:bg-surface/60")}>
                  <span className="truncate">{c.name}</span>
                  <Badge variant="outline" className="text-xs">{c.online}</Badge>
                </button>
              </li>
            ))}
          </ul>
        </aside>

        <section className="flex min-h-[420px] flex-col">
          <header className="flex items-center justify-between border-b border-border/60 px-4 py-3">
            <div>
              <div className="font-display font-semibold">{active.name}</div>
              <div className="text-xs text-success">● {active.online} online</div>
            </div>
            <div className="relative w-64">
              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search messages…" className="pl-9" />
            </div>
          </header>

          <div className="flex-1 space-y-2 overflow-y-auto p-4">
            {messages.filter((m) => q === "" || m.body.toLowerCase().includes(q.toLowerCase()) || m.player.name.toLowerCase().includes(q.toLowerCase())).map((m) => (
              <div key={m.id} className={cn("group flex items-start gap-2 rounded-md px-2 py-1.5", m.flagged && "bg-destructive/10")}>
                <Avatar className="h-7 w-7"><AvatarImage src={m.player.avatar} /><AvatarFallback>{m.player.name[0]}</AvatarFallback></Avatar>
                <div className="min-w-0 flex-1">
                  <div className="flex items-baseline gap-2 text-xs">
                    <span className="font-semibold text-foreground">{m.player.name}</span>
                    <span className="text-muted-foreground">{m.time}</span>
                    {m.flagged && <Badge variant="outline" className="border-destructive/40 text-destructive">Flagged</Badge>}
                  </div>
                  <div className="text-sm">{m.body}</div>
                </div>
                <div className="hidden gap-1 group-hover:flex">
                  <Button size="icon" variant="ghost" className="h-7 w-7 text-warning"><VolumeX className="h-3.5 w-3.5" /></Button>
                  <Button size="icon" variant="ghost" className="h-7 w-7 text-destructive"><Ban className="h-3.5 w-3.5" /></Button>
                </div>
              </div>
            ))}
          </div>

          <footer className="flex items-center gap-2 border-t border-border/60 p-3">
            <Input value={draft} onChange={(e) => setDraft(e.target.value)} placeholder="Message as admin…" />
            <Button size="icon" className="gradient-primary text-primary-foreground"><Send className="h-4 w-4" /></Button>
          </footer>
        </section>
      </div>
    </div>
  );
}