/* ──────────────────────────────────────────────────────────────────
   NotificationsScreen — "Bruno propone, non avvisa"
   Centro notifiche + modal di conferma 2-step (pattern bot v5.5).
   ────────────────────────────────────────────────────────────────── */

function AnimNotifications({ onConfirm }) {
  return (
    <div style={{display:'flex',flexDirection:'column',height:'100%',background:'#F8FAFC',overflow:'hidden'}}>
      <AppHeader tenantLogo="/assets/tenant-logo-sg5.png" view="Notifiche"/>

      <div style={{padding:'14px 14px 0'}}>
        <h1 style={{fontFamily:"'Syne',sans-serif",fontWeight:700,fontSize:22,color:'#0F172A',margin:0}}>Notifiche</h1>
        <div style={{fontSize:13,color:'#64748B',marginTop:2}}>3 cose richiedono una conferma.</div>
      </div>

      <div style={{flex:1,overflowY:'auto',padding:'14px'}}>
        {/* PROPOSAL — Bruno propone */}
        <div style={{background:'#fff',border:'1px solid #FED7AA',borderRadius:16,padding:14,marginBottom:12,boxShadow:'0 1px 3px rgba(15,23,42,0.04)'}}>
          <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:10}}>
            <div style={{width:36,height:36,borderRadius:10,background:`linear-gradient(135deg,${ACCENT},${ACCENT_2})`,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
              <img src="/assets/icon-192.png" alt="" style={{width:24,height:24}}/>
            </div>
            <div style={{flex:1}}>
              <div style={{fontSize:11,fontWeight:700,color:ACCENT_2,textTransform:'uppercase',letterSpacing:.5}}>Bruno propone</div>
              <div style={{fontSize:12,color:'#64748B'}}>2 min fa</div>
            </div>
          </div>
          <div style={{fontSize:15,color:'#0F172A',lineHeight:1.5,marginBottom:12}}>
            Domani su <b>Naturasì Cesena</b> è prevista pioggia tutto il giorno.<br/>
            Ho già spostato la squadra <b>Verdi</b> sul cantiere <b>FER-X Abruzzo</b> — confermi?
          </div>
          <div style={{background:'#F8FAFC',border:'1px solid #E2E8F0',borderRadius:10,padding:'10px 12px',marginBottom:12}}>
            <div style={{fontSize:10,fontWeight:700,color:'#94A3B8',textTransform:'uppercase',letterSpacing:.4,marginBottom:6}}>Anteprima cambio</div>
            <div style={{display:'flex',alignItems:'center',gap:8,fontSize:13,color:'#475569'}}>
              <span style={{background:'#FEF2F2',color:'#DC2626',padding:'3px 8px',borderRadius:999,fontSize:11,fontWeight:600}}>Naturasì</span>
              <Icon.ChevronR w={14} color="#94A3B8"/>
              <span style={{background:'#ECFDF5',color:'#059669',padding:'3px 8px',borderRadius:999,fontSize:11,fontWeight:600}}>FER-X</span>
              <span style={{marginLeft:'auto',fontSize:12,color:'#64748B'}}>3 operai · 1 mezzo</span>
            </div>
          </div>
          <div style={{display:'flex',gap:8}}>
            <button onClick={onConfirm} style={{flex:1,background:ACCENT,color:'#fff',border:'none',padding:'12px 16px',borderRadius:10,fontWeight:700,fontSize:14,fontFamily:'inherit',cursor:'pointer',minHeight:44,display:'inline-flex',alignItems:'center',justifyContent:'center',gap:6}}>
              <Icon.Check w={16}/> Confermo
            </button>
            <button style={{background:'#fff',color:'#475569',border:'1px solid #E2E8F0',padding:'12px 16px',borderRadius:10,fontWeight:600,fontSize:14,fontFamily:'inherit',cursor:'pointer'}}>
              Annulla
            </button>
          </div>
        </div>

        {/* COVER WARNING */}
        <NotifRow
          color="#FEF2F2" iconColor="#DC2626" icon={<Icon.Warn w={18}/>}
          title="Cantiere scoperto domani: Sansavini"
          sub="Nessuna squadra · nessun caposquadra"
          time="ore 18:00"
        />

        {/* TIMBRATURA OK */}
        <NotifRow
          color="#ECFDF5" iconColor="#059669" icon={<Icon.Check w={18}/>}
          title="Tutti hanno timbrato alle 7:00"
          sub="14 presenze su 14"
          time="ieri · 07:08"
        />

        {/* CERT EXPIRY */}
        <NotifRow
          color="#FFFBEB" iconColor="#D97706" icon={<Icon.Clock w={18}/>}
          title="Scadenza attestato Antincendio"
          sub="Marco Rossi · scade fra 21 giorni"
          time="lun 14:30"
        />

        {/* METEO */}
        <NotifRow
          color="#EFF6FF" iconColor="#0891B2" icon={<Icon.Cloud w={18}/>}
          title="Meteo dom 03: pioggia su 2 cantieri"
          sub="Naturasì Cesena · Sansavini Centrale"
          time="dom 06:00"
        />
      </div>

      <BottomNav active="planner"/>
    </div>
  );
}

function NotifRow({ color, iconColor, icon, title, sub, time }) {
  return (
    <div style={{display:'flex',alignItems:'flex-start',gap:12,padding:'12px 14px',background:'#fff',border:'1px solid #E2E8F0',borderRadius:14,marginBottom:8}}>
      <div style={{width:36,height:36,borderRadius:10,background:color,color:iconColor,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
        {icon}
      </div>
      <div style={{flex:1,minWidth:0}}>
        <div style={{fontSize:14,fontWeight:600,color:'#0F172A',lineHeight:1.3}}>{title}</div>
        <div style={{fontSize:12.5,color:'#64748B',marginTop:2}}>{sub}</div>
      </div>
      <div style={{fontSize:11,color:'#94A3B8',flexShrink:0}}>{time}</div>
    </div>
  );
}

Object.assign(window, { AnimNotifications });