/* global React, Card, Badge, Button, Avatar, Icon, ICONS */
const { useState: useStateNF } = React;

function NotifPrefs({ onClose }) {
  const KEY = 'inbrivvo.notifprefs';
  const defaults = {
    'project_updates':   { push:true,  email:true,  inapp:true  },
    'task_assigned':     { push:true,  email:false, inapp:true  },
    'comments_mentions': { push:true,  email:true,  inapp:true  },
    'client_approval':   { push:true,  email:true,  inapp:true  },
    'briefing_received': { push:false, email:true,  inapp:true  },
    'invoice_paid':      { push:true,  email:true,  inapp:true  },
    'team_calendar':     { push:false, email:false, inapp:true  },
    'app_updates':       { push:false, email:true,  inapp:true  },
    'tips_marketing':    { push:false, email:false, inapp:false },
  };
  const [prefs, setPrefs] = useStateNF(() => {
    try { return { ...defaults, ...(JSON.parse(localStorage.getItem(KEY)) || {}) }; }
    catch { return defaults; }
  });
  const [dnd, setDnd] = useStateNF(true);

  const groups = [
    { title:'Trabalho', items:[
      { k:'project_updates',   l:'Atualizações de projeto',   d:'Mudança de status, novas etapas, prazo alterado' },
      { k:'task_assigned',     l:'Tarefas atribuídas a mim',  d:'Alguém te marcou como responsável' },
      { k:'comments_mentions', l:'Comentários e menções',     d:'Quando @você é mencionado em qualquer lugar' },
    ]},
    { title:'Cliente', items:[
      { k:'client_approval',   l:'Aprovação do cliente',      d:'Cliente aprovou ou pediu revisão' },
      { k:'briefing_received', l:'Briefing respondido',       d:'Cliente terminou de preencher um briefing' },
      { k:'invoice_paid',      l:'Pagamento recebido',        d:'Fatura paga ou recorrência confirmada' },
    ]},
    { title:'inBrivvo', items:[
      { k:'team_calendar',     l:'Agenda da equipe',          d:'Reuniões, reagendamentos e lembretes' },
      { k:'app_updates',       l:'Novidades do app',          d:'Novas funcionalidades e melhorias' },
      { k:'tips_marketing',    l:'Dicas e ofertas',           d:'Conteúdos, tutoriais e promoções' },
    ]},
  ];

  const toggle = (k, ch) => {
    const next = { ...prefs, [k]: { ...prefs[k], [ch]: !prefs[k][ch] } };
    setPrefs(next);
    try { localStorage.setItem(KEY, JSON.stringify(next)); } catch {}
  };

  return (
    <div onClick={onClose} style={{
      position:'fixed', inset:0, background:'rgba(7,11,28,0.72)', backdropFilter:'blur(6px)',
      display:'grid', placeItems:'center', zIndex:9999, padding:24,
    }}>
      <div onClick={(e)=>e.stopPropagation()} style={{
        width:'min(720px, 100%)', maxHeight:'90vh', display:'flex', flexDirection:'column',
        background:'var(--bg-surface)', border:'1px solid var(--border-strong)',
        borderRadius:18, boxShadow:'0 30px 80px rgba(0,0,0,0.55)', overflow:'hidden',
      }}>
        <div style={{ padding:'20px 24px', borderBottom:'1px solid var(--border-subtle)', display:'flex', alignItems:'center', gap:16 }}>
          <div style={{ flex:1 }}>
            <div style={{ fontFamily:'var(--font-display)', fontSize:11, fontWeight:700, letterSpacing:'0.06em', textTransform:'uppercase', color:'var(--geek-blue-300)' }}>Preferências</div>
            <h2 style={{ margin:'4px 0 0', fontSize:18, fontWeight:700 }}>O que você quer receber?</h2>
          </div>
          <button onClick={onClose} style={{ background:'transparent', border:'1px solid var(--border-subtle)', color:'var(--fg-secondary)', width:34, height:34, borderRadius:8, cursor:'pointer', fontSize:18 }}>×</button>
        </div>

        <div style={{ padding:'20px 24px', overflow:'auto', flex:1, display:'flex', flexDirection:'column', gap:18 }}>
          <Card padding={16} style={{ background:'var(--bg-elevated)' }}>
            <div style={{ display:'flex', alignItems:'center', gap:12 }}>
              <div style={{ width:36, height:36, borderRadius:10, background:'var(--primary-soft)', color:'var(--geek-blue-200)', display:'grid', placeItems:'center' }}>
                <Icon d={ICONS.bell} size={16}/>
              </div>
              <div style={{ flex:1 }}>
                <div style={{ fontSize:13, fontWeight:700 }}>Não perturbe</div>
                <div style={{ fontSize:11, color:'var(--fg-muted)', marginTop:2 }}>Silencia push e email entre 22:00 e 08:00 nos dias úteis</div>
              </div>
              <button onClick={()=>setDnd(!dnd)} style={{
                width:42, height:24, borderRadius:999,
                background: dnd ? 'var(--primary)' : 'var(--bg-surface)',
                border:'1px solid', borderColor: dnd ? 'var(--primary)' : 'var(--border-strong)',
                position:'relative', cursor:'pointer', padding:0,
              }}>
                <span style={{
                  position:'absolute', top:1, left: dnd ? 19 : 1,
                  width:20, height:20, borderRadius:'50%', background:'#fff', transition:'left 180ms ease',
                }}/>
              </button>
            </div>
          </Card>

          <div style={{ display:'grid', gridTemplateColumns:'1fr 60px 60px 60px', gap:'10px 16px', alignItems:'center', padding:'0 4px' }}>
            <span/>
            {['Push','Email','In-app'].map(h => (
              <span key={h} style={{ fontFamily:'var(--font-display)', fontSize:10, fontWeight:700, letterSpacing:'0.06em', textTransform:'uppercase', color:'var(--fg-muted)', textAlign:'center' }}>{h}</span>
            ))}
          </div>

          {groups.map(g => (
            <div key={g.title}>
              <div style={{ fontFamily:'var(--font-display)', fontSize:11, fontWeight:700, letterSpacing:'0.06em', textTransform:'uppercase', color:'var(--geek-blue-300)', marginBottom:8 }}>{g.title}</div>
              <Card padding={0}>
                {g.items.map((it, i) => (
                  <div key={it.k} style={{
                    display:'grid', gridTemplateColumns:'1fr 60px 60px 60px', gap:16, alignItems:'center',
                    padding:'14px 18px', borderTop: i ? '1px solid var(--border-subtle)' : 'none',
                  }}>
                    <div>
                      <div style={{ fontSize:13, fontWeight:600 }}>{it.l}</div>
                      <div style={{ fontSize:11, color:'var(--fg-muted)', marginTop:2 }}>{it.d}</div>
                    </div>
                    {['push','email','inapp'].map(ch => (
                      <div key={ch} style={{ display:'grid', placeItems:'center' }}>
                        <button onClick={()=>toggle(it.k, ch)} style={{
                          width:36, height:20, borderRadius:999,
                          background: prefs[it.k][ch] ? 'var(--primary)' : 'var(--bg-elevated)',
                          border:'1px solid', borderColor: prefs[it.k][ch] ? 'var(--primary)' : 'var(--border-strong)',
                          position:'relative', cursor:'pointer', padding:0,
                        }}>
                          <span style={{
                            position:'absolute', top:1, left: prefs[it.k][ch] ? 17 : 1,
                            width:16, height:16, borderRadius:'50%', background:'#fff', transition:'left 160ms ease',
                          }}/>
                        </button>
                      </div>
                    ))}
                  </div>
                ))}
              </Card>
            </div>
          ))}
        </div>

        <div style={{ padding:'14px 24px', borderTop:'1px solid var(--border-subtle)', display:'flex', alignItems:'center', gap:10, background:'var(--bg-elevated)' }}>
          <span style={{ fontSize:11, color:'var(--fg-muted)' }}>Suas preferências são salvas automaticamente</span>
          <div style={{ flex:1 }}/>
          <Button variant="ghost" onClick={()=>{ try{ localStorage.removeItem(KEY); }catch{} ; setPrefs(defaults); }}>Restaurar padrão</Button>
          <Button onClick={onClose} icon="check">Concluir</Button>
        </div>
      </div>
    </div>
  );
}
window.NotifPrefs = NotifPrefs;

// Relative time helper
function relTime(ts) {
  if (!ts) return 'agora';
  const diff = Date.now() - ts;
  if (diff < 60000)    return 'agora';
  if (diff < 3600000)  return `há ${Math.floor(diff/60000)} min`;
  if (diff < 86400000) return `há ${Math.floor(diff/3600000)}h`;
  return `há ${Math.floor(diff/86400000)} dias`;
}

function Notifications({ onClose }) {
  const [tab, setTab] = useStateNF('atividade');
  const [prefsOpen, setPrefsOpen] = useStateNF(false);
  const [realNotifs, setRealNotifs] = useStateNF(() => window.__getNotifs?.() || []);

  React.useEffect(() => {
    window.__notifRefresh = () => setRealNotifs(window.__getNotifs?.() || []);
    return () => { if (window.__notifRefresh) delete window.__notifRefresh; };
  }, []);

  const activity = realNotifs.map(n => ({ ...n, when: relTime(n.ts) }));
  const unreadCount = activity.filter(a => a.unread).length;

  const markAllRead = () => {
    const updated = realNotifs.map(n => ({ ...n, unread: false }));
    try { localStorage.setItem('inbrivvo.notifs.v1', JSON.stringify(updated)); } catch {}
    setRealNotifs(updated);
  };

  const clearAll = () => {
    try { localStorage.setItem('inbrivvo.notifs.v1', JSON.stringify([])); } catch {}
    setRealNotifs([]);
  };

  const dismissOne = (id, e) => {
    e.stopPropagation();
    const updated = realNotifs.filter(n => n.id !== id);
    try { localStorage.setItem('inbrivvo.notifs.v1', JSON.stringify(updated)); } catch {}
    setRealNotifs(updated);
  };

  const updates = [
    { v:'2.14', t:'Modelos de Processos', d:'Crie e aplique modelos de etapas em qualquer projeto com 1 clique.', when:'hoje',   badge:'Novo',  tone:'brand' },
    { v:'2.13', t:'Apagar tarefa',         d:'Agora é possível apagar tarefas diretamente pelo modal de detalhes.', when:'hoje',   badge:'Novo',  tone:'success' },
    { v:'2.12', t:'Páginas públicas — Aprovação', d:'Compartilhe entregáveis com o cliente. Ele aprova com 1 clique.',  when:'esta semana', badge:'Beta',  tone:'cyan' },
    { v:'2.11', t:'Central de Notificações', d:'Alertas em tempo real para ações feitas no app.',                    when:'esta semana', badge:'Novo', tone:'brand' },
    { v:'2.10', t:'Slides de Orçamento', d:'Transforme orçamentos em apresentações profissionais para enviar ao cliente.', when:'2 sem.', badge:'Novo', tone:'volcano' },
  ];

  const toneLabel = (tone) => tone==='success'?'Concluído': tone==='cyan'?'Comentário': tone==='warning'?'Atenção':'Atualização';

  const renderRow = (it, i) => (
    <div key={it.id || i} style={{
      display:'flex', gap:12, alignItems:'flex-start',
      padding:'14px 18px',
      borderTop: i ? '1px solid var(--border-subtle)' : 'none',
      background: it.unread ? 'rgba(29,57,196,0.05)' : 'transparent',
      position:'relative',
    }} onMouseEnter={e=>e.currentTarget.querySelector('.notif-dismiss').style.opacity='1'}
       onMouseLeave={e=>e.currentTarget.querySelector('.notif-dismiss').style.opacity='0'}>
      {it.unread && <span style={{ position:'absolute', left:6, top:22, width:6, height:6, borderRadius:'50%', background:'var(--primary)' }}/>}
      <div style={{ width:32, height:32, borderRadius:10, background:'var(--primary-soft)', color:'var(--geek-blue-200)', display:'grid', placeItems:'center', flexShrink:0 }}>
        <Icon d={ICONS.bell} size={14}/>
      </div>
      <div style={{ flex:1, minWidth:0 }}>
        <div style={{ fontSize:13, color:'var(--fg-secondary)', lineHeight:1.5 }}>
          <strong style={{ color:'var(--fg-primary)' }}>{it.who}</strong> {it.what}{it.target ? <> <strong style={{ color:'var(--fg-primary)' }}>{it.target}</strong></> : null}
        </div>
        <div style={{ fontSize:11, color:'var(--fg-muted)', marginTop:3, fontFamily:'var(--font-mono)' }}>{it.when}</div>
      </div>
      <div style={{ display:'flex', alignItems:'center', gap:6 }}>
        <Badge tone={it.tone || 'neutral'} dot>{toneLabel(it.tone)}</Badge>
        <button className="notif-dismiss" onClick={(e)=>dismissOne(it.id, e)} title="Dispensar" style={{
          background:'transparent', border:'none', color:'var(--fg-muted)', cursor:'pointer',
          padding:2, opacity:0, transition:'opacity 120ms', lineHeight:1,
        }}><Icon d={ICONS.x} size={13}/></button>
      </div>
    </div>
  );

  const renderUpdate = (u, i) => (
    <div key={i} style={{
      display:'flex', gap:14, alignItems:'flex-start',
      padding:'16px 18px',
      borderTop: i ? '1px solid var(--border-subtle)' : 'none',
    }}>
      <div style={{
        width:38, height:38, borderRadius:10, flexShrink:0,
        background:'var(--primary-soft)', color:'var(--geek-blue-200)',
        display:'grid', placeItems:'center',
      }}>
        <Icon d={ICONS.bolt} size={18}/>
      </div>
      <div style={{ flex:1, minWidth:0 }}>
        <div style={{ display:'flex', alignItems:'center', gap:8, flexWrap:'wrap' }}>
          <span style={{ fontSize:13, fontWeight:700 }}>{u.t}</span>
          <Badge tone={u.tone} dot={false}>{u.badge}</Badge>
          <span style={{ fontSize:11, color:'var(--fg-muted)', fontFamily:'var(--font-mono)' }}>v{u.v}</span>
        </div>
        <div style={{ fontSize:12, color:'var(--fg-secondary)', marginTop:4, lineHeight:1.5 }}>{u.d}</div>
        <div style={{ fontSize:11, color:'var(--fg-muted)', marginTop:6 }}>{u.when}</div>
      </div>
    </div>
  );

  const EmptyState = () => (
    <div style={{ padding:'48px 24px', textAlign:'center', color:'var(--fg-muted)', display:'flex', flexDirection:'column', alignItems:'center', gap:12 }}>
      <div style={{ width:44, height:44, borderRadius:14, background:'var(--bg-elevated)', display:'grid', placeItems:'center' }}>
        <Icon d={ICONS.bell} size={20}/>
      </div>
      <div style={{ fontSize:14, fontWeight:600, color:'var(--fg-secondary)' }}>Nenhuma notificação</div>
      <div style={{ fontSize:12, maxWidth:220, lineHeight:1.5 }}>Quando algo acontecer no app, vai aparecer aqui.</div>
    </div>
  );

  return (
    <div onClick={onClose} style={{
      position:'fixed', inset:0, background:'rgba(7,11,28,0.55)', backdropFilter:'blur(4px)', zIndex:9998,
    }}>
      <div onClick={(e)=>e.stopPropagation()} style={{
        position:'absolute', top:74, right:24, width:'min(440px, calc(100vw - 48px))', maxHeight:'min(80vh, 720px)',
        display:'flex', flexDirection:'column',
        background:'var(--bg-surface)', border:'1px solid var(--border-strong)',
        borderRadius:16, boxShadow:'0 30px 80px rgba(0,0,0,0.55)', overflow:'hidden',
      }}>
        {/* Arrow */}
        <div style={{ position:'absolute', top:-7, right:62, width:14, height:14, background:'var(--bg-surface)', borderTop:'1px solid var(--border-strong)', borderLeft:'1px solid var(--border-strong)', transform:'rotate(45deg)' }}/>

        <div style={{ padding:'16px 20px', borderBottom:'1px solid var(--border-subtle)', display:'flex', alignItems:'center', gap:10 }}>
          <Icon d={ICONS.bell} size={16} style={{ color:'var(--geek-blue-300)' }}/>
          <h3 style={{ margin:0, fontSize:15, fontWeight:700, flex:1 }}>Notificações</h3>
          {unreadCount > 0 && <Badge tone="brand" dot={false}>{unreadCount} novas</Badge>}
          <button onClick={onClose} style={{ background:'transparent', border:'none', color:'var(--fg-muted)', cursor:'pointer', fontSize:18, lineHeight:1, padding:4 }}>×</button>
        </div>

        <div style={{ display:'flex', gap:0, padding:'10px 16px', borderBottom:'1px solid var(--border-subtle)' }}>
          {[
            { v:'atividade',    l:'Atividade' },
            { v:'atualizacoes', l:'Novidades' },
          ].map(t => (
            <button key={t.v} onClick={()=>setTab(t.v)} style={{
              padding:'7px 14px', borderRadius:8, fontSize:12, fontWeight:600, cursor:'pointer', fontFamily:'inherit',
              background: tab===t.v ? 'var(--primary-soft)' : 'transparent',
              color: tab===t.v ? 'var(--geek-blue-200)' : 'var(--fg-secondary)',
              border:'1px solid', borderColor: tab===t.v ? 'var(--geek-blue-a40)' : 'transparent',
            }}>{t.l}</button>
          ))}
          <div style={{ flex:1 }}/>
          {tab==='atividade' && activity.length > 0 && (
            <div style={{ display:'flex', gap:4 }}>
              {unreadCount > 0 && <button onClick={markAllRead} style={{ background:'transparent', border:'none', color:'var(--fg-muted)', fontSize:11, cursor:'pointer', fontFamily:'inherit' }}>Marcar lidas</button>}
              <button onClick={clearAll} style={{ background:'transparent', border:'none', color:'var(--fg-muted)', fontSize:11, cursor:'pointer', fontFamily:'inherit' }}>Limpar</button>
            </div>
          )}
        </div>

        <div style={{ overflow:'auto', flex:1 }}>
          {tab === 'atividade' && (
            activity.length > 0 ? activity.map(renderRow) : <EmptyState/>
          )}
          {tab === 'atualizacoes' && updates.map(renderUpdate)}
        </div>

        <div style={{ padding:'12px 18px', borderTop:'1px solid var(--border-subtle)', background:'var(--bg-elevated)', display:'flex', alignItems:'center', gap:10 }}>
          <Icon d={ICONS.settings} size={14} style={{ color:'var(--fg-muted)' }}/>
          <span style={{ fontSize:11, color:'var(--fg-muted)', flex:1 }}>Configure quais notificações quer receber</span>
          <Button variant="ghost" size="sm" onClick={()=>setPrefsOpen(true)}>Preferências</Button>
        </div>
      </div>
      {prefsOpen && <NotifPrefs onClose={()=>setPrefsOpen(false)} />}
    </div>
  );
}
window.Notifications = Notifications;