'use client';

import Link from 'next/link';
import { useEffect, useState } from 'react';
import { fetchSiteConfig } from '@/lib/siteConfig';

export default function Footer({ locale = 'vi' }: { locale?: string }) {
  const isVi = locale === 'vi';
  const [siteConfig, setSiteConfig] = useState({ siteName: 'SHOP MMO', siteDescription: 'Marketplace sản phẩm số' });

  useEffect(() => {
    void fetchSiteConfig(locale).then((config) => setSiteConfig({ siteName: config.siteName, siteDescription: config.siteDescription }));
  }, [locale]);
  const brands = [
    { name: 'STEAM' },
    { name: 'Google Play' },
    { name: 'Microsoft' },
    { name: 'PlayStation' },
    { name: 'Adobe' },
    { name: 'Canva' },
    { name: 'Notion' },
    { name: 'Figma' }
  ];

  // Link đã có route thật
  const supportLinks = [
    { label: isVi ? 'Trung tâm hỗ trợ' : 'Help center', href: `/${locale}/terms` },
    { label: isVi ? 'Bảo vệ đơn hàng' : 'Order protection', href: `/${locale}/terms` },
    { label: isVi ? 'Chính sách hoàn tiền' : 'Refund policy', href: `/${locale}/terms` },
    { label: isVi ? 'Báo cáo sự cố' : 'Report an issue', href: `/${locale}/terms` },
    { label: isVi ? 'Hướng dẫn sử dụng' : 'User guide', href: `/${locale}/terms` },
    { label: isVi ? 'Câu hỏi thường gặp' : 'Frequently asked questions', href: `/${locale}/terms` },
  ];

  const shopLinks = [
    { label: isVi ? 'Mua bán' : 'Marketplace', href: `/${locale}/search` },
    { label: isVi ? 'Cài đặt tài khoản' : 'Account settings', href: `/${locale}/settings` },
    { label: isVi ? 'Chính sách bảo mật' : 'Privacy policy', href: `/${locale}/privacy` },
    { label: isVi ? 'Điều khoản dịch vụ' : 'Terms of service', href: `/${locale}/terms` },
    { label: isVi ? 'Về chúng tôi' : 'About us', href: `/${locale}/terms` },
    { label: isVi ? 'Liên hệ' : 'Contact', href: `/${locale}/terms` },
  ];

  const sellerLinks = [
    { label: isVi ? 'Bảng điều khiển bán hàng' : 'Seller dashboard', href: `/${locale}/seller/dashboard` },
    { label: isVi ? 'Tạo sản phẩm' : 'Create product', href: `/${locale}/seller/products/create` },
    { label: isVi ? 'Quản lý sản phẩm' : 'Product management', href: `/${locale}/seller/products` },
    { label: isVi ? 'Đơn hàng của tôi' : 'My orders', href: `/${locale}/seller/orders` },
    { label: isVi ? 'Doanh thu & Thanh toán' : 'Revenue & payments', href: `/${locale}/seller/ledger` },
    { label: isVi ? 'Hướng dẫn người bán' : 'Seller guide', href: `/${locale}/terms` },
  ];

  return (
    <footer className="w-full bg-[#0a0a0a] border-t border-white/5 mt-16 pt-8 pb-12">
      {/* Brands row */}
      <div className="container mx-auto px-4 max-w-7xl">
        <div className="flex flex-wrap items-center justify-center md:justify-between gap-6 py-6 border-b border-white/5 mb-10">
          {brands.map((brand, i) => (
            <span key={i} className="text-gray-500 font-bold text-lg hover:text-white transition-colors cursor-pointer">
              {brand.name}
            </span>
          ))}
        </div>

        {/* Main Footer Links */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-10">
          {/* Col 1 */}
          <div className="space-y-4">
            <div className="flex items-center gap-2">
               <div className="w-10 h-10 bg-white rounded flex items-center justify-center font-black text-black">
                 SM
               </div>
               <div>
                 <h2 className="text-white font-bold text-xl leading-none">{siteConfig.siteName}</h2>
                 <p className="text-gray-400 text-[10px]">{siteConfig.siteDescription}</p>
               </div>
            </div>
            <p className="text-gray-400 text-sm leading-relaxed mt-4">
              {isVi
                ? 'Mua bán sản phẩm số và dịch vụ số với hồ sơ người bán, bằng chứng bàn giao và quy trình hỗ trợ rõ ràng.'
                : 'Trade digital products and services with seller profiles, delivery evidence, and a transparent support process.'}
            </p>
            <div className="grid grid-cols-2 gap-4 mt-6">
               <div className="flex items-center gap-2">
                 <div className="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center border border-red-500/20 text-red-500 font-bold text-xs">A</div>
                 <div>
                   <p className="text-white text-xs font-bold">{isVi ? 'Giao dịch an toàn' : 'Safe transactions'}</p>
                   <p className="text-gray-500 text-[10px]">{isVi ? 'Bảo vệ người mua' : 'Buyer protection'}</p>
                 </div>
               </div>
               <div className="flex items-center gap-2">
                 <div className="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center border border-red-500/20 text-red-500 font-bold text-xs">B</div>
                 <div>
                   <p className="text-white text-xs font-bold">{isVi ? 'Quy trình rõ ràng' : 'Clear process'}</p>
                   <p className="text-gray-500 text-[10px]">{isVi ? 'Minh bạch & dễ hiểu' : 'Transparent and simple'}</p>
                 </div>
               </div>
               <div className="flex items-center gap-2">
                 <div className="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center border border-red-500/20 text-red-500 font-bold text-xs">C</div>
                 <div>
                   <p className="text-white text-xs font-bold">{isVi ? 'Thanh toán đa dạng' : 'Flexible payments'}</p>
                   <p className="text-gray-500 text-[10px]">{isVi ? 'Nhanh chóng & tiện lợi' : 'Fast and convenient'}</p>
                 </div>
               </div>
               <div className="flex items-center gap-2">
                 <div className="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center border border-red-500/20 text-red-500 font-bold text-xs">D</div>
                 <div>
                   <p className="text-white text-xs font-bold">{isVi ? 'Hỗ trợ tận tâm' : 'Dedicated support'}</p>
                   <p className="text-gray-500 text-[10px]">{isVi ? 'Đồng hành 24/7' : 'Available 24/7'}</p>
                 </div>
               </div>
            </div>
          </div>

          {/* Col 2 */}
          <div>
            <h3 className="text-white font-bold mb-6 flex items-center gap-2 uppercase text-sm">
              <span className="text-red-500">🎧</span> {isVi ? 'Chăm sóc khách hàng' : 'Customer support'}
            </h3>
            <ul className="space-y-3 text-sm text-gray-400">
              {supportLinks.map((link) => (
                <li key={link.label}><Link href={link.href} className="hover:text-white flex items-center gap-2"><span className="text-xs">›</span> {link.label}</Link></li>
              ))}
            </ul>
          </div>

          {/* Col 3 */}
          <div>
            <h3 className="text-white font-bold mb-6 flex items-center gap-2 uppercase text-sm">
              <span className="text-red-500">💎</span> SHOP MMO
            </h3>
            <ul className="space-y-3 text-sm text-gray-400">
              {shopLinks.map((link) => (
                <li key={link.label}><Link href={link.href} className="hover:text-white flex items-center gap-2"><span className="text-xs">›</span> {link.label}</Link></li>
              ))}
            </ul>
          </div>

          {/* Col 4 */}
          <div>
            <h3 className="text-white font-bold mb-6 flex items-center gap-2 uppercase text-sm">
              <span className="text-red-500">🏪</span> {isVi ? 'Kênh bán hàng' : 'Seller Center'}
            </h3>
            <ul className="space-y-3 text-sm text-gray-400">
              {sellerLinks.map((link) => (
                <li key={link.label}><Link href={link.href} className="hover:text-white flex items-center gap-2"><span className="text-xs">›</span> {link.label}</Link></li>
              ))}
            </ul>
          </div>
        </div>

        {/* Bottom Banner */}
        <div className="mt-12 pt-6 border-t border-white/5 flex flex-wrap items-center justify-between gap-4 text-xs text-gray-500">
           <div className="flex gap-4">
             <span className="font-bold text-gray-400 uppercase">💳 {isVi ? 'Phương thức thanh toán' : 'Payment methods'}</span>
           </div>
           <div className="flex gap-4">
             <span className="font-bold text-gray-400 uppercase">🔗 {isVi ? 'Theo dõi chúng tôi' : 'Follow us'}</span>
           </div>
           <div className="flex gap-4">
             <span className="font-bold text-gray-400 uppercase">📱 {isVi ? 'Ứng dụng SHOP MMO' : 'SHOP MMO application'}</span>
           </div>
           <div className="text-center text-gray-600 text-xs w-full mt-4 border-t border-white/5 pt-4">
             © {new Date().getFullYear()} {siteConfig.siteName}. All rights reserved.
           </div>
        </div>
      </div>
    </footer>
  );
}