"use client";

import {
  Edit,
  Key,
  Loader2,
  Lock,
  Plus,
  Shield,
  Trash2,
  UserCheck,
  UserPlus,
  UserX,
  Users,
  X,
} from "lucide-react";
import { useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { formatDate } from "@/lib/utils";
import { Input } from "@/components/ui/input";
import { RoleGroup, UserProfile } from "@/types/settings";

interface UsersManagementTabProps {
  users: UserProfile[];
  roles: RoleGroup[];
  onCreateUser: (data: Partial<UserProfile>) => Promise<any>;
  onUpdateUser: (id: string, data: Partial<UserProfile>) => Promise<any>;
  onDeleteUser: (id: string) => Promise<any>;
  isSaving?: boolean;
}

export function UsersManagementTab({
  users,
  roles,
  onCreateUser,
  onUpdateUser,
  onDeleteUser,
  isSaving = false,
}: UsersManagementTabProps) {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [userToEdit, setUserToEdit] = useState<UserProfile | null>(null);

  const [formData, setFormData] = useState<{
    name: string;
    email: string;
    role: UserProfile["role"];
    active: boolean;
    password?: string;
  }>({
    name: "",
    email: "",
    role: "VIEWER",
    active: true,
    password: "",
  });

  const handleOpenCreate = () => {
    setUserToEdit(null);
    setFormData({ name: "", email: "", role: "VIEWER", active: true, password: "" });
    setIsModalOpen(true);
  };

  const handleOpenEdit = (user: UserProfile) => {
    setUserToEdit(user);
    setFormData({
      name: user.name,
      email: user.email,
      role: user.role,
      active: user.active,
    });
    setIsModalOpen(true);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const roleGroup = roles.find((r) => r.id === formData.role || r.name.toLowerCase().includes(formData.role.toLowerCase()));

    if (userToEdit) {
      await onUpdateUser(userToEdit.id, {
        ...formData,
        roleName: roleGroup?.name || formData.role,
      });
    } else {
      await onCreateUser({
        ...formData,
        roleName: roleGroup?.name || formData.role,
      });
    }
    setIsModalOpen(false);
  };

  return (
    <Card className="p-6 shadow-xs border space-y-6">
      <div className="flex flex-wrap items-center justify-between gap-4 border-b pb-4">
        <div>
          <h2 className="text-lg font-bold text-foreground flex items-center gap-2">
            <Users className="h-5 w-5 text-primary" /> Cadastro e Gestão de Usuários
          </h2>
          <p className="text-xs text-muted-foreground">
            Gerencie os usuários que possuem acesso ao sistema e vincule-os a perfis de permissão.
          </p>
        </div>
        <Button onClick={handleOpenCreate} className="shadow-xs">
          <UserPlus className="mr-1.5 h-4 w-4" /> Novo Usuário
        </Button>
      </div>

      {/* Tabela de Usuários */}
      <div className="overflow-x-auto">
        <table className="w-full min-w-[700px] text-left text-sm">
          <thead className="bg-muted/50 text-xs uppercase text-muted-foreground">
            <tr>
              <th className="px-4 py-3.5 font-medium">Usuário</th>
              <th className="px-4 py-3.5 font-medium">E-mail de Acesso</th>
              <th className="px-4 py-3.5 font-medium">Grupo de Acesso</th>
              <th className="px-4 py-3.5 font-medium">Status</th>
              <th className="w-24 px-4 py-3.5 text-right font-medium">Ações</th>
            </tr>
          </thead>
          <tbody className="divide-y">
            {users.map((user) => (
              <tr key={user.id} className="hover:bg-muted/40 transition-colors">
                <td className="px-4 py-3.5">
                  <div className="flex items-center gap-3">
                    <div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary/10 font-bold text-primary text-xs">
                      {user.name.charAt(0).toUpperCase()}
                    </div>
                    <div>
                      <p className="font-bold text-foreground">{user.name}</p>
                      <p className="text-xs text-muted-foreground font-semibold">Criado em: {formatDate(user.createdAt)}</p>
                    </div>
                  </div>
                </td>
                <td className="px-4 py-3.5 font-mono text-xs text-foreground">
                  {user.email}
                </td>
                <td className="px-4 py-3.5">
                  <Badge tone="blue" className="flex items-center gap-1 w-fit">
                    <Shield className="h-3 w-3" /> {user.roleName || user.role}
                  </Badge>
                </td>
                <td className="px-4 py-3.5">
                  {user.active ? (
                    <Badge tone="green" className="flex items-center gap-1 w-fit">
                      <UserCheck className="h-3 w-3" /> Ativo
                    </Badge>
                  ) : (
                    <Badge tone="red" className="flex items-center gap-1 w-fit">
                      <UserX className="h-3 w-3" /> Inativo
                    </Badge>
                  )}
                </td>
                <td className="px-4 py-3.5 text-right">
                  <div className="flex items-center justify-end gap-1">
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => handleOpenEdit(user)}
                      title="Editar Usuário"
                    >
                      <Edit className="h-4 w-4 text-muted-foreground hover:text-foreground" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => {
                        if (confirm(`Tem certeza que deseja excluir o usuário ${user.name}?`)) {
                          onDeleteUser(user.id);
                        }
                      }}
                      title="Excluir Usuário"
                      className="text-rose-500 hover:bg-rose-500/10"
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Modal de Cadastro/Edição de Usuário */}
      {isModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-xs">
          <Card className="w-full max-w-md p-6 shadow-2xl">
            <div className="flex items-center justify-between border-b pb-3">
              <h3 className="text-lg font-bold flex items-center gap-2">
                <UserPlus className="h-5 w-5 text-primary" />
                {userToEdit ? "Editar Usuário" : "Novo Usuário"}
              </h3>
              <Button variant="ghost" size="icon" onClick={() => setIsModalOpen(false)}>
                <X className="h-5 w-5" />
              </Button>
            </div>

            <form onSubmit={handleSubmit} className="mt-4 space-y-4">
              <div>
                <label className="mb-1 block text-xs font-semibold">Nome Completo *</label>
                <Input
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                  placeholder="Ex: Mariana Costa"
                  required
                />
              </div>

              <div>
                <label className="mb-1 block text-xs font-semibold">E-mail de Login *</label>
                <Input
                  type="email"
                  value={formData.email}
                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                  placeholder="usuario@empresa.com.br"
                  required
                />
              </div>

              {!userToEdit && (
                <div>
                  <label className="mb-1 block text-xs font-semibold">Senha Inicial *</label>
                  <Input
                    type="password"
                    value={formData.password || ""}
                    onChange={(e) => setFormData({ ...formData, password: e.target.value })}
                    placeholder="Mínimo 6 caracteres"
                    required
                  />
                </div>
              )}

              <div>
                <label className="mb-1 block text-xs font-semibold">Grupo de Acesso / Perfil *</label>
                <select
                  value={formData.role}
                  onChange={(e) => setFormData({ ...formData, role: e.target.value as any })}
                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-xs shadow-xs focus:ring-1 focus:ring-ring"
                >
                  <option value="ADMIN">Administrador Geral</option>
                  <option value="FINANCE">Gestor Financeiro</option>
                  <option value="OPERATIONS">Operador de Oficina</option>
                  <option value="MANAGER">Gerente Operacional</option>
                  <option value="VIEWER">Visualizador (Somente Leitura)</option>
                </select>
              </div>

              <div className="flex items-center gap-2 pt-2">
                <input
                  type="checkbox"
                  id="userActiveCheck"
                  checked={formData.active}
                  onChange={(e) => setFormData({ ...formData, active: e.target.checked })}
                  className="h-4 w-4 rounded border-gray-300 text-primary"
                />
                <label htmlFor="userActiveCheck" className="text-xs font-medium cursor-pointer">
                  Usuário Ativo (Permitir Login no Sistema)
                </label>
              </div>

              <div className="flex justify-end gap-2 border-t pt-4">
                <Button type="button" variant="secondary" onClick={() => setIsModalOpen(false)}>
                  Cancelar
                </Button>
                <Button type="submit" disabled={isSaving}>
                  {isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                  {userToEdit ? "Salvar Alterações" : "Criar Usuário"}
                </Button>
              </div>
            </form>
          </Card>
        </div>
      )}
    </Card>
  );
}