// ═══════════════════════════════════════════════════════════════════
// Screen: Avisos — admin publica, equipe lê
// ═══════════════════════════════════════════════════════════════════

const tipoAvisoOpts = [
  { value: 'info',    label: 'Informativo' },
  { value: 'warn',    label: 'Atenção'     },
  { value: 'success', label: 'Conquista'   },
];

const tipoAvisoBorder = { success: 'var(--escalab-brand)', warn: '#E89B3B', info: '#1F4A8A' };

function AvisosScreen({ state, setState, isMaria, autorNome }) {
  const { avisos } = state;
  const [form, setForm] = useState({ titulo: '', mensagem: '', tipo: 'info' });
  const [erro, setErro] = useState('');

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const publicar = () => {
    if (!form.titulo.trim()) { setErro('Informe o título do aviso.'); return; }
    if (!form.mensagem.trim()) { setErro('Informe a mensagem.'); return; }
    const novo = {
      id: 'av' + Date.now(),
      titulo: form.titulo.trim(),
      mensagem: form.mensagem.trim(),
      tipo: form.tipo,
      autor: autorNome,
      data: new Date().toLocaleString('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }),
    };
    setState.setAvisos([novo, ...avisos]);
    setForm({ titulo: '', mensagem: '', tipo: 'info' });
    setErro('');
  };

  const excluir = (id) => setState.setAvisos(avisos.filter(a => a.id !== id));

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
      {/* Header */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 20, flexWrap: 'wrap' }}>
        <div>
          <Eyebrow idx="05">Avisos da diretoria</Eyebrow>
          <h1 style={{ fontSize: 44, margin: 0, letterSpacing: '-.02em', lineHeight: 1.05 }}>
            {isMaria
              ? <>Comunique o <em style={{ fontStyle: 'normal', color: 'var(--escalab-brand)' }}>time</em>.</>
              : <>Comunicados da <em style={{ fontStyle: 'normal', color: 'var(--escalab-brand)' }}>diretoria</em>.</>}
          </h1>
          <p style={{ marginTop: 14, color: 'var(--escalab-slate)', fontSize: 16, maxWidth: 640 }}>
            {isMaria
              ? 'Publique comunicados visíveis para toda a equipe. Só administradores podem criar ou remover avisos.'
              : 'Avisos publicados pela diretoria para toda a equipe. Novos comunicados aparecem aqui.'}
          </p>
        </div>
        {avisos.length > 0 && (
          <Tag tone="brand">{avisos.length} aviso{avisos.length !== 1 ? 's' : ''}</Tag>
        )}
      </div>

      {/* Formulário — só admin */}
      {isMaria && (
        <Card style={{ border: '1px solid var(--escalab-brand-soft)', background: 'var(--escalab-brand-tint)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
            <Icon name="send" size={17} />
            <h3 style={{ margin: 0, fontSize: 16, letterSpacing: '-.01em' }}>Novo comunicado</h3>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 180px', gap: 12 }}>
              <Field label="Título">
                <Input value={form.titulo} onChange={v => set('titulo', v)}
                  placeholder="Ex: Resultado do 1T/2026 disponível" />
              </Field>
              <Field label="Tipo">
                <Select value={form.tipo} onChange={v => set('tipo', v)} options={tipoAvisoOpts} />
              </Field>
            </div>
            <Field label="Mensagem">
              <textarea
                value={form.mensagem}
                onChange={e => set('mensagem', e.target.value)}
                placeholder="Digite aqui a mensagem para o time…"
                rows={4}
                style={{ width: '100%', padding: '10px 12px', fontSize: 14, fontFamily: 'inherit', border: '1px solid var(--escalab-line)', borderRadius: 8, outline: 0, resize: 'vertical', boxSizing: 'border-box', color: 'var(--escalab-ink)', background: '#fff' }}
              />
            </Field>
            {erro && <Banner tone="warn" icon="warn">{erro}</Banner>}
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
              <Button variant="primary" icon="send" onClick={publicar}>Publicar aviso</Button>
            </div>
          </div>
        </Card>
      )}

      {/* Lista */}
      {avisos.length === 0 ? (
        <Card>
          <div style={{ textAlign: 'center', padding: '32px 0', color: 'var(--escalab-mute)', fontSize: 14 }}>
            Nenhum aviso publicado ainda.
          </div>
        </Card>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {avisos.map(a => {
            const label = tipoAvisoOpts.find(t => t.value === a.tipo)?.label || a.tipo;
            const borderColor = tipoAvisoBorder[a.tipo] || '#999';
            return (
              <div key={a.id} style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 12, overflow: 'hidden', borderLeft: '4px solid ' + borderColor }}>
                <div style={{ padding: '18px 20px' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
                    <div style={{ flex: 1 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
                        <Tag tone={a.tipo}>{label}</Tag>
                        <span style={{ fontSize: 11.5, color: 'var(--escalab-mute)' }}>
                          {a.data} · por <strong>{a.autor}</strong>
                        </span>
                      </div>
                      <div style={{ fontSize: 16, fontWeight: 700, letterSpacing: '-.01em', marginBottom: 8 }}>{a.titulo}</div>
                      <div style={{ fontSize: 13.5, color: 'var(--escalab-slate)', lineHeight: 1.65, whiteSpace: 'pre-wrap' }}>{a.mensagem}</div>
                    </div>
                    {isMaria && (
                      <button onClick={() => excluir(a.id)}
                        title="Remover aviso"
                        style={{ border: '1px solid var(--escalab-line)', borderRadius: 8, background: '#fff', cursor: 'pointer', padding: '7px 10px', color: 'var(--escalab-mute)', display: 'flex', alignItems: 'center', flexShrink: 0 }}>
                        <Icon name="close" size={14} />
                      </button>
                    )}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { AvisosScreen });