// Client Portal Module

function ClientPortal() {
  const [activeTab, setActiveTab] = React.useState('status');
  const [message, setMessage] = React.useState('');
  const [messages, setMessages] = React.useState([
    { from: 'team', name: 'Ana Lima', text: 'Olá! Seu evento está confirmado para o dia 28. A equipe está montando tudo com carinho.', time: '10:23', date: 'Hoje' },
    { from: 'client', name: 'Marcelo Andrade', text: 'Ótimo! Podemos confirmar o número de convidados VIP? Serão 45 pessoas.', time: '10:47', date: 'Hoje' },
    { from: 'team', name: 'Ana Lima', text: 'Confirmado! Já estamos ajustando os assentos da área VIP para 45 pessoas. Qualquer dúvida estamos à disposição.', time: '11:02', date: 'Hoje' },
  ]);
  const [toast, setToast] = React.useState(null);
  const showToast = (msg) => { setToast({ msg }); setTimeout(() => setToast(null), 3000); };

  const event = {
    name: 'Congresso Tech 2026',
    date: '28–29 de Abril de 2026',
    location: 'Centro de Convenções Anhembi, São Paulo',
    status: 'Confirmado',
    progress: 72,
  };

  const timeline = [
    { label: 'Proposta enviada', date: '10 Abr', done: true },
    { label: 'Orçamento aprovado', date: '14 Abr', done: true },
    { label: 'Briefing finalizado', date: '18 Abr', done: true },
    { label: 'Montagem e preparação', date: '26–27 Abr', done: false, active: true },
    { label: 'Dia do evento', date: '28–29 Abr', done: false },
    { label: 'Relatório pós-evento', date: '05 Mai', done: false },
  ];

  const budgetItems = [
    { desc: 'Locação de espaço', value: 45000 },
    { desc: 'Equipamento AV', value: 28000 },
    { desc: 'Decoração', value: 22000 },
    { desc: 'Buffet (200 pessoas)', value: 36000 },
    { desc: 'Equipe de apoio', value: 9000 },
    { desc: 'Coordenação geral', value: 5000 },
  ];
  const total = budgetItems.reduce((s, i) => s + i.value, 0);

  const sendMessage = () => {
    if (!message.trim()) return;
    setMessages(m => [...m, { from: 'client', name: 'Você', text: message, time: new Date().toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' }), date: 'Hoje' }]);
    setMessage('');
    setTimeout(() => {
      setMessages(m => [...m, { from: 'team', name: 'Ana Lima', text: 'Recebemos sua mensagem! Em breve retornaremos.', time: new Date().toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' }), date: 'Hoje' }]);
    }, 1500);
  };

  const tabs = [{ id: 'status', label: 'Status', icon: 'zap' }, { id: 'budget', label: 'Orçamento', icon: 'budget' }, { id: 'schedule', label: 'Cronograma', icon: 'calendar' }, { id: 'messages', label: 'Mensagens', icon: 'message' }];

  return (
    <div>
      <div style={{ marginBottom: 28 }}>
        <h1 style={{ fontSize: 24, fontWeight: 700, color: DS.colors.text, margin: 0, letterSpacing: '-0.02em' }}>Portal do Cliente</h1>
        <p style={{ fontSize: 13, color: DS.colors.textSec, margin: '4px 0 0' }}>Visão do cliente — TechCorp Brasil</p>
      </div>

      {/* Client event header */}
      <Card style={{ padding: 28, marginBottom: 20, background: `linear-gradient(135deg, ${DS.colors.primary} 0%, #1D4ED8 100%)`, border: 'none' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div>
            <Badge variant="default" style={{ background: 'rgba(255,255,255,0.2)', color: '#fff', marginBottom: 10 }}>Evento em andamento</Badge>
            <div style={{ fontSize: 26, fontWeight: 800, color: '#fff', letterSpacing: '-0.02em', marginBottom: 4 }}>{event.name}</div>
            <div style={{ display: 'flex', gap: 20, marginTop: 8 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, color: 'rgba(255,255,255,0.8)' }}>
                <Icon name="calendar" size={14} color="rgba(255,255,255,0.8)" />{event.date}
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, color: 'rgba(255,255,255,0.8)' }}>
                <Icon name="map" size={14} color="rgba(255,255,255,0.8)" />{event.location}
              </div>
            </div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)', marginBottom: 6 }}>Progresso geral</div>
            <div style={{ fontSize: 36, fontWeight: 800, color: '#fff' }}>{event.progress}%</div>
            <div style={{ width: 120, marginTop: 8 }}>
              <div style={{ background: 'rgba(255,255,255,0.2)', borderRadius: DS.radius.full, height: 6 }}>
                <div style={{ width: `${event.progress}%`, height: '100%', background: '#fff', borderRadius: DS.radius.full, transition: 'width 0.5s ease' }} />
              </div>
            </div>
          </div>
        </div>
      </Card>

      {/* Tabs */}
      <div style={{ display: 'flex', gap: 2, marginBottom: 20, borderBottom: `1px solid ${DS.colors.border}` }}>
        {tabs.map(t => (
          <button key={t.id} onClick={() => setActiveTab(t.id)} style={{
            display: 'flex', alignItems: 'center', gap: 6, padding: '10px 18px', border: 'none', background: 'transparent', cursor: 'pointer', fontSize: 13, fontWeight: 600,
            color: activeTab === t.id ? DS.colors.primary : DS.colors.textSec,
            borderBottom: `2px solid ${activeTab === t.id ? DS.colors.primary : 'transparent'}`,
            marginBottom: -1, transition: 'all 0.15s',
          }}>
            <Icon name={t.icon} size={14} color={activeTab === t.id ? DS.colors.primary : DS.colors.textSec} />
            {t.label}
          </button>
        ))}
      </div>

      {/* Status tab */}
      {activeTab === 'status' && (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {[
            { label: 'Convidados confirmados', value: '200', icon: 'users', color: DS.colors.primary },
            { label: 'Fornecedores', value: '8 / 10', icon: 'briefcase', color: DS.colors.success },
            { label: 'Tarefas concluídas', value: '18 / 25', icon: 'tasks', color: DS.colors.warning },
          ].map(s => (
            <Card key={s.label} style={{ padding: '20px 24px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <div>
                  <div style={{ fontSize: 11, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6 }}>{s.label}</div>
                  <div style={{ fontSize: 28, fontWeight: 800, color: DS.colors.text }}>{s.value}</div>
                </div>
                <div style={{ width: 40, height: 40, borderRadius: DS.radius.sm, background: s.color + '15', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name={s.icon} size={18} color={s.color} />
                </div>
              </div>
            </Card>
          ))}
        </div>
      )}

      {/* Budget tab */}
      {activeTab === 'budget' && (
        <Card style={{ padding: 28 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
            <div style={{ fontSize: 16, fontWeight: 700, color: DS.colors.text }}>Orçamento aprovado</div>
            <Badge variant="success">Aprovado em 14 Abr</Badge>
          </div>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr style={{ borderBottom: `2px solid ${DS.colors.border}` }}>
                {['Item', 'Valor'].map((h, i) => (
                  <th key={h} style={{ padding: '8px 0', textAlign: i === 0 ? 'left' : 'right', fontSize: 11, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {budgetItems.map((item, i) => (
                <tr key={i} style={{ borderBottom: `1px solid ${DS.colors.border}` }}>
                  <td style={{ padding: '12px 0', fontSize: 13, color: DS.colors.text }}>{item.desc}</td>
                  <td style={{ padding: '12px 0', fontSize: 13, fontWeight: 600, color: DS.colors.text, textAlign: 'right' }}>R$ {item.value.toLocaleString('pt-BR')}</td>
                </tr>
              ))}
            </tbody>
          </table>
          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 16, paddingTop: 16, borderTop: `2px solid ${DS.colors.text}` }}>
            <div style={{ fontSize: 20, fontWeight: 800, color: DS.colors.primary }}>Total: R$ {total.toLocaleString('pt-BR')}</div>
          </div>
        </Card>
      )}

      {/* Schedule tab */}
      {activeTab === 'schedule' && (
        <Card style={{ padding: 28 }}>
          <div style={{ fontSize: 16, fontWeight: 700, color: DS.colors.text, marginBottom: 24 }}>Cronograma do evento</div>
          <div style={{ position: 'relative', paddingLeft: 32 }}>
            <div style={{ position: 'absolute', left: 10, top: 0, bottom: 0, width: 2, background: DS.colors.border }} />
            {timeline.map((t, i) => (
              <div key={i} style={{ position: 'relative', marginBottom: 28 }}>
                <div style={{ position: 'absolute', left: -22, top: 2, width: 20, height: 20, borderRadius: '50%', background: t.done ? DS.colors.success : t.active ? DS.colors.primary : '#E2E8F0', display: 'flex', alignItems: 'center', justifyContent: 'center', border: `2px solid ${t.active ? DS.colors.primary : 'transparent'}`, transition: 'all 0.2s' }}>
                  {t.done && <Icon name="check" size={11} color="#fff" />}
                  {t.active && <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#fff' }} />}
                </div>
                <div style={{ fontSize: 14, fontWeight: t.active ? 700 : 600, color: t.done ? DS.colors.textSec : t.active ? DS.colors.primary : DS.colors.text, textDecoration: t.done ? 'line-through' : 'none' }}>{t.label}</div>
                <div style={{ fontSize: 12, color: DS.colors.textMuted, marginTop: 2 }}>{t.date}</div>
                {t.active && <Badge variant="primary" style={{ marginTop: 6 }}>Em progresso</Badge>}
              </div>
            ))}
          </div>
        </Card>
      )}

      {/* Messages tab */}
      {activeTab === 'messages' && (
        <Card style={{ display: 'flex', flexDirection: 'column', height: 480 }}>
          <div style={{ flex: 1, overflow: 'auto', padding: 20, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {messages.map((m, i) => (
              <div key={i} style={{ display: 'flex', gap: 10, justifyContent: m.from === 'client' ? 'flex-end' : 'flex-start' }}>
                {m.from === 'team' && <Avatar name={m.name} size={32} />}
                <div style={{ maxWidth: '70%' }}>
                  <div style={{ fontSize: 11, color: DS.colors.textMuted, marginBottom: 4, textAlign: m.from === 'client' ? 'right' : 'left' }}>{m.name} · {m.time}</div>
                  <div style={{ padding: '10px 14px', borderRadius: DS.radius.md, fontSize: 13, lineHeight: 1.5, background: m.from === 'client' ? DS.colors.primary : '#F1F5F9', color: m.from === 'client' ? '#fff' : DS.colors.text }}>
                    {m.text}
                  </div>
                </div>
                {m.from === 'client' && <Avatar name={m.name} size={32} color="#8B5CF6" />}
              </div>
            ))}
          </div>
          <div style={{ padding: '14px 20px', borderTop: `1px solid ${DS.colors.border}`, display: 'flex', gap: 10 }}>
            <input value={message} onChange={e => setMessage(e.target.value)} onKeyDown={e => e.key === 'Enter' && sendMessage()}
              placeholder="Escreva uma mensagem..."
              style={{ flex: 1, border: `1px solid ${DS.colors.border}`, borderRadius: DS.radius.sm, padding: '10px 14px', fontSize: 13, outline: 'none', fontFamily: 'inherit' }} />
            <Btn onClick={sendMessage} icon="arrow">Enviar</Btn>
          </div>
        </Card>
      )}

      {toast && <Toast message={toast.msg} onClose={() => setToast(null)} />}
    </div>
  );
}

Object.assign(window, { ClientPortal });