import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { PageHeader, SectionHeader } from "@/components/common/PageHeader";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import { Switch } from "@/components/ui/switch";
import { GripVertical, Plus, Trash2 } from "lucide-react";
import { toast } from "sonner";

export const Route = createFileRoute("/admin/rules")({
  head: () => ({ meta: [{ title: "Rules — Admin" }, { name: "description", content: "Edit the rules published to players." }] }),
  component: AdminRulesPage,
});

type Section = { id: string; title: string; enabled: boolean; rules: { id: string; text: string; severity: "warn" | "mute" | "ban" }[] };
const initial: Section[] = [
  { id: "s1", title: "General conduct", enabled: true, rules: [
    { id: "r1", text: "No cheating, scripting, or exploiting bugs.", severity: "ban" },
    { id: "r2", text: "No racism, hate speech or slurs.", severity: "ban" },
    { id: "r3", text: "No spamming voice or chat.", severity: "mute" },
  ]},
  { id: "s2", title: "Gameplay", enabled: true, rules: [
    { id: "r4", text: "No intentional team damage.", severity: "warn" },
    { id: "r5", text: "No griefing or ghosting.", severity: "ban" },
  ]},
  { id: "s3", title: "Marketplace", enabled: false, rules: [
    { id: "r6", text: "No IRL trading outside the platform.", severity: "ban" },
  ]},
];

const SEV: Record<string, string> = { warn: "border-warning/40 text-warning", mute: "border-primary/40 text-primary", ban: "border-destructive/40 text-destructive" };

function AdminRulesPage() {
  const [sections, setSections] = useState<Section[]>(initial);
  return (
    <div className="space-y-6">
      <PageHeader
        title="Rules"
        description="Server rules published to players. Drag to reorder."
        actions={
          <div className="flex gap-2">
            <Button variant="outline">Preview</Button>
            <Button className="gradient-primary text-primary-foreground" onClick={() => toast.success("Rules published")}>Publish</Button>
          </div>
        }
      />
      {sections.map((s, si) => (
        <section key={s.id} className="rounded-xl border border-border bg-card p-5">
          <header className="mb-3 flex items-center gap-2">
            <GripVertical className="h-4 w-4 cursor-grab text-muted-foreground" />
            <Input value={s.title} onChange={(e) => setSections((xs) => xs.map((x, i) => i === si ? { ...x, title: e.target.value } : x))} className="max-w-sm font-display text-lg font-semibold" />
            <div className="ml-auto flex items-center gap-3">
              <label className="flex items-center gap-2 text-xs text-muted-foreground">Enabled <Switch checked={s.enabled} onCheckedChange={(v) => setSections((xs) => xs.map((x, i) => i === si ? { ...x, enabled: v } : x))} /></label>
              <Button size="sm" variant="ghost" className="text-destructive"><Trash2 className="h-4 w-4" /></Button>
            </div>
          </header>
          <ul className="space-y-2">
            {s.rules.map((r) => (
              <li key={r.id} className="flex items-start gap-2 rounded-md border border-border/60 bg-surface/40 p-2.5">
                <GripVertical className="mt-1 h-4 w-4 cursor-grab text-muted-foreground" />
                <Textarea rows={2} defaultValue={r.text} className="flex-1" />
                <Badge variant="outline" className={`capitalize ${SEV[r.severity]}`}>{r.severity}</Badge>
                <Button size="icon" variant="ghost" className="text-destructive"><Trash2 className="h-4 w-4" /></Button>
              </li>
            ))}
          </ul>
          <Button variant="outline" size="sm" className="mt-3"><Plus className="mr-1 h-4 w-4" /> Add rule</Button>
        </section>
      ))}
      <Button variant="outline" onClick={() => setSections((xs) => [...xs, { id: `s-${Date.now()}`, title: "New section", enabled: true, rules: [] }])}><Plus className="mr-1 h-4 w-4" /> Add section</Button>
    </div>
  );
}