import React from 'react';
import Link from 'next/link';
import { useSiteSettings } from '@/context/SiteSettingsContext';
import { 
  Phone, 
  Mail, 
  MapPin, 
  ChevronRight 
} from 'lucide-react';

export const Footer: React.FC = () => {
  const { settings } = useSiteSettings();

  const facebookUrl = settings?.settings?.social_facebook || 'https://facebook.com';
  const instagramUrl = settings?.settings?.social_instagram || 'https://instagram.com';
  const youtubeUrl = settings?.settings?.social_youtube || 'https://youtube.com';
  const whatsappUrl = settings?.settings?.social_whatsapp 
    ? `https://wa.me/${settings.settings.social_whatsapp}` 
    : 'https://wa.me/8801700000000';

  return (
    <footer
      className="bg-primary-dark text-slate-300 border-t border-emerald-950"
      style={{ fontFamily: 'var(--font-open-sans), sans-serif', fontSize: '13px' }}
    >

      {/* Main Footer — 5 columns */}
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 grid grid-cols-2 lg:grid-cols-6 gap-8" style={{ paddingTop: '40px', paddingBottom: '40px' }}>

        {/* Col 1: About + Contact + Social — full width on mobile, 2 cols on desktop */}
        <div className="col-span-2 lg:col-span-2">
          {/* Logo */}
          <div className="flex items-center mb-4">
            <Link href="/" className="flex items-center">
              {settings?.settings?.store_logo ? (
                <img
                  src={
                    settings.settings.store_logo.startsWith('http')
                      ? settings.settings.store_logo
                      : `${process.env.NEXT_PUBLIC_API_URL || 'http://127.0.0.1:8000'}/storage/${settings.settings.store_logo}`
                  }
                  alt={settings?.settings?.site_name || "Logo"}
                  className="h-10 w-auto object-contain"
                  onError={(e) => {
                    e.currentTarget.style.display = 'none';
                    const fallback = e.currentTarget.parentElement?.querySelector('.fallback-footer-logo');
                    if (fallback) fallback.classList.remove('hidden');
                  }}
                />
              ) : null}
              
              <div className={`fallback-footer-logo flex items-center gap-2 ${settings?.settings?.store_logo ? 'hidden' : ''}`}>
                <div className="h-8 w-8 rounded-full bg-secondary/100 flex items-center justify-center text-white font-bold" style={{ fontSize: '14px' }}>
                  {settings?.settings?.site_name
                    ? settings.settings.site_name.charAt(0).toUpperCase()
                    : 'S'}
                </div>
                <span className="font-black text-white tracking-tight" style={{ fontSize: '20px' }}>
                  {settings?.settings?.site_name ? (
                    <>
                      {settings.settings.site_name.slice(0, 4)}
                      <span className="text-secondary">{settings.settings.site_name.slice(4)}</span>
                    </>
                  ) : (
                    <>Sawd<span className="text-secondary">abazar</span></>
                  )}
                </span>
              </div>
            </Link>
          </div>

          {/* Description */}
          <p className="leading-relaxed text-slate-400" style={{ fontSize: '14px', fontWeight: 400, marginBottom: '16px' }}>
            {settings?.settings?.store_description || "We are committed to delivering 100% pure, safe, and healthy food to our customers."}
          </p>

          {/* Contact Info */}
          <ul style={{ fontSize: '14px', fontWeight: 400, marginBottom: '16px' }}>
            <li className="flex items-start gap-2.5" style={{ marginBottom: '10px' }}>
              <MapPin className="text-secondary-footer-hover shrink-0 mt-0.5" style={{ height: '14px', width: '14px' }} />
              <span className="text-slate-400">{settings?.settings?.store_address || 'House-10, Road-04, Banani, Dhaka-1213, Bangladesh.'}</span>
            </li>
            <li className="flex items-start gap-2.5" style={{ marginBottom: '10px' }}>
              <Phone className="text-secondary-footer-hover shrink-0 mt-0.5" style={{ height: '14px', width: '14px' }} />
              <span className="text-slate-400">{settings?.settings?.store_phone || '+880 1700-000000'}</span>
            </li>
            <li className="flex items-start gap-2.5">
              <Mail className="text-secondary-footer-hover shrink-0 mt-0.5" style={{ height: '14px', width: '14px' }} />
              <span className="text-slate-400">{settings?.settings?.store_email || 'support@sawdabazar.com'}</span>
            </li>
          </ul>

          {/* Social Icons */}
          <div className="flex items-center gap-3">
            <a href={facebookUrl} target="_blank" rel="noopener noreferrer" className="p-2 rounded-full bg-[#00522c] hover:bg-secondary-footer-hover text-white transition-colors" aria-label="Facebook">
              <svg style={{ height: '14px', width: '14px' }} fill="currentColor" viewBox="0 0 24 24">
                <path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c4.56-.93 8-4.96 8-9.75z"/>
              </svg>
            </a>
            <a href={instagramUrl} target="_blank" rel="noopener noreferrer" className="p-2 rounded-full bg-[#00522c] hover:bg-secondary-footer-hover text-white transition-colors" aria-label="Instagram">
              <svg style={{ height: '14px', width: '14px' }} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
                <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
                <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
              </svg>
            </a>
            <a href={youtubeUrl} target="_blank" rel="noopener noreferrer" className="p-2 rounded-full bg-[#00522c] hover:bg-secondary-footer-hover text-white transition-colors" aria-label="YouTube">
              <svg style={{ height: '14px', width: '14px' }} fill="currentColor" viewBox="0 0 24 24">
                <path d="M23.498 6.163a3.003 3.003 0 0 0-2.11-2.11C19.517 3.545 12 3.545 12 3.545s-7.517 0-9.388.507a3.003 3.003 0 0 0-2.11 2.11C0 8.033 0 12 0 12s0 3.967.502 5.837a3.003 3.003 0 0 0 2.11 2.11c1.871.507 9.388.507 9.388.507s7.517 0 9.388-.507a3.003 3.003 0 0 0 2.11-2.11C24 15.967 24 12 24 12s0-3.967-.502-5.837zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
              </svg>
            </a>
            <a href={whatsappUrl} target="_blank" rel="noopener noreferrer" className="p-2 rounded-full bg-[#00522c] hover:bg-secondary-footer-hover text-white transition-colors" aria-label="WhatsApp">
              <svg style={{ height: '14px', width: '14px' }} fill="currentColor" viewBox="0 0 24 24">
                <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.514 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.73-1.45L0 24zm6.59-4.846c1.6.95 3.188 1.449 4.825 1.451 5.436 0 9.86-4.37 9.864-9.799.002-2.63-1.023-5.101-2.885-6.965C16.528 2.028 14.066.99 11.997.99 6.561.99 2.137 5.36 2.133 10.79c-.001 1.687.458 3.327 1.332 4.737L2.49 20.312l5.127-1.341c.024.015.047.03.072.045z" />
              </svg>
            </a>
          </div>
        </div>

        {/* Col 2: Popular Categories */}
        <div>
            <p className="text-white" style={{ fontSize: '16px', fontWeight: 500, marginBottom: '16px' }}>Popular Categories</p>
          <ul style={{ fontSize: '14px', fontWeight: 400 }}>
            {settings?.navigation?.footer && settings.navigation.footer.length > 0 ? (
              settings.navigation.footer.map((item) => (
                <li key={item.id} style={{ marginBottom: '10px' }}>
                  <Link href={item.link_url} className="text-slate-400 hover:text-secondary-footer-hover flex items-center gap-1 transition-colors">
                    <ChevronRight style={{ height: '12px', width: '12px' }} className="text-secondary-footer-hover" /> {item.name}
                  </Link>
                </li>
              ))
            ) : (
              (settings?.categories || []).map((cat) => (
                <li key={cat.id} style={{ marginBottom: '10px' }}>
                  <Link href={`/shop?categorySlug=${cat.slug}`} className="text-slate-400 hover:text-secondary-footer-hover flex items-center gap-1 transition-colors">
                    <ChevronRight style={{ height: '12px', width: '12px' }} className="text-secondary-footer-hover" /> {cat.name}
                  </Link>
                </li>
              ))
            )}
          </ul>
        </div>

        {/* Col 3: Information */}
        <div>
            <p className="text-white" style={{ fontSize: '16px', fontWeight: 500, marginBottom: '16px' }}>Information</p>
          <ul style={{ fontSize: '14px', fontWeight: 400 }}>
            {settings?.navigation?.footer_policies && settings.navigation.footer_policies.length > 0 && (
              settings.navigation.footer_policies.map((item) => (
                <li key={item.id} style={{ marginBottom: '10px' }}>
                  <Link href={item.link_url} className="text-slate-400 hover:text-secondary-footer-hover flex items-center gap-1 transition-colors">
                    <ChevronRight style={{ height: '12px', width: '12px' }} className="text-secondary-footer-hover" /> {item.name}
                  </Link>
                </li>
              ))
            )}
            <li style={{ marginTop: '10px', paddingTop: '10px', borderTop: '1px solid rgba(255,255,255,0.05)' }}>
              <Link href="/reseller" className="text-emerald-400 hover:text-secondary-footer-hover flex items-center gap-1 font-semibold transition-colors">
                <ChevronRight style={{ height: '12px', width: '12px' }} className="text-emerald-400" /> Become a Reseller
              </Link>
            </li>
          </ul>
        </div>

        {/* Col 4: Customer Policy — full width on mobile */}
        <div className="col-span-2 lg:col-span-1">
          <p className="text-white" style={{ fontSize: '16px', fontWeight: 500, marginBottom: '16px' }}>Customer Policy</p>
          <ul style={{ fontSize: '14px', fontWeight: 400 }}>
            {(settings?.navigation?.footer_customer_policy || []).map((item) => (
              <li key={item.id} style={{ marginBottom: '10px' }}>
                <Link href={item.link_url} className="text-slate-400 hover:text-secondary-footer-hover flex items-center gap-1 transition-colors">
                  <ChevronRight style={{ height: '12px', width: '12px' }} className="text-secondary-footer-hover" /> {item.name}
                </Link>
              </li>
            ))}
          </ul>
        </div>

        {/* Col 5: Newsletter — full width on mobile */}
        <div className="col-span-2 lg:col-span-1">
          {/* Title with orange underline */}
          <p className="text-white" style={{ fontSize: '16px', fontWeight: 500, paddingBottom: '8px', borderBottom: '2px solid var(--color-secondary-footer-hover)', display: 'inline-block' }}>Newsletter</p>
          <div style={{ marginTop: '16px' }}>
            {/* Email input */}
            <div className="flex items-center gap-2 rounded transition-colors" style={{ border: '1px solid #334155', padding: '8px 12px', marginBottom: '10px', fontSize: '13px' }}>
              <Mail style={{ height: '14px', width: '14px' }} className="text-slate-400 shrink-0" />
              <input
                type="email"
                placeholder="Your e-mail"
                className="bg-transparent text-slate-300 placeholder-slate-500 outline-none w-full"
                style={{ fontSize: '13px' }}
              />
            </div>
            {/* Subscribe button */}
            <button
              type="button"
              className="w-full footer-subscribe-btn active:scale-95 font-bold rounded"
              style={{ fontSize: '14px', padding: '10px 0', marginBottom: '12px' }}
            >
              Subscribe
            </button>
            {/* Description */}
            <p className="text-slate-400 leading-relaxed" style={{ fontSize: '13px' }}>
              Subscribe to our Newsletter to receive early discount offers, latest news, sales and promo information.
            </p>
          </div>
        </div>

      </div>

      {/* Bottom Copyright Bar */}
      <div className="border-t border-emerald-950" style={{ backgroundColor: '#002f1a', paddingTop: '16px', paddingBottom: '16px' }}>
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pb-16 lg:pb-0">
          <div className="flex flex-col sm:flex-row justify-between items-center gap-4" style={{ fontSize: '13px' }}>
            <p className="text-slate-400">{settings?.settings?.store_copyright || `© ${new Date().getFullYear()} Sawdabazar. All rights reserved.`}</p>

            {settings?.settings?.store_payment_image && (
              <div className="flex items-center gap-2">
                <span className="font-bold text-slate-300" style={{ fontSize: '12px' }}>Pay With</span>
                <img
                  src={settings.settings.store_payment_image.startsWith('http')
                    ? settings.settings.store_payment_image
                    : `${process.env.NEXT_PUBLIC_API_URL || 'http://127.0.0.1:8000'}/storage/${settings.settings.store_payment_image}`}
                  alt="Secure Payment Partners"
                  style={{ maxHeight: '44px', width: 'auto', maxWidth: '280px', objectFit: 'contain', opacity: 0.9 }}
                />
              </div>
            )}
          </div>
        </div>
      </div>

    </footer>
  );
};