import React, { useState } from 'react';
import { Users, UserPlus, Shield, Key, Mail, MoreVertical, Search, Filter, ShieldCheck, ShieldAlert, BadgeCheck, Clock, UserCog } from 'lucide-react';

const GrUsersAdminView = () => {
  const [activeRole, setActiveRole] = useState('ALL');

  // Adatpted logic from ADM module
  const users = [
    { id: 1, name: 'Suporte Técnico', email: 'suporte@grupopralog.com.br', role: 'Administrador', status: 'Ativo', lastLogin: '2026-02-03T10:30:00' },
    { id: 2, name: 'João Técnico', email: 'joao.tecnico@grupopralog.com.br', role: 'Operador', status: 'Ativo', lastLogin: '2026-02-03T08:15:00' },
    { id: 3, name: 'Maria Gestora', email: 'maria.gestora@grupopralog.com.br', role: 'Gestor', status: 'Inativo', lastLogin: '2026-01-20T14:45:00' }
  ];

  const roles = ['ALL', 'Administrador', 'Gestor', 'Operador'];

  return (
    <div className="flex flex-col gap-8 p-6 md:p-10 animate-in fade-in slide-in-from-bottom-4 duration-700">
      <header className="flex flex-col md:flex-row md:items-end justify-between gap-6">
        <div className="space-y-2">
          <h1 className="text-4xl md:text-6xl font-bold text-slate-800 dark:text-white tracking-tighter leading-none">
            Usuários <span className="text-[var(--gr-primary)]">(ADM)</span>
          </h1>
          <p className="text-slate-400 dark:text-slate-500 text-base md:text-lg font-medium italic opacity-80">
            Governança de acessos, perfis de segurança e auditoria de usuários
          </p>
        </div>

        <button className="flex items-center justify-center gap-2 px-8 py-5 bg-[var(--gr-primary)] hover:bg-[var(--gr-primary-dark)] text-white rounded-[24px] font-bold text-xs uppercase tracking-widest transition-all shadow-xl shadow-[var(--gr-primary)]/20">
          <UserPlus size={18} />
          Convidar Usuário
        </button>
      </header>

      <div className="grid grid-cols-1 xl:grid-cols-4 gap-8">
        {/* Stats Section */}
        <div className="xl:col-span-1 space-y-6">
           <div className="bg-white dark:bg-[#1b1b1b] p-6 rounded-[32px] border border-slate-200 dark:border-white/5 shadow-sm space-y-6">
              <h4 className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Resumo de Acessos</h4>
              
              <div className="space-y-4">
                 <div className="flex items-center justify-between p-4 bg-slate-50 dark:bg-[#141414] rounded-2xl">
                    <div className="flex items-center gap-3">
                       <Users size={18} className="text-blue-500" />
                       <span className="text-xs font-bold text-slate-600 dark:text-slate-300">Total Usuários</span>
                    </div>
                    <span className="text-xl font-bold text-slate-800 dark:text-white">42</span>
                 </div>
                 <div className="flex items-center justify-between p-4 bg-slate-50 dark:bg-[#141414] rounded-2xl">
                    <div className="flex items-center gap-3">
                       <ShieldCheck size={18} className="text-emerald-500" />
                       <span className="text-xs font-bold text-slate-600 dark:text-slate-300">Ativos Agora</span>
                    </div>
                    <span className="text-xl font-bold text-emerald-500">12</span>
                 </div>
                 <div className="flex items-center justify-between p-4 bg-slate-50 dark:bg-[#141414] rounded-2xl">
                    <div className="flex items-center gap-3">
                       <ShieldAlert size={18} className="text-amber-500" />
                       <span className="text-xs font-bold text-slate-600 dark:text-slate-300">Pendentes</span>
                    </div>
                    <span className="text-xl font-bold text-amber-500">03</span>
                 </div>
              </div>

              <div className="pt-6 border-t border-slate-100 dark:border-white/5">
                 <button className="w-full flex items-center justify-center gap-2 py-4 bg-slate-100 dark:bg-[#141414] hover:bg-slate-200 dark:hover:bg-slate-700 rounded-2xl text-[10px] font-bold text-slate-600 dark:text-slate-300 uppercase tracking-widest transition-all">
                    <Shield size={16} />
                    Configurar Permissões
                 </button>
              </div>
           </div>
        </div>

        {/* User Table Section */}
        <div className="xl:col-span-3 flex flex-col bg-white dark:bg-[#1b1b1b] rounded-[40px] border border-slate-200 dark:border-white/5 shadow-sm overflow-hidden">
           <div className="p-8 border-b border-slate-100 dark:border-white/5 flex flex-wrap items-center justify-between gap-6">
              <div className="flex p-1.5 bg-slate-100 dark:bg-[#141414] rounded-2xl overflow-x-auto max-w-full">
                {roles.map(role => (
                   <button 
                     key={role}
                     onClick={() => setActiveRole(role)}
                     className={`px-4 py-2 rounded-xl text-[9px] font-bold uppercase tracking-widest whitespace-nowrap transition-all ${
                       activeRole === role ? 'bg-white dark:bg-[#1b1b1b] text-slate-900 dark:text-white shadow-sm' : 'text-slate-400 hover:text-slate-600'
                     }`}
                   >
                      {role}
                   </button>
                ))}
              </div>

              <div className="flex items-center gap-4">
                 <div className="relative group">
                    <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400" size={16} />
                    <input 
                      type="text" 
                      placeholder="FILTRAR USUÁRIOS..."
                      className="pl-12 pr-4 py-2.5 bg-white dark:bg-[#141414] border border-slate-200 dark:border-white/5 rounded-2xl text-[10px] font-bold w-60 uppercase outline-none"
                    />
                 </div>
                 <button className="p-2.5 bg-white dark:bg-[#141414] border border-slate-200 dark:border-white/5 rounded-2xl text-slate-500"><Filter size={18} /></button>
              </div>
           </div>

           <div className="flex-1 overflow-x-auto">
              <table className="w-full text-left border-collapse">
                 <thead>
                    <tr className="bg-slate-50/50 dark:bg-white/[0.02] border-b border-slate-100 dark:border-white/5">
                       <th className="p-6 text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em]">Usuário / ID</th>
                       <th className="p-6 text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em]">Perfil de Acesso</th>
                       <th className="p-6 text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em]">Status</th>
                       <th className="p-6 text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em]">Último Login</th>
                       <th className="p-6"></th>
                    </tr>
                 </thead>
                 <tbody className="divide-y divide-slate-100 dark:divide-white/5">
                    {users.map((user) => (
                       <tr key={user.id} className="hover:bg-slate-50 dark:hover:bg-white/[0.02] transition-colors group">
                          <td className="p-6">
                             <div className="flex items-center gap-4">
                                <div className="w-12 h-12 rounded-[18px] bg-gradient-to-br from-slate-100 to-slate-200 dark:from-[#1b1b1b] dark:to-[#141414] flex items-center justify-center text-[var(--gr-primary)] font-bold text-base border border-white/10 shadow-sm">
                                   {user.name.charAt(0)}
                                </div>
                                <div>
                                   <p className="font-bold text-sm text-slate-800 dark:text-slate-200 tracking-tight group-hover:text-[var(--gr-primary)] transition-colors">{user.name}</p>
                                   <div className="flex items-center gap-1.5 opacity-60">
                                      <Mail size={10} className="text-slate-400" />
                                      <span className="text-[9px] font-bold text-slate-500 uppercase tracking-tighter">{user.email}</span>
                                   </div>
                                </div>
                             </div>
                          </td>
                          <td className="p-6">
                            <div className="flex items-center gap-2">
                               <BadgeCheck size={14} className={user.role === 'Administrador' ? 'text-[var(--gr-primary)]' : 'text-slate-400'} />
                               <span className={`text-[10px] font-bold uppercase tracking-widest ${user.role === 'Administrador' ? 'text-slate-800 dark:text-white' : 'text-slate-500'}`}>{user.role}</span>
                            </div>
                          </td>
                          <td className="p-6">
                             <div className={`flex items-center gap-2 px-3 py-1 rounded-full border w-fit ${
                                user.status === 'Ativo' ? 'bg-emerald-500/10 text-emerald-500 border-emerald-500/10' : 'bg-red-500/10 text-red-500 border-red-500/10'
                             }`}>
                               <div className={`w-1.5 h-1.5 rounded-full ${user.status === 'Ativo' ? 'bg-emerald-500' : 'bg-red-500'} animate-pulse`} />
                               <span className="text-[9px] font-bold uppercase tracking-tighter">{user.status}</span>
                             </div>
                          </td>
                          <td className="p-6">
                             <div className="flex items-center gap-2 text-slate-500">
                                <Clock size={14} className="opacity-40" />
                                <span className="text-[10px] font-bold">{new Date(user.lastLogin).toLocaleDateString()} às {new Date(user.lastLogin).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })}</span>
                             </div>
                          </td>
                          <td className="p-6 text-right">
                             <div className="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                                <button className="p-2 hover:bg-white dark:hover:bg-[#1b1b1b] rounded-lg text-slate-400 hover:text-[var(--gr-primary)]" title="Editar Usuário"><UserCog size={16} /></button>
                                <button className="p-2 hover:bg-white dark:hover:bg-[#1b1b1b] rounded-lg text-slate-400 hover:text-blue-500" title="Redefinir Senha"><Key size={16} /></button>
                                <button className="p-2 hover:bg-white dark:hover:bg-[#1b1b1b] rounded-lg text-slate-400 hover:text-red-500" title="Excluir Usuário"><Shield size={16} /></button>
                                <button className="p-2 hover:bg-white dark:hover:bg-[#1b1b1b] rounded-lg text-slate-400"><MoreVertical size={16} /></button>
                             </div>
                          </td>
                       </tr>
                    ))}
                 </tbody>
              </table>
           </div>
        </div>
      </div>
    </div>
  );
};

export default GrUsersAdminView;
