import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { PageHeader, SectionHeader } from "@/components/common/PageHeader";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Switch } from "@/components/ui/switch";
import { Badge } from "@/components/ui/badge";
import { toast } from "sonner";
import { FileText, Layout, ShieldQuestion } from "lucide-react";

export const Route = createFileRoute("/admin/content")({
  head: () => ({ meta: [{ title: "Content — Admin" }, { name: "description", content: "Edit legal pages, marketing copy and FAQs." }] }),
  component: AdminContentPage,
});

type Page = { id: string; title: string; slug: string; updated: string; published: boolean };
const pages: Page[] = [
  { id: "p1", title: "Terms of service", slug: "/terms", updated: "2026-05-04", published: true },
  { id: "p2", title: "Privacy policy", slug: "/privacy", updated: "2026-05-04", published: true },
  { id: "p3", title: "Refund policy", slug: "/refunds", updated: "2026-06-10", published: true },
  { id: "p4", title: "About Purple Zone", slug: "/about", updated: "2026-04-18", published: true },
  { id: "p5", title: "Anti-cheat policy", slug: "/anti-cheat", updated: "2026-07-14", published: false },
];

const faqs = [
  { q: "How do I convert GEL to WGC?", a: "Open Account → Balance and use the converter. 1 ₾ = 100 WGC." },
  { q: "Can I gift a subscription?", a: "Yes, from the Subscription page choose Gift and enter a recipient." },
  { q: "How do I appeal a punishment?", a: "Open Account → Punishments and press Appeal on the row." },
];

function AdminContentPage() {
  const [selected, setSelected] = useState(pages[0]);

  return (
    <div>
      <PageHeader title="Content" description="Static pages, marketing copy and FAQs." />
      <Tabs defaultValue="pages">
        <TabsList>
          <TabsTrigger value="pages"><Layout className="mr-1 h-3.5 w-3.5" /> Pages</TabsTrigger>
          <TabsTrigger value="marketing"><FileText className="mr-1 h-3.5 w-3.5" /> Marketing blocks</TabsTrigger>
          <TabsTrigger value="faq"><ShieldQuestion className="mr-1 h-3.5 w-3.5" /> FAQ</TabsTrigger>
        </TabsList>

        <TabsContent value="pages" className="mt-4 grid gap-4 lg:grid-cols-[280px_1fr]">
          <aside className="rounded-xl border border-border bg-card p-2">
            {pages.map((p) => (
              <button key={p.id} onClick={() => setSelected(p)} className={`flex w-full items-center justify-between rounded-md px-3 py-2 text-left text-sm transition-colors ${selected.id === p.id ? "bg-primary/15 text-secondary" : "hover:bg-surface/60"}`}>
                <span className="truncate">{p.title}</span>
                {p.published ? <Badge variant="outline" className="border-success/40 text-success">Live</Badge> : <Badge variant="outline">Draft</Badge>}
              </button>
            ))}
          </aside>
          <div className="rounded-xl border border-border bg-card p-6">
            <SectionHeader title={selected.title} description={`Last updated ${selected.updated}`} action={<Button className="gradient-primary text-primary-foreground" onClick={() => toast.success("Saved")}>Save</Button>} />
            <div className="grid gap-4 sm:grid-cols-2">
              <div className="space-y-1.5"><Label>Title</Label><Input defaultValue={selected.title} /></div>
              <div className="space-y-1.5"><Label>Slug</Label><Input defaultValue={selected.slug} /></div>
            </div>
            <div className="mt-4 space-y-1.5"><Label>Body (Markdown)</Label><Textarea rows={12} defaultValue={`# ${selected.title}\n\nWrite the page content here…`} className="font-mono text-xs" /></div>
            <div className="mt-4 flex items-center justify-between rounded-md border border-border/60 bg-surface/40 p-3">
              <div><div className="font-medium">Published</div><div className="text-xs text-muted-foreground">Visible to visitors</div></div>
              <Switch defaultChecked={selected.published} />
            </div>
          </div>
        </TabsContent>

        <TabsContent value="marketing" className="mt-4 space-y-3">
          {["Home hero", "Store CTA", "Subscription pitch", "Footer note"].map((b) => (
            <div key={b} className="rounded-xl border border-border bg-card p-4">
              <div className="flex items-center justify-between">
                <div className="font-medium">{b}</div>
                <Switch defaultChecked />
              </div>
              <Textarea rows={2} className="mt-2" defaultValue={`Copy for ${b}`} />
            </div>
          ))}
        </TabsContent>

        <TabsContent value="faq" className="mt-4 space-y-3">
          {faqs.map((f, i) => (
            <div key={i} className="rounded-xl border border-border bg-card p-4">
              <Input defaultValue={f.q} className="font-medium" />
              <Textarea rows={2} defaultValue={f.a} className="mt-2" />
            </div>
          ))}
          <Button variant="outline">Add FAQ</Button>
        </TabsContent>
      </Tabs>
    </div>
  );
}