// Workspace de Casos — conectado à API real

const CaseAIPanel = ({ caseData, floating }) => {
  const [input, setInput] = React.useState('');
  const [messages, setMessages] = React.useState([]);
  const [loading, setLoading] = React.useState(false);

  const send = async () => {
    if (!input.trim() || loading) return;
    const q = input.trim();
    setInput('');
    setMessages(prev => [...prev, { role: 'user', text: q }]);
    setLoading(true);
    try {
      const res = await fetch(`${window.PAC_API_BASE || 'http://localhost:3000'}/api/ai/chat`, {
        method: 'POST',
        credentials: 'include',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ question: q, case_id: caseData?.id }),
      });
      const data = await res.json();
      setMessages(prev => [...prev, { role: 'ai', text: data.data?.answer || data.error || 'Erro na resposta.' }]);
    } catch (e) {
      setMessages(prev => [...prev, { role: 'ai', text: 'Erro ao conectar com a IA.' }]);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="cw-right" style={floating ? { background: 'var(--pac-dark-purple)', borderLeft: 0, borderRadius: 8, padding: 18 } : {}}>
      <h3>
        <div style={{ width: 24, height: 24, borderRadius: 4, background: 'var(--pac-neon)', display: 'grid', placeItems: 'center', color: 'var(--pac-dark-purple)' }}>
          <Icon name="sparkles" size={13} />
        </div>
        Assistente Jurídico
        {caseData && <span className="sub">caso {caseData.number}</span>}
      </h3>

      {messages.length === 0 && (
        <div style={{ marginTop: 14 }} className="prompt">
          <div style={{ fontSize: 10.5, color: 'rgba(255,255,255,.55)', textTransform: 'uppercase', letterSpacing: '.12em', fontWeight: 700, marginBottom: 6 }}>
            Sugestões rápidas
          </div>
          <div className="quick">
            {[
              { ic: 'fileText', t: 'Resumir últimos desenvolvimentos' },
              { ic: 'mail', t: 'Gerar relatório executivo para cliente' },
              { ic: 'list', t: 'Encontrar contradições nos documentos' },
              { ic: 'list', t: 'Preparar lista de próximas ações' },
            ].map((q, i) => (
              <button key={i} onClick={() => setInput(q.t)}>
                <Icon name={q.ic} size={13} style={{ color: 'var(--pac-neon)' }} /> {q.t}
              </button>
            ))}
          </div>
        </div>
      )}

      {messages.length > 0 && (
        <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 10, maxHeight: 320, overflowY: 'auto' }}>
          {messages.map((m, i) => (
            <div key={i} style={{
              fontSize: 12.5,
              lineHeight: 1.55,
              padding: '8px 10px',
              borderRadius: 6,
              background: m.role === 'user' ? 'rgba(255,255,255,.06)' : 'rgba(216,224,69,.08)',
              borderLeft: m.role === 'ai' ? '2px solid var(--pac-neon)' : 'none',
            }}>
              {m.role === 'ai' && (
                <div style={{ color: 'var(--pac-neon)', fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '.12em', fontWeight: 700, marginBottom: 4 }}>PAC.AI</div>
              )}
              {m.role === 'user' && (
                <div style={{ color: 'rgba(255,255,255,.5)', fontSize: 10.5, marginBottom: 4 }}>Você</div>
              )}
              <div style={{ color: m.role === 'user' ? 'rgba(255,255,255,.8)' : 'rgba(255,255,255,.9)' }}>{m.text}</div>
            </div>
          ))}
          {loading && (
            <div style={{ fontSize: 12, color: 'rgba(255,255,255,.4)', padding: '4px 10px' }}>
              <span className="spinner" style={{ width: 10, height: 10, marginRight: 6 }} />Processando…
            </div>
          )}
        </div>
      )}

      <div className="composer" style={{ marginTop: 14 }}>
        <Icon name="message" size={13} style={{ color: 'rgba(255,255,255,.55)' }} />
        <input
          placeholder="Pergunte algo sobre este caso…"
          value={input}
          onChange={e => setInput(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && send()}
        />
        <button onClick={send} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}>
          <Icon name="send" size={14} style={{ color: input ? 'var(--pac-neon)' : 'rgba(255,255,255,.3)' }} />
        </button>
      </div>

      <div style={{ marginTop: 14, fontSize: 10, color: 'rgba(255,255,255,.45)', display: 'flex', alignItems: 'center', gap: 6 }}>
        <Icon name="lock" size={10} /> Dados confidenciais · processados internamente
      </div>
    </div>
  );
};

const Cases = ({ aiPanel = 'fixed', caseId }) => {
  const [cases, setCases] = React.useState([]);
  const [clients, setClients] = React.useState([]);
  const [users, setUsers] = React.useState([]);
  const [timeline, setTimeline] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  const [selId, setSelId] = React.useState(caseId || null);
  const [activeTab, setActiveTab] = React.useState('timeline');
  const [aiOpen, setAiOpen] = React.useState(false);
  const [showNewCase, setShowNewCase] = React.useState(false);
  const [newCase, setNewCase] = React.useState({ title:'', client_id:'', area:'M&A', status:'Em análise', stage:'', priority:'Média', value:'' });
  const [saving, setSaving] = React.useState(false);

  const floating = aiPanel === 'floating';

  React.useEffect(() => {
    const load = async () => {
      try {
        setLoading(true);
        const [cs, cls, us] = await Promise.all([
          window.PACApi.cases.list(),
          window.PACApi.clients.list(),
          window.PACApi.users.list(),
        ]);
        setCases(cs);
        setClients(cls);
        setUsers(us);
      } catch (e) {
        setError(e.message);
      } finally {
        setLoading(false);
      }
    };
    load();
  }, []);

  const k = cases.find(x => x.id === selId);
  const cl = k ? clients.find(c => c.id === k.client_id) : null;
  const owner = k ? users.find(u => u.id === k.owner_user_id) : null;

  const handleCreateCase = async () => {
    if (!newCase.title || !newCase.client_id) return;
    try {
      setSaving(true);
      const me = await window.PACApi.auth.me();
      const created = await window.PACApi.cases.create({ ...newCase, owner_user_id: me.id });
      setCases(prev => [...prev, created]);
      setSelId(created.id);
      setShowNewCase(false);
      setNewCase({ title:'', client_id:'', area:'M&A', status:'Em análise', stage:'', priority:'Média', value:'' });
    } catch (e) {
      alert('Erro ao criar caso: ' + e.message);
    } finally {
      setSaving(false);
    }
  };

  // IMPORTANTE: definir renderNewCaseModal ANTES dos early returns
  const renderNewCaseModal = () => (
    <div className="modal-overlay" onClick={() => setShowNewCase(false)}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 520 }}>
        <div className="modal-head">
          <h3>Novo caso</h3>
          <button className="btn ghost sm icon" onClick={() => setShowNewCase(false)}><Icon name="x" size={14} /></button>
        </div>
        <div className="modal-body" style={{ display: 'grid', gap: 12 }}>
          <div className="field-group">
            <label>Título do caso *</label>
            <input value={newCase.title} onChange={e => setNewCase(p => ({...p, title: e.target.value}))} placeholder="Ex: Aquisição da Tabacaria Lopes pela VBH" />
          </div>
          <div className="field-group">
            <label>Cliente *</label>
            <select value={newCase.client_id} onChange={e => setNewCase(p => ({...p, client_id: e.target.value}))}>
              <option value="">Selecione o cliente…</option>
              {clients.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
            </select>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <div className="field-group">
              <label>Área</label>
              <select value={newCase.area} onChange={e => setNewCase(p => ({...p, area: e.target.value}))}>
                {['M&A','Franchising','Societário','Contratos','Venture Capital','Propriedade Intelectual','Contencioso','Tributário','Trabalhista','Outros'].map(a => (
                  <option key={a}>{a}</option>
                ))}
              </select>
            </div>
            <div className="field-group">
              <label>Prioridade</label>
              <select value={newCase.priority} onChange={e => setNewCase(p => ({...p, priority: e.target.value}))}>
                <option>Alta</option>
                <option>Média</option>
                <option>Baixa</option>
              </select>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <div className="field-group">
              <label>Status inicial</label>
              <select value={newCase.status} onChange={e => setNewCase(p => ({...p, status: e.target.value}))}>
                {['Em diligência','Em negociação','Em análise','Em redação','Em revisão','Aguardando cliente','Aguardando externos'].map(s => (
                  <option key={s}>{s}</option>
                ))}
              </select>
            </div>
            <div className="field-group">
              <label>Etapa atual</label>
              <input value={newCase.stage} onChange={e => setNewCase(p => ({...p, stage: e.target.value}))} placeholder="Ex: Due diligence" />
            </div>
          </div>
          <div className="field-group">
            <label>Valor da operação</label>
            <input value={newCase.value} onChange={e => setNewCase(p => ({...p, value: e.target.value}))} placeholder="Ex: R$ 14,2 mi" />
          </div>
        </div>
        <div className="modal-foot">
          <button className="btn ghost" onClick={() => setShowNewCase(false)}>Cancelar</button>
          <button className="btn" onClick={handleCreateCase} disabled={saving}>
            {saving ? 'Salvando…' : 'Criar caso'}
          </button>
        </div>
      </div>
    </div>
  );

  if (loading) return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 10, color: 'var(--fg-muted)' }}>
      <div className="spinner" /> Carregando casos…
    </div>
  );

  if (error) return (
    <div style={{ padding: 32, color: '#C2253E' }}>Erro ao carregar casos: {error}</div>
  );

  if (cases.length === 0) return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 16, color: 'var(--fg-muted)' }}>
      <div>Nenhum caso cadastrado.</div>
      <button className="btn" onClick={() => setShowNewCase(true)}><Icon name="plus" size={13} /> Novo caso</button>
      {showNewCase && renderNewCaseModal()}
    </div>
  );

  // Lista de seleção de caso
  if (!selId) {
    const clientMap = Object.fromEntries(clients.map(c => [c.id, c]));
    const PRIORITY_COLOR = { Alta: '#DC2626', Média: '#CA8A04', Baixa: '#6B7280', urgente: '#DC2626', alta: '#DC2626', media: '#CA8A04', baixa: '#6B7280' };
    return (
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
        {/* Header */}
        <div style={{ padding: '20px 24px 16px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', flexShrink: 0 }}>
          <div>
            <h1 style={{ margin: 0, fontSize: 20, fontWeight: 800 }}>Casos</h1>
            <div style={{ fontSize: 12.5, color: 'var(--fg-muted)', marginTop: 3 }}>
              {cases.length} caso{cases.length !== 1 ? 's' : ''} cadastrado{cases.length !== 1 ? 's' : ''}
            </div>
          </div>
          <button className="btn" onClick={() => setShowNewCase(true)} style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
            <Icon name="plus" size={13} /> Novo caso
          </button>
        </div>

        {/* Lista */}
        <div style={{ flex: 1, overflowY: 'auto', padding: '12px 24px 24px' }}>
          {/* Cabeçalho da tabela */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: '90px 1fr 140px 110px 90px 90px',
            gap: '0 12px',
            padding: '6px 12px',
            fontSize: 11, fontWeight: 700, color: 'var(--fg-muted)',
            textTransform: 'uppercase', letterSpacing: '.05em',
            borderBottom: '1px solid var(--border)', marginBottom: 4,
          }}>
            <div>Nº</div>
            <div>Caso</div>
            <div>Cliente</div>
            <div>Área</div>
            <div>Prioridade</div>
            <div>Status</div>
          </div>

          {cases.map(c => {
            const cl = clientMap[c.client_id];
            const prioColor = PRIORITY_COLOR[c.priority] || '#6B7280';
            return (
              <div
                key={c.id}
                onClick={() => setSelId(c.id)}
                style={{
                  display: 'grid',
                  gridTemplateColumns: '90px 1fr 140px 110px 90px 90px',
                  gap: '0 12px',
                  padding: '11px 12px',
                  borderRadius: 8,
                  cursor: 'pointer',
                  alignItems: 'center',
                  borderLeft: '3px solid transparent',
                  marginBottom: 2,
                  transition: 'background .1s',
                }}
                onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-secondary)'; e.currentTarget.style.borderLeftColor = 'var(--pac-navy)'; }}
                onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderLeftColor = 'transparent'; }}
              >
                <div style={{ fontSize: 11.5, fontFamily: 'monospace', color: 'var(--fg-muted)' }}>{c.number}</div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--pac-black)' }}>{c.title}</div>
                  {c.stage && <div style={{ fontSize: 11.5, color: 'var(--fg-muted)', marginTop: 1 }}>{c.stage}</div>}
                </div>
                <div style={{ fontSize: 12, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  {cl ? (
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                      <div style={{ width: 20, height: 20, borderRadius: 4, background: cl.color || '#0D0D6B', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 9, fontWeight: 700, color: '#fff', flexShrink: 0 }}>
                        {cl.short_name?.slice(0, 2)}
                      </div>
                      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{cl.name}</span>
                    </div>
                  ) : <span style={{ color: 'var(--fg-muted)' }}>—</span>}
                </div>
                <div>
                  <span className="chip navy" style={{ fontSize: 10.5 }}>{c.area}</span>
                </div>
                <div>
                  <span style={{ fontSize: 11.5, fontWeight: 600, color: prioColor }}>{c.priority}</span>
                </div>
                <div style={{ fontSize: 11.5, color: 'var(--fg-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  {c.status}
                </div>
              </div>
            );
          })}
        </div>

        {showNewCase && renderNewCaseModal()}
      </div>
    );
  }

  return (
    <div className={`cw ${floating ? 'ai-floating' : ''}`}>
      {/* LEFT — caso */}
      <aside className="cw-left">
        {/* Voltar à lista */}
        <div style={{ marginBottom: 16 }}>
          <button
            onClick={() => setSelId(null)}
            style={{
              display: 'flex', alignItems: 'center', gap: 6,
              background: 'transparent', border: 'none', cursor: 'pointer',
              fontSize: 12, color: 'var(--fg-muted)', padding: '4px 0',
              fontWeight: 600,
              transition: 'color .15s',
            }}
            onMouseEnter={e => e.currentTarget.style.color = 'var(--pac-navy)'}
            onMouseLeave={e => e.currentTarget.style.color = 'var(--fg-muted)'}
          >
            <Icon name="chevronLeft" size={13} /> Todos os casos
          </button>
        </div>

        {k && (
          <>
            <div className="pn">Caso · {k.number}</div>
            <h2>{k.title}</h2>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 8, flexWrap: 'wrap' }}>
              <span className="chip navy">{k.area}</span>
              <span className="chip soft">{k.priority}</span>
            </div>

            <div style={{ marginTop: 14 }}>
              {cl && (
                <div className="field"><span className="lbl">Cliente</span>
                  <div className="val" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <div className="client-mark sm" style={{ background: cl.color || '#0D0D6B' }}>{cl.short_name}</div>
                    <span>{cl.name}</span>
                  </div>
                </div>
              )}
              <div className="field"><span className="lbl">Tipo de matéria</span><span className="val">{k.area}</span></div>
              <div className="field"><span className="lbl">Status</span><span className="val" style={{ display: 'flex', alignItems: 'center', gap: 6 }}><span className="dot media"/>{k.status}</span></div>
              {k.stage && <div className="field"><span className="lbl">Etapa atual</span><span className="val">{k.stage}</span></div>}
              {k.value && <div className="field"><span className="lbl">Valor da operação</span><span className="val">{k.value}</span></div>}
              {owner && (
                <div className="field"><span className="lbl">Sócio responsável</span>
                  <div className="val" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <div className="av xs" style={{ background: owner.color || '#0D0D6B' }}>{owner.initials}</div>
                    {owner.name}
                  </div>
                </div>
              )}
            </div>

            <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 6 }}>
              <button className="btn ghost sm"><Icon name="folder" size={12} /> Documentos</button>
              <button className="btn ghost sm"><Icon name="checkSquare" size={12} /> Tarefas</button>
              <button className="btn ghost sm"><Icon name="fileText" size={12} /> Relatório</button>
            </div>
          </>
        )}

        <div style={{ marginTop: 'auto', paddingTop: 16 }}>
          <button className="btn ghost sm" style={{ width: '100%' }} onClick={() => setShowNewCase(true)}>
            <Icon name="plus" size={12} /> Novo caso
          </button>
        </div>
      </aside>

      {/* CENTER — timeline */}
      {k && (
        <div className="cw-mid">
          <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16 }}>
            <div>
              <div className="eyebrow muted">Workspace do caso</div>
              <h1>{k.title}</h1>
              <div className="sub">{cl?.name}{k.value ? ` · ${k.value}` : ''}</div>
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              <button className="btn ghost sm"><Icon name="upload" size={12} /> Upload</button>
              <button className="btn ghost sm"><Icon name="fileText" size={12} /> Relatório</button>
              <button className="btn sm"><Icon name="plus" size={12} /> Nova tarefa</button>
            </div>
          </div>

          <div className="tab-row" style={{ marginTop: 22 }}>
            {[['timeline','Linha do tempo'],['docs','Documentos'],['tasks','Tarefas'],['team','Equipe']].map(([id, label]) => (
              <button key={id} className={`tab ${activeTab === id ? 'active' : ''}`} onClick={() => setActiveTab(id)}>{label}</button>
            ))}
          </div>

          {activeTab === 'timeline' && (
            <div style={{ marginTop: 22 }} className="timeline">
              {timeline.length === 0 ? (
                <div style={{ color: 'var(--fg-muted)', fontSize: 13, padding: '16px 0' }}>
                  Nenhum evento na timeline ainda. Os eventos serão registrados conforme o caso avança.
                </div>
              ) : (
                timeline.map((tl, i) => (
                  <div key={i} className="tl-item">
                    <div className="when">{new Date(tl.created_at).toLocaleString('pt-BR', { day:'2-digit', month:'short', hour:'2-digit', minute:'2-digit' })}</div>
                    <div className="ttl">{tl.title}</div>
                    {tl.body && <div className="body">{tl.body}</div>}
                  </div>
                ))
              )}
            </div>
          )}

          {activeTab === 'docs' && (
            <div style={{ marginTop: 22, color: 'var(--fg-muted)', fontSize: 13 }}>
              Upload de documentos disponível na Etapa 5 (integração Supabase Storage + embeddings).
            </div>
          )}

          {activeTab === 'tasks' && (
            <div style={{ marginTop: 22, color: 'var(--fg-muted)', fontSize: 13 }}>
              Tarefas vinculadas ao caso disponíveis após a Etapa 3 (Kanban completo).
            </div>
          )}

          {activeTab === 'team' && (
            <div style={{ marginTop: 22 }}>
              {owner && (
                <div className="list-row">
                  <div className="av sm" style={{ background: owner.color || '#0D0D6B' }}>{owner.initials}</div>
                  <div className="grow">
                    <div className="ttl">{owner.name}</div>
                    <div className="meta">Sócio responsável</div>
                  </div>
                </div>
              )}
            </div>
          )}
        </div>
      )}

      {/* RIGHT — AI panel (fixed mode) */}
      {!floating && <CaseAIPanel caseData={k} floating={false} />}

      {/* Floating AI button + panel */}
      {floating && (
        <>
          <button
            className="btn"
            style={{ position: 'fixed', bottom: 24, right: 24, borderRadius: 999, width: 48, height: 48, padding: 0, display: 'grid', placeItems: 'center', boxShadow: '0 4px 20px rgba(0,0,0,.4)', zIndex: 100 }}
            onClick={() => setAiOpen(!aiOpen)}
          >
            <Icon name="sparkles" size={18} />
          </button>
          {aiOpen && (
            <div style={{ position: 'fixed', bottom: 80, right: 24, width: 340, zIndex: 101 }}>
              <CaseAIPanel caseData={k} floating={true} />
            </div>
          )}
        </>
      )}

      {showNewCase && renderNewCaseModal()}
    </div>
  );
};