// Sidebar.jsx
'use strict';
const { useState } = React;

const NAV = [
  { id:'dashboard',   label:'Dashboard',          icon:'LayoutDashboard' },
  { id:'os',          label:'Ordens de Serviço',   icon:'FileText' },
  { id:'clientes',    label:'Clientes',             icon:'Users' },
  { id:'agenda',      label:'Agenda',               icon:'Calendar' },
  { id:'servicos',    label:'Serviços',             icon:'Wrench' },
  { id:'financeiro',  label:'Financeiro',           icon:'DollarSign' },
  { id:'relatorios',  label:'Relatórios',           icon:'BarChart2' },
  { id:'configuracoes',label:'Configurações',       icon:'Settings' },
];

function Sidebar({ page, setPage, user, onLogout, mobileOpen, onMobileClose }) {
  const goTo = (id) => { setPage(id); onMobileClose(); };

  const inner = (
    <div className="flex flex-col h-full relative overflow-hidden"
      style={{ background: 'linear-gradient(180deg, #0e2a5e 0%, #0A1F44 35%, #06152d 100%)' }}>
      {/* Decorative blobs */}
      <div aria-hidden style={{
        position:'absolute', top:-90, left:-50, width:280, height:280, borderRadius:'50%',
        background:'radial-gradient(circle, rgba(126,87,255,0.22) 0%, transparent 70%)',
        pointerEvents:'none', filter:'blur(8px)',
      }} />
      <div aria-hidden style={{
        position:'absolute', top:'40%', right:-80, width:240, height:240, borderRadius:'50%',
        background:'radial-gradient(circle, rgba(255,107,53,0.12) 0%, transparent 70%)',
        pointerEvents:'none', filter:'blur(8px)',
      }} />
      <div aria-hidden style={{
        position:'absolute', bottom:80, left:-60, width:220, height:220, borderRadius:'50%',
        background:'radial-gradient(circle, rgba(59,130,246,0.12) 0%, transparent 70%)',
        pointerEvents:'none', filter:'blur(8px)',
      }} />

      {/* Logo (com safe-area-top pra notch quando rodando como PWA) */}
      <div className="relative px-3 pb-4 border-b" style={{
        borderColor:'rgba(255,255,255,0.06)',
        paddingTop: 'max(1.25rem, env(safe-area-inset-top))',
      }}>
        <div className="flex items-center justify-center">
          <img src="assets/juflow-logo.png" alt="Juflow Digital"
            style={{ width:'100%', maxWidth:210, height:'auto', objectFit:'contain',
              filter:'drop-shadow(0 4px 20px rgba(126,87,255,0.55)) drop-shadow(0 0 1px rgba(255,255,255,0.3))' }} />
        </div>
        <div className="mt-2.5 flex items-center justify-center gap-2">
          <div className="h-px w-5" style={{ background:'linear-gradient(90deg, transparent, rgba(255,255,255,0.25))' }} />
          <span className="text-[9px] font-bold uppercase" style={{ color:'rgba(255,255,255,0.45)', letterSpacing:'0.24em' }}>Sistema de Gestão</span>
          <div className="h-px w-5" style={{ background:'linear-gradient(90deg, rgba(255,255,255,0.25), transparent)' }} />
        </div>
      </div>

      {/* Nav */}
      <nav className="relative flex-1 px-3 py-5 overflow-y-auto">
        <div className="flex items-center gap-2 px-3 mb-4">
          <div className="h-px flex-1" style={{ background:'linear-gradient(90deg, transparent, rgba(255,255,255,0.14))' }} />
          <span className="text-[10px] font-extrabold uppercase" style={{ color:'rgba(255,255,255,0.4)', letterSpacing:'0.28em' }}>Menu</span>
          <div className="h-px flex-1" style={{ background:'linear-gradient(90deg, rgba(255,255,255,0.14), transparent)' }} />
        </div>

        <ul className="flex flex-col gap-1">
          {NAV.map(item => {
            const active = page === item.id;
            return (
              <li key={item.id}>
                <button onClick={() => goTo(item.id)}
                  className="relative w-full flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-sm font-semibold transition-all duration-200 group overflow-hidden"
                  style={{
                    background: active
                      ? 'linear-gradient(135deg, #FF7E47 0%, #FF6B35 50%, #E5541F 100%)'
                      : 'transparent',
                    color: active ? 'white' : 'rgba(255,255,255,0.72)',
                    boxShadow: active
                      ? '0 10px 24px -6px rgba(255,107,53,0.55), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15)'
                      : 'none',
                    transform: active ? 'translateZ(0)' : 'none',
                  }}
                  onMouseEnter={e => { if (!active) e.currentTarget.style.background = 'rgba(255,255,255,0.06)'; }}
                  onMouseLeave={e => { if (!active) e.currentTarget.style.background = 'transparent'; }}>
                  {active && (
                    <span aria-hidden style={{
                      position:'absolute', left:0, top:8, bottom:8, width:3, borderRadius:'0 3px 3px 0',
                      background:'rgba(255,255,255,0.7)', boxShadow:'0 0 12px rgba(255,255,255,0.5)',
                    }} />
                  )}
                  <Icon name={item.icon} size={17}
                    color={active ? 'white' : 'rgba(255,255,255,0.6)'}
                    style={{ transition:'all .2s', filter: active ? 'drop-shadow(0 2px 4px rgba(0,0,0,0.25))' : 'none' }} />
                  <span className="relative">{item.label}</span>
                  {item.id === 'os' && (
                    <span className="ml-auto text-[10px] font-extrabold rounded-full px-2 py-0.5 min-w-[24px] text-center"
                      style={active ? {
                        background:'rgba(255,255,255,0.25)', color:'white',
                        border:'1px solid rgba(255,255,255,0.3)', textShadow:'0 1px 2px rgba(0,0,0,0.2)',
                      } : {
                        background:'linear-gradient(135deg, rgba(255,107,53,0.25), rgba(255,107,53,0.1))',
                        color:'#FFB088',
                        border:'1px solid rgba(255,107,53,0.3)',
                      }}>25</span>
                  )}
                </button>
              </li>
            );
          })}
        </ul>
      </nav>

      {/* User (com safe-area-bottom pra home indicator do iOS) */}
      <div className="relative px-3 pt-4 border-t" style={{
        borderColor:'rgba(255,255,255,0.06)',
        paddingBottom: 'max(1rem, env(safe-area-inset-bottom))',
      }}>
        <div className="flex items-center gap-3 px-3 py-2.5 rounded-2xl"
          style={{
            background:'linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%)',
            border:'1px solid rgba(255,255,255,0.08)',
            boxShadow:'inset 0 1px 0 rgba(255,255,255,0.05)',
          }}>
          <div className="w-9 h-9 rounded-full flex items-center justify-center text-xs font-extrabold flex-shrink-0"
            style={{
              background:'linear-gradient(135deg, #FF7E47 0%, #FF6B35 50%, #E5541F 100%)',
              color:'white',
              boxShadow:'0 4px 14px -2px rgba(255,107,53,0.55), inset 0 1px 0 rgba(255,255,255,0.25), 0 0 0 2px rgba(255,107,53,0.15)',
            }}>
            {user?.name?.split(' ').map(w => w[0]).slice(0,2).join('') || 'AD'}
          </div>
          <div className="flex-1 min-w-0">
            <div className="text-sm font-semibold text-white truncate">{user?.name || 'Administrador'}</div>
            <div className="text-[11px] truncate" style={{ color:'rgba(255,255,255,0.45)' }}>{user?.email || 'demo@juflow.com'}</div>
          </div>
          <button onClick={onLogout} title="Sair"
            className="p-1.5 rounded-lg transition-all duration-150 hover:scale-110 active:scale-95"
            style={{ color:'rgba(255,255,255,0.5)' }}
            onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,107,53,0.15)'; e.currentTarget.style.color = '#FF6B35'; }}
            onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'rgba(255,255,255,0.5)'; }}>
            <Icon name="LogOut" size={15} color="currentColor" />
          </button>
        </div>
      </div>
    </div>
  );

  return (
    <>
      {/* Desktop sidebar */}
      <aside className="hidden md:flex flex-col flex-shrink-0 no-print" style={{ width: 250 }}>
        {inner}
      </aside>

      {/* Mobile overlay */}
      {mobileOpen && (
        <div className="fixed inset-0 z-[500] flex md:hidden no-print">
          <div className="sidebar-overlay absolute inset-0 bg-black bg-opacity-50" onClick={onMobileClose} />
          <aside className="relative flex flex-col flex-shrink-0 anim-fade" style={{ width: 250, zIndex: 501 }}>
            {inner}
          </aside>
        </div>
      )}
    </>
  );
}

Object.assign(window, { Sidebar });