import { createFileRoute } from "@tanstack/react-router";
import { Link } from "@tanstack/react-router";
import { Button } from "@/components/ui/button";
import { Shield, Users, MapPin, ClipboardList, Calendar, AlertTriangle, Check, Mail } from "lucide-react";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { useEffect, useState } from "react";
import { supabase } from "@/integrations/supabase/client";
import { toast } from "sonner";
import { Toaster } from "@/components/ui/sonner";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "GuardForce Pro — Security Guard Management Platform" },
      { name: "description", content: "Complete SaaS platform for security companies: guards, attendance, duty rosters, GPS patrol, incidents, and payroll." },
      { property: "og:title", content: "GuardForce Pro" },
      { property: "og:description", content: "Manage your security workforce end-to-end." },
    ],
  }),
  component: Index,
});

function Index() {
  const [authed, setAuthed] = useState(false);
  useEffect(() => {
    supabase.auth.getSession().then(({ data }) => setAuthed(!!data.session));
    const { data: sub } = supabase.auth.onAuthStateChange((_e, s) => setAuthed(!!s));
    return () => sub.subscription.unsubscribe();
  }, []);

  const features = [
    { icon: Users, title: "Guard Management", desc: "Profiles, IDs, documents, certifications" },
    { icon: Calendar, title: "Duty Rosters", desc: "Shift scheduling and rotations" },
    { icon: MapPin, title: "GPS Patrol", desc: "Live tracking and checkpoint scanning" },
    { icon: ClipboardList, title: "Attendance", desc: "QR, GPS and face verified check-ins" },
    { icon: AlertTriangle, title: "Incidents", desc: "Reports with photos and resolution tracking" },
    { icon: Shield, title: "Multi-tenant SaaS", desc: "Role-based access for every team" },
  ];

  const stats = [
    { value: "10K+", label: "Guards Managed" },
    { value: "99.9%", label: "Uptime SLA" },
    { value: "24/7", label: "Live Monitoring" },
    { value: "150+", label: "Client Sites" },
  ];

  const plans = [
    { name: "Starter", price: "$49", per: "/mo", features: ["Up to 25 guards", "Attendance & rosters", "Email support"] },
    { name: "Pro", price: "$149", per: "/mo", features: ["Up to 200 guards", "GPS patrol & incidents", "Payroll & invoicing", "Priority support"], featured: true },
    { name: "Enterprise", price: "Custom", per: "", features: ["Unlimited guards", "Multi-tenant", "SSO & audit logs", "Dedicated CSM"] },
  ];

  const faqs = [
    { q: "Can guards check in without internet?", a: "Yes — mobile check-ins queue offline and sync when connectivity returns." },
    { q: "Do you support QR-based patrol checkpoints?", a: "Yes. Print QR codes for each post; guards scan with the mobile app while on patrol." },
    { q: "Is the platform multi-tenant?", a: "Yes. Each company has isolated data with role-based access for admins, supervisors, guards and clients." },
    { q: "How is payroll calculated?", a: "Payroll is generated from verified attendance, shift hours and configurable rates per site or guard." },
  ];

  const scrollTo = (id: string) => (e: React.MouseEvent) => {
    e.preventDefault();
    document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  const [submitting, setSubmitting] = useState(false);
  const onContact = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const form = e.currentTarget;
    const f = new FormData(form);
    const name = String(f.get("name") || "").trim();
    const email = String(f.get("email") || "").trim();
    const message = String(f.get("message") || "").trim();
    if (!name || !email || !message) {
      toast.error("Please fill all fields");
      return;
    }
    setSubmitting(true);
    const { error } = await supabase.from("contact_messages").insert({ name, email, message });
    setSubmitting(false);
    if (error) {
      toast.error("Could not send message. Please try again.");
      return;
    }
    toast.success("Message sent! We'll get back to you soon.");
    form.reset();
  };

  return (
    <div className="min-h-screen bg-background">
      <Toaster />
      <header className="border-b bg-background/80 backdrop-blur-md sticky top-0 z-50">
        <div className="container mx-auto px-4 h-16 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="h-9 w-9 rounded-xl bg-gradient-primary grid place-items-center shadow-elegant">
              <Shield className="h-5 w-5 text-primary-foreground" />
            </div>
            <span className="font-bold tracking-tight text-lg">GuardForce Pro</span>
          </div>
          <nav className="hidden md:flex items-center gap-1 text-sm">
            <a href="#features" onClick={scrollTo("features")} className="px-3 py-2 rounded-md hover:bg-accent">Features</a>
            <a href="#pricing" onClick={scrollTo("pricing")} className="px-3 py-2 rounded-md hover:bg-accent">Pricing</a>
            <a href="#faq" onClick={scrollTo("faq")} className="px-3 py-2 rounded-md hover:bg-accent">FAQ</a>
            <a href="#contact" onClick={scrollTo("contact")} className="px-3 py-2 rounded-md hover:bg-accent">Contact</a>
          </nav>
          <Button asChild size="sm">
            <Link to={authed ? "/dashboard" : "/auth"}>{authed ? "Open Dashboard" : "Sign in"}</Link>
          </Button>
        </div>
      </header>
      <main>
        <section className="relative overflow-hidden bg-gradient-hero">
          <div className="absolute inset-0 bg-grid pointer-events-none" aria-hidden />
          <div className="absolute -top-32 left-1/2 -translate-x-1/2 h-72 w-[42rem] rounded-full bg-gradient-primary opacity-20 blur-3xl pointer-events-none" aria-hidden />
          <div className="container mx-auto px-4 py-24 md:py-32 text-center relative">
          <div className="inline-flex items-center gap-2 rounded-full border border-primary/15 bg-card/70 backdrop-blur px-3.5 py-1.5 text-xs font-medium text-muted-foreground mb-6 shadow-elegant">
            <span className="relative flex h-2 w-2">
              <span className="absolute inline-flex h-full w-full rounded-full bg-[var(--accent-emerald)] animate-pulse-dot" />
              <span className="relative inline-flex h-2 w-2 rounded-full bg-[var(--accent-emerald)]" />
            </span>
            Trusted by 150+ security operations
          </div>
          <h1 className="text-4xl md:text-6xl lg:text-7xl font-extrabold tracking-tight max-w-4xl mx-auto leading-[1.05]">
            Modern security guard management <span className="text-gradient-primary">for serious operators</span>
          </h1>
          <p className="mt-6 text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed">
            One platform to manage guards, attendance, duty rosters, GPS patrols, incidents and payroll — built for security companies, factories, hospitals, malls and corporates.
          </p>
          <div className="mt-10 flex flex-wrap gap-3 justify-center">
            <Button asChild size="lg" className="bg-gradient-primary shadow-glow hover:opacity-95 hover:scale-[1.02] transition-all h-12 px-7 text-base">
              <Link to={authed ? "/dashboard" : "/auth"}>{authed ? "Go to Dashboard" : "Get started"}</Link>
            </Button>
            <Button size="lg" variant="outline" onClick={scrollTo("features")} className="h-12 px-7 text-base bg-card/60 backdrop-blur">Explore features</Button>
          </div>
          <div className="mt-20 grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 max-w-4xl mx-auto">
            {stats.map((s) => (
              <div key={s.label} className="group rounded-2xl border border-primary/10 bg-card/70 backdrop-blur p-5 shadow-elegant hover:shadow-glow hover:-translate-y-1 transition-all duration-300">
                <div className="text-3xl font-extrabold text-gradient-primary">{s.value}</div>
                <div className="text-xs uppercase tracking-wider text-muted-foreground mt-2 font-medium">{s.label}</div>
              </div>
            ))}
          </div>
          </div>
        </section>
        <section id="features" className="container mx-auto px-4 pb-24 scroll-mt-20">
          <div className="text-center mb-14 pt-20">
            <div className="inline-block text-xs font-semibold uppercase tracking-[0.18em] text-primary mb-3">Platform</div>
            <h2 className="text-3xl md:text-5xl font-extrabold tracking-tight">Everything you need to <span className="text-gradient-primary">run security ops</span></h2>
            <p className="text-muted-foreground mt-4 text-lg max-w-xl mx-auto">Modules built for the realities of guarding work.</p>
          </div>
          <div className="grid gap-6 md:grid-cols-3">
            {features.map((f) => (
              <div key={f.title} className="group relative rounded-2xl border border-primary/10 bg-card p-7 transition-all duration-300 hover:shadow-glow hover:-translate-y-1 hover:border-primary/30 overflow-hidden">
                <div className="absolute inset-0 bg-gradient-primary opacity-0 group-hover:opacity-[0.03] transition-opacity" />
                <div className="relative h-12 w-12 rounded-2xl bg-gradient-primary grid place-items-center mb-5 shadow-elegant group-hover:scale-110 transition-transform">
                  <f.icon className="h-6 w-6 text-primary-foreground" />
                </div>
                <h3 className="font-bold text-lg">{f.title}</h3>
                <p className="text-sm text-muted-foreground mt-2 leading-relaxed">{f.desc}</p>
              </div>
            ))}
          </div>
        </section>
        <section id="pricing" className="bg-muted/30 border-y py-20 scroll-mt-20">
          <div className="container mx-auto px-4">
            <div className="text-center mb-14">
              <div className="inline-block text-xs font-semibold uppercase tracking-[0.18em] text-primary mb-3">Pricing</div>
              <h2 className="text-3xl md:text-5xl font-extrabold tracking-tight">Simple, <span className="text-gradient-primary">honest pricing</span></h2>
              <p className="text-muted-foreground mt-4 text-lg">Start small, scale with your operation.</p>
            </div>
            <div className="grid gap-6 md:grid-cols-3 max-w-5xl mx-auto">
              {plans.map((p) => (
                <div key={p.name} className={`relative rounded-2xl border bg-card p-7 transition-all duration-300 ${p.featured ? "shadow-glow ring-2 ring-primary/30 md:scale-[1.04] border-primary/20" : "border-primary/10 hover:shadow-elegant hover:-translate-y-1 hover:border-primary/30"}`}>
                  {p.featured && <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full bg-gradient-primary text-primary-foreground text-xs font-semibold shadow-elegant">Most Popular</div>}
                  <div className="flex items-baseline justify-between">
                    <h3 className="font-bold text-xl">{p.name}</h3>
                  </div>
                  <div className="mt-4 flex items-baseline gap-1">
                    <span className="text-5xl font-extrabold tracking-tight">{p.price}</span>
                    <span className="text-muted-foreground text-sm">{p.per}</span>
                  </div>
                  <ul className="mt-6 space-y-3 text-sm">
                    {p.features.map((ft) => (
                      <li key={ft} className="flex items-start gap-2">
                        <div className="h-5 w-5 rounded-full bg-primary/10 grid place-items-center mt-0.5 shrink-0">
                          <Check className="h-3 w-3 text-primary" strokeWidth={3} />
                        </div>
                        <span>{ft}</span>
                      </li>
                    ))}
                  </ul>
                  <Button asChild className={`mt-7 w-full h-11 ${p.featured ? "bg-gradient-primary shadow-elegant" : ""}`} variant={p.featured ? "default" : "outline"}>
                    <Link to={authed ? "/dashboard" : "/auth"}>{p.name === "Enterprise" ? "Contact sales" : "Start free"}</Link>
                  </Button>
                </div>
              ))}
            </div>
          </div>
        </section>
        <section id="faq" className="container mx-auto px-4 py-20 scroll-mt-20 max-w-3xl">
          <div className="text-center mb-12">
            <div className="inline-block text-xs font-semibold uppercase tracking-[0.18em] text-primary mb-3">FAQ</div>
            <h2 className="text-3xl md:text-5xl font-extrabold tracking-tight">Frequently asked <span className="text-gradient-primary">questions</span></h2>
          </div>
          <Accordion type="single" collapsible className="w-full space-y-3">
            {faqs.map((f, i) => (
              <AccordionItem key={f.q} value={`item-${i}`} className="border border-primary/10 rounded-2xl px-5 bg-card data-[state=open]:shadow-elegant transition-shadow">
                <AccordionTrigger className="text-left font-semibold hover:no-underline">{f.q}</AccordionTrigger>
                <AccordionContent className="text-muted-foreground leading-relaxed">{f.a}</AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </section>
        <section id="contact" className="bg-muted/30 border-y py-20 scroll-mt-20">
          <div className="container mx-auto px-4 max-w-xl">
            <div className="text-center mb-10">
              <div className="inline-block text-xs font-semibold uppercase tracking-[0.18em] text-primary mb-3">Contact</div>
              <h2 className="text-3xl md:text-5xl font-extrabold tracking-tight">Talk to <span className="text-gradient-primary">us</span></h2>
              <p className="text-muted-foreground mt-4 text-lg">Tell us about your operation and we'll be in touch.</p>
            </div>
            <form onSubmit={onContact} className="space-y-4 bg-card border border-primary/10 rounded-2xl p-7 shadow-elegant">
              <div className="grid gap-2">
                <Label htmlFor="name">Name</Label>
                <Input id="name" name="name" placeholder="Your name" required />
              </div>
              <div className="grid gap-2">
                <Label htmlFor="email">Email</Label>
                <Input id="email" name="email" type="email" placeholder="you@company.com" required />
              </div>
              <div className="grid gap-2">
                <Label htmlFor="message">Message</Label>
                <Textarea id="message" name="message" rows={4} placeholder="How many guards do you manage?" required />
              </div>
              <Button type="submit" disabled={submitting} className="w-full h-11 bg-gradient-primary shadow-elegant hover:opacity-95"><Mail className="h-4 w-4 mr-2" /> {submitting ? "Sending…" : "Send message"}</Button>
            </form>
          </div>
        </section>
      </main>
      <footer className="border-t py-8">
        <div className="container mx-auto px-4 flex flex-col md:flex-row items-center justify-between gap-3 text-sm text-muted-foreground">
          <div className="flex items-center gap-2">
            <Shield className="h-4 w-4 text-primary" /> © {new Date().getFullYear()} GuardForce Pro
          </div>
          <div className="flex gap-4">
            <a href="#features" onClick={scrollTo("features")} className="hover:text-foreground">Features</a>
            <a href="#pricing" onClick={scrollTo("pricing")} className="hover:text-foreground">Pricing</a>
            <a href="#faq" onClick={scrollTo("faq")} className="hover:text-foreground">FAQ</a>
            <a href="#contact" onClick={scrollTo("contact")} className="hover:text-foreground">Contact</a>
          </div>
        </div>
      </footer>
    </div>
  );
}