/* BUSINESS & AI — Sugestões de Board */

const REVIEWERS_SG_UI = new Set(['joao.paulino@digidelta.pt', 'fabio.costa@digidelta.pt']);
const PRIOR_COLOR_SG = { P1:'#ef4444', P2:'#f97316', P3:'#6366f1', P4:'#94a3b8' };
const ESTADO_CFG_SG = {
  submetida:  { label:'Submetida',  bg:'var(--surface-muted)',       color:'var(--text-muted)' },
  em_analise: { label:'Em análise', bg:'rgba(14,165,233,0.14)',       color:'var(--ai-500)' },
  aprovada:   { label:'Aprovada',   bg:'rgba(16,185,129,0.14)',       color:'#10b981' },
  rejeitada:  { label:'Rejeitada',  bg:'rgba(239,68,68,0.14)',        color:'#ef4444' },
};
const ESTADOS_LIST = ['submetida','em_analise','aprovada','rejeitada'];
const PRIOR_LIST   = ['P1','P2','P3','P4'];

// ─── AIField: small label+value row ──────────────────────────
const AIField = ({ label, value }) => !value ? null : (
  <div style={{ display:'flex', gap:8, fontSize:11, lineHeight:1.5 }}>
    <span style={{ color:'var(--text-dim)', minWidth:90, flexShrink:0 }}>{label}</span>
    <span style={{ color:'var(--text)' }}>{value}</span>
  </div>
);

const NIVEL_LIST = ['alto','médio','baixo'];

// ─── SugestaoCard ─────────────────────────────────────────────
const SugestaoCard = ({ sg, userEmail, isReviewer, onUpdate, onDelete, onGoToRoadmap }) => {
  const [open,      setOpen]     = React.useState(false);
  const [editing,   setEditing]  = React.useState(false);
  const [saving,    setSaving]   = React.useState(false);
  const [draft,     setDraft]    = React.useState({});
  const [aiDraft,   setAiDraft]  = React.useState({});
  const [estadoDraft, setEstadoDraft] = React.useState(sg.estado);
  const [notasDraft,  setNotasDraft]  = React.useState(sg.notas_revisao || '');

  const isFinal   = sg.estado === 'aprovada' || sg.estado === 'rejeitada';
  const isAuthor  = sg.submetido_por === userEmail;
  const canEdit   = !isFinal && (isAuthor || isReviewer);
  const canEditAI = isReviewer && !isFinal;
  const est       = ESTADO_CFG_SG[sg.estado] || ESTADO_CFG_SG.submetida;

  React.useEffect(() => {
    setDraft({ titulo: sg.titulo, descricao: sg.descricao, prioridade: sg.prioridade });
    setAiDraft({
      ai_departamento:     sg.ai_departamento     || '',
      ai_impacto:          sg.ai_impacto          || '',
      ai_esforco:          sg.ai_esforco          || '',
      ai_categoria:        sg.ai_categoria        || '',
      ai_roadmap_sugestao: sg.ai_roadmap_sugestao || '',
      ai_resumo:           sg.ai_resumo           || '',
    });
    setEstadoDraft(sg.estado);
    setNotasDraft(sg.notas_revisao || '');
  }, [sg]);

  const handleSave = async () => {
    setSaving(true);
    const body = {};
    if (canEdit) {
      if (draft.titulo     !== sg.titulo)     body.titulo     = draft.titulo;
      if (draft.descricao  !== sg.descricao)  body.descricao  = draft.descricao;
      if (draft.prioridade !== sg.prioridade) body.prioridade = draft.prioridade;
    }
    if (isReviewer) {
      if (estadoDraft !== sg.estado)               { body.estado = estadoDraft; body.revisto_por = userEmail; }
      if (notasDraft  !== (sg.notas_revisao || '')) body.notas_revisao = notasDraft;
      if (canEditAI) {
        ['ai_departamento','ai_impacto','ai_esforco','ai_categoria','ai_roadmap_sugestao','ai_resumo'].forEach(f => {
          if (aiDraft[f] !== (sg[f] || '')) body[f] = aiDraft[f];
        });
      }
    }
    if (Object.keys(body).length) {
      const updated = await onUpdate(sg.id, body);
      if (updated) setEditing(false);
    } else {
      setEditing(false);
    }
    setSaving(false);
  };

  const fmtDate = (s) => new Date(s).toLocaleDateString('pt-PT', { day:'2-digit', month:'short' });

  return (
    <div className="card" style={{ marginBottom:10, overflow:'hidden' }}>
      {/* Header row */}
      <div onClick={() => setOpen(o => !o)} style={{
        display:'flex', alignItems:'center', gap:10, padding:'10px 14px',
        cursor:'pointer', userSelect:'none',
        background: open ? 'var(--surface-muted)' : 'transparent',
      }}>
        <span style={{ fontSize:9, fontWeight:700, fontFamily:'var(--font-mono)',
          color: PRIOR_COLOR_SG[sg.prioridade],
          border:`1px solid ${PRIOR_COLOR_SG[sg.prioridade]}`,
          borderRadius:3, padding:'1px 4px', flexShrink:0 }}>
          {sg.prioridade}
        </span>
        <span style={{ flex:1, fontSize:13, fontWeight:500 }}>{sg.titulo}</span>
        <span style={{ fontSize:10, color:'var(--text-dim)', fontFamily:'var(--font-mono)', whiteSpace:'nowrap' }}>
          {sg.submetido_nome.split(' ')[0]} · {fmtDate(sg.created_at)}
        </span>
        <span style={{ fontSize:10, fontWeight:600, padding:'2px 8px', borderRadius:4,
          background:est.bg, color:est.color, whiteSpace:'nowrap', flexShrink:0 }}>
          {est.label}
        </span>
        <span style={{ fontSize:10, color:'var(--text-dim)' }}>{open ? '▲' : '▼'}</span>
      </div>

      {/* Expanded body */}
      {open && (
        <div style={{ padding:'12px 14px', borderTop:'1px solid var(--border)' }}>
          {editing && canEdit ? (
            <textarea value={draft.descricao} onChange={e => setDraft(d=>({...d,descricao:e.target.value}))}
              style={{ width:'100%', minHeight:72, fontSize:12, padding:'6px 8px',
                background:'var(--surface-muted)', border:'1px solid var(--border)',
                borderRadius:4, color:'var(--text)', resize:'vertical', marginBottom:10 }} />
          ) : (
            <p style={{ fontSize:12, color:'var(--text-muted)', lineHeight:1.6, marginBottom:12 }}>{sg.descricao}</p>
          )}

          {editing && canEdit && (
            <div style={{ display:'flex', gap:8, marginBottom:10 }}>
              <input value={draft.titulo} onChange={e=>setDraft(d=>({...d,titulo:e.target.value}))}
                style={{ flex:1, fontSize:12, padding:'4px 8px', background:'var(--surface-muted)',
                  border:'1px solid var(--border)', borderRadius:4, color:'var(--text)' }} />
              <select value={draft.prioridade} onChange={e=>setDraft(d=>({...d,prioridade:e.target.value}))}
                style={{ fontSize:11, padding:'4px 6px', background:'var(--surface-muted)',
                  border:'1px solid var(--border)', borderRadius:4, color:'var(--text)' }}>
                {PRIOR_LIST.map(p => <option key={p} value={p}>{p}</option>)}
              </select>
            </div>
          )}

          {/* AI Fields */}
          <div style={{ background:'var(--surface-muted)', borderRadius:6, padding:'8px 12px', marginBottom:10 }}>
            <div style={{ fontSize:9, fontWeight:700, letterSpacing:'0.1em',
              color:'var(--ai-500)', marginBottom:6 }}>ANÁLISE IA</div>
            {editing && canEditAI ? (
              <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
                <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
                  <div style={{ flex:2, minWidth:140 }}>
                    <div style={{ fontSize:9, color:'var(--text-dim)', marginBottom:2 }}>Departamento</div>
                    <input value={aiDraft.ai_departamento}
                      onChange={e=>setAiDraft(d=>({...d,ai_departamento:e.target.value}))}
                      style={{ width:'100%', fontSize:11, padding:'3px 7px', boxSizing:'border-box',
                        background:'var(--surface)', border:'1px solid var(--border)', borderRadius:3, color:'var(--text)' }} />
                  </div>
                  <div style={{ minWidth:100 }}>
                    <div style={{ fontSize:9, color:'var(--text-dim)', marginBottom:2 }}>Impacto</div>
                    <select value={aiDraft.ai_impacto} onChange={e=>setAiDraft(d=>({...d,ai_impacto:e.target.value}))}
                      style={{ fontSize:11, padding:'3px 6px', background:'var(--surface)',
                        border:'1px solid var(--border)', borderRadius:3, color:'var(--text)' }}>
                      <option value="">—</option>
                      {NIVEL_LIST.map(n=><option key={n} value={n}>{n}</option>)}
                    </select>
                  </div>
                  <div style={{ minWidth:100 }}>
                    <div style={{ fontSize:9, color:'var(--text-dim)', marginBottom:2 }}>Esforço</div>
                    <select value={aiDraft.ai_esforco} onChange={e=>setAiDraft(d=>({...d,ai_esforco:e.target.value}))}
                      style={{ fontSize:11, padding:'3px 6px', background:'var(--surface)',
                        border:'1px solid var(--border)', borderRadius:3, color:'var(--text)' }}>
                      <option value="">—</option>
                      {NIVEL_LIST.map(n=><option key={n} value={n}>{n}</option>)}
                    </select>
                  </div>
                  <div style={{ flex:2, minWidth:120 }}>
                    <div style={{ fontSize:9, color:'var(--text-dim)', marginBottom:2 }}>Categoria</div>
                    <input value={aiDraft.ai_categoria}
                      onChange={e=>setAiDraft(d=>({...d,ai_categoria:e.target.value}))}
                      style={{ width:'100%', fontSize:11, padding:'3px 7px', boxSizing:'border-box',
                        background:'var(--surface)', border:'1px solid var(--border)', borderRadius:3, color:'var(--text)' }} />
                  </div>
                </div>
                <div>
                  <div style={{ fontSize:9, color:'var(--text-dim)', marginBottom:2 }}>Roadmap</div>
                  <input value={aiDraft.ai_roadmap_sugestao}
                    onChange={e=>setAiDraft(d=>({...d,ai_roadmap_sugestao:e.target.value}))}
                    style={{ width:'100%', fontSize:11, padding:'3px 7px', boxSizing:'border-box',
                      background:'var(--surface)', border:'1px solid var(--border)', borderRadius:3, color:'var(--text)' }} />
                </div>
                <div>
                  <div style={{ fontSize:9, color:'var(--text-dim)', marginBottom:2 }}>Resumo IA</div>
                  <textarea value={aiDraft.ai_resumo}
                    onChange={e=>setAiDraft(d=>({...d,ai_resumo:e.target.value}))}
                    rows={3}
                    style={{ width:'100%', fontSize:11, padding:'4px 7px', boxSizing:'border-box',
                      background:'var(--surface)', border:'1px solid var(--border)', borderRadius:3,
                      color:'var(--text)', resize:'vertical' }} />
                </div>
              </div>
            ) : sg.ai_departamento || sg.ai_impacto || sg.ai_esforco || sg.ai_categoria || sg.ai_roadmap_sugestao || sg.ai_resumo ? (
              <>
                <div style={{ display:'flex', gap:16, flexWrap:'wrap', marginBottom:6 }}>
                  <AIField label="Departamento" value={sg.ai_departamento} />
                  <AIField label="Impacto" value={sg.ai_impacto} />
                  <AIField label="Esforço" value={sg.ai_esforco} />
                  <AIField label="Categoria" value={sg.ai_categoria} />
                </div>
                <AIField label="Roadmap" value={sg.ai_roadmap_sugestao} />
                {sg.ai_resumo && (
                  <p style={{ fontSize:11, color:'var(--text-muted)', lineHeight:1.6, marginTop:6, marginBottom:0 }}>{sg.ai_resumo}</p>
                )}
              </>
            ) : (
              <span style={{ fontSize:11, color:'var(--text-dim)' }}>A aguardar análise…</span>
            )}
          </div>

          {/* Reviewer controls */}
          {isReviewer && (
            <div style={{ display:'flex', gap:8, alignItems:'center', marginBottom:10, flexWrap:'wrap' }}>
              <span style={{ fontSize:11, color:'var(--text-dim)' }}>Estado:</span>
              <select value={estadoDraft} onChange={e=>setEstadoDraft(e.target.value)}
                style={{ fontSize:11, padding:'3px 6px', background:'var(--surface-muted)',
                  border:'1px solid var(--border)', borderRadius:4, color:'var(--text)' }}>
                {ESTADOS_LIST.map(s => <option key={s} value={s}>{ESTADO_CFG_SG[s].label}</option>)}
              </select>
              <input value={notasDraft} onChange={e=>setNotasDraft(e.target.value)}
                placeholder="Notas de revisão…"
                style={{ flex:1, minWidth:160, fontSize:11, padding:'3px 8px',
                  background:'var(--surface-muted)', border:'1px solid var(--border)',
                  borderRadius:4, color:'var(--text)' }} />
            </div>
          )}

          {!isReviewer && sg.notas_revisao && (
            <div style={{ fontSize:11, color:'var(--text-muted)', marginBottom:10,
              padding:'6px 10px', background:'var(--surface-muted)', borderRadius:4 }}>
              <strong>Nota:</strong> {sg.notas_revisao}
            </div>
          )}

          {/* Action buttons */}
          <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
            {(canEdit || isReviewer) && !editing && (
              <button onClick={()=>setEditing(true)} style={{
                fontSize:11, padding:'4px 12px', borderRadius:4, cursor:'pointer',
                background:'var(--surface-muted)', border:'1px solid var(--border)', color:'var(--text)',
              }}>Editar</button>
            )}
            {editing && (
              <>
                <button onClick={handleSave} disabled={saving} style={{
                  fontSize:11, padding:'4px 12px', borderRadius:4, cursor:'pointer',
                  background:'var(--ai-500)', border:'none', color:'#fff',
                }}>{ saving ? 'A guardar…' : 'Guardar' }</button>
                <button onClick={()=>setEditing(false)} style={{
                  fontSize:11, padding:'4px 12px', borderRadius:4, cursor:'pointer',
                  background:'var(--surface-muted)', border:'1px solid var(--border)', color:'var(--text)',
                }}>Cancelar</button>
              </>
            )}
            {!editing && isReviewer && (estadoDraft !== sg.estado || notasDraft !== (sg.notas_revisao||'')) && (
              <button onClick={handleSave} disabled={saving} style={{
                fontSize:11, padding:'4px 12px', borderRadius:4, cursor:'pointer',
                background:'var(--ai-500)', border:'none', color:'#fff',
              }}>{ saving ? 'A guardar…' : 'Guardar revisão' }</button>
            )}
            {sg.estado === 'aprovada' && (
              <button onClick={() => onGoToRoadmap(sg)} style={{
                fontSize:11, padding:'4px 12px', borderRadius:4, cursor:'pointer',
                background:'rgba(16,185,129,0.15)', border:'1px solid #10b981', color:'#10b981',
              }}>→ Adicionar ao Roadmap</button>
            )}
            {isReviewer && !editing && (
              <button onClick={() => { if (window.confirm('Eliminar esta sugestão?')) onDelete(sg.id); }} style={{
                fontSize:11, padding:'4px 12px', borderRadius:4, cursor:'pointer',
                background:'transparent', border:'1px solid var(--danger)', color:'var(--danger)',
                marginLeft:'auto',
              }}>Eliminar</button>
            )}
          </div>
        </div>
      )}
    </div>
  );
};

// ─── Nova Sugestão Form ───────────────────────────────────────
const NovaSugestaoForm = ({ onSubmit, onCancel }) => {
  const [titulo,     setTitulo]     = React.useState('');
  const [descricao,  setDescricao]  = React.useState('');
  const [prioridade, setPrioridade] = React.useState('P2');
  const [loading,    setLoading]    = React.useState(false);
  const [error,      setError]      = React.useState('');

  const handleSubmit = async () => {
    if (!titulo.trim() || !descricao.trim()) return setError('Título e descrição são obrigatórios.');
    setLoading(true); setError('');
    const res = await fetch('/api/board-suggestions', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ titulo: titulo.trim(), descricao: descricao.trim(), prioridade }),
    });
    if (res.ok) {
      const sg = await res.json();
      onSubmit(sg);
    } else {
      const e = await res.json().catch(() => ({}));
      setError(e.error || 'Erro ao submeter.');
      setLoading(false);
    }
  };

  return (
    <div className="card" style={{ marginBottom:16, padding:'14px 16px' }}>
      <div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.08em',
        color:'var(--text-dim)', marginBottom:10 }}>NOVA SUBMISSÃO</div>
      <input value={titulo} onChange={e=>setTitulo(e.target.value)}
        placeholder="Título *"
        style={{ width:'100%', fontSize:13, padding:'6px 10px', marginBottom:8,
          background:'var(--surface-muted)', border:'1px solid var(--border)',
          borderRadius:4, color:'var(--text)', boxSizing:'border-box' }} />
      <textarea value={descricao} onChange={e=>setDescricao(e.target.value)}
        placeholder="Descrição — contexto, problema ou oportunidade *"
        rows={4}
        style={{ width:'100%', fontSize:12, padding:'6px 10px', marginBottom:8,
          background:'var(--surface-muted)', border:'1px solid var(--border)',
          borderRadius:4, color:'var(--text)', resize:'vertical', boxSizing:'border-box' }} />
      <div style={{ display:'flex', gap:8, alignItems:'center', marginBottom: error ? 8 : 0 }}>
        <span style={{ fontSize:11, color:'var(--text-dim)' }}>Prioridade:</span>
        {PRIOR_LIST.map(p => (
          <button key={p} onClick={()=>setPrioridade(p)} style={{
            fontSize:10, fontWeight:700, padding:'2px 8px', borderRadius:3, cursor:'pointer',
            background: prioridade===p ? PRIOR_COLOR_SG[p] : 'var(--surface-muted)',
            border: `1px solid ${PRIOR_COLOR_SG[p]}`,
            color: prioridade===p ? '#fff' : PRIOR_COLOR_SG[p],
          }}>{p}</button>
        ))}
        <div style={{ flex:1 }} />
        <button onClick={onCancel} style={{
          fontSize:11, padding:'5px 12px', borderRadius:4, cursor:'pointer',
          background:'var(--surface-muted)', border:'1px solid var(--border)', color:'var(--text)',
        }}>Cancelar</button>
        <button onClick={handleSubmit} disabled={loading} style={{
          fontSize:11, padding:'5px 14px', borderRadius:4, cursor:'pointer',
          background:'var(--ai-500)', border:'none', color:'#fff', opacity: loading ? 0.7 : 1,
        }}>{loading ? 'A processar IA…' : 'Submeter'}</button>
      </div>
      {error && <div style={{ fontSize:11, color:'var(--danger)', marginTop:4 }}>{error}</div>}
    </div>
  );
};

// ─── Main Screen ──────────────────────────────────────────────
const BusinessAISugestoesScreen = ({ user }) => {
  const [sgs,        setSgs]       = React.useState([]);
  const [loading,    setLoading]   = React.useState(true);
  const [showForm,   setShowForm]  = React.useState(false);
  const [filterEst,  setFilterEst] = React.useState('todas');
  const [filterPri,  setFilterPri] = React.useState('todas');
  const userEmail  = user?.email || '';
  const isReviewer = REVIEWERS_SG_UI.has(userEmail);

  React.useEffect(() => {
    fetch('/api/board-suggestions')
      .then(r => r.json())
      .then(data => { setSgs(Array.isArray(data) ? data : []); setLoading(false); })
      .catch(() => setLoading(false));
  }, []);

  const handleUpdate = async (id, body) => {
    const res = await fetch(`/api/board-suggestions/${id}`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body),
    });
    if (res.ok) {
      const updated = await res.json();
      setSgs(prev => prev.map(s => s.id === id ? updated : s));
      return updated;
    }
    return null;
  };

  const handleDelete = async (id) => {
    const res = await fetch(`/api/board-suggestions/${id}`, { method: 'DELETE' });
    if (res.ok) setSgs(prev => prev.filter(s => s.id !== id));
  };

  const handleNew = (sg) => {
    setSgs(prev => [sg, ...prev]);
    setShowForm(false);
  };

  const handleGoToRoadmap = (sg) => {
    try {
      localStorage.setItem('digi-roadmap-prefill', JSON.stringify({
        sh: 'NEW', n: sg.titulo, d: sg.descricao,
        resp: 'JP', prior: sg.prioridade,
        s: new Date().toISOString(),
        e: new Date(Date.now() + 30 * 864e5).toISOString(),
        cor: '',
      }));
      window.dispatchEvent(new CustomEvent('digi-subnav', { detail: { storageKey: 'digi-business-sub', val: 'editar' } }));
    } catch(e) {}
  };

  const visible = sgs.filter(s =>
    (filterEst === 'todas' || s.estado === filterEst) &&
    (filterPri === 'todas' || s.prioridade === filterPri)
  );

  const chipStyle = (active) => ({
    fontSize:10, fontWeight:600, padding:'3px 10px', borderRadius:12, cursor:'pointer',
    border:'1px solid var(--border)',
    background: active ? 'var(--ai-500)' : 'var(--surface-muted)',
    color: active ? '#fff' : 'var(--text-muted)',
  });

  return (
    <div className="scrollbar" style={{ flex:1, overflowY:'auto', padding:'24px 28px 80px' }}>
      <div className="font-mono" style={{ fontSize:11, color:'var(--text-dim)', letterSpacing:'0.08em', marginBottom:6 }}>
        BUSINESS & AI · BOARD INTAKE
      </div>
      <h2 className="font-display" style={{ margin:'0 0 4px', fontSize:26, fontWeight:500, letterSpacing:'-0.01em' }}>
        Board Intake
      </h2>
      <p style={{ fontSize:13, color:'var(--text-muted)', marginBottom:20, lineHeight:1.55 }}>
        Regista necessidades e iniciativas para entrar em planeamento. A IA analisa automaticamente cada submissão.
      </p>

      {/* Toolbar */}
      <div style={{ display:'flex', gap:8, alignItems:'center', marginBottom:16, flexWrap:'wrap' }}>
        <button onClick={() => setShowForm(s => !s)} style={{
          fontSize:12, fontWeight:600, padding:'6px 14px', borderRadius:6, cursor:'pointer',
          background:'var(--ai-500)', border:'none', color:'#fff',
        }}>+ Nova submissão</button>
        <div style={{ flex:1 }} />
        {['todas','submetida','em_analise','aprovada','rejeitada'].map(e => (
          <button key={e} style={chipStyle(filterEst===e)} onClick={()=>setFilterEst(e)}>
            {e === 'todas' ? 'Todas' : ESTADO_CFG_SG[e]?.label || e}
          </button>
        ))}
        <div style={{ width:1, height:16, background:'var(--border)' }} />
        {['todas','P1','P2','P3','P4'].map(p => (
          <button key={p} style={chipStyle(filterPri===p)} onClick={()=>setFilterPri(p)}>
            {p === 'todas' ? 'Todas P' : p}
          </button>
        ))}
      </div>

      {/* Form */}
      {showForm && (
        <NovaSugestaoForm onSubmit={handleNew} onCancel={() => setShowForm(false)} />
      )}

      {/* List */}
      {loading ? (
        <div style={{ fontSize:12, color:'var(--text-dim)', padding:'24px 0' }}>A carregar…</div>
      ) : visible.length === 0 ? (
        <div style={{ fontSize:12, color:'var(--text-dim)', padding:'24px 0' }}>
          {sgs.length === 0 ? 'Ainda não há submissões. Sê o primeiro!' : 'Nenhuma submissão com estes filtros.'}
        </div>
      ) : visible.map(sg => (
        <SugestaoCard key={sg.id} sg={sg} userEmail={userEmail}
          isReviewer={isReviewer} onUpdate={handleUpdate} onDelete={handleDelete} onGoToRoadmap={handleGoToRoadmap} />
      ))}
    </div>
  );
};
window.BusinessAISugestoesScreen = BusinessAISugestoesScreen;