// Tela: Minha Equipe

const EQUIPE = [
  { id: 0,  avatar: 0,  nome: "Letícia Andrade",     cargo: "Head Comercial",    role: "Admin",     status: "online",  meta: 132, fechado: 982, deals: 14, you: true },
  { id: 1,  avatar: 3,  nome: "Rodrigo Cavalcanti",  cargo: "Senior Account",    role: "Membro",    status: "online",  meta: 108, fechado: 614, deals: 11 },
  { id: 2,  avatar: 5,  nome: "Patrícia Moreira",    cargo: "Account Executive", role: "Membro",    status: "ocupado", meta:  92, fechado: 482, deals:  9 },
  { id: 3,  avatar: 7,  nome: "Henrique Lima",       cargo: "Account Executive", role: "Membro",    status: "offline", meta:  78, fechado: 388, deals:  8 },
  { id: 4,  avatar: 14, nome: "Mariana Tavares",     cargo: "SDR Lead",          role: "Admin",     status: "online",  meta:  64, fechado: 224, deals:  6 },
];

const PENDENTES = [
  { email: "joao.almeida@ezza.com.br", role: "SDR",      enviado: "ontem" },
  { email: "carla.viana@ezza.com.br",  role: "Membro",   enviado: "há 3 dias" },
];

const eqHeaders = () => { const t = localStorage.getItem('ezza_token'); return { 'Content-Type':'application/json', ...(t?{'Authorization':`Bearer ${t}`}:{}) }; };

function Equipe({ onBack, onOpenContact }) {
  const [tab, setTab] = React.useState('todos');
  const [pendentes, setPendentes] = React.useState(PENDENTES.map(p => ({...p})));
  const [showConvite, setShowConvite] = React.useState(false);
  const [membrosReais, setMembrosReais] = React.useState(null);
  const [meuEmail, setMeuEmail] = React.useState(null);
  const toast = useToast();

  React.useEffect(() => {
    fetch('/auth/me', { headers: eqHeaders() }).then(r=>r.json()).then(d=>{ if(d.ok) setMeuEmail(d.usuario.email); }).catch(()=>{});
    fetch('/api/equipe', { headers: eqHeaders() })
      .then(r=>r.json())
      .then(d=>{ if(d.ok) setMembrosReais(d.equipe); })
      .catch(()=>{});
  }, []);

  // Lista em uso: real (mapeada pro formato do card) ou demo
  const EQUIPE_VIEW = (membrosReais !== null)
    ? membrosReais.map((m,i) => ({
        id: m.id, avatar: i % 12, nome: m.nome, cargo: m.papel === 'admin' ? 'Administrador' : 'Membro da equipe',
        role: m.papel === 'admin' ? 'Admin' : 'Membro',
        status: m.ativo ? 'online' : 'offline', you: m.email === meuEmail, real: true,
      }))
    : EQUIPE;

  const reenviar = (email) => toast(`Convite reenviado para ${email}`);
  const cancelar = (email) => {
    setPendentes(prev => prev.filter(p => p.email !== email));
    toast(`Convite para ${email} cancelado`);
  };

  return (
    <>
      <PageHead
        title={<>Minha <em>equipe</em></>}
        subtitle={`${EQUIPE_VIEW.length} pessoa${EQUIPE_VIEW.length!==1?'s':''}`}
        back onBack={onBack}
        right={
          <div className="row">
            <button className="btn-primary" onClick={() => setShowConvite(true)}>{ICN.plus} Convidar pessoa</button>
          </div>
        }
      />

      <div className="row" style={{gap: 8, marginBottom: 14}}>
        {[
          { id: 'todos', label: 'Todos', count: EQUIPE_VIEW.length },
          { id: 'admin', label: 'Admins', count: EQUIPE_VIEW.filter(p => p.role === 'Admin').length },
          { id: 'membro', label: 'Membros', count: EQUIPE_VIEW.filter(p => p.role === 'Membro').length },
          { id: 'pend', label: 'Convites pendentes', count: pendentes.length },
        ].map(t => (
          <div key={t.id} className={`pp-tab ${tab === t.id ? 'pp-tab-on' : ''}`} onClick={() => setTab(t.id)}>
            {t.label} <span>{t.count}</span>
          </div>
        ))}
      </div>

      {tab !== 'pend' && (
        <div className="eq-grid">
          {EQUIPE_VIEW.filter(p => tab === 'todos' || (tab === 'admin' && p.role === 'Admin') || (tab === 'membro' && p.role === 'Membro')).map(p => (
            <div key={p.id} className="card eq-card" onClick={() => !p.you && !p.real && onOpenContact && onOpenContact(p.id + 1)}>
              <div className="eq-card-top">
                <div className="eq-av">
                  <img src={AVATAR_URLS[p.avatar]} alt="" />
                  <span className={`eq-status eq-status-${p.status}`} />
                </div>
                <div className="row" style={{gap: 6}}>
                  {p.you && <span className="pill" style={{fontSize:10}}>Você</span>}
                  <span className={`pill ${p.role === 'Admin' ? 'pill-dark' : ''}`} style={{fontSize:10}}>{p.role}</span>
                  <MoreMenu size="icon" align="right" items={[
                    { ic: ICN.edit,  label: 'Editar perfil',   toast: p.you ? undefined : `Editando ${p.nome}`, onClick: p.you ? (() => onBack && onBack('perfil')) : undefined },
                    { ic: ICN.users, label: 'Mudar função',    onClick: () => toast(`Função de ${p.nome.split(' ')[0]} atualizada ✓`) },
                    { ic: ICN.mail,  label: 'Enviar mensagem', onClick: () => { const slug = p.nome.toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g,'').replace(/\s+/g,'.'); window.open(`mailto:${slug}@ezza.com.br?subject=Olá, ${p.nome.split(' ')[0]}!`); } },
                    { divider: true },
                    { ic: ICN.trash, label: 'Desativar conta', danger: true, toast: `${p.nome} desativado(a)` },
                  ]} />
                </div>
              </div>
              <div className="eq-name">{p.nome}</div>
              <div className="eq-cargo muted">{p.cargo}</div>

              {!p.real && <>
                <div className="eq-meta">
                  <div className="col">
                    <div className="eq-meta-val money">R$ {p.fechado}k</div>
                    <div className="eq-meta-lbl">Fechado</div>
                  </div>
                  <div className="col">
                    <div className="eq-meta-val">{p.deals}</div>
                    <div className="eq-meta-lbl">Negócios</div>
                  </div>
                  <div className="col">
                    <div className="eq-meta-val">{p.meta}%</div>
                    <div className="eq-meta-lbl">Meta</div>
                  </div>
                </div>
                <div className="eq-bar">
                  <div className={`eq-bar-fill ${p.meta >= 100 ? 'eq-bar-good' : 'eq-bar-warn'}`} style={{width: `${Math.min(100, p.meta)}%`}} />
                </div>
              </>}
            </div>
          ))}
        </div>
      )}

      {tab === 'pend' && (
        <div className="card">
          <div className="card-head">
            <div className="card-title">Convites pendentes</div>
            <button className="btn-primary btn-sm" onClick={() => setShowConvite(true)}>{ICN.plus} Novo convite</button>
          </div>
          {pendentes.length === 0 && <div className="muted" style={{padding:'24px', textAlign:'center'}}>Nenhum convite pendente.</div>}
          {pendentes.length > 0 && (
            <table className="tbl">
              <thead><tr><th>E-mail</th><th>Cargo</th><th>Enviado</th><th></th></tr></thead>
              <tbody>
                {pendentes.map((p, i) => (
                  <tr key={i}>
                    <td><strong>{p.email}</strong></td>
                    <td><span className="pill">{p.role}</span></td>
                    <td className="muted">{p.enviado}</td>
                    <td>
                      <div className="row">
                        <button className="btn-ghost" style={{padding:'6px 12px', fontSize:11}} onClick={() => reenviar(p.email)}>Reenviar</button>
                        <button className="btn-ghost" style={{padding:'6px 12px', fontSize:11, color:'var(--danger)'}} onClick={() => cancelar(p.email)}>Cancelar</button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      )}

      <div className="row" style={{gap: 14, alignItems:'stretch', marginTop: 14}}>
        {membrosReais === null && <div className="card" style={{flex: 1.4}}>
          <div className="card-head">
            <div className="card-title">Ranking do mês</div>
            <CardActions />
          </div>
          <div className="col" style={{gap: 12}}>
            {[...EQUIPE].sort((a,b) => b.fechado - a.fechado).map((p, i) => (
              <div key={p.id} className="row" style={{gap: 14, padding: '6px 0'}}>
                <div className={`rank-num ${i === 0 ? 'rank-1' : i === 1 ? 'rank-2' : i === 2 ? 'rank-3' : ''}`}>{i+1}</div>
                <img src={AVATAR_URLS[p.avatar]} style={{width: 36, height: 36, borderRadius:'50%'}} alt="" />
                <div className="col" style={{flex:1}}>
                  <div style={{fontSize: 13, fontWeight: 600}}>{p.nome}</div>
                  <div style={{height: 6, background: 'oklch(0.94 0.01 250)', borderRadius: 99, marginTop: 6, overflow:'hidden'}}>
                    <div style={{width: `${Math.min(100, p.meta)}%`, height: '100%', background: 'linear-gradient(90deg, var(--acc-blue), var(--acc-lav))'}} />
                  </div>
                </div>
                <div className="money" style={{fontWeight: 700, fontSize: 14}}>R$ {p.fechado}k</div>
              </div>
            ))}
          </div>
        </div>}
        <div className="card" style={{flex: 1}}>
          <div className="card-head">
            <div className="card-title">Permissões & Funções</div>
            <CardActions />
          </div>
          <div className="col" style={{gap: 8}}>
            {[
              { label: 'Admin',          desc: 'Acesso total à conta',           color: 'dark',  n: 2 },
              { label: 'Gerente',        desc: 'Gerencia pipeline e equipe',     color: 'lav',   n: 0 },
              { label: 'Membro',         desc: 'Cria e gerencia próprios leads', color: 'blue',  n: 3 },
              { label: 'SDR',            desc: 'Qualificação de leads',          color: 'mint',  n: 0 },
              { label: 'Somente leitura',desc: 'Visualiza dados sem editar',     color: 'yellow',n: 0 },
            ].map((r,i) => (
              <div key={i} className="perm-row">
                <div className="col" style={{flex:1}}>
                  <div className="row" style={{gap:8}}>
                    <span className={`pill pill-${r.color}`} style={{fontSize:10}}>{r.label}</span>
                    <span className="muted" style={{fontSize:11.5}}>{r.n} pessoas</span>
                  </div>
                  <div className="muted" style={{fontSize: 11.5, marginTop: 4}}>{r.desc}</div>
                </div>
                <ActionBtn icon={ICN.edit} title={`Editar função de ${r.label}`} onClick={() => toast(`Permissões de "${r.label}" abertas para edição`)} />
              </div>
            ))}
          </div>
        </div>
      </div>

      {showConvite && <ConviteModal onClose={() => setShowConvite(false)} onSend={async (email, role) => {
        setShowConvite(false);
        // Se autenticado, cria membro real no banco
        if (membrosReais !== null) {
          const nome = email.split('@')[0].replace(/[._]/g,' ').replace(/\b\w/g, c => c.toUpperCase());
          const senha = 'ezza' + Math.floor(1000 + Math.random()*9000);
          try {
            const r = await fetch('/api/equipe', {
              method: 'POST', headers: eqHeaders(),
              body: JSON.stringify({ nome, email, senha, papel: role === 'Admin' ? 'admin' : 'vendedor' }),
            });
            const d = await r.json();
            if (d.ok) {
              setMembrosReais(prev => [...prev, { id: d.membro.id, nome, email, papel: d.membro.papel, ativo: 1 }]);
              toast(`${nome} adicionado! Senha inicial: ${senha}`);
            } else {
              toast('Erro: ' + d.error);
            }
          } catch (e) { toast('Erro de conexão'); }
        } else {
          setPendentes(prev => [...prev, { email, role, enviado: 'agora' }]);
          toast(`Convite enviado para ${email}`);
        }
      }} />}

      <style>{`
        .eq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
        .eq-card { padding: 18px !important; cursor: default; transition: transform .15s; }
        .eq-card:hover { transform: translateY(-2px); }
        .eq-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
        .eq-av { position: relative; }
        .eq-av img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
        .eq-status { position: absolute; bottom: 0; right: 0; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid white; }
        .eq-status-online  { background: oklch(0.65 0.13 155); }
        .eq-status-ocupado { background: oklch(0.74 0.15 75); }
        .eq-status-offline { background: oklch(0.75 0.01 250); }
        .eq-name { font-size: 15px; font-weight: 700; letter-spacing: -0.015em; }
        .eq-cargo { font-size: 12px; margin-top: 2px; }
        .eq-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 12px; padding-top: 14px; border-top: 1px solid oklch(0.93 0.01 255); }
        .eq-meta-val { font-size: 16px; font-weight: 700; letter-spacing: -0.015em; line-height: 1; }
        .eq-meta-lbl { font-size: 10px; color: var(--ink-muted); margin-top: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
        .eq-bar { height: 6px; background: oklch(0.94 0.01 250); border-radius: 99px; overflow: hidden; }
        .eq-bar-fill { height: 100%; border-radius: 99px; }
        .eq-bar-good { background: var(--acc-mint); }
        .eq-bar-warn { background: var(--acc-yellow); }

        .rank-num { width: 28px; height: 28px; border-radius: 8px; background: oklch(0.96 0.012 250); color: var(--ink-muted); display: grid; place-items: center; font-weight: 700; font-size: 12px; }
        .rank-1 { background: oklch(0.92 0.13 95); color: oklch(0.38 0.15 80); }
        .rank-2 { background: oklch(0.92 0.04 250); color: oklch(0.36 0.13 250); }
        .rank-3 { background: oklch(0.93 0.06 18); color: oklch(0.40 0.15 18); }

        .perm-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid oklch(0.93 0.01 255); }
        .perm-row:last-child { border-bottom: 0; }
      `}</style>
    </>
  );
}

function ConviteModal({ onClose, onSend }) {
  const [email, setEmail] = React.useState('');
  const [role, setRole] = React.useState('Membro');
  const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  return (
    <div className="modal-wrap" onClick={onClose}>
      <div className="card modal-card" onClick={e => e.stopPropagation()} style={{width: 460}}>
        <div className="modal-head">
          <div>
            <div className="modal-title">Convidar <em>pessoa</em></div>
            <div className="modal-sub muted">O convite chegará por e-mail</div>
          </div>
          <div className="mini-btn" onClick={onClose}>{ICN.x}</div>
        </div>
        <div className="form-grid">
          <Field label="E-mail corporativo" full>
            <input className="ezz-input" type="email" placeholder="nome@empresa.com.br"
              value={email} onChange={e => setEmail(e.target.value)} />
          </Field>
          <Field label="Função" full>
            <select className="ezz-input" value={role} onChange={e => setRole(e.target.value)} style={{appearance:'auto'}}>
              {['Admin','Gerente','Membro','SDR','Somente leitura'].map(r => <option key={r}>{r}</option>)}
            </select>
          </Field>
        </div>
        <div className="modal-actions">
          <button className="btn-ghost" onClick={onClose}>Cancelar</button>
          <button className="btn-primary" disabled={!valid} onClick={() => valid && onSend(email, role)}
            style={{opacity: valid ? 1 : 0.5}}>
            {ICN.send} Enviar convite
          </button>
        </div>
      </div>
    </div>
  );
}

window.Equipe = Equipe;