'use client';

import { useState } from 'react';
import {
  Shield,
  ShieldAlert,
  Facebook,
  Twitter,
  Github,
  Home,
  Search,
  AlertTriangle,
  Brain,
  BarChart3,
  Info,
  HelpCircle,
  BookOpen,
  ShieldCheck,
  FileText,
  Mail,
  Lock,
  Scale,
  Phone,
  Send,
  Heart,
} from 'lucide-react';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { useAppStore } from '@/store/app-store';
import { useLangStore } from '@/store/lang-store';
import type { Page } from '@/types';

interface FooterLink {
  labelKey: string;
  page: Page;
  icon: React.ReactNode;
}

const platformLinks: FooterLink[] = [
  { labelKey: 'footer.home', page: 'home', icon: <Home className="h-3.5 w-3.5" /> },
  { labelKey: 'footer.searchDatabase', page: 'search', icon: <Search className="h-3.5 w-3.5" /> },
  { labelKey: 'footer.reportScam', page: 'report', icon: <AlertTriangle className="h-3.5 w-3.5" /> },
  { labelKey: 'footer.aiScamDetector', page: 'ai-detect', icon: <Brain className="h-3.5 w-3.5" /> },
  { labelKey: 'footer.analyticsDashboard', page: 'analytics', icon: <BarChart3 className="h-3.5 w-3.5" /> },
];

const resourceLinks: FooterLink[] = [
  { labelKey: 'footer.aboutUs', page: 'home', icon: <Info className="h-3.5 w-3.5" /> },
  { labelKey: 'footer.howItWorks', page: 'how-it-works', icon: <BookOpen className="h-3.5 w-3.5" /> },
  { labelKey: 'footer.safetyTips', page: 'home', icon: <ShieldCheck className="h-3.5 w-3.5" /> },
  { labelKey: 'footer.faq', page: 'faq', icon: <HelpCircle className="h-3.5 w-3.5" /> },
  { labelKey: 'footer.apiDocs', page: 'home', icon: <FileText className="h-3.5 w-3.5" /> },
];

const legalLinks: FooterLink[] = [
  { labelKey: 'footer.privacyPolicy', page: 'home', icon: <Lock className="h-3.5 w-3.5" /> },
  { labelKey: 'footer.termsOfService', page: 'home', icon: <Scale className="h-3.5 w-3.5" /> },
  { labelKey: 'footer.disclaimer', page: 'home', icon: <ShieldAlert className="h-3.5 w-3.5" /> },
  { labelKey: 'footer.contactUs', page: 'home', icon: <Phone className="h-3.5 w-3.5" /> },
];

const socialLinks = [
  { name: 'Facebook', icon: <Facebook className="h-4 w-4" />, href: '#' },
  { name: 'Twitter', icon: <Twitter className="h-4 w-4" />, href: '#' },
  { name: 'GitHub', icon: <Github className="h-4 w-4" />, href: '#' },
];

function FooterLinkGroup({ titleKey, links }: { titleKey: string; links: FooterLink[] }) {
  const navigate = useAppStore((s) => s.navigate);
  const t = useLangStore((s) => s.t);

  return (
    <div className="space-y-3">
      <h3 className="text-sm font-semibold text-emerald-400 uppercase tracking-wider">
        {t(titleKey)}
      </h3>
      <ul className="space-y-2">
        {links.map((link) => (
          <li key={link.labelKey}>
            <button
              onClick={() => navigate(link.page)}
              className="flex items-center gap-2 text-sm text-zinc-400 hover:text-emerald-400 transition-colors group"
            >
              <span className="opacity-50 group-hover:opacity-100 transition-opacity">
                {link.icon}
              </span>
              {t(link.labelKey)}
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export function Footer() {
  const [email, setEmail] = useState('');
  const [subscribed, setSubscribed] = useState(false);
  const t = useLangStore((s) => s.t);

  const handleSubscribe = (e: React.FormEvent) => {
    e.preventDefault();
    if (email.trim()) {
      setSubscribed(true);
      setEmail('');
      setTimeout(() => setSubscribed(false), 3000);
    }
  };

  return (
    <footer className="mt-auto bg-zinc-950 text-zinc-300 border-t border-zinc-800">
      {/* Main Footer Content */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-10 lg:gap-8">
          {/* Brand Section */}
          <div className="sm:col-span-2 lg:col-span-1 space-y-4">
            <div className="flex items-center gap-2.5">
              <div className="flex items-center justify-center h-9 w-9 rounded-lg bg-emerald-500/10 border border-emerald-500/20">
                <Shield className="h-5 w-5 text-emerald-500" />
              </div>
              <span className="text-lg font-bold text-white">
                ScamChecker BD
              </span>
            </div>
            <p className="text-sm text-zinc-500 leading-relaxed max-w-xs">
              Community-Powered Scam Intelligence for Bangladesh
            </p>
            {/* Social Links */}
            <div className="flex items-center gap-2 pt-1">
              {socialLinks.map((social) => (
                <a
                  key={social.name}
                  href={social.href}
                  aria-label={social.name}
                  className="flex items-center justify-center h-9 w-9 rounded-lg bg-zinc-900 border border-zinc-800 text-zinc-500 hover:text-emerald-400 hover:border-emerald-500/30 hover:bg-emerald-500/5 transition-colors"
                >
                  {social.icon}
                </a>
              ))}
            </div>
          </div>

          {/* Platform Column */}
          <FooterLinkGroup titleKey="footer.platform" links={platformLinks} />

          {/* Resources Column */}
          <FooterLinkGroup titleKey="footer.resources" links={resourceLinks} />

          {/* Legal Column */}
          <FooterLinkGroup titleKey="footer.legal" links={legalLinks} />

          {/* Stay Updated Section */}
          <div className="sm:col-span-2 lg:col-span-1">
            <div className="rounded-xl bg-zinc-900/80 border border-zinc-800 p-5 space-y-3">
              <div className="flex items-center gap-2">
                <Mail className="h-4 w-4 text-emerald-400" />
                <h3 className="text-sm font-semibold text-emerald-400 uppercase tracking-wider">
                  {t('footer.stayUpdated')}
                </h3>
              </div>
              <p className="text-xs text-zinc-500 leading-relaxed">
                {t('footer.newsletterHint')}
              </p>
              <form onSubmit={handleSubscribe} className="space-y-2">
                <Input
                  type="email"
                  placeholder="your@email.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="h-9 text-sm bg-zinc-950 border-zinc-700 text-zinc-300 placeholder:text-zinc-600 focus:border-emerald-500/50 focus:ring-emerald-500/20"
                />
                <Button
                  type="submit"
                  size="sm"
                  className="w-full h-9 text-xs bg-emerald-600 hover:bg-emerald-700 text-white"
                >
                  {subscribed ? (
                    <span className="flex items-center gap-1.5">
                      <ShieldCheck className="h-3.5 w-3.5" />
                      {t('footer.subscribed')}
                    </span>
                  ) : (
                    <span className="flex items-center gap-1.5">
                      <Send className="h-3.5 w-3.5" />
                      {t('footer.subscribe')}
                    </span>
                  )}
                </Button>
              </form>
            </div>
          </div>
        </div>
      </div>

      {/* Disclaimer Banner */}
      <div className="border-t border-zinc-800/60">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-5">
          <div className="flex items-start gap-3 rounded-lg bg-amber-500/5 border border-amber-500/15 p-4">
            <ShieldAlert className="h-5 w-5 text-amber-500 mt-0.5 shrink-0" />
            <p className="text-xs text-amber-200/70 leading-relaxed">
              <span className="font-semibold text-amber-400">{t('footer.disclaimer')}:</span>{' '}
              {t('footer.disclaimerText')}
            </p>
          </div>
        </div>
      </div>

      {/* Bottom Bar */}
      <div className="border-t border-zinc-800/60">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <div className="flex flex-col sm:flex-row items-center justify-between gap-3">
            <p className="text-xs text-zinc-600">
              {t('footer.copyright')}
            </p>
            <p className="text-xs text-zinc-600 flex items-center gap-1">
              <Heart className="h-3 w-3 text-red-500 fill-red-500" /> {t('footer.madeInBD')}
            </p>
            <Badge
              variant="outline"
              className="text-[10px] px-2 py-0 text-zinc-600 border-zinc-800 bg-zinc-900/50"
            >
              v1.0
            </Badge>
          </div>
        </div>
      </div>
    </footer>
  );
}
