import React, { useState } from 'react';
import { NavLink, useNavigate } from 'react-router-dom';
import { useDemoStore } from '../../mock/store';
import {
  LayoutDashboard,
  Workflow,
  Plus,
  MessageSquare,
  Menu,
  X,
  Boxes,
  BadgeDollarSign,
  Users,
  Settings,
  Sparkles,
} from 'lucide-react';
import { SYSTEM_MODULES } from '../../core/modules/registry';

export const BottomNav: React.FC = () => {
  const { setIsQuickActionsOpen, setIsAiDrawerOpen } = useDemoStore();
  const [isMoreMenuOpen, setIsMoreMenuOpen] = useState(false);
  const navigate = useNavigate();

  return (
    <>
      {/* More menu drawer on mobile */}
      {isMoreMenuOpen && (
        <div className="fixed inset-0 z-50 flex flex-col justify-end">
          <div
            className="fixed inset-0 krona-overlay"
            onClick={() => setIsMoreMenuOpen(false)}
          />
          <div className="relative bg-krona-raised border-t border-krona-border rounded-t-2xl p-4 z-10 max-h-[80vh] overflow-y-auto animate-fade-in shadow-krona-modal">
            <div className="flex items-center justify-between pb-3 mb-2 border-b border-krona-border">
              <span className="text-sm font-semibold text-krona-primary">Все разделы Кроны</span>
              <button onClick={() => setIsMoreMenuOpen(false)} className="p-1 text-krona-secondary">
                <X className="w-5 h-5" />
              </button>
            </div>

            <div className="grid grid-cols-3 gap-2 text-center text-xs pb-4">
              {SYSTEM_MODULES.map((m) => (
                <button
                  key={m.id}
                  onClick={() => {
                    setIsMoreMenuOpen(false);
                    navigate(m.route);
                  }}
                  className="p-3 rounded-lg border border-krona-border bg-krona-surface hover:bg-krona-workspace flex flex-col items-center gap-1.5 transition-colors"
                >
                  <span className="text-krona-gold font-medium text-xs truncate max-w-full">
                    {m.label}
                  </span>
                </button>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* Persistent Bottom Bar */}
      <nav className="fixed bottom-0 inset-x-0 h-16 bg-[#252722] text-[#D8D8D0] border-t border-[#3A3D35] flex items-center justify-around z-40 px-2">
        <NavLink
          to="/"
          end
          className={({ isActive }) =>
            `flex flex-col items-center gap-1 p-1 text-[11px] ${
              isActive ? 'text-[#D4B16D] font-semibold' : 'text-[#858980]'
            }`
          }
        >
          <LayoutDashboard className="w-5 h-5" />
          <span>Главная</span>
        </NavLink>

        <NavLink
          to="/operations"
          className={({ isActive }) =>
            `flex flex-col items-center gap-1 p-1 text-[11px] ${
              isActive ? 'text-[#D4B16D] font-semibold' : 'text-[#858980]'
            }`
          }
        >
          <Workflow className="w-5 h-5" />
          <span>Работа</span>
        </NavLink>

        {/* Center Quick Action button */}
        <button
          onClick={() => setIsQuickActionsOpen(true)}
          className="w-11 h-11 rounded-full bg-[#2F684C] hover:bg-[#285A42] text-white flex items-center justify-center shadow-lg -mt-5 transition-transform active:scale-95"
          title="Быстрое действие"
        >
          <Plus className="w-6 h-6" />
        </button>

        <NavLink
          to="/communications"
          className={({ isActive }) =>
            `flex flex-col items-center gap-1 p-1 text-[11px] ${
              isActive ? 'text-[#D4B16D] font-semibold' : 'text-[#858980]'
            }`
          }
        >
          <MessageSquare className="w-5 h-5" />
          <span>Чаты</span>
        </NavLink>

        <button
          onClick={() => setIsMoreMenuOpen(true)}
          className="flex flex-col items-center gap-1 p-1 text-[11px] text-[#858980] hover:text-[#D8D8D0]"
        >
          <Menu className="w-5 h-5" />
          <span>Ещё</span>
        </button>
      </nav>
    </>
  );
};