import { useState } from 'react';
import { Link } from 'react-router-dom';
import { Facebook, Twitter, Instagram, Youtube, Package } from 'lucide-react';
import { api } from '../../api/client';

export function Footer() {
  const [email, setEmail] = useState('');
  const [subscribing, setSubscribing] = useState(false);
  const [subscribed, setSubscribed] = useState(false);

  const handleSubscribe = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!email || subscribing) return;
    setSubscribing(true);
    try {
      await api.post('/newsletter', { email });
      setSubscribed(true);
      setEmail('');
    } catch {}
    setSubscribing(false);
  };

  return (
    <footer className="bg-primary-900 text-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 py-12">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8">
          {/* Brand */}
          <div className="lg:col-span-2">
            <div className="flex items-center gap-2 mb-4">
              <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-pink-500 to-primary-400 flex items-center justify-center">
                <Package className="w-5 h-5 text-white" />
              </div>
              <span className="text-lg font-bold">MARKETPLACE</span>
            </div>
            <p className="text-primary-200 text-sm mb-6 max-w-sm">
              Discover great deals on unique pre-loved items. Buy and sell second-hand items online.
            </p>
            <div>
              <p className="text-sm font-semibold mb-2">Stay Updated</p>
              <p className="text-xs text-primary-300 mb-3">Subscribe to our newsletter for tips and special offers</p>
              {subscribed ? (
                <p className="text-sm text-green-400">Thanks for subscribing!</p>
              ) : (
                <form className="flex gap-2" onSubmit={handleSubscribe}>
                  <input type="email" placeholder="Your email address" value={email} onChange={(e) => setEmail(e.target.value)} required
                    className="flex-1 px-3 py-2 rounded-lg bg-primary-800 border border-primary-700 text-sm placeholder:text-primary-400 focus:outline-none focus:border-primary-500" />
                  <button type="submit" disabled={subscribing}
                    className="px-4 py-2 bg-gradient-to-r from-pink-500 to-primary-500 rounded-lg text-sm font-semibold hover:from-pink-600 hover:to-primary-600 transition-all cursor-pointer disabled:opacity-50">
                    {subscribing ? '...' : 'Subscribe'}
                  </button>
                </form>
              )}
            </div>
          </div>

          {/* Marketplace */}
          <div>
            <h3 className="font-semibold mb-4">Marketplace</h3>
            <ul className="space-y-2 text-sm text-primary-200">
              <li><Link to="/" className="hover:text-white transition-colors">Home</Link></li>
              <li><Link to="/?category=all" className="hover:text-white transition-colors">Browse</Link></li>
              <li><Link to="/sell" className="hover:text-white transition-colors">Sell Your Item</Link></li>
              <li><Link to="/dashboard/listings" className="hover:text-white transition-colors">My Listings</Link></li>
            </ul>
          </div>

          {/* Support */}
          <div>
            <h3 className="font-semibold mb-4">Support</h3>
            <ul className="space-y-2 text-sm text-primary-200">
              <li><Link to="/help" className="hover:text-white transition-colors">Help & Support</Link></li>
              <li><Link to="/contact" className="hover:text-white transition-colors">Contact Us</Link></li>
              <li><Link to="/returns" className="hover:text-white transition-colors">Returns & Conditions</Link></li>
            </ul>
          </div>

          {/* About */}
          <div>
            <h3 className="font-semibold mb-4">About</h3>
            <ul className="space-y-2 text-sm text-primary-200">
              <li><Link to="/about" className="hover:text-white transition-colors">About Us</Link></li>
              <li><Link to="/privacy" className="hover:text-white transition-colors">Privacy Policy</Link></li>
              <li><Link to="/terms" className="hover:text-white transition-colors">Terms of Service</Link></li>
            </ul>
            <div className="mt-6">
              <p className="font-semibold mb-3 text-sm">Follow Us</p>
              <div className="flex gap-3">
                <span className="p-2 bg-primary-800 rounded-lg"><Facebook className="w-4 h-4" /></span>
                <span className="p-2 bg-primary-800 rounded-lg"><Twitter className="w-4 h-4" /></span>
                <span className="p-2 bg-primary-800 rounded-lg"><Instagram className="w-4 h-4" /></span>
                <span className="p-2 bg-primary-800 rounded-lg"><Youtube className="w-4 h-4" /></span>
              </div>
            </div>
          </div>
        </div>

        <div className="mt-12 pt-6 border-t border-primary-800 flex flex-col sm:flex-row items-center justify-between gap-4">
          <p className="text-xs text-primary-400">&copy; 2024 Marketplace. All Rights Reserved.</p>
          <div className="flex gap-4 text-xs text-primary-400">
            <Link to="/terms" className="hover:text-white transition-colors">Terms of Service</Link>
            <Link to="/privacy" className="hover:text-white transition-colors">Privacy Policy</Link>
          </div>
        </div>
      </div>
    </footer>
  );
}
