"use client";

import React, { useState } from "react";
import Link from "next/link";
import { useApp } from "@/context/AppContext";
import { Settings } from "lucide-react";

export const Footer: React.FC = () => {
  const { t, siteConfig } = useApp();
  const [email, setEmail] = useState("");
  const [subscribed, setSubscribed] = useState(false);
  const [showSizeGuide, setShowSizeGuide] = useState(false);
  const [showExchangePolicy, setShowExchangePolicy] = useState(false);

  const handleSubscribe = (e: React.FormEvent) => {
    e.preventDefault();
    if (email.trim()) {
      setSubscribed(true);
      setEmail("");
    }
  };

  return (
    <footer className="bg-[#0A0A0A] text-[#F8F7F2] border-t border-[#F8F7F2]/10 py-16">
      <div className="mx-auto max-w-7xl px-6 md:px-12">
        <div className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-4">
          
          {/* Brand Column */}
          <div className="space-y-6">
            <h3 className="font-serif text-xl font-bold tracking-[0.25em]">STARBOY</h3>
            <p className="text-xs text-neutral-400 leading-relaxed font-sans max-w-xs">
              STARBOY PAKISTAN is a premium streetwear label focusing on heavyweight cotton essentials, custom fits, and minimalist editorial designs. Crafted for everyday greatness.
            </p>
            <div className="text-[10px] text-neutral-500 uppercase tracking-widest space-y-1.5 font-sans">
              <p>{siteConfig.address}</p>
              <p>PHONE: {siteConfig.contactPhone}</p>
              <p>support@starboypakistan.com</p>
            </div>
            {/* Socials */}
            <div className="flex items-center space-x-4 text-[9px] tracking-widest font-bold text-neutral-400">
              {siteConfig.instagram && (
                <a href={`https://instagram.com/${siteConfig.instagram}`} target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors">
                  INSTAGRAM
                </a>
              )}
              {siteConfig.facebook && (
                <a href={`https://facebook.com/${siteConfig.facebook}`} target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors">
                  FACEBOOK
                </a>
              )}
              {siteConfig.tiktok && (
                <a href={`https://tiktok.com/@${siteConfig.tiktok}`} target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors">
                  TIKTOK
                </a>
              )}
            </div>
          </div>

          {/* Collections Column */}
          <div className="space-y-4">
            <h4 className="text-xs font-semibold uppercase tracking-widest text-white">COLLECTIONS</h4>
            <ul className="space-y-2 text-xs text-neutral-400">
              <li>
                <Link href="/shop?category=Essentials" className="hover:text-white transition-colors">Essentials Collection</Link>
              </li>
              <li>
                <Link href="/shop?category=Oversized" className="hover:text-white transition-colors">Oversized Collection</Link>
              </li>
              <li>
                <Link href="/shop?category=Premium Cotton" className="hover:text-white transition-colors">Premium Cotton</Link>
              </li>
            </ul>
          </div>

          {/* Customer Support Column */}
          <div className="space-y-4">
            <h4 className="text-xs font-semibold uppercase tracking-widest text-white">SERVICES</h4>
            <ul className="space-y-2 text-xs text-neutral-400">
              <li>
                <Link href="/account?tab=orders" className="hover:text-white transition-colors">Track Order</Link>
              </li>
              <li>
                <button
                  onClick={() => setShowSizeGuide(true)}
                  className="hover:text-white transition-colors cursor-pointer text-left w-full outline-none"
                >
                  Size Guide
                </button>
              </li>
              <li>
                <button
                  onClick={() => setShowExchangePolicy(true)}
                  className="hover:text-white transition-colors cursor-pointer text-left w-full outline-none"
                >
                  Easy Exchange Policy
                </button>
              </li>
              <li>
                <span className="hover:text-white transition-colors cursor-pointer">Shipping & TCS Rates</span>
              </li>
              <li>
                <span className="hover:text-white transition-colors cursor-pointer">Secure Payments</span>
              </li>
              <li>
                <Link href="/admin" className="hover:text-[#D4AF37] transition-colors flex items-center gap-1.5 mt-3 pt-3 border-t border-neutral-900 text-[10px] tracking-wider uppercase font-bold text-neutral-500">
                  <Settings className="w-3.5 h-3.5" /> Admin Portal
                </Link>
              </li>
            </ul>
          </div>

          {/* Newsletter Column */}
          <div className="space-y-4">
            <h4 className="text-xs font-semibold uppercase tracking-widest text-white">{t("news.headline")}</h4>
            <p className="text-xs text-neutral-400">
              {t("news.offer")}. Stay updated on upcoming drops, styling sessions, and private collections.
            </p>
            {subscribed ? (
              <p className="text-xs text-[#D4AF37] font-semibold">Thank you for subscribing! Check your email for code: STARBOY10</p>
            ) : (
              <form onSubmit={handleSubscribe} className="flex flex-col space-y-2">
                <input
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder={t("news.placeholder")}
                  required
                  className="bg-neutral-900 border border-neutral-800 text-xs px-4 py-2.5 text-[#F8F7F2] outline-none focus:border-[#D4AF37] transition-colors"
                />
                <button
                  type="submit"
                  className="bg-[#F8F7F2] hover:bg-[#D4AF37] text-black hover:text-black font-semibold text-xs tracking-widest py-2.5 transition-colors uppercase"
                >
                  {t("news.subscribe")}
                </button>
              </form>
            )}
          </div>

        </div>

        {/* Divider */}
        <div className="my-12 border-t border-neutral-900"></div>

        {/* Bottom Panel */}
        <div className="flex flex-col items-center justify-between gap-6 sm:flex-row text-[10px] text-neutral-500 tracking-wider">
          <p>© {new Date().getFullYear()} STARBOY PAKISTAN. All rights reserved.</p>
          <div className="flex flex-wrap items-center gap-4 uppercase">
            <span>COD</span>
            <span>•</span>
            <span>Easypaisa</span>
            <span>•</span>
            <span>JazzCash</span>
            <span>•</span>
            <span>Bank Transfer</span>
            <span>•</span>
            <span>Visa</span>
            <span>•</span>
            <span>Mastercard</span>
            <span>•</span>
            <span>Stripe</span>
          </div>
        </div>

        {/* Size Guide Modal Overlay */}
        {showSizeGuide && (
          <div className="fixed inset-0 z-50 flex items-center justify-center p-6 text-[#1A1A1A]">
            <div onClick={() => setShowSizeGuide(false)} className="fixed inset-0 bg-black/60 backdrop-blur-xs" />
            <div className="relative z-10 w-full max-w-md bg-[#F8F7F2] p-8 border border-[#1A1A1A]/10 shadow-2xl space-y-6">
              <div className="flex items-center justify-between border-b border-[#1A1A1A]/10 pb-3">
                <h3 className="text-xs font-bold uppercase tracking-widest">STARBOY SIZING GRID</h3>
                <button onClick={() => setShowSizeGuide(false)} className="text-neutral-500 hover:text-black">✕</button>
              </div>
              <p className="text-[10px] text-neutral-500 font-light leading-relaxed">
                * Note: Our fits use an oversized streetwear silhouette dropping off the shoulders. If you prefer a regular fit, size down.
              </p>
              <table className="w-full text-[11px] border-collapse border border-[#1A1A1A]/10 text-center font-sans">
                <thead>
                  <tr className="bg-[#0A0A0A] text-white">
                    <th className="p-2 border border-[#1A1A1A]/10">SIZE</th>
                    <th className="p-2 border border-[#1A1A1A]/10">CHEST (in)</th>
                    <th className="p-2 border border-[#1A1A1A]/10">LENGTH (in)</th>
                    <th className="p-2 border border-[#1A1A1A]/10">HEIGHT REF</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="border-b border-[#1A1A1A]/10 bg-white">
                    <td className="p-2 font-bold">S</td>
                    <td className="p-2">44</td>
                    <td className="p-2">27.5</td>
                    <td className="p-2">5'5" - 5'7"</td>
                  </tr>
                  <tr className="border-b border-[#1A1A1A]/10 bg-white">
                    <td className="p-2 font-bold">M</td>
                    <td className="p-2">46</td>
                    <td className="p-2">28.5</td>
                    <td className="p-2">5'8" - 5'10"</td>
                  </tr>
                  <tr className="border-b border-[#1A1A1A]/10 bg-white">
                    <td className="p-2 font-bold">L</td>
                    <td className="p-2">48</td>
                    <td className="p-2">29.5</td>
                    <td className="p-2">5'11" - 6'1"</td>
                  </tr>
                  <tr className="border-b border-[#1A1A1A]/10 bg-white">
                    <td className="p-2 font-bold">XL</td>
                    <td className="p-2">50</td>
                    <td className="p-2">30.5</td>
                    <td className="p-2">6'2"+</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        )}

        {/* Easy Exchange Policy Modal */}
        {showExchangePolicy && (
          <div className="fixed inset-0 z-50 flex items-center justify-center p-6 text-[#1A1A1A]">
            <div onClick={() => setShowExchangePolicy(false)} className="fixed inset-0 bg-black/60 backdrop-blur-xs" />
            <div className="relative z-10 w-full max-w-md bg-[#F8F7F2] p-8 border border-[#1A1A1A]/10 shadow-2xl space-y-6">
              <div className="flex items-center justify-between border-b border-[#1A1A1A]/10 pb-3">
                <h3 className="text-xs font-bold uppercase tracking-widest">EASY EXCHANGE POLICY</h3>
                <button onClick={() => setShowExchangePolicy(false)} className="text-neutral-500 hover:text-black">✕</button>
              </div>
              <div className="text-xs text-neutral-600 space-y-4 leading-relaxed font-sans font-light">
                <p className="font-semibold text-black uppercase text-[10px] tracking-wider">7-DAY STREETWEAR SWAPS:</p>
                <p>We want your fit to hang perfectly. If you are unsatisfied with your product sizing, fabric feel, or want a color swap, we offer a hassle-free 7-day exchange window.</p>
                <p className="font-semibold text-black uppercase text-[10px] tracking-wider">EXCHANGE STEPS:</p>
                <ul className="list-disc pl-4 space-y-1.5">
                  <li>Keep all original tags and custom neck labels intact.</li>
                  <li>Do not wash or wear the apparel item.</li>
                  <li>Click our floating WhatsApp button to contact support, providing your Order ID.</li>
                  <li>We will dispatch a courier rider to swap the size directly at your doorstep!</li>
                </ul>
              </div>
            </div>
          </div>
        )}

      </div>
    </footer>
  );
};