import { useState } from "react";
import { Link } from "@inertiajs/react";
import { useTenant } from "@/contexts/TenantContext";
import { useTenantHref } from "@/hooks/useTenantLink";
import { Mail, Phone, MapPin } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { toast } from "sonner";

const policyLinks = [
  "Cancellation and Transfer Policy",
  "Recertification Discount Policy",
  "Privacy Policy",
  "Anti-bribery Policy",
  "Corporate & Social Responsibility Policy",
  "Environmental Policy",
  "Equality & Diversity Policy",
  "Health & Safety Policy",
  "Modern Slavery Statement",
  "Quality Policy",
  "Sustainability Policy",
];

const LocktelFooter = () => {
  const { branding, companyName } = useTenant();
  const tenantHref = useTenantHref();
  const [email, setEmail] = useState("");

  const handleSubscribe = (e: React.FormEvent) => {
    e.preventDefault();
    if (!email) return;
    toast.success("Thank you for subscribing!");
    setEmail("");
  };

  return (
    <footer className="bg-card border-t border-border py-12">
      <div className="container mx-auto px-4">
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          {/* Brand */}
          <div>
            <Link href={tenantHref("/")} className="flex items-center gap-3 mb-4">
              {branding?.logo_url ? (
                <img src={branding.logo_url} alt={companyName || ""} className="h-10 object-contain" />
              ) : (
                <div className="font-bold text-foreground text-lg">{companyName || "Locktel Academy"}</div>
              )}
            </Link>
            <p className="text-sm text-muted-foreground leading-relaxed">
              Learn from industry experts and gain the skills you need to succeed.
            </p>
          </div>

          {/* Policy Pages */}
          <div>
            <h4 className="font-semibold text-foreground mb-4 text-sm">Policy Pages</h4>
            <ul className="space-y-1.5">
              {policyLinks.map((policy) => (
                <li key={policy}>
                  <span className="text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer">
                    {policy}
                  </span>
                </li>
              ))}
            </ul>
          </div>

          {/* Quick Links */}
          <div>
            <h4 className="font-semibold text-foreground mb-4 text-sm">Quick Links</h4>
            <ul className="space-y-2">
              {[
                { label: "Home", href: "/" },
                { label: "Courses", href: "/courses" },
                { label: "About Us", href: "/about" },
                { label: "Contact", href: "/contact" },
                { label: "FAQs", href: "/contact" },
              ].map((link) => (
                <li key={link.label}>
                  <Link href={tenantHref(link.href)} className="text-sm text-muted-foreground hover:text-foreground transition-colors">
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>

            {/* Contact Info */}
            <div className="mt-6 space-y-2 text-sm text-muted-foreground">
              {branding?.contact_email && (
                <div className="flex items-center gap-2">
                  <Mail className="h-4 w-4 text-primary" />
                  <a href={`mailto:${branding.contact_email}`} className="hover:text-foreground transition-colors">
                    {branding.contact_email}
                  </a>
                </div>
              )}
              {branding?.contact_phone && (
                <div className="flex items-center gap-2">
                  <Phone className="h-4 w-4 text-primary" />
                  <a href={`tel:${branding.contact_phone}`} className="hover:text-foreground transition-colors">
                    {branding.contact_phone}
                  </a>
                </div>
              )}
              {branding?.contact_address && (
                <div className="flex items-start gap-2">
                  <MapPin className="h-4 w-4 text-primary mt-0.5" />
                  <span>{branding.contact_address}</span>
                </div>
              )}
            </div>
          </div>

          {/* Newsletter */}
          <div>
            <h4 className="font-semibold text-foreground mb-4 text-sm">Subscribe to Our Newsletter</h4>
            <p className="text-sm text-muted-foreground mb-4">
              Get the latest updates on new courses and promotions.
            </p>
            <form onSubmit={handleSubscribe} className="flex gap-2">
              <Input
                type="email"
                placeholder="Your Email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="flex-1"
                required
              />
              <Button type="submit" size="sm">Subscribe</Button>
            </form>
          </div>
        </div>

        <div className="border-t border-border mt-10 pt-6 flex flex-col sm:flex-row justify-between items-center gap-4">
          <p className="text-sm text-muted-foreground">
            © {new Date().getFullYear()} {companyName || "Locktel Academy"}. All rights reserved.
          </p>
          <div className="flex gap-4 text-sm text-muted-foreground">
            <span className="hover:text-foreground cursor-pointer transition-colors">Privacy Policy</span>
            <span className="hover:text-foreground cursor-pointer transition-colors">Terms of Service</span>
            <Link href={tenantHref("/contact")} className="hover:text-foreground transition-colors">Contact Us</Link>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default LocktelFooter;