/* ──────────────────────────────────────────────────────────────────
   BachecaScreen — la dashboard "le tue cose" del dipendente
   Pattern cristallizzato — saldo, buste, spese, ferie, ore.
   ────────────────────────────────────────────────────────────────── */

function AnimBacheca() {
  return (
    <div style={{display:'flex',flexDirection:'column',height:'100%',background:'#F8FAFC',overflow:'hidden'}}>
      <AppHeader tenantLogo="/assets/tenant-logo-dimensione-srl.jpeg" view="Bacheca"/>
      <div style={{flex:1,overflowY:'auto',padding:'14px 14px 12px'}}>
        <div style={{marginBottom:14}}>
          <h1 style={{fontFamily:"'Syne',sans-serif",fontWeight:700,fontSize:22,color:'#0F172A',margin:0}}>Ciao Marco 👋</h1>
          <div style={{fontSize:13,color:'#64748B',marginTop:2}}>Le tue cose: saldo, buste, spese, ferie, ore.</div>
        </div>

        <HeroKPI
          icon={<>🏖️</>}
          label="Saldo ferie & permessi"
          source="da busta apr 26"
          blocks={[
            { value: '14', unit: 'g', sub: 'Ferie · 112h' },
            { value: '3',  unit: 'g', sub: 'ROL · 24h' },
            { value: '8',  unit: 'h', sub: 'Permessi' },
          ]}
        />

        <SectionCard icon="💶" title="Buste paga" rightHint="12 totali">
          <div style={{display:'flex',gap:10,overflowX:'auto',paddingBottom:4,marginRight:-14,paddingRight:14}}>
            {[
              { mese: 'apr 26', netto: '€1.842', ore: '168h' },
              { mese: 'mar 26', netto: '€1.756', ore: '160h' },
              { mese: 'feb 26', netto: '€1.892', ore: '172h' },
              { mese: 'gen 26', netto: '€1.701', ore: '152h' },
            ].map((b, i) => (
              <div key={i} style={{flexShrink:0,width:140,background:'#F8FAFC',border:'1px solid #E2E8F0',borderRadius:12,padding:'10px 12px'}}>
                <div style={{fontSize:11,color:'#64748B',fontWeight:600,textTransform:'uppercase',letterSpacing:.3}}>{b.mese}</div>
                <div style={{fontFamily:"'DM Sans',sans-serif",fontWeight:700,fontSize:22,color:'#0F172A',marginTop:4,lineHeight:1.1,letterSpacing:'-.01em',fontVariantNumeric:'tabular-nums'}}>{b.netto}</div>
                <div style={{fontSize:11.5,color:'#64748B',marginTop:2}}>netto · {b.ore}</div>
              </div>
            ))}
          </div>
        </SectionCard>

        <SectionCard
          icon="💸"
          title="Nota spese"
          rightHint={<span style={{display:'inline-flex',alignItems:'center',gap:4,background:'#F8FAFC',border:'1px solid #E2E8F0',borderRadius:8,padding:'4px 8px',fontSize:12,color:'#475569',fontWeight:600}}>mag 26 <Icon.ChevronD w={11}/></span>}
        >
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',gap:12,padding:'6px 2px 10px'}}>
            <div>
              <div style={{fontFamily:"'DM Sans',sans-serif",fontWeight:700,fontSize:26,color:'#0F172A',lineHeight:1,letterSpacing:'-.01em',fontVariantNumeric:'tabular-nums'}}>€259</div>
              <div style={{fontSize:12,color:'#64748B',marginTop:2}}>3 spese inviate</div>
            </div>
            <button style={{background:'#FFF7ED',color:ACCENT_2,border:'none',padding:'9px 14px',borderRadius:10,fontSize:13,fontWeight:700,fontFamily:'inherit',cursor:'pointer',display:'flex',alignItems:'center',gap:6}}>
              <Icon.Plus w={14}/> Nuova
            </button>
          </div>
          <div style={{display:'flex',gap:8,paddingTop:8,borderTop:'1px solid #F1F5F9'}}>
            <Pill bg="#ECFDF5" fg="#065F46" text="2 approvate · €175"/>
            <Pill bg="#FFFBEB" fg="#92400E" text="1 in attesa · €84"/>
          </div>
        </SectionCard>

        <SectionCard icon="📅" title="Prossime ferie">
          <div style={{display:'flex',alignItems:'center',gap:10,padding:'4px 2px'}}>
            <div style={{width:44,height:44,background:'#FFF7ED',borderRadius:10,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',color:ACCENT_2}}>
              <div style={{fontSize:9,fontWeight:700,textTransform:'uppercase',letterSpacing:.3}}>GIU</div>
              <div style={{fontFamily:"'DM Sans',sans-serif",fontWeight:700,fontSize:18,lineHeight:1,fontVariantNumeric:'tabular-nums'}}>15</div>
            </div>
            <div style={{flex:1}}>
              <div style={{fontSize:14,fontWeight:600,color:'#1E293B'}}>Ferie estive</div>
              <div style={{fontSize:12,color:'#64748B'}}>15 — 28 giugno · 10 giorni</div>
            </div>
            <span style={{fontSize:11,fontWeight:600,background:'#ECFDF5',color:'#059669',padding:'4px 10px',borderRadius:999}}>✓ Approvata</span>
          </div>
        </SectionCard>

        <SectionCard icon="⏱️" title="Foglio ore">
          <div style={{display:'flex',gap:8,alignItems:'center'}}>
            <select style={{padding:'9px 10px',borderRadius:10,border:'1px solid #E2E8F0',background:'#fff',fontSize:13,fontFamily:'inherit',color:'#1E293B',fontWeight:600,flex:1}}>
              <option>maggio 2026</option><option>aprile 2026</option>
            </select>
            <button style={{display:'inline-flex',alignItems:'center',gap:6,background:'#0F172A',color:'#fff',border:'none',padding:'10px 14px',borderRadius:10,fontWeight:700,fontSize:13,fontFamily:'inherit',cursor:'pointer'}}>
              <Icon.Download w={14}/> XLSX
            </button>
          </div>
        </SectionCard>

        <SectionCard icon="📁" title="Documenti HR" rightHint="3 file">
          <DocRow name="Contratto.pdf" sub="caricato 12 mar 26"/>
          <DocRow name="Attestato sicurezza.pdf" sub="caricato 04 gen 26" warn/>
          <DocRow name="CUD 2025.pdf" sub="caricato 28 feb 26"/>
        </SectionCard>
      </div>
      <BottomNav active="bacheca"/>
    </div>
  );
}

function Pill({ bg, fg, text }) {
  return <span style={{background:bg,color:fg,padding:'3px 10px',borderRadius:999,fontSize:11.5,fontWeight:600}}>{text}</span>;
}

function DocRow({ name, sub, warn }) {
  return (
    <div style={{display:'flex',alignItems:'center',gap:10,padding:'8px 0',borderBottom:'1px solid #F1F5F9'}}>
      <div style={{width:32,height:32,borderRadius:8,background: warn ? '#FEF2F2':'#F1F5F9',color: warn?'#DC2626':'#475569',display:'flex',alignItems:'center',justifyContent:'center'}}>
        <Icon.File w={15}/>
      </div>
      <div style={{flex:1}}>
        <div style={{fontSize:13.5,fontWeight:600,color:'#1E293B'}}>{name}</div>
        <div style={{fontSize:11.5,color:'#64748B'}}>{sub} {warn && <span style={{color:'#DC2626',fontWeight:600}}>· scade fra 30g</span>}</div>
      </div>
      <Icon.Download w={15} color="#64748B"/>
    </div>
  );
}

Object.assign(window, { AnimBacheca });