import { createFileRoute, Link } from "@tanstack/react-router";
import { DashboardLayout } from "@/components/dashboard-layout";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { DashboardHeader } from "@/components/dashboard/widgets";
import { BookOpen, HelpCircle, LifeBuoy, MessageSquare, Search, Sparkles } from "lucide-react";
import { requireAuth } from "@/lib/auth/guards";

export const Route = createFileRoute("/help")({
  beforeLoad: ({ context, location }) => requireAuth(context, location),
  head: () => ({ meta: [{ title: "Help Center — VotersAlert" }] }),
  component: HelpPage,
});

const faqs = [
  {
    q: "How is delivery rate calculated?",
    a: "Delivered messages divided by total accepted by the gateway, excluding invalid numbers.",
  },
  {
    q: "Can I run multi-channel campaigns from one wallet?",
    a: "Yes — the wallet is shared across SMS, WhatsApp, Voice, Email, Facebook and Google Ads.",
  },
  {
    q: "What compliance frameworks are enforced?",
    a: "INEC §41, NCC Mobile Numbering, and NDPR consent rules are auto-scanned before launch.",
  },
  {
    q: "How do I invite reviewers to my workspace?",
    a: "Open Settings → Workspace → Members and send an invite by email.",
  },
  {
    q: "Are refunds available for failed deliveries?",
    a: "Yes — failed messages are auto-credited to your wallet within 24 hours.",
  },
];

function HelpPage() {
  return (
    <DashboardLayout>
      <div className="p-4 md:p-6 space-y-6 animate-fade-in">
        <DashboardHeader
          eyebrow={
            <>
              <LifeBuoy className="h-3 w-3" /> Support
            </>
          }
          title="Help Center"
          subtitle="Documentation, FAQs, and human support from the VotersAlert team."
        />

        <Card className="relative overflow-hidden">
          <div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-accent/5 to-transparent pointer-events-none" />
          <CardContent className="pt-8 pb-8 relative text-center space-y-4">
            <h2 className="text-2xl font-semibold tracking-tight">How can we help?</h2>
            <div className="max-w-xl mx-auto relative">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input placeholder="Search docs, guides, API reference…" className="pl-9 h-11" />
            </div>
          </CardContent>
        </Card>

        <div className="grid gap-4 md:grid-cols-3">
          {[
            {
              icon: BookOpen,
              title: "Documentation",
              desc: "Step-by-step guides for every module.",
            },
            {
              icon: Sparkles,
              title: "AI playbooks",
              desc: "Proven prompts and content templates.",
            },
            {
              icon: MessageSquare,
              title: "Talk to support",
              desc: "Average response time: under 4 minutes.",
            },
          ].map((c) => (
            <Card key={c.title} className="hover:shadow-md transition-shadow">
              <CardContent className="pt-5">
                <div className="h-9 w-9 rounded-md bg-primary/10 flex items-center justify-center mb-3">
                  <c.icon className="h-4 w-4 text-primary" />
                </div>
                <div className="font-medium">{c.title}</div>
                <div className="text-xs text-muted-foreground mt-1">{c.desc}</div>
              </CardContent>
            </Card>
          ))}
        </div>

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <HelpCircle className="h-4 w-4" /> Frequently asked
            </CardTitle>
            <CardDescription>
              Top questions from political advertisers on the platform.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Accordion type="single" collapsible className="w-full">
              {faqs.map((f, i) => (
                <AccordionItem key={f.q} value={`item-${i}`}>
                  <AccordionTrigger className="text-left">{f.q}</AccordionTrigger>
                  <AccordionContent className="text-sm text-muted-foreground">
                    {f.a}
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="pt-5 flex flex-col sm:flex-row sm:items-center gap-3 justify-between">
            <div>
              <div className="font-medium">Still need help?</div>
              <div className="text-xs text-muted-foreground">
                Our support team is online 24/7, including election weekends.
              </div>
            </div>
            <Button asChild>
              <Link to="/notifications">Contact support</Link>
            </Button>
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  );
}