import { createFileRoute } from "@tanstack/react-router";
import { PageHeader } from "@/components/common/PageHeader";
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Search } from "lucide-react";

export const Route = createFileRoute("/_public/rules/")({
  head: () => ({ meta: [{ title: "Rules — Purple Zone" }, { name: "description", content: "Community rules and guidelines for players." }] }),
  component: RulesPage,
});

const CATEGORIES = [
  { title: "General", rules: [
    { n: "1.1", sev: "info", text: "Respect all players and staff." },
    { n: "1.2", sev: "warn", text: "No hate speech or discrimination." },
    { n: "1.3", sev: "high", text: "No cheating, scripting or exploiting bugs." },
  ]},
  { title: "Gameplay", rules: [
    { n: "2.1", sev: "warn", text: "No intentional team damage or griefing." },
    { n: "2.2", sev: "info", text: "Avoid extreme camping in short-round modes." },
  ]},
  { title: "Chat & voice", rules: [
    { n: "3.1", sev: "info", text: "No spam in chat or voice." },
    { n: "3.2", sev: "warn", text: "No mic-earraping or music playback." },
  ]},
];
const SEV: Record<string, string> = { info: "border-info/40 text-info", warn: "border-warning/40 text-warning", high: "border-destructive/40 text-destructive" };

function RulesPage() {
  return (
    <div className="mx-auto max-w-4xl px-4 py-6">
      <PageHeader title="Rules & guidelines" description="Last updated July 18, 2026." />
      <div className="relative mb-4"><Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" /><Input placeholder="Search rules…" className="pl-9" /></div>
      {CATEGORIES.map((cat) => (
        <div key={cat.title} className="mb-6 rounded-xl border border-border bg-card p-4">
          <h2 className="font-display text-lg font-semibold">{cat.title}</h2>
          <Accordion type="multiple" className="mt-2">
            {cat.rules.map((r) => (
              <AccordionItem key={r.n} value={r.n}>
                <AccordionTrigger>
                  <span className="flex items-center gap-3"><span className="font-mono text-xs text-muted-foreground">{r.n}</span><Badge variant="outline" className={SEV[r.sev]}>{r.sev}</Badge><span>{r.text}</span></span>
                </AccordionTrigger>
                <AccordionContent className="text-sm text-muted-foreground">Detailed explanation of rule {r.n} and how it is enforced across servers.</AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
      ))}
    </div>
  );
}