'use client';

import { usePathname, useRouter, useParams } from 'next/navigation';
import Link from 'next/link';
import { useAuthStore } from '@/store/authStore';
import { useEffect, useState } from 'react';
import Navbar from '@/components/Navbar';
import { api } from '@/lib/api';
import {
  Home, Store, Image as ImageIcon, Package,
  ShoppingBag, MessageSquareWarning, Ticket,
  CreditCard, ArrowDownToLine, BookOpen, Menu, X
} from 'lucide-react';

const sellerMenuGroups = [
  {
    title: 'TỔNG QUAN',
    items: [
      { href: '/seller/dashboard', label: 'Tổng quan', icon: Home, exact: true },
    ],
  },
  {
    title: 'THIẾT LẬP GIAN HÀNG',
    items: [
      { href: '/seller/profile', label: 'Hồ sơ gian hàng', icon: Store },
      { href: '/seller/images', label: 'Hình ảnh', icon: ImageIcon },
    ],
  },
  {
    title: 'BÁN HÀNG',
    items: [
      { href: '/seller/products', label: 'Sản phẩm', icon: Package },
      { href: '/seller/orders', label: 'Đơn bán', icon: ShoppingBag },
      { href: '/seller/complaints', label: 'Khiếu nại', icon: MessageSquareWarning },
      { href: '/seller/coupons', label: 'Mã giảm giá', icon: Ticket },
    ],
  },
  {
    title: 'TÀI CHÍNH',
    items: [
      { href: '/seller/payments', label: 'Thanh toán', icon: CreditCard },
      { href: '/seller/withdraw', label: 'Rút tiền', icon: ArrowDownToLine },
      { href: '/seller/ledger', label: 'Sổ cái & Lịch sử', icon: BookOpen },
    ],
  },
];

export default function SellerLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const router = useRouter();
  const params = useParams();
  const locale = (params?.locale as string) || 'vi';
  const token = useAuthStore((s) => s.token);
  const [mounted, setMounted] = useState(false);
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [hasAccess, setHasAccess] = useState(false);
  const [accessChecked, setAccessChecked] = useState(false);
  const [unreadNotifications, setUnreadNotifications] = useState(0);

  useEffect(() => {
    setMounted(true);
  }, []);

  const user = useAuthStore((s) => s.user);
  const setUser = useAuthStore((s) => s.setUser);
  const roleName = typeof user?.role === 'object' ? user.role?.name : user?.role;

  useEffect(() => {
    if (mounted && !token) {
      router.push(`/${locale}/auth/login`);
      return;
    }

    const ALLOWED_ROLES = ['SELLER', 'ADMIN', 'SUPER_ADMIN'];

    if (mounted && token) {
      if (roleName && ALLOWED_ROLES.includes(roleName)) {
        setHasAccess(true);
        setAccessChecked(true);
        return;
      }

      const verifySellerAccess = async () => {
        try {
          const response = await api.get('/auth/me');
          const refreshedUser = response.data;
          if (refreshedUser) {
            setUser(refreshedUser);
            const refreshedRole = refreshedUser.role;
            setHasAccess(ALLOWED_ROLES.includes(refreshedRole));
          } else {
            setHasAccess(false);
          }
        } catch (_error) {
          setHasAccess(false);
        } finally {
          setAccessChecked(true);
        }
      };

      verifySellerAccess();
    }
  }, [mounted, token, roleName, router, locale, setUser]);

  useEffect(() => {
    if (!token) return;
    const loadUnread = () => api.get('/notifications/unread-summary').then((response) => setUnreadNotifications(response.data.total || 0)).catch(() => undefined);
    void loadUnread();
    const interval = window.setInterval(loadUnread, 30000);
    return () => window.clearInterval(interval);
  }, [token]);

  if (!mounted || !token || !accessChecked) {
    return (
      <div className="min-h-screen bg-[#0a0a0a] flex items-center justify-center text-white">
        <div className="text-center">
          <p className="text-lg font-semibold">Đang kiểm tra quyền truy cập Seller...</p>
          <p className="text-sm text-gray-400">Vui lòng chờ trong giây lát.</p>
        </div>
      </div>
    );
  }

  if (mounted && token && !hasAccess) {
    return (
      <div className="min-h-screen bg-[#0a0a0a] flex flex-col">
        <Navbar />
        <div className="flex-1 flex items-center justify-center flex-col gap-4 text-center p-8">
          <div className="w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center mb-2">
            <Store className="w-8 h-8 text-red-400" />
          </div>
          <h2 className="text-xl font-bold text-white">Không có quyền truy cập</h2>
          <p className="text-gray-400 text-sm max-w-sm">
            Khu vực này chỉ dành cho Người bán (Seller). Tài khoản của bạn đang là <strong className="text-white">{user.role}</strong>.
          </p>
          <p className="text-gray-500 text-xs">Liên hệ Admin nếu bạn muốn mở kênh bán hàng.</p>
          <a href={`/${locale}`} className="mt-2 px-5 py-2.5 bg-primary/20 text-primary border border-primary/30 rounded-xl text-sm font-medium hover:bg-primary/30 transition-colors">
            Về trang chủ
          </a>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-[#0a0a0a] flex flex-col">
      {/* Navbar trên cùng — dùng chung với toàn trang */}
      <Navbar />

      {/* Body: Sidebar + Content */}
      <div className="flex flex-1 overflow-hidden">

        {/* ===== SIDEBAR ===== */}
        <>
          {/* Mobile overlay */}
          {sidebarOpen && (
            <div
              className="fixed inset-0 bg-black/60 z-40 md:hidden"
              onClick={() => setSidebarOpen(false)}
            />
          )}

          <aside
            className={`
              fixed md:static inset-y-0 left-0 z-50
              w-56 bg-[#0f0f0f] border-r border-white/5
              flex flex-col shrink-0 transition-transform duration-300
              ${sidebarOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'}
            `}
          >
            {/* Sidebar header — logo */}
            <div className="h-14 flex items-center px-5 border-b border-white/5">
              <Link
                href={`/${locale}/seller/dashboard`}
                className="flex items-center gap-2 font-black text-lg tracking-tighter"
              >
                <Store className="w-5 h-5 text-red-500" />
                <span className="text-white">SELLER</span>
                <span className="text-red-500">CENTER</span>
              </Link>
            </div>

            {/* Nav menu */}
            <div className="flex-1 overflow-y-auto py-4 px-3 space-y-5">
              {sellerMenuGroups.map((group, idx) => (
                <div key={idx}>
                  <h3 className="text-[10px] font-bold text-gray-600 mb-1.5 tracking-widest uppercase px-2">
                    {group.title}
                  </h3>
                  <nav className="space-y-0.5">
                    {group.items.map((item: any) => {
                      const fullHref = `/${locale}${item.href}`;
                      const active = item.exact
                        ? pathname === fullHref
                        : pathname.startsWith(fullHref);

                      return (
                        <Link
                          key={item.href}
                          href={fullHref}
                          onClick={() => { setSidebarOpen(false); if (unreadNotifications > 0 && (item.href === '/seller/orders' || item.href === '/seller/complaints')) { void api.post('/notifications/read-all'); setUnreadNotifications(0); } }}
                          className={`flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
                            active
                              ? 'bg-red-500/10 text-red-400 border border-red-500/20'
                              : 'text-gray-400 hover:text-white hover:bg-white/5'
                          }`}
                        >
                          <item.icon className="w-4 h-4 shrink-0" />
                          {item.label}{unreadNotifications > 0 && (item.href === '/seller/orders' || item.href === '/seller/complaints') && <span className="ml-auto h-2.5 w-2.5 animate-pulse rounded-full bg-red-500 shadow-[0_0_8px_rgba(239,68,68,.8)]" />}
                        </Link>
                      );
                    })}
                  </nav>
                </div>
              ))}
            </div>
          </aside>
        </>

        {/* ===== MAIN CONTENT ===== */}
        <main className="flex-1 overflow-y-auto">
          {/* Mobile topbar nút mở sidebar */}
          <div className="md:hidden flex items-center gap-3 px-4 py-3 border-b border-white/5 bg-[#0f0f0f]">
            <button
              onClick={() => setSidebarOpen(true)}
              className="p-2 rounded-lg bg-white/5 text-white"
            >
              <Menu className="w-4 h-4" />
            </button>
            <span className="text-white font-bold text-sm">Seller Center</span>
          </div>

          <div className="p-4 md:p-6 lg:p-8 max-w-[1400px] mx-auto w-full">
            {children}
          </div>
        </main>
      </div>
    </div>
  );
}