import React, { useState, useEffect, useCallback, useRef } from 'react';
import { 
  Users, 
  Settings, 
  LayoutDashboard, 
  LogOut, 
  Mail, 
  MessageSquare, 
  Search, 
  Plus, 
  Calendar, 
  FileUp, 
  ShieldCheck, 
  AlertCircle,
  Clock,
  ArrowRightLeft,
  CheckCircle2,
  XCircle,
  Database,
  History,
  Phone,
  Filter,
  MoreVertical,
  Save,
  Trash2,
  Bell,
  Code,
  UserPlus
} from 'lucide-react';

// --- CONFIGURAÇÕES ---
const APP_NAME = "Via Line Vendas";
const LOGO_URL = "https://vialine.net.br/wp-content/uploads/2025/01/via-line-logo-branca-e1736367873609-123x50.png.webp";

// --- COMPONENTES DE UI ---

const Card = ({ children, className = "" }) => (
  <div className={`bg-white rounded-xl shadow-sm border border-gray-100 p-6 ${className}`}>
    {children}
  </div>
);

const Button = ({ children, onClick, variant = 'primary', className = "", type = "button", disabled = false }) => {
  const variants = {
    primary: `bg-red-600 text-white hover:bg-red-700`,
    secondary: `bg-white text-gray-700 border border-gray-300 hover:bg-gray-50`,
    danger: `bg-red-100 text-red-600 hover:bg-red-200`,
    success: `bg-green-600 text-white hover:bg-green-700`,
    ghost: `bg-transparent text-gray-500 hover:bg-gray-100`
  };
  return (
    <button 
      type={type}
      disabled={disabled}
      onClick={onClick}
      className={`px-4 py-2 rounded-lg font-medium transition-all duration-200 flex items-center justify-center gap-2 disabled:opacity-50 ${variants[variant]} ${className}`}
    >
      {children}
    </button>
  );
};

const Input = ({ label, ...props }) => (
  <div className="flex flex-col gap-1 w-full text-left">
    {label && <label className="text-xs font-bold text-gray-500 uppercase tracking-wider">{label}</label>}
    <input 
      {...props} 
      className="px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none transition-all text-gray-700 bg-gray-50 focus:bg-white"
    />
  </div>
);

const Badge = ({ children, variant = "neutral" }) => {
  const styles = {
    neutral: "bg-gray-100 text-gray-600",
    success: "bg-green-100 text-green-700",
    warning: "bg-orange-100 text-orange-700",
    danger: "bg-red-100 text-red-700",
    info: "bg-blue-100 text-blue-700"
  };
  return <span className={`text-[10px] font-bold uppercase px-2 py-0.5 rounded-full ${styles[variant]}`}>{children}</span>;
};

// --- APP PRINCIPAL ---

export default function App() {
  const [user, setUser] = useState(null);
  const [currentPage, setCurrentPage] = useState('login');
  const [isSidebarOpen, setSidebarOpen] = useState(true);
  const [logs, setLogs] = useState([]);
  const [leads, setLeads] = useState([]);
  const [selectedLead, setSelectedLead] = useState(null);
  const [searchQuery, setSearchQuery] = useState('');
  const [notifications, setNotifications] = useState([]);
  const [mustChangePassword, setMustChangePassword] = useState(false);
  const fileInputRef = useRef(null);

  // Estados Gerenciáveis (Usuários e Templates)
  const [systemUsers, setSystemUsers] = useState([
    { id: 1, name: 'Administrador Master', login: 'admin', role: 'master', created: '01/01/2024' }
  ]);
  
  const [messageTemplate, setMessageTemplate] = useState(
    "Olá {{nome}}, somos da Via Line! Notamos que seu Ponto de Atendimento {{ponto_de_acesso}} está qualificado para uma migração gratuita. Vamos agendar?"
  );

  // Estados de Configuração de Banco
  const [config, setConfig] = useState({
    dbHost: 'localhost',
    dbName: 'vialine_vendas',
    dbUser: '',
    dbPass: '',
  });

  // --- LOGICA DE NOTIFICAÇÕES ---
  useEffect(() => {
    const interval = setInterval(() => {
      const now = new Date();
      const due = leads.filter(l => l.retorno && new Intl.DateTimeFormat('pt-BR', { dateStyle: 'short', timeStyle: 'short' }).format(new Date(l.retorno)) === new Intl.DateTimeFormat('pt-BR', { dateStyle: 'short', timeStyle: 'short' }).format(now));
      if (due.length > 0) setNotifications(prev => [...due, ...prev]);
    }, 60000);
    return () => clearInterval(interval);
  }, [leads]);

  // --- LÓGICA DE LOGIN ---
  const handleLogin = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const login = formData.get('login');
    const pass = formData.get('password');

    const foundUser = systemUsers.find(u => u.login === login);
    if ((login === 'admin' && pass === 'admin') || (foundUser && pass === '123456')) {
      setUser(foundUser || { id: 1, name: 'Administrador Master', role: 'master' });
      if (login === 'admin') setMustChangePassword(true);
      setCurrentPage('dashboard');
      addLog(`Login realizado por ${login}`);
    } else {
      alert('Credenciais inválidas! (Dica: Novos usuários usam 123456 como padrão)');
    }
  };

  const addLog = (action) => {
    const newLog = {
      id: Date.now(),
      user: user?.name || 'Sistema',
      action,
      time: new Date().toLocaleString()
    };
    setLogs([newLog, ...logs]);
  };

  // --- LÓGICA DE IMPORTAÇÃO CSV ---
  const handleFileUpload = (e) => {
    const file = e.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (event) => {
      const text = event.target.result;
      const rows = text.split('\n').filter(row => row.trim() !== '');
      const headers = rows[0].split(',').map(h => h.trim().replace(/"/g, ''));
      
      const newLeads = rows.slice(1).map((row, idx) => {
        const values = row.split(',').map(v => v.trim().replace(/"/g, ''));
        const lead = {};
        headers.forEach((h, i) => {
          let key = h;
          if (h === 'SSID') key = 'ponto_de_acesso';
          if (h === 'Called ID') key = 'vlan';
          if (h === 'Nome Razão Social') key = 'nome';
          if (h === 'Fone 01') key = 'telefone';
          if (h === 'E-mail') key = 'email';
          lead[key] = values[i];
        });
        
        return {
          ...lead,
          id: Date.now() + idx,
          status: 'Pendente',
          tentativas: 0,
          historico: [],
          criado_em: new Date().toISOString()
        };
      });

      setLeads(prev => [...newLeads, ...prev]);
      addLog(`Importação: ${newLeads.length} novos clientes.`);
      alert(`${newLeads.length} clientes importados!`);
    };
    reader.readAsText(file);
  };

  // --- GESTÃO DE LEAD ---
  const updateLeadStatus = (leadId, newStatus, observation = "", scheduleReturn = null) => {
    setLeads(prev => prev.map(l => {
      if (l.id === leadId) {
        const historyItem = {
          data: new Date().toLocaleString(),
          status: newStatus,
          obs: observation,
          usuario: user.name
        };
        return { 
          ...l, 
          status: newStatus, 
          tentativas: l.tentativas + 1,
          retorno: scheduleReturn || l.retorno,
          historico: [historyItem, ...l.historico] 
        };
      }
      return l;
    }));
    addLog(`Lead #${leadId} -> ${newStatus}`);
    setSelectedLead(null);
  };

  // --- COMPONENTES DE PÁGINA ---

  const UsersPage = () => {
    const [newUser, setNewUser] = useState({ name: '', login: '', role: 'vendedor' });

    const handleAddUser = () => {
      if (!newUser.name || !newUser.login) return alert('Preencha nome e login');
      const userObj = { 
        ...newUser, 
        id: Date.now(), 
        created: new Date().toLocaleDateString('pt-BR') 
      };
      setSystemUsers([...systemUsers, userObj]);
      setNewUser({ name: '', login: '', role: 'vendedor' });
      addLog(`Usuário ${userObj.login} adicionado.`);
    };

    const removeUser = (id) => {
      if (id === 1) return alert('O usuário Master principal não pode ser removido.');
      setSystemUsers(systemUsers.filter(u => u.id !== id));
      addLog(`Usuário ID ${id} removido.`);
    };

    return (
      <div className="space-y-6">
        <Card>
          <h3 className="text-lg font-bold mb-4 flex items-center gap-2">
            <UserPlus className="text-red-600" /> Cadastrar Novo Usuário
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
            <Input label="Nome Completo" value={newUser.name} onChange={e => setNewUser({...newUser, name: e.target.value})} placeholder="Ex: João Silva" />
            <Input label="Login de Acesso" value={newUser.login} onChange={e => setNewUser({...newUser, login: e.target.value})} placeholder="joao.vialine" />
            <div className="flex flex-col gap-1 w-full">
              <label className="text-xs font-bold text-gray-500 uppercase">Nível de Acesso</label>
              <select 
                className="px-4 py-2.5 border border-gray-200 rounded-lg bg-gray-50 outline-none focus:ring-2 focus:ring-red-500"
                value={newUser.role}
                onChange={e => setNewUser({...newUser, role: e.target.value})}
              >
                <option value="vendedor">Vendedor / Reversão</option>
                <option value="master">Master / Admin</option>
              </select>
            </div>
            <Button onClick={handleAddUser}>Adicionar Usuário</Button>
          </div>
        </Card>

        <Card>
          <h3 className="text-lg font-bold mb-4">Lista de Usuários Ativos</h3>
          <div className="overflow-x-auto">
            <table className="w-full text-left">
              <thead className="border-b text-xs text-gray-400 uppercase font-black">
                <tr>
                  <th className="pb-3 px-2">Nome</th>
                  <th className="pb-3 px-2">Login</th>
                  <th className="pb-3 px-2">Nível</th>
                  <th className="pb-3 px-2">Data Cadastro</th>
                  <th className="pb-3 px-2 text-right">Ações</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-50">
                {systemUsers.map(u => (
                  <tr key={u.id} className="text-sm">
                    <td className="py-4 px-2 font-bold text-gray-700">{u.name}</td>
                    <td className="py-4 px-2 text-gray-500">{u.login}</td>
                    <td className="py-4 px-2">
                      <Badge variant={u.role === 'master' ? 'danger' : 'neutral'}>{u.role}</Badge>
                    </td>
                    <td className="py-4 px-2 text-gray-400">{u.created}</td>
                    <td className="py-4 px-2 text-right">
                      <button 
                        onClick={() => removeUser(u.id)}
                        disabled={u.id === 1}
                        className="text-gray-300 hover:text-red-600 disabled:opacity-20 transition-colors"
                      >
                        <Trash2 size={18} />
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Card>
      </div>
    );
  };

  const ConfigPage = () => {
    return (
      <div className="max-w-4xl mx-auto space-y-6 pb-20">
        <Card>
          <h3 className="text-lg font-bold mb-4 flex items-center gap-2">
            <MessageSquare className="text-red-600" /> Template de Mensagem de Venda
          </h3>
          <p className="text-xs text-gray-400 mb-4 font-medium uppercase tracking-wider">
            Este texto será o padrão para cópia e envio via WhatsApp Web.
          </p>
          
          <div className="space-y-4">
            <div className="flex flex-col gap-1">
              <label className="text-xs font-bold text-gray-500 uppercase">Corpo da Mensagem</label>
              <textarea 
                className="w-full h-32 p-4 border border-gray-200 rounded-xl bg-gray-50 focus:bg-white focus:ring-2 focus:ring-red-500 outline-none text-gray-700 transition-all"
                value={messageTemplate}
                onChange={e => setMessageTemplate(e.target.value)}
                placeholder="Escreva sua mensagem aqui..."
              />
            </div>

            <div className="bg-blue-50 border border-blue-100 p-4 rounded-xl">
              <h4 className="text-xs font-black text-blue-800 uppercase mb-3 flex items-center gap-2">
                <Code size={14} /> Variáveis Disponíveis
              </h4>
              <p className="text-[11px] text-blue-700 mb-4">Utilize as chaves duplas para que o sistema preencha automaticamente os dados do cliente selecionado.</p>
              <div className="flex flex-wrap gap-2">
                {['{{nome}}', '{{telefone}}', '{{ponto_de_acesso}}', '{{vlan}}', '{{bairro}}', '{{plano}}'].map(v => (
                  <button 
                    key={v}
                    onClick={() => setMessageTemplate(messageTemplate + " " + v)}
                    className="bg-white px-2 py-1 rounded border border-blue-200 text-[10px] font-mono font-bold text-blue-600 hover:bg-blue-100"
                  >
                    {v}
                  </button>
                ))}
              </div>
            </div>
            
            <div className="flex justify-end">
              <Button variant="success" onClick={() => {
                alert('Template Salvo com Sucesso!');
                addLog('Template de mensagem atualizado.');
              }}>
                <Save size={18} /> Salvar Template
              </Button>
            </div>
          </div>
        </Card>

        <Card>
          <h3 className="text-lg font-bold mb-4 flex items-center gap-2">
            <Database className="text-red-600" /> Banco de Dados (Preservado)
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Input label="Local Host" value={config.dbHost} readOnly />
            <Input label="Nome do Banco" value={config.dbName} readOnly />
            <Input label="Usuário MySQL" value={config.dbUser} placeholder="vialine_user" />
            <Input label="Senha do Banco" type="password" />
          </div>
          <div className="mt-4">
            <Button variant="secondary" onClick={() => alert('Conexão ativa!')}>Testar Conexão</Button>
          </div>
        </Card>
      </div>
    );
  };

  const SalesFunnel = () => {
    const columns = ['Pendente', 'Em Contato', 'Agendado', 'Migrado', 'Não Deseja'];
    const filteredLeads = leads.filter(l => 
      l.nome?.toLowerCase().includes(searchQuery.toLowerCase()) || 
      l.CPF?.includes(searchQuery)
    );

    return (
      <div className="flex flex-col h-full space-y-4">
        <div className="flex justify-between items-center bg-white p-4 rounded-xl shadow-sm border border-gray-100">
          <div className="flex gap-4 items-center flex-1">
            <h2 className="text-xl font-bold text-gray-800 shrink-0 italic italic uppercase tracking-tighter">Funil de Reversão</h2>
            <div className="relative max-w-md w-full">
              <Search className="absolute left-3 top-2.5 text-gray-400 w-4 h-4" />
              <input 
                type="text" 
                placeholder="Buscar cliente..." 
                className="pl-10 pr-4 py-2 w-full border border-gray-200 rounded-lg text-sm bg-gray-50 focus:bg-white outline-none"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
          </div>
          <div className="flex gap-2">
            <input type="file" ref={fileInputRef} className="hidden" accept=".csv" onChange={handleFileUpload} />
            <Button onClick={() => fileInputRef.current.click()} variant="secondary">
              <FileUp size={18} /> Importar CSV
            </Button>
          </div>
        </div>

        <div className="flex-1 flex gap-4 overflow-x-auto pb-4 custom-scrollbar">
          {columns.map(status => (
            <div key={status} className="flex flex-col min-w-[280px] w-1/5 bg-gray-100/50 rounded-xl border border-gray-200/50">
              <div className="p-3 border-b border-gray-200 flex justify-between items-center bg-white rounded-t-xl">
                <h4 className="font-bold text-gray-700 flex items-center gap-2 text-sm uppercase italic">
                  <div className={`w-2 h-2 rounded-full ${status === 'Migrado' ? 'bg-green-500' : status === 'Agendado' ? 'bg-orange-500' : 'bg-red-500'}`} />
                  {status}
                </h4>
                <Badge>{filteredLeads.filter(l => l.status === status).length}</Badge>
              </div>
              <div className="p-2 space-y-3 flex-1 overflow-y-auto">
                {filteredLeads.filter(l => l.status === status).map(lead => (
                  <div 
                    key={lead.id} 
                    onClick={() => setSelectedLead(lead)}
                    className="bg-white p-3 rounded-lg shadow-sm border border-gray-200 hover:border-red-400 cursor-pointer transition-all group"
                  >
                    <div className="flex justify-between items-start mb-2">
                      <h5 className="font-bold text-sm text-gray-800 line-clamp-1 uppercase">{lead.nome}</h5>
                    </div>
                    <p className="text-[10px] text-gray-500 flex items-center gap-1 mb-2">
                      <Phone size={10} /> {lead.telefone}
                    </p>
                    <div className="mt-2 pt-2 border-t border-gray-50 flex justify-between items-center">
                      <span className="text-[9px] text-gray-400">Tentativas: {lead.tentativas}</span>
                      <Badge variant="info" className="text-[8px]">{lead.vlan}</Badge>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  };

  const LeadModal = () => {
    if (!selectedLead) return null;
    const [obs, setObs] = useState('');
    const [retornoDate, setRetornoDate] = useState('');

    const copyGeneratedMessage = () => {
      let msg = messageTemplate
        .replace('{{nome}}', selectedLead.nome || '')
        .replace('{{ponto_de_acesso}}', selectedLead.ponto_de_acesso || '')
        .replace('{{vlan}}', selectedLead.vlan || '')
        .replace('{{telefone}}', selectedLead.telefone || '')
        .replace('{{bairro}}', selectedLead.Bairro || '')
        .replace('{{plano}}', selectedLead.Plano || '');
      
      const el = document.createElement('textarea');
      el.value = msg;
      document.body.appendChild(el);
      el.select();
      document.execCommand('copy');
      document.body.removeChild(el);
      alert('Mensagem personalizada copiada para a área de transferência!');
    };

    return (
      <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
        <Card className="w-full max-w-2xl max-h-[90vh] overflow-y-auto">
          <div className="flex justify-between items-start mb-6 border-b pb-4">
            <div>
              <h2 className="text-xl font-bold text-gray-800 uppercase italic tracking-tighter">{selectedLead.nome}</h2>
              <p className="text-xs text-gray-400 font-bold uppercase tracking-widest mt-1">Status: {selectedLead.status}</p>
            </div>
            <button onClick={() => setSelectedLead(null)} className="text-gray-400 hover:text-gray-600"><XCircle /></button>
          </div>

          <div className="grid grid-cols-2 gap-6 mb-6 text-sm bg-gray-50 p-4 rounded-xl">
             <div className="space-y-2">
                <p><strong className="text-xs text-gray-400 uppercase mr-2">Ponto de Acesso:</strong> <br/>{selectedLead.ponto_de_acesso}</p>
                <p><strong className="text-xs text-gray-400 uppercase mr-2">VLAN:</strong> <br/>{selectedLead.vlan}</p>
             </div>
             <div className="space-y-2 text-right">
                <p><strong className="text-xs text-gray-400 uppercase mr-2">Contato:</strong> <br/>{selectedLead.telefone}</p>
                <p><strong className="text-xs text-gray-400 uppercase mr-2">Bairro:</strong> <br/>{selectedLead.Bairro}</p>
             </div>
          </div>

          <div className="space-y-4 mb-6">
            <Button variant="secondary" className="w-full border-blue-200 text-blue-600 hover:bg-blue-50" onClick={copyGeneratedMessage}>
              <MessageSquare size={18} /> Copiar Mensagem de Venda Personalizada
            </Button>
            
            <div className="grid grid-cols-2 gap-4">
              <Input label="Agendar Retorno" type="datetime-local" value={retornoDate} onChange={e => setRetornoDate(e.target.value)} />
              <Input label="Nota de Contato" placeholder="Resultado da conversa..." value={obs} onChange={e => setObs(e.target.value)} />
            </div>

            <div className="flex gap-2">
              <Button className="flex-1" variant="success" onClick={() => updateLeadStatus(selectedLead.id, 'Migrado', obs)}>Migrar</Button>
              <Button className="flex-1" variant="secondary" onClick={() => updateLeadStatus(selectedLead.id, 'Agendado', obs, retornoDate)}>Agendar</Button>
              <Button className="flex-1" variant="danger" onClick={() => updateLeadStatus(selectedLead.id, 'Não Deseja', obs)}>Não Deseja</Button>
            </div>
          </div>

          <div>
            <h4 className="text-xs font-black text-gray-400 uppercase mb-3 tracking-widest border-b pb-2">Linha do Tempo</h4>
            <div className="space-y-2">
              {selectedLead.historico.map((h, i) => (
                <div key={i} className="text-[11px] p-2 bg-white border border-gray-100 rounded-lg shadow-sm flex justify-between">
                  <div className="font-bold text-red-600 uppercase">{h.status}</div>
                  <div className="text-gray-500 italic">"{h.obs}"</div>
                  <div className="text-gray-300">{h.data}</div>
                </div>
              ))}
            </div>
          </div>
        </Card>
      </div>
    );
  };

  const Dashboard = () => (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card className="border-l-4 border-l-red-600">
          <p className="text-xs text-gray-400 font-bold uppercase tracking-wider mb-1">Base Importada</p>
          <h3 className="text-3xl font-black text-gray-800">{leads.length}</h3>
        </Card>
        <Card className="border-l-4 border-l-orange-500">
          <p className="text-xs text-gray-400 font-bold uppercase tracking-wider mb-1">Agendamentos</p>
          <h3 className="text-3xl font-black text-gray-800">{leads.filter(l => l.status === 'Agendado').length}</h3>
        </Card>
        <Card className="border-l-4 border-l-green-600">
          <p className="text-xs text-gray-400 font-bold uppercase tracking-wider mb-1">Vendas Concluídas</p>
          <h3 className="text-3xl font-black text-gray-800">{leads.filter(l => l.status === 'Migrado').length}</h3>
        </Card>
        <Card className="border-l-4 border-l-blue-600">
          <p className="text-xs text-gray-400 font-bold uppercase tracking-wider mb-1">Conversão</p>
          <h3 className="text-3xl font-black text-gray-800">
            {leads.length > 0 ? ((leads.filter(l => l.status === 'Migrado').length / leads.length) * 100).toFixed(1) : 0}%
          </h3>
        </Card>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <Card className="lg:col-span-2">
          <h3 className="font-black text-lg flex items-center gap-2 mb-6 italic uppercase">
            <Bell className="text-red-600" /> Próximos Contatos (Alertas)
          </h3>
          <div className="space-y-3">
            {notifications.length === 0 ? <p className="text-sm text-gray-400 italic">Sem alertas para agora.</p> : notifications.map((n, i) => (
               <div key={i} className="p-4 bg-red-50 border border-red-100 rounded-xl flex justify-between items-center">
                  <div>
                    <p className="font-bold text-red-900">{n.nome}</p>
                    <p className="text-xs text-red-700">{n.telefone}</p>
                  </div>
                  <Button onClick={() => setSelectedLead(n)}>Atender</Button>
               </div>
            ))}
          </div>
        </Card>
        <Card>
           <h3 className="font-black text-lg mb-6 italic uppercase">Eventos Recentes</h3>
           <div className="space-y-2 max-h-[400px] overflow-y-auto">
              {logs.slice(0, 10).map(log => (
                <div key={log.id} className="text-[10px] p-2 bg-gray-50 rounded border-l-2 border-red-500">
                  <p className="font-bold text-gray-800">{log.action}</p>
                  <p className="text-gray-400">{log.time} - {log.user}</p>
                </div>
              ))}
           </div>
        </Card>
      </div>
    </div>
  );

  // --- RENDERIZADOR ---

  if (currentPage === 'login') {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-100 p-4">
        <Card className="w-full max-w-md border-t-4 border-t-red-600">
          <div className="flex justify-center mb-8">
            <img src={LOGO_URL} alt="Via Line" className="h-14" />
          </div>
          <h2 className="text-2xl font-black text-center text-gray-800 mb-2 uppercase tracking-tighter italic">Via Line Vendas</h2>
          <form onSubmit={handleLogin} className="space-y-4">
            <Input label="Login" name="login" placeholder="admin" required />
            <Input label="Senha" name="password" type="password" placeholder="••••" required />
            <Button type="submit" className="w-full py-4 text-lg">Acessar Painel</Button>
          </form>
        </Card>
      </div>
    );
  }

  return (
    <div className="flex h-screen bg-gray-50 text-gray-800">
      <LeadModal />
      <aside className={`bg-white border-r border-gray-200 transition-all ${isSidebarOpen ? 'w-64' : 'w-20'} flex flex-col z-40`}>
        {/* LOGO NA SIDEBAR (SUBSTITUINDO ESCUDO) */}
        <div className="p-4 border-b border-gray-100 flex items-center justify-center h-20">
          <img 
            src={LOGO_URL} 
            alt="Via Line" 
            className={`${isSidebarOpen ? 'h-10' : 'h-6'} transition-all`} 
          />
        </div>
        
        <nav className="flex-1 p-4 space-y-2">
          {[
            { id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
            { id: 'funil', label: 'Funil / CRM', icon: ArrowRightLeft },
            { id: 'usuarios', label: 'Equipe Master', icon: Users },
            { id: 'configuracoes', label: 'Configurações', icon: Settings },
          ].map(item => (
            <button
              key={item.id}
              onClick={() => setCurrentPage(item.id)}
              className={`w-full flex items-center gap-3 p-3.5 rounded-xl transition-all ${currentPage === item.id ? 'bg-red-600 text-white' : 'text-gray-400 hover:bg-red-50 hover:text-red-600'}`}
            >
              <item.icon size={20} />
              {isSidebarOpen && <span className="text-xs uppercase font-bold">{item.label}</span>}
            </button>
          ))}
        </nav>
        <button onClick={() => setUser(null) || setCurrentPage('login')} className="p-6 flex items-center gap-3 text-gray-400 hover:text-red-600">
          <LogOut size={20} />
          {isSidebarOpen && <span className="text-xs font-bold uppercase">Sair</span>}
        </button>
      </aside>

      <main className="flex-1 flex flex-col h-screen overflow-hidden">
        <header className="bg-white border-b h-20 flex items-center justify-between px-8">
          <button onClick={() => setSidebarOpen(!isSidebarOpen)} className="p-2 text-gray-400 hover:bg-gray-100 rounded-lg"><Filter size={20} /></button>
          <div className="flex items-center gap-4 bg-gray-50 px-4 py-2 rounded-2xl border">
            <div className="text-right">
              <p className="text-sm font-black text-gray-800">{user?.name}</p>
              <p className="text-[9px] text-red-600 uppercase font-black">{user?.role}</p>
            </div>
            <div className="w-10 h-10 bg-red-600 text-white rounded-xl flex items-center justify-center font-black">{user?.name?.[0]}</div>
          </div>
        </header>

        <div className="flex-1 overflow-y-auto p-8">
          {currentPage === 'dashboard' && <Dashboard />}
          {currentPage === 'funil' && <SalesFunnel />}
          {currentPage === 'usuarios' && <UsersPage />}
          {currentPage === 'configuracoes' && <ConfigPage />}
        </div>
      </main>
      
      <style>{`
        .custom-scrollbar::-webkit-scrollbar { height: 8px; width: 4px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #E5E7EB; border-radius: 20px; }
      `}</style>
    </div>
  );
}