import { Link } from "react-router"
import { Zap, MessageCircle, Send, Youtube, Instagram, Mail, Heart } from "lucide-react"
import { useState } from "react"
import { trpc } from "@/providers/trpc"
import { toast } from "sonner"

export function Footer() {
  const [email, setEmail] = useState("")
  const subscribe = trpc.subscriber.subscribe.useMutation({
    onSuccess: (data) => { toast.success(data.message); setEmail("") },
    onError: (err) => toast.error(err.message),
  })

  const productCategories = [
    { label: "AI Tools", path: "/shop?category=ai-tools" },
    { label: "Design Tools", path: "/shop?category=design-tools" },
    { label: "Streaming", path: "/shop?category=streaming" },
    { label: "Productivity", path: "/shop?category=productivity" },
    { label: "Security & VPN", path: "/shop?category=security" },
    { label: "Developer Tools", path: "/shop?category=developer" },
    { label: "Microsoft Office", path: "/shop?category=microsoft" },
  ]

  const supportLinks = [
    { label: "FAQ", path: "/faq" },
    { label: "Track Order", path: "/track-order" },
    { label: "Contact Us", path: "/contact" },
    { label: "Wishlist", path: "/wishlist" },
  ]

  const legalLinks = [
    { label: "Privacy Policy", path: "/privacy-policy" },
    { label: "Terms & Conditions", path: "/terms-conditions" },
    { label: "Refund Policy", path: "/refund-policy" },
    { label: "Cookie Policy", path: "/cookie-policy" },
    { label: "Disclaimer", path: "/disclaimer" },
    { label: "Support Policy", path: "/support-policy" },
    { label: "Payment Policy", path: "/payment-policy" },
  ]

  const socialLinks = [
    { icon: MessageCircle, label: "WhatsApp Group", url: "https://chat.whatsapp.com/CAEgMqOlfcYLxv8ElniW0h" },
    { icon: Send, label: "Telegram", url: "https://t.me/teamhydrashopC" },
    { icon: MessageCircle, label: "WhatsApp Channel", url: "https://whatsapp.com/channel/0029Vb7dW7S6GcGJbE4TcC2o" },
    { icon: Youtube, label: "YouTube", url: "https://www.youtube.com/@teamhydrashops" },
    { icon: Instagram, label: "Instagram", url: "https://www.instagram.com/teamhydrashop/" },
  ]

  return (
    <footer className="border-t border-white/5">
      {/* Newsletter */}
      <div className="max-w-7xl mx-auto px-4 py-16">
        <div className="glass-card p-8 max-w-2xl mx-auto text-center">
          <Mail className="w-8 h-8 text-[#f97316] mx-auto mb-4" />
          <h3 className="text-2xl font-bold mb-2">Subscribe for Exclusive Deals</h3>
          <p className="text-slate-400 mb-6">Get notified about flash sales, new products, and special discounts.</p>
          <form onSubmit={(e) => { e.preventDefault(); if (email) subscribe.mutate({ email }) }} className="flex gap-3 max-w-md mx-auto">
            <input type="email" placeholder="Enter your email" value={email} onChange={e => setEmail(e.target.value)}
              className="flex-1 px-4 py-3 rounded-xl bg-white/5 border border-white/10 text-white placeholder:text-slate-500 focus:outline-none focus:border-[#f97316] transition-colors" />
            <button type="submit" disabled={subscribe.isPending} className="btn-primary px-6 disabled:opacity-50">{subscribe.isPending ? "..." : "Subscribe"}</button>
          </form>
        </div>
      </div>

      {/* Main Footer */}
      <div className="max-w-7xl mx-auto px-4 pb-12">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
          <div className="col-span-2 md:col-span-1">
            <div className="flex items-center gap-2 mb-4">
              <Zap className="w-5 h-5 text-[#f97316]" />
              <span className="font-bold">SubscriptionHero</span>
            </div>
            <p className="text-sm text-slate-400 mb-4">Your trusted marketplace for premium digital subscriptions at unbeatable prices. 10,000+ happy customers worldwide.</p>
            <div className="flex gap-2">
              {socialLinks.map(link => (
                <a key={link.label} href={link.url} target="_blank" rel="noopener noreferrer" className="p-2 rounded-full bg-white/5 hover:bg-[#f97316]/20 transition-colors" title={link.label}>
                  <link.icon className="w-4 h-4" />
                </a>
              ))}
            </div>
          </div>
          <div>
            <h4 className="font-semibold mb-4 text-sm uppercase tracking-wider text-slate-300">Products</h4>
            <ul className="space-y-2">{productCategories.map(link => <li key={link.path}><Link to={link.path} className="text-sm text-slate-400 hover:text-[#f97316] transition-colors">{link.label}</Link></li>)}</ul>
          </div>
          <div>
            <h4 className="font-semibold mb-4 text-sm uppercase tracking-wider text-slate-300">Support</h4>
            <ul className="space-y-2">{supportLinks.map(link => <li key={link.path}><Link to={link.path} className="text-sm text-slate-400 hover:text-[#f97316] transition-colors">{link.label}</Link></li>)}</ul>
          </div>
          <div>
            <h4 className="font-semibold mb-4 text-sm uppercase tracking-wider text-slate-300">Legal</h4>
            <ul className="space-y-2">{legalLinks.map(link => <li key={link.path}><Link to={link.path} className="text-sm text-slate-400 hover:text-[#f97316] transition-colors">{link.label}</Link></li>)}</ul>
          </div>
        </div>

        {/* Bottom */}
        <div className="border-t border-white/5 mt-10 pt-6 flex flex-col md:flex-row items-center justify-between gap-4 text-sm text-slate-500">
          <p>&copy; 2025 Subscription Hero. All rights reserved.</p>
          <div className="flex items-center gap-1">
            <span>Made with</span> <Heart className="w-3 h-3 text-red-500 fill-red-500" /> <span>for digital creators worldwide</span>
          </div>
          <div className="flex items-center gap-4">
            <a href="https://wa.me/917038146526" target="_blank" rel="noopener noreferrer nofollow" className="flex items-center gap-1 hover:text-green-400 transition-colors"><MessageCircle className="w-4 h-4" /> WhatsApp</a>
            <a href="https://t.me/mfatool" target="_blank" rel="noopener noreferrer nofollow" className="flex items-center gap-1 hover:text-blue-400 transition-colors"><Send className="w-4 h-4" /> Telegram</a>
          </div>
        </div>
      </div>
    </footer>
  )
}