import React, { useState } from 'react';
import './UsersManagement.css';
import { User, addUser, getCurrentUserId, getUsers, removeUser, updateUser } from '../../services/users';

const emptyForm = {
  name: '',
  role: 'agent' as User['role'],
  sector: '',
  color: '#25d366',
  password: ''
};

const UsersManagement = () => {
  const [users, setUsers] = useState<User[]>(getUsers());
  const [form, setForm] = useState(emptyForm);
  const [editingId, setEditingId] = useState<string | null>(null);
  const currentUserId = getCurrentUserId();

  const handleSubmit = () => {
    if (!form.name.trim() || !form.sector.trim()) {
      alert('Preencha nome e setor.');
      return;
    }

    if (editingId) {
      setUsers(updateUser(editingId, form.password ? form : { ...form, password: undefined }));
    } else {
      setUsers(addUser(form));
    }
    setForm(emptyForm);
    setEditingId(null);
  };

  const handleEdit = (user: User) => {
    setEditingId(user.id);
    setForm({
      name: user.name,
      role: user.role,
      sector: user.sector,
      color: user.color,
      password: ''
    });
  };

  const handleDelete = (user: User) => {
    if (!window.confirm(`Excluir o usuario ${user.name}?`)) {
      return;
    }
    setUsers(removeUser(user.id));
  };

  return (
    <div className="users-management page-surface">
      <div className="users-header">
        <div>
          <h2>Usuarios</h2>
          <p>Gerencie perfis, setores e acessos.</p>
        </div>
        <button className="primary-btn" onClick={() => { setForm(emptyForm); setEditingId(null); }}>
          Novo usuario
        </button>
      </div>

      <div className="users-grid">
        <div className="users-card">
          <h3>{editingId ? 'Editar usuario' : 'Adicionar usuario'}</h3>
          <div className="form-row">
            <label>Nome</label>
            <input
              value={form.name}
              onChange={(e) => setForm(prev => ({ ...prev, name: e.target.value }))}
              placeholder="Ex: Joao"
            />
          </div>
          <div className="form-row">
            <label>Setor</label>
            <input
              value={form.sector}
              onChange={(e) => setForm(prev => ({ ...prev, sector: e.target.value }))}
              placeholder="Ex: Suporte"
            />
          </div>
          <div className="form-row split">
            <div>
              <label>Perfil</label>
              <select
                value={form.role}
                onChange={(e) => setForm(prev => ({ ...prev, role: e.target.value as User['role'] }))}
              >
                <option value="admin">Administrador</option>
                <option value="agent">Agente</option>
              </select>
            </div>
            <div>
              <label>Cor</label>
              <input
                type="color"
                value={form.color}
                onChange={(e) => setForm(prev => ({ ...prev, color: e.target.value }))}
              />
            </div>
          </div>
          <div className="form-row">
            <label>Senha {editingId ? '(deixe em branco para manter)' : ''}</label>
            <input
              type="password"
              value={form.password}
              onChange={(e) => setForm(prev => ({ ...prev, password: e.target.value }))}
              placeholder={editingId ? 'Nova senha' : 'Senha inicial'}
            />
          </div>
          <button className="primary-btn" onClick={handleSubmit}>
            {editingId ? 'Salvar' : 'Adicionar'}
          </button>
        </div>

        <div className="users-card">
          <h3>Lista de usuarios</h3>
          <div className="users-list">
            {users.map(user => (
              <div key={user.id} className="user-row">
                <div className="user-info">
                  <span className="user-dot" style={{ background: user.color }}></span>
                  <div>
                    <div className="user-name">{user.name}</div>
                    <div className="user-meta">
                      {user.role === 'admin' ? 'Administrador' : 'Agente'} · {user.sector}
                    </div>
                  </div>
                </div>
                <div className="user-actions">
                  <button className="ghost-btn" onClick={() => handleEdit(user)}>
                    Editar
                  </button>
                  <button
                    className="ghost-btn danger"
                    onClick={() => handleDelete(user)}
                    disabled={user.id === currentUserId}
                  >
                    Excluir
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default UsersManagement;