import { useState } from 'react';
import { Users, Trash2 } from 'lucide-react';
import { useAdminUsers } from './useAdminUsers';

const inputStyle = {
  padding: '10px 12px',
  background: 'var(--bg-lighter)',
  border: '1.5px solid var(--border-light)',
  borderRadius: '6px',
  color: 'var(--text-main)',
  fontSize: '0.92rem',
  outline: 'none',
  fontFamily: 'var(--font-body)',
  boxSizing: 'border-box',
  flex: 1,
};

const labelStyle = {
  display: 'block',
  marginBottom: '5px',
  fontSize: '0.75rem',
  fontWeight: 700,
  color: 'var(--text-muted)',
  textTransform: 'uppercase',
  letterSpacing: '0.4px',
};

const thStyle = {
  padding: '10px 14px',
  textAlign: 'left',
  fontSize: '0.72rem',
  fontWeight: 700,
  color: 'var(--text-muted)',
  textTransform: 'uppercase',
  letterSpacing: '0.4px',
  borderBottom: '1.5px solid var(--border-light)',
  fontFamily: 'var(--font-heading)',
};

const tdStyle = {
  padding: '12px 14px',
  fontSize: '0.88rem',
  color: 'var(--text-main)',
  borderBottom: '1px solid var(--border-light)',
  fontFamily: 'var(--font-body)',
};

const formatDate = (dateStr) => {
  if (!dateStr) return '—';
  const d = new Date(dateStr);
  return isNaN(d) ? '—' : d.toLocaleDateString('ru-RU');
};

const UserManagementPage = () => {
  const { users, loading, error, inviteUser, deleteUser } = useAdminUsers();

  const [inviteEmail, setInviteEmail] = useState('');
  const [inviting, setInviting] = useState(false);
  const [inviteError, setInviteError] = useState('');

  const [confirmDeleteId, setConfirmDeleteId] = useState(null);
  const [deleting, setDeleting] = useState(false);
  const [deleteError, setDeleteError] = useState('');

  const handleInvite = async (e) => {
    e.preventDefault();
    setInviteError('');
    setInviting(true);
    try {
      await inviteUser(inviteEmail);
      setInviteEmail('');
    } catch (err) {
      setInviteError(err.message ?? 'Ошибка приглашения');
    } finally {
      setInviting(false);
    }
  };

  const handleDeleteConfirm = async (userId) => {
    setDeleting(true);
    setDeleteError('');
    try {
      await deleteUser(userId);
      setDeleting(false);
      setConfirmDeleteId(null);
    } catch (err) {
      setDeleting(false);
      setDeleteError(err?.message ?? 'Ошибка удаления');
    }
  };

  return (
    <div style={{ padding: '30px', maxWidth: '760px' }}>
      <h1
        style={{
          fontFamily: 'var(--font-heading)',
          fontSize: '1.5rem',
          fontWeight: 800,
          marginBottom: '24px',
          display: 'flex',
          alignItems: 'center',
          gap: '10px',
        }}
      >
        <Users size={22} color="var(--accent-blue)" />
        Пользователи
      </h1>

      {/* Invite form */}
      <div className="glass-panel" style={{ padding: '24px', marginBottom: '24px' }}>
        <h2
          style={{
            fontFamily: 'var(--font-heading)',
            fontSize: '1rem',
            fontWeight: 700,
            marginBottom: '16px',
          }}
        >
          Пригласить пользователя
        </h2>

        <form onSubmit={handleInvite}>
          <label style={labelStyle} htmlFor="invite-email">
            Email
          </label>
          <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
            <input
              id="invite-email"
              type="email"
              placeholder="email@example.com"
              value={inviteEmail}
              onChange={(e) => setInviteEmail(e.target.value)}
              required
              disabled={inviting}
              style={inputStyle}
            />
            <button
              type="submit"
              disabled={inviting}
              className="btn-primary"
              style={{
                whiteSpace: 'nowrap',
                opacity: inviting ? 0.7 : 1,
                cursor: inviting ? 'not-allowed' : 'pointer',
              }}
            >
              {inviting ? 'Отправка...' : 'Пригласить'}
            </button>
          </div>
          {inviteError && (
            <p style={{ color: '#ef4444', fontSize: '0.85rem', marginTop: '10px' }}>
              {inviteError}
            </p>
          )}
        </form>
      </div>

      {/* Users table */}
      <div className="glass-panel" style={{ padding: '24px' }}>
        <h2
          style={{
            fontFamily: 'var(--font-heading)',
            fontSize: '1rem',
            fontWeight: 700,
            marginBottom: '16px',
          }}
        >
          Администраторы
        </h2>

        {error && (
          <p style={{ color: '#ef4444', fontSize: '0.85rem', marginBottom: '12px' }}>
            {error}
          </p>
        )}

        {loading ? (
          <div style={{ color: 'var(--text-muted)', padding: '10px 0' }}>Загрузка...</div>
        ) : (
          <div style={{ overflowX: 'auto', WebkitOverflowScrolling: 'touch' }}>
            <table style={{ width: '100%', borderCollapse: 'collapse', minWidth: '600px' }}>
              <thead>
                <tr>
                  <th style={thStyle}>Email</th>
                  <th style={thStyle}>Дата создания</th>
                  <th style={thStyle}>Последний вход</th>
                  <th style={{ ...thStyle, textAlign: 'right' }}></th>
                </tr>
              </thead>
              <tbody>
                {users.map((user) => (
                  <tr key={user.id}>
                    <td style={tdStyle}>{user.email}</td>
                    <td style={tdStyle}>{formatDate(user.created_at)}</td>
                    <td style={tdStyle}>{formatDate(user.last_sign_in_at)}</td>
                    <td style={{ ...tdStyle, textAlign: 'right', whiteSpace: 'nowrap' }}>
                      {confirmDeleteId === user.id ? (
                        <span style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'flex-end', gap: '4px' }}>
                          <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}>
                            <span style={{ fontSize: '0.82rem', color: 'var(--text-muted)' }}>
                              Вы уверены?
                            </span>
                            <button
                              onClick={() => handleDeleteConfirm(user.id)}
                              disabled={deleting}
                              style={{
                                padding: '4px 10px',
                                background: '#ef4444',
                                color: '#fff',
                                border: 'none',
                                borderRadius: '5px',
                                fontSize: '0.78rem',
                                fontWeight: 700,
                                cursor: deleting ? 'not-allowed' : 'pointer',
                                opacity: deleting ? 0.7 : 1,
                                fontFamily: 'var(--font-heading)',
                              }}
                            >
                              Удалить
                            </button>
                            <button
                              onClick={() => { setConfirmDeleteId(null); setDeleteError(''); }}
                              disabled={deleting}
                              style={{
                                padding: '4px 10px',
                                background: 'transparent',
                                color: 'var(--text-muted)',
                                border: '1.5px solid var(--border-light)',
                                borderRadius: '5px',
                                fontSize: '0.78rem',
                                fontWeight: 700,
                                cursor: 'pointer',
                                fontFamily: 'var(--font-heading)',
                              }}
                            >
                              Отмена
                            </button>
                          </span>
                          {deleteError && (
                            <span style={{ fontSize: '0.78rem', color: '#ef4444' }}>
                              {deleteError}
                            </span>
                          )}
                        </span>
                      ) : (
                        <button
                          onClick={() => { setConfirmDeleteId(user.id); setDeleteError(''); }}
                          title="Удалить пользователя"
                          style={{
                            background: 'transparent',
                            border: 'none',
                            cursor: 'pointer',
                            color: 'var(--text-muted)',
                            padding: '4px',
                            borderRadius: '4px',
                            display: 'inline-flex',
                            alignItems: 'center',
                          }}
                        >
                          <Trash2 size={15} />
                        </button>
                      )}
                    </td>
                  </tr>
                ))}
                {users.length === 0 && (
                  <tr>
                    <td
                      colSpan={4}
                      style={{ ...tdStyle, color: 'var(--text-muted)', textAlign: 'center', padding: '20px' }}
                    >
                      Нет пользователей
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  );
};

export default UserManagementPage;
