Condopay/components/Layout.tsx

import React, { useEffect, useState } from 'react';
import { NavLink, Outlet } from 'react-router-dom';
import { Users, Settings, Building, LogOut, Menu, X, ChevronDown, Check, LayoutDashboard, Megaphone, Info, AlertTriangle, Hammer, Calendar, MessageSquareWarning } from 'lucide-react';
import { CondoService } from '../services/mockDb';
import { Condo, Notice, AppSettings } from '../types';

export const Layout: React.FC = () => {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const user = CondoService.getCurrentUser();
  const isAdmin = user?.role === 'admin' || user?.role === 'poweruser';
  
  const [condos, setCondos] = useState<Condo[]>([]);
  const [activeCondo, setActiveCondo] = useState<Condo | undefined>(undefined);
  const [showCondoDropdown, setShowCondoDropdown] = useState(false);
  const [settings, setSettings] = useState<AppSettings | null>(null);

  // Notice Modal State
  const [activeNotice, setActiveNotice] = useState<Notice | null>(null);

  const fetchContext = async () => {
    // Fetch global settings to check features
    try {
        const globalSettings = await CondoService.getSettings();
        setSettings(globalSettings);

        if (isAdmin && globalSettings.features.multiCondo) {
            const list = await CondoService.getCondos();
            setCondos(list);
        } else if (isAdmin) {
             // If multi-condo disabled, just get the one (which acts as active)
             const list = await CondoService.getCondos();
             setCondos(list); // Store list anyway, though dropdown will be hidden
        }
    } catch(e) { console.error("Error fetching settings", e); }

    const active = await CondoService.getActiveCondo();
    setActiveCondo(active);

    // Check for notices for User
    // ONLY if notices feature is enabled (which we check inside logic or rely on settings state)
    // However, `getSettings` is async. For simplicity, we fetch notices and if feature disabled at backend/UI level, it's fine.
    // Ideally we check `settings?.features.notices` but `settings` might not be set yet. 
    // We'll rely on the UI hiding it, but fetching it doesn't hurt.
    if (!isAdmin && active && user) {
        try {
            const unread = await CondoService.getUnreadNoticesForUser(user.id, active.id);
            if (unread.length > 0) {
                // Show the most recent unread notice
                setActiveNotice(unread[0]);
            }
        } catch(e) {}
    }
  };

  useEffect(() => {
      fetchContext();

      // Listen for updates from Settings
      const handleCondoUpdate = () => fetchContext();
      window.addEventListener('condo-updated', handleCondoUpdate);
      return () => window.removeEventListener('condo-updated', handleCondoUpdate);
  }, [isAdmin]);

  const handleCondoSwitch = (condoId: string) => {
      CondoService.setActiveCondo(condoId);
      setShowCondoDropdown(false);
  };

  const handleReadNotice = async () => {
      if (activeNotice && user) {
          await CondoService.markNoticeAsRead(activeNotice.id, user.id);
          setActiveNotice(null);
      }
  };

  const closeNoticeModal = () => setActiveNotice(null);

  const navClass = ({ isActive }: { isActive: boolean }) =>
    `flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 ${
      isActive
        ? 'bg-blue-600 text-white shadow-md'
        : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100'
    }`;

  const closeMenu = () => setIsMobileMenuOpen(false);

  const NoticeIcon = ({type}: {type: string}) => {
      switch(type) {
          case 'warning': return <AlertTriangle className="w-8 h-8 text-amber-500" />;
          case 'maintenance': return <Hammer className="w-8 h-8 text-orange-500" />;
          case 'event': return <Calendar className="w-8 h-8 text-purple-500" />;
          default: return <Info className="w-8 h-8 text-blue-500" />;
      }
  };

  // Check if notices are actually enabled before showing modal
  const showNotice = activeNotice && settings?.features.notices;

  return (
    <div className="flex h-screen bg-slate-50 overflow-hidden">
      
      {/* Active Notice Modal */}
      {showNotice && activeNotice && (
          <div className="fixed inset-0 bg-black/60 z-[100] flex items-center justify-center p-4 backdrop-blur-sm animate-in fade-in duration-300">
              <div className="bg-white rounded-2xl shadow-2xl max-w-md w-full overflow-hidden transform transition-all scale-100">
                  <div className={`p-6 ${activeNotice.type === 'warning' ? 'bg-amber-50' : 'bg-blue-50'} border-b border-slate-100 flex items-start gap-4`}>
                      <div className="p-3 bg-white rounded-full shadow-sm">
                          <NoticeIcon type={activeNotice.type} />
                      </div>
                      <div>
                          <h3 className="text-xl font-bold text-slate-800 leading-tight">{activeNotice.title}</h3>
                          <p className="text-sm text-slate-500 mt-1">{new Date(activeNotice.date).toLocaleDateString()}</p>
                      </div>
                  </div>
                  <div className="p-6 text-slate-600 leading-relaxed whitespace-pre-wrap">
                      {activeNotice.content}
                      {activeNotice.link && (
                          <div className="mt-4">
                              <a href={activeNotice.link} target="_blank" rel="noopener noreferrer" className="text-blue-600 underline font-medium hover:text-blue-800">
                                  Apri Documento / Link
                              </a>
                          </div>
                      )}
                  </div>
                  <div className="p-4 bg-slate-50 border-t border-slate-100 flex gap-3">
                      <button onClick={closeNoticeModal} className="flex-1 py-2.5 px-4 text-slate-600 font-medium hover:bg-slate-200 rounded-lg transition-colors">Chiudi</button>
                      <button onClick={handleReadNotice} className="flex-1 py-2.5 px-4 bg-blue-600 text-white font-bold rounded-lg hover:bg-blue-700 shadow-md transition-colors flex items-center justify-center gap-2">
                          <Check className="w-5 h-5" /> Letto
                      </button>
                  </div>
              </div>
          </div>
      )}

      {/* Mobile Header */}
      <div className="lg:hidden fixed top-0 left-0 right-0 h-16 bg-white border-b border-slate-200 flex items-center justify-between px-4 z-40 shadow-sm">
        <div className="flex items-center gap-2 overflow-hidden">
           <div className="bg-blue-600 p-1.5 rounded-lg flex-shrink-0">
            <Building className="text-white w-5 h-5" />
          </div>
          <div className="flex flex-col min-w-0">
              <h1 className="font-bold text-slate-800 leading-tight truncate">CondoPay</h1>
              {activeCondo && <p className="text-xs text-slate-500 truncate">{activeCondo.name}</p>}
          </div>
        </div>
        <button onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} className="p-2 text-slate-600 focus:outline-none">
          {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
        </button>
      </div>

      {/* Sidebar Overlay for Mobile */}
      {isMobileMenuOpen && (
        <div className="fixed inset-0 bg-black/50 z-40 lg:hidden backdrop-blur-sm" onClick={closeMenu}></div>
      )}

      {/* Sidebar Navigation */}
      <aside className={`
        fixed top-0 left-0 bottom-0 w-72 bg-white border-r border-slate-200 flex flex-col shadow-xl z-50 transform transition-transform duration-300 ease-in-out
        ${isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full'} lg:translate-x-0 lg:static lg:shadow-none lg:z-auto
      `}>
        {/* Desktop Logo & Condo Switcher */}
        <div className="p-6 hidden lg:flex flex-col gap-4 border-b border-slate-100">
          <div className="flex items-center gap-3">
              <div className="bg-blue-600 p-2 rounded-lg">
                <Building className="text-white w-6 h-6" />
              </div>
              <h1 className="font-bold text-xl text-slate-800 tracking-tight">CondoPay</h1>
          </div>

          {/* Condo Switcher (Admin Only & MultiCondo Enabled) */}
          {isAdmin && settings?.features.multiCondo && (
              <div className="relative mt-2">
                   <div className="flex items-center gap-1.5 mb-2 text-xs font-bold text-slate-400 uppercase tracking-wider">
                       <LayoutDashboard className="w-3 h-3" />
                       Condomini
                   </div>
                  <button 
                    onClick={() => setShowCondoDropdown(!showCondoDropdown)}
                    className="w-full flex items-center justify-between px-3 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm text-slate-700 hover:border-blue-300 transition-colors"
                  >
                      <span className="font-medium truncate">{activeCondo?.name || 'Seleziona Condominio'}</span>
                      <ChevronDown className="w-4 h-4 text-slate-400" />
                  </button>
                  
                  {showCondoDropdown && (
                      <div className="absolute top-full left-0 right-0 mt-1 bg-white border border-slate-200 rounded-lg shadow-xl z-50 max-h-60 overflow-y-auto">
                          {condos.map(c => (
                              <button
                                key={c.id}
                                onClick={() => handleCondoSwitch(c.id)}
                                className="w-full text-left px-3 py-2 text-sm hover:bg-slate-50 flex items-center justify-between group"
                              >
                                  <span className="truncate text-slate-700 group-hover:text-blue-700">{c.name}</span>
                                  {c.id === activeCondo?.id && <Check className="w-3 h-3 text-blue-600" />}
                              </button>
                          ))}
                      </div>
                  )}
              </div>
          )}
          {/* Static info if not multi-condo or not admin */}
          {(!isAdmin || (isAdmin && !settings?.features.multiCondo)) && activeCondo && (
               <div className="px-3 py-2 bg-slate-50 border border-slate-100 rounded-lg text-sm text-slate-500 truncate">
                   {activeCondo.name}
               </div>
          )}
        </div>
        
        {/* Mobile Header inside drawer */}
        <div className="lg:hidden p-4 flex items-center justify-between border-b border-slate-100 h-16">
             <span className="font-bold text-slate-700 text-lg">Menu</span>
             <button onClick={closeMenu} className="p-1 rounded-md hover:bg-slate-100"><X className="w-6 h-6 text-slate-500"/></button>
        </div>

        {/* Mobile Condo Switcher */}
        {isAdmin && settings?.features.multiCondo && (
             <div className="lg:hidden px-4 py-2 border-b border-slate-100">
                 <p className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2 flex items-center gap-2">
                    <LayoutDashboard className="w-3 h-3" />
                    Condominio Attivo
                 </p>
                 <select 
                    value={activeCondo?.id || ''}
                    onChange={(e) => handleCondoSwitch(e.target.value)}
                    className="w-full p-2 bg-slate-50 border border-slate-200 rounded-lg text-sm text-slate-700 font-medium outline-none"
                 >
                     {condos.map(c => <option key={c.id} value={c.id} className="text-slate-800">{c.name}</option>)}
                 </select>
             </div>
        )}

        <nav className="flex-1 p-4 space-y-2 overflow-y-auto">
          <div className="lg:hidden mb-4 px-2 pt-2">
             <p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Navigazione</p>
          </div>

          <NavLink to="/" className={navClass} onClick={closeMenu}>
            <Users className="w-5 h-5" />
            <span className="font-medium">Famiglie</span>
          </NavLink>

          {/* Hide Tickets if disabled */}
          {settings?.features.tickets && (
              <NavLink to="/tickets" className={navClass} onClick={closeMenu}>
                <MessageSquareWarning className="w-5 h-5" />
                <span className="font-medium">Segnalazioni</span>
              </NavLink>
          )}
          
          <NavLink to="/settings" className={navClass} onClick={closeMenu}>
            <Settings className="w-5 h-5" />
            <span className="font-medium">Impostazioni</span>
          </NavLink>
        </nav>

        <div className="p-4 border-t border-slate-100 bg-slate-50/50">
          <div className="mb-4 px-2">
            <p className="text-sm font-bold text-slate-800 truncate">{user?.name || 'Utente'}</p>
            <p className="text-xs text-slate-500 truncate">{user?.email}</p>
            <div className="mt-1 inline-block px-2 py-0.5 rounded text-[10px] font-bold bg-slate-200 text-slate-600 uppercase">
                {user?.role || 'User'}
            </div>
          </div>
          <button 
            onClick={() => CondoService.logout()}
            className="flex items-center gap-3 px-4 py-2.5 w-full text-slate-600 hover:bg-red-50 hover:text-red-600 rounded-lg transition-colors text-sm font-medium border border-slate-200 hover:border-red-200 bg-white"
          >
            <LogOut className="w-4 h-4" />
            Esci
          </button>
        </div>
      </aside>

      {/* Main Content Area */}
      <main className="flex-1 overflow-y-auto overflow-x-hidden bg-slate-50 pt-16 lg:pt-0 w-full">
        <div className="max-w-7xl mx-auto p-4 md:p-8 w-full">
          <Outlet />
        </div>
      </main>
    </div>
  );
};