import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { Mail, MapPin, MessageCircle, Phone, Clock } from "lucide-react";
import { toast } from "sonner";
import { z } from "zod";

import { SiteLayout } from "@/components/site/SiteLayout";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

export const Route = createFileRoute("/contact")({
  head: () => ({
    meta: [
      { title: "Contact — Flexflares Cyber Services" },
      { name: "description", content: "Call, WhatsApp, email or visit us in Homabay." },
      { property: "og:title", content: "Contact Flexflares Cyber Services" },
      { property: "og:description", content: "Reach us in Homabay, Kenya." },
    ],
  }),
  component: ContactPage,
});

const schema = z.object({
  name: z.string().trim().min(2, "Enter your name").max(100),
  email: z.string().trim().email("Invalid email").max(255),
  message: z.string().trim().min(5, "Message too short").max(1000),
});

function ContactPage() {
  const [pending, setPending] = useState(false);

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const fd = new FormData(e.currentTarget);
    const parsed = schema.safeParse({
      name: fd.get("name"),
      email: fd.get("email"),
      message: fd.get("message"),
    });
    if (!parsed.success) {
      toast.error(parsed.error.issues[0]?.message ?? "Please check the form");
      return;
    }
    setPending(true);
    const msg = `Hello Flexflares!%0A%0AFrom: ${encodeURIComponent(parsed.data.name)} (${encodeURIComponent(parsed.data.email)})%0A%0A${encodeURIComponent(parsed.data.message)}`;
    window.open(`https://wa.me/254717576870?text=${msg}`, "_blank");
    setPending(false);
    e.currentTarget.reset();
    toast.success("Opening WhatsApp to send your message");
  }

  return (
    <SiteLayout>
      <section className="mx-auto max-w-7xl px-4 pt-10 pb-16 sm:px-6">
        <h1 className="text-3xl font-bold tracking-tight sm:text-4xl">Get in touch</h1>
        <p className="mt-2 text-muted-foreground">We'd love to hear from you. Reach us any day, 6 AM – 10 PM.</p>

        <div className="mt-10 grid gap-6 lg:grid-cols-5">
          <div className="lg:col-span-2">
            <div className="space-y-4">
              <Card><CardContent className="flex items-start gap-3 p-5">
                <Phone className="mt-0.5 h-5 w-5 text-primary" />
                <div>
                  <div className="text-sm text-muted-foreground">Phone</div>
                  <a href="tel:+254113910480" className="font-semibold hover:text-primary">+254 113 910 480</a>
                </div>
              </CardContent></Card>

              <Card><CardContent className="flex items-start gap-3 p-5">
                <MessageCircle className="mt-0.5 h-5 w-5 text-primary" />
                <div>
                  <div className="text-sm text-muted-foreground">WhatsApp</div>
                  <a href="https://wa.me/254717576870" target="_blank" rel="noreferrer" className="font-semibold hover:text-primary">+254 717 576870</a>
                </div>
              </CardContent></Card>

              <Card><CardContent className="flex items-start gap-3 p-5">
                <Mail className="mt-0.5 h-5 w-5 text-primary" />
                <div className="min-w-0">
                  <div className="text-sm text-muted-foreground">Email</div>
                  <a href="mailto:flexflarescyberservices@gmail.com" className="break-all font-semibold hover:text-primary">flexflarescyberservices@gmail.com</a>
                </div>
              </CardContent></Card>

              <Card><CardContent className="flex items-start gap-3 p-5">
                <MapPin className="mt-0.5 h-5 w-5 text-primary" />
                <div>
                  <div className="text-sm text-muted-foreground">Location</div>
                  <div className="font-semibold">Homabay, Kenya</div>
                </div>
              </CardContent></Card>

              <Card><CardContent className="flex items-start gap-3 p-5">
                <Clock className="mt-0.5 h-5 w-5 text-primary" />
                <div>
                  <div className="text-sm text-muted-foreground">Business hours</div>
                  <div className="font-semibold">Mon – Sun · 6:00 AM – 10:00 PM</div>
                </div>
              </CardContent></Card>
            </div>
          </div>

          <div className="lg:col-span-3">
            <Card className="glass border-0">
              <CardContent className="p-6 sm:p-8">
                <h2 className="text-xl font-semibold">Send us a message</h2>
                <form onSubmit={onSubmit} className="mt-5 space-y-4">
                  <div>
                    <Label htmlFor="name">Full name</Label>
                    <Input id="name" name="name" required maxLength={100} className="mt-1" />
                  </div>
                  <div>
                    <Label htmlFor="email">Email</Label>
                    <Input id="email" name="email" type="email" required maxLength={255} className="mt-1" />
                  </div>
                  <div>
                    <Label htmlFor="message">Message</Label>
                    <Textarea id="message" name="message" required maxLength={1000} rows={5} className="mt-1" />
                  </div>
                  <Button type="submit" disabled={pending} size="lg" className="shadow-glow">
                    {pending ? "Sending…" : "Send via WhatsApp"}
                  </Button>
                </form>
              </CardContent>
            </Card>

            <div className="mt-6 overflow-hidden rounded-2xl border">
              <iframe
                title="Homabay map"
                src="https://www.google.com/maps?q=Homabay,Kenya&output=embed"
                className="h-72 w-full"
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
              />
            </div>
          </div>
        </div>
      </section>
    </SiteLayout>
  );
}