import { useLocation, Link } from "@tanstack/react-router";
import { useState } from "react";
import { ChevronRight } from "lucide-react";

interface NavItem {
  label: string;
  to: string;
}

const APPLICATIONS: NavItem[] = [
  { label: "Humidification", to: "/applications/humidification" },
  { label: "Commercial Outdoor Cooling", to: "/applications/commercial-outdoor-cooling" },
  { label: "Industrial Outdoor Cooling", to: "/applications/industrial-outdoor-cooling" },
  { label: "Residential Outdoor Cooling", to: "/applications/residential-outdoor-cooling" },
  { label: "Dust Suppression", to: "/applications/dust-suppression" },
  { label: "Animal Cooling", to: "/applications/animal-cooling" },
  { label: "Air Cooler", to: "/applications/air-cooler" },
  { label: "Professional Pre-Cooling", to: "/applications/professional-pre-cooling" },
];

const PRODUCTS: NavItem[] = [
  { label: "Sanitization Booth", to: "/products/sanitization-booth" },
  { label: "Misting Nozzles", to: "/products/nozzles" },
  { label: "Misting Pumps", to: "/products/misting-pumps" },
  { label: "Portable Misting Fans", to: "/products/portable-misting-fans" },
  { label: "Satellite Misting Fans", to: "/products/satellite-misting-fans" },
  { label: "Fittings & Tubings", to: "/products/misting-fittings-tubings" },
  { label: "Parts & Accessories", to: "/products/misting-systems-accessories" },
];

const SOLUTIONS: NavItem[] = [
  { label: "Misting Technology", to: "/solutions/misting-technology" },
  { label: "Misting Systems Design", to: "/solutions/misting-systems-design" },
  { label: "FAQ", to: "/solutions/faq" },
];

function SidebarNavSection({ title, items, currentPath }: { title: string; items: NavItem[]; currentPath: string }) {
  return (
    <div>
      <h4 className="text-xs uppercase tracking-widest text-brand-red font-semibold mb-2">{title}</h4>
      <ul className="space-y-1">
        {items.map((item) => {
          const isActive = currentPath === item.to;
          return (
            <li key={item.to}>
              <Link
                to={item.to}
                className={`flex items-center gap-1.5 text-sm px-3 py-2 rounded-md transition-colors ${
                  isActive
                    ? "bg-brand-red/10 text-brand-red font-semibold"
                    : "text-muted-foreground hover:text-foreground hover:bg-muted"
                }`}
              >
                <ChevronRight className="h-3 w-3 text-brand-red shrink-0" />
                {item.label}
              </Link>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

export function SubPageSidebar() {
  const location = useLocation();
  const currentPath = location.pathname;
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const subject = encodeURIComponent(`Quick Contact from ${name}`);
    const body = encodeURIComponent(`${message}\n\nFrom: ${name}\nEmail: ${email}`);
    window.open(`mailto:sales@promistcool.com?subject=${subject}&body=${body}`, "_blank");
    setName("");
    setEmail("");
    setMessage("");
  };

  return (
    <aside className="space-y-8">
      {/* Quick Contact Form */}
      <div className="bg-muted/50 rounded-lg p-5 border">
        <h3 className="font-display text-lg font-bold mb-3">Quick Contact</h3>
        <form onSubmit={handleSubmit} className="space-y-3">
          <input
            type="text"
            placeholder="Name"
            value={name}
            onChange={(e) => setName(e.target.value)}
            required
            className="border rounded-lg px-3 py-2 w-full text-sm"
          />
          <input
            type="email"
            placeholder="Email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
            className="border rounded-lg px-3 py-2 w-full text-sm"
          />
          <textarea
            placeholder="Message"
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            required
            rows={3}
            className="border rounded-lg px-3 py-2 w-full text-sm resize-none"
          />
          <button
            type="submit"
            className="bg-brand-red text-white px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90 w-full"
          >
            Send Message
          </button>
        </form>
      </div>

      {/* Nav Sections */}
      <SidebarNavSection title="Applications" items={APPLICATIONS} currentPath={currentPath} />
      <SidebarNavSection title="Products" items={PRODUCTS} currentPath={currentPath} />
      <SidebarNavSection title="Solutions" items={SOLUTIONS} currentPath={currentPath} />
    </aside>
  );
}
