const { useState, useEffect, useMemo, useCallback, createContext, useContext } = React;

// ============================================================
// API CLIENT
// ============================================================
const API_BASE = '';

async function apiCall(endpoint, options = {}) {
  const token = localStorage.getItem('triade_token');
  const headers = {
    'Content-Type': 'application/json',
    ...(options.headers || {}),
  };
  if (token) headers['Authorization'] = `Bearer ${token}`;

  const res = await fetch(`${API_BASE}/api${endpoint}`, {
    ...options,
    headers,
  });

  if (res.status === 401) {
    localStorage.removeItem('triade_token');
    localStorage.removeItem('triade_user');
    window.location.reload();
    return;
  }

  const data = await res.json().catch(() => ({}));
  if (!res.ok) throw new Error(data.error || 'Erro no servidor');
  return data;
}

// ============================================================
// ICONS (SVG inline)
// ============================================================
const Icon = ({ name, size = 18 }) => {
  const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" };
  const icons = {
    dashboard: <svg {...props}><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>,
    folder: <svg {...props}><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>,
    link: <svg {...props}><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>,
    check: <svg {...props}><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>,
    calendar: <svg {...props}><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>,
    users: <svg {...props}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>,
    team: <svg {...props}><circle cx="12" cy="8" r="3"/><path d="M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"/></svg>,
    plus: <svg {...props}><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>,
    edit: <svg {...props}><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>,
    trash: <svg {...props}><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>,
    logout: <svg {...props}><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>,
    search: <svg {...props}><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>,
    external: <svg {...props}><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>,
    mail: <svg {...props}><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>,
    phone: <svg {...props}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>,
    building: <svg {...props}><rect x="3" y="3" width="18" height="18" rx="1"/><path d="M9 7h6M9 11h6M9 15h6"/></svg>,
    chevronLeft: <svg {...props}><polyline points="15 18 9 12 15 6"/></svg>,
    chevronRight: <svg {...props}><polyline points="9 18 15 12 9 6"/></svg>,
    upload: <svg {...props}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>,
    file: <svg {...props}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>,
    close: <svg {...props}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>,
  };
  return icons[name] || null;
};

// ============================================================
// AUTH CONTEXT
// ============================================================
const AuthContext = createContext(null);

function AuthProvider({ children }) {
  const [user, setUser] = useState(() => {
    const saved = localStorage.getItem('triade_user');
    return saved ? JSON.parse(saved) : null;
  });
  const [loading, setLoading] = useState(false);

  const login = async (email, password) => {
    setLoading(true);
    try {
      const data = await apiCall('/auth/login', {
        method: 'POST',
        body: JSON.stringify({ email, password }),
      });
      localStorage.setItem('triade_token', data.token);
      localStorage.setItem('triade_user', JSON.stringify(data.user));
      setUser(data.user);
      return data;
    } finally {
      setLoading(false);
    }
  };

  const logout = () => {
    localStorage.removeItem('triade_token');
    localStorage.removeItem('triade_user');
    setUser(null);
  };

  return <AuthContext.Provider value={{ user, login, logout, loading }}>{children}</AuthContext.Provider>;
}

const useAuth = () => useContext(AuthContext);

// ============================================================
// LOGO COMPONENT
// ============================================================
function TriadeLogo({ size = 'normal' }) {
  return (
    <div className="login-logo">
      <img src="/logo-triade.png" alt="Tríade Clube de Benefícios" />
    </div>
  );
}

// ============================================================
// PAGINA: LOGIN
// ============================================================
function LoginPage() {
  const { login, loading } = useAuth();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    try {
      await login(email, password);
    } catch (err) {
      setError(err.message || 'Erro ao fazer login');
    }
  };

  return (
    <div className="login-page">
      <div className="login-card fade-in">
        <TriadeLogo />

        <div className="login-title-label">Acesso interno</div>
        <div className="login-title">Bem-vindo.</div>
        <div className="login-subtitle">Entre com suas credenciais corporativas.</div>

        <form onSubmit={handleSubmit}>
          <div className="form-group">
            <label className="form-label">Email</label>
            <input
              type="email"
              className="form-input"
              placeholder="voce@empresa.com.br"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              autoFocus
            />
          </div>

          <div className="form-group">
            <label className="form-label">Senha</label>
            <input
              type="password"
              className="form-input"
              placeholder="••••••••"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
            />
          </div>

          {error && <div className="error-box">{error}</div>}

          <button type="submit" className="btn btn-primary" disabled={loading}>
            {loading ? 'Entrando...' : 'Entrar'}
          </button>
        </form>

        <div className="login-footer">
          Não tem conta? Peça ao administrador.
        </div>
      </div>
    </div>
  );
}

// ============================================================
// SIDEBAR
// ============================================================
function Sidebar({ currentPage, onNavigate }) {
  const { user, logout } = useAuth();

  const menus = [
    { id: 'dashboard', label: 'Dashboard', icon: 'dashboard' },
    { id: 'files', label: 'Arquivos', icon: 'folder' },
    { id: 'links', label: 'Links & Acessos', icon: 'link' },
    { id: 'tasks', label: 'Tarefas', icon: 'check' },
    { id: 'calendar', label: 'Calendário', icon: 'calendar' },
    { id: 'contacts', label: 'Contatos', icon: 'users' },
    { id: 'team', label: 'Equipe', icon: 'team' },
  ];

  const initial = (user?.name || 'U')[0];

  return (
    <aside className="sidebar">
      <div className="sidebar-logo">
        <img src="/logo-triade.png" alt="Tríade" />
      </div>

      <nav className="sidebar-nav">
        {menus.map((m) => (
          <button
            key={m.id}
            className={`nav-item ${currentPage === m.id ? 'active' : ''}`}
            onClick={() => onNavigate(m.id)}
          >
            <Icon name={m.icon} />
            <span className="nav-label">{m.label}</span>
          </button>
        ))}
      </nav>

      <div className="sidebar-user">
        <div className="user-card">
          <div className="user-avatar">{initial}</div>
          <div className="user-info">
            <div className="user-name">{user?.name}</div>
            <div className="user-role">{user?.role === 'admin' ? 'Administrador' : 'Membro'}</div>
          </div>
        </div>
        <button className="sidebar-logout" onClick={logout}>
          <Icon name="logout" size={15} />
          <span>Sair</span>
        </button>
      </div>
    </aside>
  );
}

// ============================================================
// MODAL
// ============================================================
function Modal({ title, onClose, children, footer }) {
  useEffect(() => {
    const onEsc = (e) => e.key === 'Escape' && onClose();
    window.addEventListener('keydown', onEsc);
    return () => window.removeEventListener('keydown', onEsc);
  }, [onClose]);

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <div className="modal-title">{title}</div>
        </div>
        <div className="modal-body">{children}</div>
        {footer && <div className="modal-footer">{footer}</div>}
      </div>
    </div>
  );
}

// ============================================================
// PAGINA: DASHBOARD
// ============================================================
function DashboardPage({ onNavigate }) {
  const { user } = useAuth();
  const [stats, setStats] = useState({ tasks: 0, tasksDone: 0, files: 0, contacts: 0, links: 0 });
  const [doingTasks, setDoingTasks] = useState([]);
  const [upcomingEvents, setUpcomingEvents] = useState([]);

  useEffect(() => {
    (async () => {
      try {
        const [tasks, files, contacts, links, events] = await Promise.all([
          apiCall('/tasks').catch(() => []),
          apiCall('/files').catch(() => []),
          apiCall('/contacts').catch(() => []),
          apiCall('/links').catch(() => []),
          apiCall('/events').catch(() => []),
        ]);
        const tasksDone = tasks.filter((t) => t.status === 'done').length;
        const tasksPending = tasks.filter((t) => t.status !== 'done').length;
        setStats({
          tasks: tasksPending,
          tasksDone,
          files: files.length,
          contacts: contacts.length,
          links: links.length,
        });
        setDoingTasks(tasks.filter((t) => t.status === 'doing').slice(0, 4));
        const today = new Date();
        today.setHours(0, 0, 0, 0);
        setUpcomingEvents(
          events
            .filter((e) => new Date(e.event_date) >= today)
            .sort((a, b) => new Date(a.event_date) - new Date(b.event_date))
            .slice(0, 4)
        );
      } catch (err) {
        console.error(err);
      }
    })();
  }, []);

  const firstName = (user?.name || '').split(' ')[0];

  return (
    <div className="fade-in">
      <div className="page-header">
        <div className="page-label">Visão geral</div>
        <h1 className="page-title">Olá, {firstName}.</h1>
        <div className="page-subtitle">
          Aqui está o resumo completo da sua empresa hoje. Mantenha o foco no que importa.
        </div>
      </div>

      <div className="stats-grid">
        <div className="stat-card" onClick={() => onNavigate('tasks')} style={{ cursor: 'pointer' }}>
          <div className="stat-icon"><Icon name="check" size={20} /></div>
          <div className="stat-number">{stats.tasks}</div>
          <div className="stat-label">Tarefas pendentes</div>
          <div className="stat-sublabel">{stats.tasksDone} concluídas</div>
        </div>
        <div className="stat-card" onClick={() => onNavigate('files')} style={{ cursor: 'pointer' }}>
          <div className="stat-icon"><Icon name="folder" size={20} /></div>
          <div className="stat-number">{stats.files}</div>
          <div className="stat-label">Arquivos</div>
          <div className="stat-sublabel">Organizados</div>
        </div>
        <div className="stat-card" onClick={() => onNavigate('contacts')} style={{ cursor: 'pointer' }}>
          <div className="stat-icon"><Icon name="users" size={20} /></div>
          <div className="stat-number">{stats.contacts}</div>
          <div className="stat-label">Contatos</div>
          <div className="stat-sublabel">Cadastrados</div>
        </div>
        <div className="stat-card" onClick={() => onNavigate('links')} style={{ cursor: 'pointer' }}>
          <div className="stat-icon"><Icon name="link" size={20} /></div>
          <div className="stat-number">{stats.links}</div>
          <div className="stat-label">Links salvos</div>
          <div className="stat-sublabel">Acessos rápidos</div>
        </div>
      </div>

      <div className="dashboard-row">
        <div className="card">
          <div className="card-header">
            <div>
              <div className="card-title">Tarefas em andamento</div>
              <div className="card-subtitle">O que precisa da sua atenção</div>
            </div>
            <button className="card-link" onClick={() => onNavigate('tasks')}>Ver todas →</button>
          </div>
          {doingTasks.length === 0 ? (
            <div className="empty-state">
              <div className="empty-state-icon">✦</div>
              <div>Tudo em dia.</div>
            </div>
          ) : (
            <div className="item-list">
              {doingTasks.map((t) => (
                <div key={t.id} className={`kanban-card priority-${t.priority || 'medium'}`}>
                  <div className="kanban-card-title">{t.title}</div>
                  {t.due_date && (
                    <div className="kanban-card-footer">
                      <span>Prazo: {new Date(t.due_date).toLocaleDateString('pt-BR')}</span>
                    </div>
                  )}
                </div>
              ))}
            </div>
          )}
        </div>

        <div className="card">
          <div className="card-header">
            <div>
              <div className="card-title">Próximos eventos</div>
              <div className="card-subtitle">Agenda</div>
            </div>
            <button className="card-link" onClick={() => onNavigate('calendar')}>→</button>
          </div>
          {upcomingEvents.length === 0 ? (
            <div className="empty-state">
              <div className="empty-state-icon">✦</div>
              <div>Agenda livre.</div>
            </div>
          ) : (
            <div className="item-list">
              {upcomingEvents.map((e) => (
                <div key={e.id} className="list-item">
                  <div className="list-item-main">
                    <div className="list-item-title">{e.title}</div>
                    <div className="list-item-meta">
                      {new Date(e.event_date).toLocaleDateString('pt-BR')} · {e.event_time?.slice(0, 5)}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// ============================================================
// PAGINA: ARQUIVOS
// ============================================================
function FilesPage() {
  const [files, setFiles] = useState([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');
  const [showModal, setShowModal] = useState(false);
  const [form, setForm] = useState({ name: '', category: '', external_url: '' });

  const load = async () => {
    setLoading(true);
    try {
      const data = await apiCall('/files');
      setFiles(data);
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => { load(); }, []);

  const handleAdd = async () => {
    if (!form.name || !form.external_url) return;
    try {
      await apiCall('/files/external', {
        method: 'POST',
        body: JSON.stringify(form),
      });
      setShowModal(false);
      setForm({ name: '', category: '', external_url: '' });
      load();
    } catch (err) {
      alert('Erro: ' + err.message);
    }
  };

  const handleDelete = async (id) => {
    if (!confirm('Remover este arquivo?')) return;
    try {
      await apiCall(`/files/${id}`, { method: 'DELETE' });
      load();
    } catch (err) {
      alert('Erro: ' + err.message);
    }
  };

  const filtered = files
    .filter((f) =>
      !search || f.name.toLowerCase().includes(search.toLowerCase()) ||
      (f.category || '').toLowerCase().includes(search.toLowerCase())
    )
    .sort((a, b) => (a.name || '').localeCompare(b.name || '', 'pt-BR', { sensitivity: 'base' }));

  return (
    <div className="fade-in">
      <div className="page-header">
        <div className="page-label">Documentos</div>
        <h1 className="page-title">Arquivos.</h1>
        <div className="page-subtitle">Todos os documentos e links externos da empresa em um só lugar.</div>
      </div>

      <div className="page-actions">
        <input
          className="form-input page-search"
          placeholder="Buscar por nome ou categoria..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />
        <button className="btn btn-dark" onClick={() => setShowModal(true)}>
          <Icon name="plus" size={16} /> Adicionar arquivo
        </button>
      </div>

      {loading ? (
        <div className="empty-state"><div className="spinner" style={{ margin: '0 auto' }}></div></div>
      ) : filtered.length === 0 ? (
        <div className="card empty-state">
          <div className="empty-state-icon">✦</div>
          <div>Nenhum arquivo ainda. Clique em "Adicionar arquivo" para começar.</div>
        </div>
      ) : (
        <div className="item-list">
          {filtered.map((f) => (
            <div key={f.id} className="list-item">
              <div className="list-item-main">
                <div className="list-item-title">
                  <Icon name="file" size={16} />
                  {f.name}
                </div>
                <div className="list-item-meta">
                  {f.category && <span className="badge badge-gold">{f.category}</span>}
                  <span>{new Date(f.created_at).toLocaleDateString('pt-BR')}</span>
                </div>
              </div>
              <div className="list-item-actions">
                {f.external_url && (
                  <a href={f.external_url} target="_blank" rel="noopener" className="icon-btn" title="Abrir">
                    <Icon name="external" size={16} />
                  </a>
                )}
                <button className="icon-btn danger" onClick={() => handleDelete(f.id)} title="Remover">
                  <Icon name="trash" size={16} />
                </button>
              </div>
            </div>
          ))}
        </div>
      )}

      {showModal && (
        <Modal
          title="Adicionar arquivo"
          onClose={() => setShowModal(false)}
          footer={
            <>
              <button className="btn btn-outline" onClick={() => setShowModal(false)}>Cancelar</button>
              <button className="btn btn-dark" onClick={handleAdd}>Salvar</button>
            </>
          }
        >
          <div className="form-group">
            <label className="form-label">Nome *</label>
            <input className="form-input" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
          </div>
          <div className="form-group">
            <label className="form-label">Categoria</label>
            <input className="form-input" value={form.category} onChange={(e) => setForm({ ...form, category: e.target.value })} placeholder="Ex: Contratos, Financeiro, Marketing" />
          </div>
          <div className="form-group">
            <label className="form-label">Link externo *</label>
            <input className="form-input" value={form.external_url} onChange={(e) => setForm({ ...form, external_url: e.target.value })} placeholder="https://drive.google.com/..." />
          </div>
        </Modal>
      )}
    </div>
  );
}

// ============================================================
// PAGINA: LINKS & ACESSOS
// ============================================================
function LinksPage() {
  const [links, setLinks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');
  const [showModal, setShowModal] = useState(false);
  const [editing, setEditing] = useState(null);
  const [form, setForm] = useState({ name: '', category: '', url: '', description: '' });

  const load = async () => {
    setLoading(true);
    try {
      const data = await apiCall('/links');
      setLinks(data);
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => { load(); }, []);

  const openNew = () => {
    setEditing(null);
    setForm({ name: '', category: '', url: '', description: '' });
    setShowModal(true);
  };

  const openEdit = (link) => {
    setEditing(link);
    setForm({
      name: link.name,
      category: link.category || '',
      url: link.url,
      description: link.description || ''
    });
    setShowModal(true);
  };

  const handleSave = async () => {
    if (!form.name || !form.url) return;
    try {
      if (editing) {
        await apiCall(`/links/${editing.id}`, { method: 'PUT', body: JSON.stringify(form) });
      } else {
        await apiCall('/links', { method: 'POST', body: JSON.stringify(form) });
      }
      setShowModal(false);
      load();
    } catch (err) {
      alert('Erro: ' + err.message);
    }
  };

  const handleDelete = async (id) => {
    if (!confirm('Remover este link?')) return;
    try {
      await apiCall(`/links/${id}`, { method: 'DELETE' });
      load();
    } catch (err) {
      alert('Erro: ' + err.message);
    }
  };

  const filtered = links
    .filter((l) =>
      !search || l.name.toLowerCase().includes(search.toLowerCase()) ||
      (l.category || '').toLowerCase().includes(search.toLowerCase())
    )
    .sort((a, b) => (a.name || '').localeCompare(b.name || '', 'pt-BR', { sensitivity: 'base' }));

  return (
    <div className="fade-in">
      <div className="page-header">
        <div className="page-label">Acessos rápidos</div>
        <h1 className="page-title">Links &amp; Acessos.</h1>
        <div className="page-subtitle">Suas ferramentas favoritas, a um clique de distância.</div>
      </div>

      <div className="page-actions">
        <input
          className="form-input page-search"
          placeholder="Buscar link..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />
        <button className="btn btn-dark" onClick={openNew}>
          <Icon name="plus" size={16} /> Adicionar link
        </button>
      </div>

      {loading ? (
        <div className="empty-state"><div className="spinner" style={{ margin: '0 auto' }}></div></div>
      ) : filtered.length === 0 ? (
        <div className="card empty-state">
          <div className="empty-state-icon">✦</div>
          <div>Nenhum link cadastrado ainda.</div>
        </div>
      ) : (
        <div className="item-list">
          {filtered.map((l) => (
            <div key={l.id} className="list-item">
              <div className="list-item-main">
                <div className="list-item-title">
                  <Icon name="link" size={16} />
                  {l.name}
                </div>
                <div className="list-item-meta">
                  {l.category && <span className="badge badge-gold">{l.category}</span>}
                  {l.description && <span>{l.description}</span>}
                </div>
              </div>
              <div className="list-item-actions">
                <a href={l.url} target="_blank" rel="noopener" className="icon-btn" title="Abrir">
                  <Icon name="external" size={16} />
                </a>
                <button className="icon-btn" onClick={() => openEdit(l)} title="Editar">
                  <Icon name="edit" size={16} />
                </button>
                <button className="icon-btn danger" onClick={() => handleDelete(l.id)} title="Remover">
                  <Icon name="trash" size={16} />
                </button>
              </div>
            </div>
          ))}
        </div>
      )}

      {showModal && (
        <Modal
          title={editing ? 'Editar link' : 'Novo link'}
          onClose={() => setShowModal(false)}
          footer={
            <>
              <button className="btn btn-outline" onClick={() => setShowModal(false)}>Cancelar</button>
              <button className="btn btn-dark" onClick={handleSave}>Salvar</button>
            </>
          }
        >
          <div className="form-group">
            <label className="form-label">Nome *</label>
            <input className="form-input" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
          </div>
          <div className="form-group">
            <label className="form-label">URL *</label>
            <input className="form-input" value={form.url} onChange={(e) => setForm({ ...form, url: e.target.value })} placeholder="https://..." />
          </div>
          <div className="form-group">
            <label className="form-label">Categoria</label>
            <input className="form-input" value={form.category} onChange={(e) => setForm({ ...form, category: e.target.value })} placeholder="Ex: Ferramentas, Redes sociais" />
          </div>
          <div className="form-group">
            <label className="form-label">Descrição</label>
            <textarea className="form-textarea" value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })}></textarea>
          </div>
        </Modal>
      )}
    </div>
  );
}

// ============================================================
// PAGINA: TAREFAS (Kanban)
// ============================================================
function TasksPage() {
  const [tasks, setTasks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [showModal, setShowModal] = useState(false);
  const [editing, setEditing] = useState(null);
  const [form, setForm] = useState({
    title: '', description: '', status: 'todo', priority: 'medium', due_date: '', assignee: ''
  });

  const load = async () => {
    setLoading(true);
    try {
      const data = await apiCall('/tasks');
      setTasks(data);
    } catch (err) { console.error(err); }
    finally { setLoading(false); }
  };

  useEffect(() => { load(); }, []);

  const openNew = (status = 'todo') => {
    setEditing(null);
    setForm({ title: '', description: '', status, priority: 'medium', due_date: '', assignee: '' });
    setShowModal(true);
  };

  const openEdit = (task) => {
    setEditing(task);
    setForm({
      title: task.title,
      description: task.description || '',
      status: task.status,
      priority: task.priority,
      due_date: task.due_date ? task.due_date.slice(0, 10) : '',
      assignee: task.assignee || ''
    });
    setShowModal(true);
  };

  const handleSave = async () => {
    if (!form.title) return;
    try {
      const payload = { ...form, due_date: form.due_date || null };
      if (editing) {
        await apiCall(`/tasks/${editing.id}`, { method: 'PUT', body: JSON.stringify(payload) });
      } else {
        await apiCall('/tasks', { method: 'POST', body: JSON.stringify(payload) });
      }
      setShowModal(false);
      load();
    } catch (err) { alert('Erro: ' + err.message); }
  };

  const handleDelete = async (id) => {
    if (!confirm('Remover esta tarefa?')) return;
    try {
      await apiCall(`/tasks/${id}`, { method: 'DELETE' });
      load();
    } catch (err) { alert('Erro: ' + err.message); }
  };

  const moveTask = async (task, newStatus) => {
    try {
      await apiCall(`/tasks/${task.id}`, {
        method: 'PUT',
        body: JSON.stringify({ ...task, status: newStatus, due_date: task.due_date ? task.due_date.slice(0, 10) : null }),
      });
      load();
    } catch (err) { alert('Erro: ' + err.message); }
  };

  const columns = [
    { id: 'todo', label: 'A fazer', dot: 'todo' },
    { id: 'doing', label: 'Em andamento', dot: 'doing' },
    { id: 'done', label: 'Concluídas', dot: 'done' },
  ];

  return (
    <div className="fade-in">
      <div className="page-header">
        <div className="page-label">Produtividade</div>
        <h1 className="page-title">Tarefas.</h1>
        <div className="page-subtitle">Organize o trabalho, defina prioridades e acompanhe o progresso.</div>
      </div>

      <div className="page-actions">
        <div style={{ flex: 1 }}></div>
        <button className="btn btn-dark" onClick={() => openNew()}>
          <Icon name="plus" size={16} /> Nova tarefa
        </button>
      </div>

      {loading ? (
        <div className="empty-state"><div className="spinner" style={{ margin: '0 auto' }}></div></div>
      ) : (
        <div className="kanban-board">
          {columns.map((col) => {
            const colTasks = tasks.filter((t) => t.status === col.id);
            return (
              <div key={col.id} className="kanban-column">
                <div className="kanban-column-header">
                  <span className={`kanban-dot ${col.dot}`}></span>
                  <span className="kanban-column-title">{col.label}</span>
                  <span className="kanban-count">{colTasks.length}</span>
                </div>
                <div className="kanban-cards">
                  {colTasks.length === 0 && (
                    <div style={{ fontSize: 12, color: 'var(--text-faded)', textAlign: 'center', padding: '20px 0' }}>
                      Arraste ou crie uma tarefa
                    </div>
                  )}
                  {colTasks.map((t) => (
                    <div key={t.id} className={`kanban-card priority-${t.priority}`} onClick={() => openEdit(t)}>
                      <div className="kanban-card-title">{t.title}</div>
                      {t.description && <div className="kanban-card-desc">{t.description}</div>}
                      <div className="kanban-card-footer">
                        <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                          {t.priority === 'high' && <span className="badge badge-danger">Alta</span>}
                          {t.priority === 'medium' && <span className="badge badge-gold">Média</span>}
                          {t.priority === 'low' && <span className="badge badge-neutral">Baixa</span>}
                        </div>
                        {t.due_date && <span>{new Date(t.due_date).toLocaleDateString('pt-BR', { day: '2-digit', month: 'short' })}</span>}
                      </div>
                      <div style={{ display: 'flex', gap: 4, marginTop: 10, flexWrap: 'wrap' }}>
                        {col.id !== 'todo' && (
                          <button className="btn btn-sm btn-outline" onClick={(e) => { e.stopPropagation(); moveTask(t, col.id === 'done' ? 'doing' : 'todo'); }}>
                            ← {col.id === 'done' ? 'Andamento' : 'A fazer'}
                          </button>
                        )}
                        {col.id !== 'done' && (
                          <button className="btn btn-sm btn-gold-outline" onClick={(e) => { e.stopPropagation(); moveTask(t, col.id === 'todo' ? 'doing' : 'done'); }}>
                            {col.id === 'todo' ? 'Iniciar' : 'Concluir'} →
                          </button>
                        )}
                        <button className="icon-btn danger" onClick={(e) => { e.stopPropagation(); handleDelete(t.id); }}>
                          <Icon name="trash" size={14} />
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      )}

      {showModal && (
        <Modal
          title={editing ? 'Editar tarefa' : 'Nova tarefa'}
          onClose={() => setShowModal(false)}
          footer={
            <>
              <button className="btn btn-outline" onClick={() => setShowModal(false)}>Cancelar</button>
              <button className="btn btn-dark" onClick={handleSave}>Salvar</button>
            </>
          }
        >
          <div className="form-group">
            <label className="form-label">Título *</label>
            <input className="form-input" value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} />
          </div>
          <div className="form-group">
            <label className="form-label">Descrição</label>
            <textarea className="form-textarea" value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })}></textarea>
          </div>
          <div className="form-row">
            <div className="form-group">
              <label className="form-label">Status</label>
              <select className="form-select" value={form.status} onChange={(e) => setForm({ ...form, status: e.target.value })}>
                <option value="todo">A fazer</option>
                <option value="doing">Em andamento</option>
                <option value="done">Concluída</option>
              </select>
            </div>
            <div className="form-group">
              <label className="form-label">Prioridade</label>
              <select className="form-select" value={form.priority} onChange={(e) => setForm({ ...form, priority: e.target.value })}>
                <option value="low">Baixa</option>
                <option value="medium">Média</option>
                <option value="high">Alta</option>
              </select>
            </div>
          </div>
          <div className="form-row">
            <div className="form-group">
              <label className="form-label">Prazo</label>
              <input type="date" className="form-input" value={form.due_date} onChange={(e) => setForm({ ...form, due_date: e.target.value })} />
            </div>
            <div className="form-group">
              <label className="form-label">Responsável</label>
              <input className="form-input" value={form.assignee} onChange={(e) => setForm({ ...form, assignee: e.target.value })} />
            </div>
          </div>
        </Modal>
      )}
    </div>
  );
}

// ============================================================
// PAGINA: CALENDÁRIO
// ============================================================
function CalendarPage() {
  const [events, setEvents] = useState([]);
  const [loading, setLoading] = useState(true);
  const [currentDate, setCurrentDate] = useState(new Date());
  const [showModal, setShowModal] = useState(false);
  const [selectedDay, setSelectedDay] = useState(null);
  const [editing, setEditing] = useState(null);
  const [form, setForm] = useState({
    title: '', event_date: '', event_time: '09:00', type: 'meeting', notes: ''
  });

  const load = async () => {
    setLoading(true);
    try {
      const data = await apiCall('/events');
      setEvents(data);
    } catch (err) { console.error(err); }
    finally { setLoading(false); }
  };

  useEffect(() => { load(); }, []);

  const year = currentDate.getFullYear();
  const month = currentDate.getMonth();
  const firstDay = new Date(year, month, 1).getDay();
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  const monthName = currentDate.toLocaleDateString('pt-BR', { month: 'long', year: 'numeric' });

  const prevMonth = () => setCurrentDate(new Date(year, month - 1, 1));
  const nextMonth = () => setCurrentDate(new Date(year, month + 1, 1));

  const openNew = (day) => {
    const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
    setEditing(null);
    setSelectedDay(day);
    setForm({ title: '', event_date: dateStr, event_time: '09:00', type: 'meeting', notes: '' });
    setShowModal(true);
  };

  const openEdit = (ev) => {
    setEditing(ev);
    setForm({
      title: ev.title,
      event_date: ev.event_date.slice(0, 10),
      event_time: ev.event_time?.slice(0, 5) || '09:00',
      type: ev.type,
      notes: ev.notes || ''
    });
    setShowModal(true);
  };

  const handleSave = async () => {
    if (!form.title || !form.event_date) return;
    try {
      if (editing) {
        await apiCall(`/events/${editing.id}`, { method: 'PUT', body: JSON.stringify(form) });
      } else {
        await apiCall('/events', { method: 'POST', body: JSON.stringify(form) });
      }
      setShowModal(false);
      load();
    } catch (err) { alert('Erro: ' + err.message); }
  };

  const handleDelete = async () => {
    if (!editing || !confirm('Remover este evento?')) return;
    try {
      await apiCall(`/events/${editing.id}`, { method: 'DELETE' });
      setShowModal(false);
      load();
    } catch (err) { alert('Erro: ' + err.message); }
  };

  const today = new Date();
  const isToday = (d) => today.getDate() === d && today.getMonth() === month && today.getFullYear() === year;

  const eventsOnDay = (day) => events.filter((e) => {
    const d = new Date(e.event_date);
    return d.getFullYear() === year && d.getMonth() === month && d.getDate() === day;
  });

  return (
    <div className="fade-in">
      <div className="page-header">
        <div className="page-label">Agenda</div>
        <h1 className="page-title">Calendário.</h1>
        <div className="page-subtitle">Visualize reuniões, prazos e compromissos importantes.</div>
      </div>

      <div className="calendar-wrapper">
        <div className="calendar-header">
          <div className="calendar-month">{monthName}</div>
          <div className="calendar-nav">
            <button className="icon-btn" onClick={prevMonth}><Icon name="chevronLeft" size={18} /></button>
            <button className="btn btn-outline btn-sm" onClick={() => setCurrentDate(new Date())}>Hoje</button>
            <button className="icon-btn" onClick={nextMonth}><Icon name="chevronRight" size={18} /></button>
          </div>
        </div>

        <div className="calendar-grid">
          {['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'].map((d) => (
            <div key={d} className="calendar-daylabel">{d}</div>
          ))}
          {Array.from({ length: firstDay }).map((_, i) => (
            <div key={`e${i}`} className="calendar-day empty"></div>
          ))}
          {Array.from({ length: daysInMonth }).map((_, i) => {
            const day = i + 1;
            const dayEvents = eventsOnDay(day);
            return (
              <div
                key={day}
                className={`calendar-day ${isToday(day) ? 'today' : ''}`}
                onClick={() => openNew(day)}
              >
                <div className="calendar-daynum">{day}</div>
                {dayEvents.slice(0, 2).map((ev) => (
                  <div
                    key={ev.id}
                    className={`calendar-event type-${ev.type}`}
                    onClick={(e) => { e.stopPropagation(); openEdit(ev); }}
                    title={ev.title}
                  >
                    {ev.event_time?.slice(0, 5)} {ev.title}
                  </div>
                ))}
                {dayEvents.length > 2 && (
                  <div style={{ fontSize: 10, color: 'var(--text-muted)', marginTop: 2 }}>
                    +{dayEvents.length - 2} mais
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>

      {showModal && (
        <Modal
          title={editing ? 'Editar evento' : 'Novo evento'}
          onClose={() => setShowModal(false)}
          footer={
            <>
              {editing && <button className="btn btn-danger" onClick={handleDelete}>Excluir</button>}
              <div style={{ flex: 1 }}></div>
              <button className="btn btn-outline" onClick={() => setShowModal(false)}>Cancelar</button>
              <button className="btn btn-dark" onClick={handleSave}>Salvar</button>
            </>
          }
        >
          <div className="form-group">
            <label className="form-label">Título *</label>
            <input className="form-input" value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} />
          </div>
          <div className="form-row">
            <div className="form-group">
              <label className="form-label">Data *</label>
              <input type="date" className="form-input" value={form.event_date} onChange={(e) => setForm({ ...form, event_date: e.target.value })} />
            </div>
            <div className="form-group">
              <label className="form-label">Horário</label>
              <input type="time" className="form-input" value={form.event_time} onChange={(e) => setForm({ ...form, event_time: e.target.value })} />
            </div>
          </div>
          <div className="form-group">
            <label className="form-label">Tipo</label>
            <select className="form-select" value={form.type} onChange={(e) => setForm({ ...form, type: e.target.value })}>
              <option value="meeting">Reunião</option>
              <option value="deadline">Prazo</option>
              <option value="financial">Financeiro</option>
              <option value="other">Outro</option>
            </select>
          </div>
          <div className="form-group">
            <label className="form-label">Observações</label>
            <textarea className="form-textarea" value={form.notes} onChange={(e) => setForm({ ...form, notes: e.target.value })}></textarea>
          </div>
        </Modal>
      )}
    </div>
  );
}

// ============================================================
// PAGINA: CONTATOS (CRM)
// ============================================================
function ContactsPage() {
  const [contacts, setContacts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');
  const [filterStatus, setFilterStatus] = useState('all');
  const [showModal, setShowModal] = useState(false);
  const [editing, setEditing] = useState(null);
  const [form, setForm] = useState({
    name: '', company: '', email: '', phone: '', status: 'lead', tag: '', notes: ''
  });

  const load = async () => {
    setLoading(true);
    try {
      const data = await apiCall('/contacts');
      setContacts(data);
    } catch (err) { console.error(err); }
    finally { setLoading(false); }
  };

  useEffect(() => { load(); }, []);

  const openNew = () => {
    setEditing(null);
    setForm({ name: '', company: '', email: '', phone: '', status: 'lead', tag: '', notes: '' });
    setShowModal(true);
  };

  const openEdit = (c) => {
    setEditing(c);
    setForm({
      name: c.name,
      company: c.company || '',
      email: c.email || '',
      phone: c.phone || '',
      status: c.status,
      tag: c.tag || '',
      notes: c.notes || ''
    });
    setShowModal(true);
  };

  const handleSave = async () => {
    if (!form.name) return;
    try {
      if (editing) {
        await apiCall(`/contacts/${editing.id}`, { method: 'PUT', body: JSON.stringify(form) });
      } else {
        await apiCall('/contacts', { method: 'POST', body: JSON.stringify(form) });
      }
      setShowModal(false);
      load();
    } catch (err) { alert('Erro: ' + err.message); }
  };

  const handleDelete = async () => {
    if (!editing || !confirm('Remover este contato?')) return;
    try {
      await apiCall(`/contacts/${editing.id}`, { method: 'DELETE' });
      setShowModal(false);
      load();
    } catch (err) { alert('Erro: ' + err.message); }
  };

  const filtered = contacts
    .filter((c) => {
      if (filterStatus !== 'all' && c.status !== filterStatus) return false;
      if (!search) return true;
      const q = search.toLowerCase();
      return (c.name || '').toLowerCase().includes(q) ||
             (c.company || '').toLowerCase().includes(q) ||
             (c.email || '').toLowerCase().includes(q);
    })
    .sort((a, b) => (a.name || '').localeCompare(b.name || '', 'pt-BR', { sensitivity: 'base' }));

  const statusLabels = { lead: 'Lead', prospect: 'Prospect', cliente: 'Cliente' };
  const statusBadge = { lead: 'badge-neutral', prospect: 'badge-gold', cliente: 'badge-success' };

  return (
    <div className="fade-in">
      <div className="page-header">
        <div className="page-label">CRM</div>
        <h1 className="page-title">Contatos.</h1>
        <div className="page-subtitle">Gerencie leads, prospects e clientes da sua operação.</div>
      </div>

      <div className="page-actions">
        <input
          className="form-input page-search"
          placeholder="Buscar por nome, empresa ou email..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />
        <select className="form-select" style={{ width: 160 }} value={filterStatus} onChange={(e) => setFilterStatus(e.target.value)}>
          <option value="all">Todos</option>
          <option value="lead">Leads</option>
          <option value="prospect">Prospects</option>
          <option value="cliente">Clientes</option>
        </select>
        <button className="btn btn-dark" onClick={openNew}>
          <Icon name="plus" size={16} /> Novo contato
        </button>
      </div>

      {loading ? (
        <div className="empty-state"><div className="spinner" style={{ margin: '0 auto' }}></div></div>
      ) : filtered.length === 0 ? (
        <div className="card empty-state">
          <div className="empty-state-icon">✦</div>
          <div>Nenhum contato cadastrado ainda.</div>
        </div>
      ) : (
        <div className="contacts-grid">
          {filtered.map((c) => (
            <div key={c.id} className="contact-card">
              <div className="contact-header">
                <div className="contact-avatar">{(c.name || 'C')[0]}</div>
                <div className="contact-info">
                  <div className="contact-name">{c.name}</div>
                  <div className="contact-company">{c.company || '—'}</div>
                </div>
              </div>
              <div className="contact-details">
                {c.email && (
                  <div className="contact-detail-row">
                    <Icon name="mail" size={13} />
                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.email}</span>
                  </div>
                )}
                {c.phone && (
                  <div className="contact-detail-row">
                    <Icon name="phone" size={13} />
                    <span>{c.phone}</span>
                  </div>
                )}
              </div>
              <div className="contact-footer">
                <span className={`badge ${statusBadge[c.status]}`}>{statusLabels[c.status]}</span>
                <button className="icon-btn" onClick={() => openEdit(c)}>
                  <Icon name="edit" size={15} />
                </button>
              </div>
            </div>
          ))}
        </div>
      )}

      {showModal && (
        <Modal
          title={editing ? 'Editar contato' : 'Novo contato'}
          onClose={() => setShowModal(false)}
          footer={
            <>
              {editing && <button className="btn btn-danger" onClick={handleDelete}>Excluir</button>}
              <div style={{ flex: 1 }}></div>
              <button className="btn btn-outline" onClick={() => setShowModal(false)}>Cancelar</button>
              <button className="btn btn-dark" onClick={handleSave}>Salvar</button>
            </>
          }
        >
          <div className="form-group">
            <label className="form-label">Nome *</label>
            <input className="form-input" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
          </div>
          <div className="form-group">
            <label className="form-label">Empresa</label>
            <input className="form-input" value={form.company} onChange={(e) => setForm({ ...form, company: e.target.value })} />
          </div>
          <div className="form-row">
            <div className="form-group">
              <label className="form-label">Email</label>
              <input type="email" className="form-input" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} />
            </div>
            <div className="form-group">
              <label className="form-label">Telefone</label>
              <input className="form-input" value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} placeholder="(00) 00000-0000" />
            </div>
          </div>
          <div className="form-row">
            <div className="form-group">
              <label className="form-label">Status</label>
              <select className="form-select" value={form.status} onChange={(e) => setForm({ ...form, status: e.target.value })}>
                <option value="lead">Lead</option>
                <option value="prospect">Prospect</option>
                <option value="cliente">Cliente</option>
              </select>
            </div>
            <div className="form-group">
              <label className="form-label">Tag</label>
              <input className="form-input" value={form.tag} onChange={(e) => setForm({ ...form, tag: e.target.value })} placeholder="Ex: VIP" />
            </div>
          </div>
          <div className="form-group">
            <label className="form-label">Observações</label>
            <textarea className="form-textarea" value={form.notes} onChange={(e) => setForm({ ...form, notes: e.target.value })}></textarea>
          </div>
        </Modal>
      )}
    </div>
  );
}

// ============================================================
// PAGINA: EQUIPE
// ============================================================
function TeamPage() {
  const { user } = useAuth();
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [showModal, setShowModal] = useState(false);
  const [form, setForm] = useState({ name: '', email: '', password: '', role: 'member' });

  const isAdmin = user?.role === 'admin';

  const load = async () => {
    setLoading(true);
    try {
      const data = await apiCall('/auth/users');
      setUsers(data);
    } catch (err) { console.error(err); }
    finally { setLoading(false); }
  };

  useEffect(() => { if (isAdmin) load(); else setLoading(false); }, []);

  const handleSave = async () => {
    if (!form.name || !form.email || !form.password) return;
    if (form.password.length < 8) {
      alert('A senha deve ter ao menos 8 caracteres.');
      return;
    }
    try {
      await apiCall('/auth/register', { method: 'POST', body: JSON.stringify(form) });
      setShowModal(false);
      setForm({ name: '', email: '', password: '', role: 'member' });
      load();
    } catch (err) { alert('Erro: ' + err.message); }
  };

  const handleDelete = async (id) => {
    if (id === user.id) {
      alert('Você não pode excluir o próprio usuário.');
      return;
    }
    if (!confirm('Remover este usuário?')) return;
    try {
      await apiCall(`/auth/users/${id}`, { method: 'DELETE' });
      load();
    } catch (err) { alert('Erro: ' + err.message); }
  };

  if (!isAdmin) {
    return (
      <div className="fade-in">
        <div className="page-header">
          <div className="page-label">Restrito</div>
          <h1 className="page-title">Equipe.</h1>
          <div className="page-subtitle">Apenas administradores podem gerenciar a equipe.</div>
        </div>
        <div className="card empty-state">
          <div className="empty-state-icon">🔒</div>
          <div>Você não tem permissão para acessar esta página.</div>
        </div>
      </div>
    );
  }

  return (
    <div className="fade-in">
      <div className="page-header">
        <div className="page-label">Administração</div>
        <h1 className="page-title">Equipe.</h1>
        <div className="page-subtitle">Gerencie os usuários com acesso à plataforma.</div>
      </div>

      <div className="page-actions">
        <div style={{ flex: 1 }}></div>
        <button className="btn btn-dark" onClick={() => setShowModal(true)}>
          <Icon name="plus" size={16} /> Novo usuário
        </button>
      </div>

      {loading ? (
        <div className="empty-state"><div className="spinner" style={{ margin: '0 auto' }}></div></div>
      ) : (
        <div className="item-list">
          {users.map((u) => (
            <div key={u.id} className="list-item">
              <div className="list-item-main" style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <div className="contact-avatar" style={{ width: 40, height: 40 }}>{(u.name || 'U')[0]}</div>
                <div>
                  <div className="list-item-title">{u.name} {u.id === user.id && <span className="badge badge-gold">Você</span>}</div>
                  <div className="list-item-meta">
                    <span>{u.email}</span>
                    <span className={`badge ${u.role === 'admin' ? 'badge-green' : 'badge-neutral'}`}>
                      {u.role === 'admin' ? 'Administrador' : 'Membro'}
                    </span>
                  </div>
                </div>
              </div>
              {u.id !== user.id && (
                <div className="list-item-actions">
                  <button className="icon-btn danger" onClick={() => handleDelete(u.id)}>
                    <Icon name="trash" size={16} />
                  </button>
                </div>
              )}
            </div>
          ))}
        </div>
      )}

      {showModal && (
        <Modal
          title="Novo usuário"
          onClose={() => setShowModal(false)}
          footer={
            <>
              <button className="btn btn-outline" onClick={() => setShowModal(false)}>Cancelar</button>
              <button className="btn btn-dark" onClick={handleSave}>Criar</button>
            </>
          }
        >
          <div className="form-group">
            <label className="form-label">Nome *</label>
            <input className="form-input" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
          </div>
          <div className="form-group">
            <label className="form-label">Email *</label>
            <input type="email" className="form-input" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} />
          </div>
          <div className="form-group">
            <label className="form-label">Senha * (mínimo 8 caracteres)</label>
            <input type="password" className="form-input" value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} />
          </div>
          <div className="form-group">
            <label className="form-label">Papel</label>
            <select className="form-select" value={form.role} onChange={(e) => setForm({ ...form, role: e.target.value })}>
              <option value="member">Membro</option>
              <option value="admin">Administrador</option>
            </select>
          </div>
        </Modal>
      )}
    </div>
  );
}

// ============================================================
// PWA INSTALL BANNER
// ============================================================
function InstallPWABanner() {
  const [prompt, setPrompt] = useState(null);
  const [show, setShow] = useState(false);
  const [isIOS, setIsIOS] = useState(false);

  useEffect(() => {
    // Detecta iOS
    const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
    const isStandalone = window.matchMedia('(display-mode: standalone)').matches ||
                         window.navigator.standalone === true;
    const dismissed = localStorage.getItem('triade_pwa_dismissed');

    if (isStandalone || dismissed) return;

    if (iOS) {
      setIsIOS(true);
      // Mostra banner iOS após 3 segundos
      const t = setTimeout(() => setShow(true), 3000);
      return () => clearTimeout(t);
    }

    // Android / Chrome: captura o evento nativo
    const handler = (e) => {
      e.preventDefault();
      setPrompt(e);
      setShow(true);
    };
    window.addEventListener('beforeinstallprompt', handler);
    return () => window.removeEventListener('beforeinstallprompt', handler);
  }, []);

  const install = async () => {
    if (!prompt) return;
    prompt.prompt();
    await prompt.userChoice;
    setPrompt(null);
    setShow(false);
  };

  const dismiss = () => {
    localStorage.setItem('triade_pwa_dismissed', '1');
    setShow(false);
  };

  if (!show) return null;

  return (
    <div className="pwa-banner">
      <div className="pwa-banner-icon">
        <img src="/icons/icon-192.png" alt="" />
      </div>
      <div className="pwa-banner-text">
        <div className="pwa-banner-title">Instalar Tríade</div>
        <div className="pwa-banner-desc">
          {isIOS
            ? 'Toque em Compartilhar e "Adicionar à Tela de Início".'
            : 'Adicione ao seu celular para acesso rápido.'}
        </div>
      </div>
      <div className="pwa-banner-actions">
        {!isIOS && <button className="btn btn-sm btn-primary" onClick={install}>Instalar</button>}
        <button className="icon-btn" onClick={dismiss}><Icon name="close" size={14} /></button>
      </div>
    </div>
  );
}

// ============================================================
// MOBILE TOPBAR (visível apenas em telas pequenas)
// ============================================================
function MobileTopbar() {
  const { user, logout } = useAuth();
  const initial = (user?.name || 'U')[0];
  return (
    <div className="mobile-topbar">
      <div className="mobile-topbar-logo">
        <img src="/logo-triade.png" alt="Tríade" />
      </div>
      <div className="mobile-topbar-user">
        <div className="user-avatar">{initial}</div>
        <button className="mobile-topbar-logout" onClick={logout} aria-label="Sair">
          <Icon name="logout" size={18} />
        </button>
      </div>
    </div>
  );
}

// ============================================================
// APP PRINCIPAL
// ============================================================
function App() {
  const { user } = useAuth();
  const [currentPage, setCurrentPage] = useState('dashboard');

  if (!user) return <LoginPage />;

  const pages = {
    dashboard: <DashboardPage onNavigate={setCurrentPage} />,
    files: <FilesPage />,
    links: <LinksPage />,
    tasks: <TasksPage />,
    calendar: <CalendarPage />,
    contacts: <ContactsPage />,
    team: <TeamPage />,
  };

  return (
    <div className="app-layout">
      <Sidebar currentPage={currentPage} onNavigate={setCurrentPage} />
      <main className="main-content">
        <MobileTopbar />
        {pages[currentPage] || pages.dashboard}
      </main>
      <InstallPWABanner />
    </div>
  );
}

// ============================================================
// RENDER
// ============================================================
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <AuthProvider>
    <App />
  </AuthProvider>
);