import React, { useState, useEffect } from 'react';
import { 
  Users, FileText, Wrench, LogOut, Plus, Trash2, 
  Lock, Unlock, Shield, Eye, FileUp, Globe, Link as LinkIcon, AlertCircle
} from 'lucide-react';

// --- INITIAL MOCK DATA ---
const INITIAL_USERS = [
  { id: 1, username: 'admin', password: 'admin', role: 'admin', active: true }
];

const App = () => {
  // --- STATE ---
  const [user, setUser] = useState(null);
  const [users, setUsers] = useState(INITIAL_USERS);
  const [notes, setNotes] = useState([]);
  const [tools, setTools] = useState([]);
  const [activeTab, setActiveTab] = useState('notes');
  const [toast, setToast] = useState(null);

  // --- SESSION MANAGEMENT ---
  useEffect(() => {
    // Check session expiration (1 hour)
    const checkSession = setInterval(() => {
      if (user && user.loginTime) {
        const now = new Date().getTime();
        const diff = now - user.loginTime;
        if (diff > 3600000) { // 1 hour in ms
          handleLogout();
          showToast('Sessão expirada. Faça login novamente.');
        }
      }
    }, 60000); // Check every minute
    return () => clearInterval(checkSession);
  }, [user]);

  const showToast = (message) => {
    setToast(message);
    setTimeout(() => setToast(null), 3000);
  };

  const handleLogin = (username, password) => {
    const foundUser = users.find(u => u.username === username && u.password === password);
    if (foundUser) {
      if (!foundUser.active) {
        showToast('Sua conta está bloqueada.');
        return;
      }
      setUser({ ...foundUser, loginTime: new Date().getTime() });
      setActiveTab(foundUser.role === 'admin' ? 'users' : 'notes');
      showToast(`Bem-vindo, ${username}!`);
    } else {
      showToast('Usuário ou senha inválidos.');
    }
  };

  const handleLogout = () => {
    setUser(null);
    setActiveTab('notes');
  };

  if (!user) {
    return <LoginScreen onLogin={handleLogin} toast={toast} />;
  }

  return (
    <div className="flex h-screen bg-slate-50 text-slate-800 font-sans overflow-hidden selection:bg-indigo-100">
      <Sidebar 
        role={user.role} 
        activeTab={activeTab} 
        setActiveTab={setActiveTab} 
        onLogout={handleLogout} 
      />
      <main className="flex-1 flex flex-col h-full overflow-hidden relative">
        <Header user={user} users={users} setUsers={setUsers} showToast={showToast} />
        <div className="flex-1 overflow-y-auto p-8 custom-scrollbar relative">
          
          {/* Toast Notification */}
          {toast && (
            <div className="absolute top-4 right-8 bg-indigo-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center gap-2 animate-in fade-in slide-in-from-top-4 z-50">
              <AlertCircle size={18} />
              {toast}
            </div>
          )}

          {/* Page Content with simple fade transition */}
          <div className="animate-in fade-in duration-500">
            {activeTab === 'users' && user.role === 'admin' && (
              <UsersPanel users={users} setUsers={setUsers} showToast={showToast} currentUser={user} />
            )}
            {activeTab === 'notes' && (
              <NotesPanel notes={notes} setNotes={setNotes} user={user} showToast={showToast} />
            )}
            {activeTab === 'tools' && (
              <ToolsPanel tools={tools} setTools={setTools} user={user} showToast={showToast} />
            )}
          </div>
        </div>
      </main>

      <style dangerouslySetInnerHTML={{__html: `
        .custom-scrollbar::-webkit-scrollbar { width: 8px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
      `}} />
    </div>
  );
};

// --- COMPONENTS ---

const LoginScreen = ({ onLogin, toast }) => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const onSubmit = (e) => {
    e.preventDefault();
    onLogin(username, password);
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-50 to-blue-100 p-4 relative overflow-hidden">
      {/* Decorative background elements */}
      <div className="absolute top-[-10%] left-[-10%] w-96 h-96 bg-indigo-200 rounded-full mix-blend-multiply filter blur-3xl opacity-50 animate-blob"></div>
      <div className="absolute top-[20%] right-[-10%] w-96 h-96 bg-blue-200 rounded-full mix-blend-multiply filter blur-3xl opacity-50 animate-blob animation-delay-2000"></div>
      
      <div className="bg-white p-8 rounded-2xl shadow-xl w-full max-w-md relative z-10 animate-in fade-in zoom-in duration-500">
        <div className="flex justify-center mb-6">
          <div className="w-16 h-16 bg-indigo-600 rounded-2xl flex items-center justify-center rotate-3 shadow-lg">
            <Shield className="text-white w-8 h-8 -rotate-3" />
          </div>
        </div>
        <h2 className="text-2xl font-bold text-center text-slate-800 mb-8">Painel da Equipe</h2>
        
        {toast && (
          <div className="mb-4 p-3 bg-red-100 text-red-700 rounded-lg text-sm text-center">
            {toast}
          </div>
        )}

        <form onSubmit={onSubmit} className="space-y-5">
          <div>
            <label className="block text-sm font-medium text-slate-600 mb-1">Usuário</label>
            <input 
              type="text" 
              className="w-full px-4 py-3 rounded-lg border border-slate-200 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all outline-none"
              value={username} onChange={e => setUsername(e.target.value)} required 
              placeholder="Digite seu usuário"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-600 mb-1">Senha</label>
            <input 
              type="password" 
              className="w-full px-4 py-3 rounded-lg border border-slate-200 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all outline-none"
              value={password} onChange={e => setPassword(e.target.value)} required 
              placeholder="••••••••"
            />
          </div>
          <button 
            type="submit" 
            className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 rounded-lg transition-colors shadow-md hover:shadow-lg flex justify-center items-center gap-2"
          >
            Entrar
          </button>
        </form>
      </div>
    </div>
  );
};

const Sidebar = ({ role, activeTab, setActiveTab, onLogout }) => {
  const navItems = [
    ...(role === 'admin' ? [{ id: 'users', icon: Users, label: 'Usuários' }] : []),
    { id: 'notes', icon: FileText, label: 'Anotações' },
    { id: 'tools', icon: Wrench, label: 'Ferramentas' },
  ];

  return (
    <div className="w-64 bg-slate-900 text-slate-300 flex flex-col border-r border-slate-800 shadow-xl z-20">
      <div className="p-6 flex items-center gap-3">
        <Shield className="w-8 h-8 text-indigo-400" />
        <span className="text-xl font-bold text-white tracking-wide">Workspace</span>
      </div>
      
      <nav className="flex-1 px-4 space-y-2 mt-4">
        {navItems.map(item => (
          <button
            key={item.id}
            onClick={() => setActiveTab(item.id)}
            className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 ${
              activeTab === item.id 
                ? 'bg-indigo-600/10 text-indigo-400 font-medium' 
                : 'hover:bg-slate-800 hover:text-white'
            }`}
          >
            <item.icon size={20} className={activeTab === item.id ? 'text-indigo-400' : 'text-slate-400'} />
            {item.label}
          </button>
        ))}
      </nav>

      <div className="p-4 border-t border-slate-800">
        <button 
          onClick={onLogout}
          className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-slate-400 hover:bg-red-500/10 hover:text-red-400 transition-colors"
        >
          <LogOut size={20} />
          Sair do Sistema
        </button>
      </div>
    </div>
  );
};

const Header = ({ user, users, setUsers, showToast }) => {
  const [showPasswordModal, setShowPasswordModal] = useState(false);

  return (
    <header className="bg-white border-b border-slate-200 h-16 flex items-center justify-between px-8 z-10 shadow-sm">
      <h1 className="text-xl font-semibold text-slate-800">
        {user.role === 'admin' ? 'Painel do Administrador' : 'Painel do Usuário'}
      </h1>
      <div className="flex items-center gap-4">
        <div className="text-right">
          <p className="text-sm font-medium text-slate-700">{user.username}</p>
          <p className="text-xs text-slate-500 capitalize">{user.role}</p>
        </div>
        <div 
          className="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-700 font-bold cursor-pointer hover:bg-indigo-200 transition-colors"
          title="Alterar Senha"
          onClick={() => setShowPasswordModal(true)}
        >
          {user.username.charAt(0).toUpperCase()}
        </div>
      </div>

      {showPasswordModal && (
        <ChangePasswordModal 
          user={user} 
          users={users} 
          setUsers={setUsers} 
          onClose={() => setShowPasswordModal(false)}
          showToast={showToast}
        />
      )}
    </header>
  );
};

// --- PANELS ---

const UsersPanel = ({ users, setUsers, showToast, currentUser }) => {
  const [showAddModal, setShowAddModal] = useState(false);

  const toggleUserStatus = (id) => {
    if (id === currentUser.id) return showToast("Você não pode bloquear a si mesmo.");
    setUsers(users.map(u => u.id === id ? { ...u, active: !u.active } : u));
    showToast("Status do usuário atualizado.");
  };

  const deleteUser = (id) => {
    if (id === currentUser.id) return showToast("Você não pode excluir a si mesmo.");
    if(confirm("Tem certeza que deseja excluir este usuário?")) {
      setUsers(users.filter(u => u.id !== id));
      showToast("Usuário excluído.");
    }
  };

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
        <div>
          <h2 className="text-2xl font-bold text-slate-800">Gerenciar Usuários</h2>
          <p className="text-slate-500 text-sm mt-1">Crie, bloqueie ou remova acessos da equipe.</p>
        </div>
        <button 
          onClick={() => setShowAddModal(true)}
          className="bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2.5 rounded-lg flex items-center gap-2 transition-colors shadow-sm"
        >
          <Plus size={20} /> Novo Usuário
        </button>
      </div>

      <div className="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
        <table className="w-full text-left border-collapse">
          <thead>
            <tr className="bg-slate-50 border-b border-slate-100">
              <th className="px-6 py-4 text-sm font-semibold text-slate-600">Usuário</th>
              <th className="px-6 py-4 text-sm font-semibold text-slate-600">Tipo</th>
              <th className="px-6 py-4 text-sm font-semibold text-slate-600">Status</th>
              <th className="px-6 py-4 text-sm font-semibold text-slate-600 text-right">Ações</th>
            </tr>
          </thead>
          <tbody>
            {users.map(u => (
              <tr key={u.id} className="border-b border-slate-50 hover:bg-slate-50/50 transition-colors">
                <td className="px-6 py-4">
                  <div className="flex items-center gap-3">
                    <div className="w-8 h-8 rounded-full bg-slate-200 flex items-center justify-center text-slate-600 font-medium">
                      {u.username.charAt(0).toUpperCase()}
                    </div>
                    <span className="font-medium text-slate-800">{u.username}</span>
                  </div>
                </td>
                <td className="px-6 py-4">
                  <span className={`px-2.5 py-1 text-xs rounded-full font-medium ${
                    u.role === 'admin' ? 'bg-purple-100 text-purple-700' : 'bg-blue-100 text-blue-700'
                  }`}>
                    {u.role === 'admin' ? 'Admin' : 'Usuário'}
                  </span>
                </td>
                <td className="px-6 py-4">
                  <span className={`flex items-center gap-1.5 text-sm ${u.active ? 'text-emerald-600' : 'text-rose-500'}`}>
                    {u.active ? <Unlock size={16} /> : <Lock size={16} />}
                    {u.active ? 'Ativo' : 'Bloqueado'}
                  </span>
                </td>
                <td className="px-6 py-4">
                  <div className="flex items-center justify-end gap-2">
                    <button 
                      onClick={() => toggleUserStatus(u.id)}
                      disabled={u.id === currentUser.id}
                      className={`p-2 rounded-lg transition-colors ${
                        u.id === currentUser.id ? 'opacity-50 cursor-not-allowed' : 
                        u.active ? 'text-amber-500 hover:bg-amber-50' : 'text-emerald-500 hover:bg-emerald-50'
                      }`}
                      title={u.active ? "Bloquear" : "Desbloquear"}
                    >
                      {u.active ? <Lock size={18} /> : <Unlock size={18} />}
                    </button>
                    <button 
                      onClick={() => deleteUser(u.id)}
                      disabled={u.id === currentUser.id}
                      className={`p-2 rounded-lg text-rose-500 hover:bg-rose-50 transition-colors ${
                        u.id === currentUser.id ? 'opacity-50 cursor-not-allowed' : ''
                      }`}
                      title="Excluir"
                    >
                      <Trash2 size={18} />
                    </button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {showAddModal && (
        <AddUserModal 
          onClose={() => setShowAddModal(false)} 
          onAdd={(newUser) => {
            setUsers([...users, { ...newUser, id: Date.now(), active: true }]);
            showToast("Usuário criado com sucesso!");
            setShowAddModal(false);
          }} 
        />
      )}
    </div>
  );
};

const NotesPanel = ({ notes, setNotes, user, showToast }) => {
  const [showAddModal, setShowAddModal] = useState(false);

  const visibleNotes = notes.filter(n => 
    user.role === 'admin' || n.authorId === user.id || n.isPublic
  );

  const deleteNote = (id) => {
    if(confirm("Excluir esta anotação?")) {
      setNotes(notes.filter(n => n.id !== id));
      showToast("Anotação excluída.");
    }
  };

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
        <div>
          <h2 className="text-2xl font-bold text-slate-800">Anotações</h2>
          <p className="text-slate-500 text-sm mt-1">Crie e compartilhe notas e arquivos com a equipe.</p>
        </div>
        <button 
          onClick={() => setShowAddModal(true)}
          className="bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2.5 rounded-lg flex items-center gap-2 transition-colors shadow-sm"
        >
          <Plus size={20} /> Nova Anotação
        </button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {visibleNotes.length === 0 ? (
          <div className="col-span-full py-12 text-center text-slate-400 bg-white rounded-2xl border border-slate-100 border-dashed">
            <FileText size={48} className="mx-auto mb-3 opacity-50" />
            <p>Nenhuma anotação encontrada.</p>
          </div>
        ) : (
          visibleNotes.map(note => (
            <div key={note.id} className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow relative group flex flex-col h-full">
              <div className="flex justify-between items-start mb-4">
                <h3 className="font-bold text-slate-800 text-lg leading-tight">{note.title}</h3>
                {(user.role === 'admin' || note.authorId === user.id) && (
                  <button onClick={() => deleteNote(note.id)} className="text-slate-300 hover:text-rose-500 transition-colors opacity-0 group-hover:opacity-100">
                    <Trash2 size={18} />
                  </button>
                )}
              </div>
              <p className="text-slate-600 text-sm mb-6 flex-1 whitespace-pre-wrap">{note.description}</p>
              
              <div className="mt-auto space-y-3">
                {note.fileName && (
                  <div className="flex items-center gap-2 text-xs font-medium text-indigo-600 bg-indigo-50 p-2 rounded-lg">
                    <FileText size={14} />
                    <span className="truncate">{note.fileName}</span>
                  </div>
                )}
                
                <div className="flex items-center justify-between text-xs text-slate-400 border-t border-slate-50 pt-3">
                  <span className="flex items-center gap-1">
                    <span className="w-5 h-5 rounded-full bg-slate-100 flex items-center justify-center text-slate-600 font-bold">
                      {note.authorName.charAt(0).toUpperCase()}
                    </span>
                    {note.authorName}
                  </span>
                  {note.isPublic ? (
                    <span className="flex items-center gap-1 text-emerald-600"><Globe size={14}/> Público</span>
                  ) : (
                    <span className="flex items-center gap-1"><Lock size={14}/> Privado</span>
                  )}
                </div>
              </div>
            </div>
          ))
        )}
      </div>

      {showAddModal && (
        <AddNoteModal 
          user={user}
          onClose={() => setShowAddModal(false)} 
          onAdd={(newNote) => {
            setNotes([{...newNote, id: Date.now(), authorId: user.id, authorName: user.username, date: new Date().toISOString() }, ...notes]);
            showToast("Anotação salva!");
            setShowAddModal(false);
          }} 
        />
      )}
    </div>
  );
};

const ToolsPanel = ({ tools, setTools, user, showToast }) => {
  const [showAddModal, setShowAddModal] = useState(false);

  const deleteTool = (id) => {
    if(confirm("Excluir esta ferramenta?")) {
      setTools(tools.filter(t => t.id !== id));
      showToast("Ferramenta removida.");
    }
  };

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
        <div>
          <h2 className="text-2xl font-bold text-slate-800">Ferramentas Rápidas</h2>
          <p className="text-slate-500 text-sm mt-1">Atalhos e links úteis para a equipe.</p>
        </div>
        {user.role === 'admin' && (
          <button 
            onClick={() => setShowAddModal(true)}
            className="bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2.5 rounded-lg flex items-center gap-2 transition-colors shadow-sm"
          >
            <Plus size={20} /> Nova Ferramenta
          </button>
        )}
      </div>

      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        {tools.length === 0 ? (
          <div className="col-span-full py-12 text-center text-slate-400 bg-white rounded-2xl border border-slate-100 border-dashed">
            <Wrench size={48} className="mx-auto mb-3 opacity-50" />
            <p>Nenhuma ferramenta registrada.</p>
          </div>
        ) : (
          tools.map(tool => (
            <a 
              key={tool.id} 
              href={tool.link} 
              target="_blank" 
              rel="noopener noreferrer"
              className="bg-white p-5 rounded-2xl shadow-sm border border-slate-100 hover:border-indigo-300 hover:shadow-md transition-all group relative flex flex-col items-center text-center gap-3"
            >
              {user.role === 'admin' && (
                <button 
                  onClick={(e) => { e.preventDefault(); deleteTool(tool.id); }}
                  className="absolute top-3 right-3 text-slate-300 hover:text-rose-500 opacity-0 group-hover:opacity-100 transition-opacity"
                >
                  <Trash2 size={16} />
                </button>
              )}
              <div className="w-12 h-12 rounded-xl bg-indigo-50 flex items-center justify-center text-indigo-600 group-hover:scale-110 transition-transform">
                <LinkIcon size={24} />
              </div>
              <span className="font-semibold text-slate-700 group-hover:text-indigo-600 transition-colors">{tool.name}</span>
            </a>
          ))
        )}
      </div>

      {showAddModal && user.role === 'admin' && (
        <AddToolModal 
          onClose={() => setShowAddModal(false)} 
          onAdd={(newTool) => {
            setTools([...tools, { ...newTool, id: Date.now() }]);
            showToast("Ferramenta adicionada!");
            setShowAddModal(false);
          }} 
        />
      )}
    </div>
  );
};

// --- MODALS ---

const ModalOverlay = ({ children, onClose }) => (
  <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 flex items-center justify-center p-4 animate-in fade-in duration-200">
    <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden animate-in zoom-in-95 duration-200 relative">
      {children}
      <button onClick={onClose} className="absolute top-4 right-4 text-slate-400 hover:text-slate-600">✕</button>
    </div>
  </div>
);

const AddUserModal = ({ onClose, onAdd }) => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [role, setRole] = useState('user');

  return (
    <ModalOverlay onClose={onClose}>
      <div className="p-6">
        <h3 className="text-xl font-bold text-slate-800 mb-4">Adicionar Usuário</h3>
        <form onSubmit={(e) => { e.preventDefault(); onAdd({ username, password, role }); }} className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-slate-600 mb-1">Nome de Usuário</label>
            <input type="text" required className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" value={username} onChange={e => setUsername(e.target.value)} />
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-600 mb-1">Senha Provisória</label>
            <input type="text" required className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" value={password} onChange={e => setPassword(e.target.value)} />
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-600 mb-1">Tipo de Acesso</label>
            <select className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" value={role} onChange={e => setRole(e.target.value)}>
              <option value="user">Usuário Comum</option>
              <option value="admin">Administrador</option>
            </select>
          </div>
          <div className="pt-4 flex gap-3">
            <button type="button" onClick={onClose} className="flex-1 px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 font-medium">Cancelar</button>
            <button type="submit" className="flex-1 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 font-medium">Salvar</button>
          </div>
        </form>
      </div>
    </ModalOverlay>
  );
};

const AddNoteModal = ({ onClose, onAdd }) => {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [isPublic, setIsPublic] = useState(false);
  const [file, setFile] = useState(null);

  return (
    <ModalOverlay onClose={onClose}>
      <div className="p-6">
        <h3 className="text-xl font-bold text-slate-800 mb-4">Nova Anotação</h3>
        <form onSubmit={(e) => { 
          e.preventDefault(); 
          onAdd({ title, description, isPublic, fileName: file ? file.name : null }); 
        }} className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-slate-600 mb-1">Título</label>
            <input type="text" required className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" value={title} onChange={e => setTitle(e.target.value)} />
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-600 mb-1">Descrição</label>
            <textarea required rows="4" className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none resize-none" value={description} onChange={e => setDescription(e.target.value)}></textarea>
          </div>
          
          <div className="p-4 border-2 border-dashed border-slate-200 rounded-lg hover:border-indigo-400 transition-colors bg-slate-50 relative cursor-pointer group">
            <input 
              type="file" 
              className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
              onChange={e => setFile(e.target.files[0])}
            />
            <div className="flex items-center justify-center gap-2 text-slate-500 group-hover:text-indigo-600">
              <FileUp size={20} />
              <span className="text-sm font-medium">{file ? file.name : 'Clique para anexar um arquivo (Opcional)'}</span>
            </div>
          </div>

          <label className="flex items-center gap-2 cursor-pointer p-3 bg-slate-50 rounded-lg border border-slate-100">
            <input type="checkbox" className="w-4 h-4 text-indigo-600 rounded focus:ring-indigo-500" checked={isPublic} onChange={e => setIsPublic(e.target.checked)} />
            <span className="text-sm font-medium text-slate-700">Tornar pública (Visível para todos)</span>
            <Globe size={16} className="text-slate-400 ml-auto" />
          </label>

          <div className="pt-2 flex gap-3">
            <button type="button" onClick={onClose} className="flex-1 px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 font-medium">Cancelar</button>
            <button type="submit" className="flex-1 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 font-medium">Criar Anotação</button>
          </div>
        </form>
      </div>
    </ModalOverlay>
  );
};

const AddToolModal = ({ onClose, onAdd }) => {
  const [name, setName] = useState('');
  const [link, setLink] = useState('');

  return (
    <ModalOverlay onClose={onClose}>
      <div className="p-6">
        <h3 className="text-xl font-bold text-slate-800 mb-4">Registrar Ferramenta</h3>
        <form onSubmit={(e) => { 
          e.preventDefault(); 
          const finalLink = link.startsWith('http') ? link : `https://${link}`;
          onAdd({ name, link: finalLink }); 
        }} className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-slate-600 mb-1">Nome da Ferramenta</label>
            <input type="text" required placeholder="Ex: Trello da Equipe" className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" value={name} onChange={e => setName(e.target.value)} />
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-600 mb-1">Link (URL)</label>
            <input type="text" required placeholder="www.ferramenta.com" className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" value={link} onChange={e => setLink(e.target.value)} />
          </div>
          <div className="pt-4 flex gap-3">
            <button type="button" onClick={onClose} className="flex-1 px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 font-medium">Cancelar</button>
            <button type="submit" className="flex-1 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 font-medium">Adicionar</button>
          </div>
        </form>
      </div>
    </ModalOverlay>
  );
};

const ChangePasswordModal = ({ user, users, setUsers, onClose, showToast }) => {
  const [newPassword, setNewPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    setUsers(users.map(u => u.id === user.id ? { ...u, password: newPassword } : u));
    showToast("Senha alterada com sucesso!");
    onClose();
  };

  return (
    <ModalOverlay onClose={onClose}>
      <div className="p-6">
        <h3 className="text-xl font-bold text-slate-800 mb-4">Alterar Senha</h3>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-slate-600 mb-1">Nova Senha</label>
            <input type="text" required minLength={3} className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" value={newPassword} onChange={e => setNewPassword(e.target.value)} />
          </div>
          <div className="pt-4 flex gap-3">
            <button type="button" onClick={onClose} className="flex-1 px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 font-medium">Cancelar</button>
            <button type="submit" className="flex-1 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 font-medium">Atualizar Senha</button>
          </div>
        </form>
      </div>
    </ModalOverlay>
  );
};

export default App;