import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
import { listUsers, createUser, updateUser, resetUserPassword } from '../api';
import { AdminUser } from '../types';
import './AdminUsersPage.css';

function AdminUsersPage() {
  const { user, loading: authLoading } = useAuth();
  const navigate = useNavigate();

  const [users, setUsers] = useState<AdminUser[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const [showCreateForm, setShowCreateForm] = useState(false);
  const [createUsername, setCreateUsername] = useState('');
  const [createPassword, setCreatePassword] = useState('');
  const [createEmail, setCreateEmail] = useState('');
  const [createIsAdmin, setCreateIsAdmin] = useState(false);
  const [isCreating, setIsCreating] = useState(false);
  const [createError, setCreateError] = useState<string | null>(null);

  const [resetPasswordUsername, setResetPasswordUsername] = useState<string | null>(null);
  const [newPassword, setNewPassword] = useState('');
  const [isResetting, setIsResetting] = useState(false);

  const [togglingUser, setTogglingUser] = useState<string | null>(null);

  const [successMessage, setSuccessMessage] = useState<string | null>(null);

  useEffect(() => {
    if (!authLoading && !user) {
      navigate('/login', { state: { from: '/admin/users' } });
    }
  }, [user, authLoading, navigate]);

  useEffect(() => {
    if (user && user.is_admin) {
      loadUsers();
    }
  }, [user]);

  useEffect(() => {
    if (successMessage) {
      const timer = setTimeout(() => setSuccessMessage(null), 3000);
      return () => clearTimeout(timer);
    }
  }, [successMessage]);

  async function loadUsers() {
    setLoading(true);
    setError(null);
    try {
      const data = await listUsers();
      setUsers(data);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to load users');
    } finally {
      setLoading(false);
    }
  }

  async function handleCreate(e: React.FormEvent) {
    e.preventDefault();
    if (!createUsername.trim()) {
      setCreateError('Username is required');
      return;
    }
    if (!createPassword.trim()) {
      setCreateError('Password is required');
      return;
    }

    setIsCreating(true);
    setCreateError(null);
    try {
      await createUser({
        username: createUsername.trim(),
        password: createPassword,
        email: createEmail.trim() || undefined,
        is_admin: createIsAdmin,
      });
      setShowCreateForm(false);
      setCreateUsername('');
      setCreatePassword('');
      setCreateEmail('');
      setCreateIsAdmin(false);
      setSuccessMessage('User created successfully');
      await loadUsers();
    } catch (err) {
      setCreateError(err instanceof Error ? err.message : 'Failed to create user');
    } finally {
      setIsCreating(false);
    }
  }

  async function handleToggleAdmin(targetUser: AdminUser) {
    setTogglingUser(targetUser.username);
    try {
      await updateUser(targetUser.username, { is_admin: !targetUser.is_admin });
      setSuccessMessage(`${targetUser.username} is ${!targetUser.is_admin ? 'now' : 'no longer'} an admin`);
      await loadUsers();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to update user');
    } finally {
      setTogglingUser(null);
    }
  }

  async function handleToggleActive(targetUser: AdminUser) {
    setTogglingUser(targetUser.username);
    try {
      await updateUser(targetUser.username, { is_active: !targetUser.is_active });
      setSuccessMessage(`${targetUser.username} has been ${!targetUser.is_active ? 'enabled' : 'disabled'}`);
      await loadUsers();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to update user');
    } finally {
      setTogglingUser(null);
    }
  }

  async function handleResetPassword(e: React.FormEvent) {
    e.preventDefault();
    if (!resetPasswordUsername || !newPassword.trim()) {
      return;
    }

    setIsResetting(true);
    try {
      await resetUserPassword(resetPasswordUsername, newPassword);
      setResetPasswordUsername(null);
      setNewPassword('');
      setSuccessMessage(`Password reset for ${resetPasswordUsername}`);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to reset password');
    } finally {
      setIsResetting(false);
    }
  }

  function formatDate(dateString: string | null): string {
    if (!dateString) return 'Never';
    return new Date(dateString).toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
    });
  }

  if (authLoading) {
    return (
      <div className="admin-users-page">
        <div className="admin-users-loading">
          <div className="admin-users-spinner"></div>
          <span>Loading...</span>
        </div>
      </div>
    );
  }

  if (!user) {
    return null;
  }

  if (!user.is_admin) {
    return (
      <div className="admin-users-page">
        <div className="admin-users-access-denied">
          <div className="admin-users-access-denied-icon">
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
              <circle cx="12" cy="12" r="10"/>
              <line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/>
            </svg>
          </div>
          <h2>Access Denied</h2>
          <p>You do not have permission to access this page. Admin privileges are required.</p>
        </div>
      </div>
    );
  }

  return (
    <div className="admin-users-page">
      <div className="admin-users-header">
        <div className="admin-users-header-content">
          <h1>User Management</h1>
          <p className="admin-users-subtitle">
            Manage user accounts and permissions
          </p>
        </div>
        <button
          className="admin-users-create-button"
          onClick={() => setShowCreateForm(true)}
          disabled={showCreateForm}
        >
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <line x1="12" y1="5" x2="12" y2="19"/>
            <line x1="5" y1="12" x2="19" y2="12"/>
          </svg>
          Create User
        </button>
      </div>

      {successMessage && (
        <div className="admin-users-success">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
            <polyline points="22 4 12 14.01 9 11.01"/>
          </svg>
          <span>{successMessage}</span>
        </div>
      )}

      {error && (
        <div className="admin-users-error">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <circle cx="12" cy="12" r="10"/>
            <line x1="12" y1="8" x2="12" y2="12"/>
            <line x1="12" y1="16" x2="12.01" y2="16"/>
          </svg>
          <span>{error}</span>
          <button onClick={() => setError(null)} className="admin-users-error-dismiss">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <line x1="18" y1="6" x2="6" y2="18"/>
              <line x1="6" y1="6" x2="18" y2="18"/>
            </svg>
          </button>
        </div>
      )}

      {showCreateForm && (
        <div className="admin-users-create-form-card">
          <div className="admin-users-create-form-header">
            <h2>Create New User</h2>
            <button
              className="admin-users-create-form-close"
              onClick={() => {
                setShowCreateForm(false);
                setCreateUsername('');
                setCreatePassword('');
                setCreateEmail('');
                setCreateIsAdmin(false);
                setCreateError(null);
              }}
            >
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <line x1="18" y1="6" x2="6" y2="18"/>
                <line x1="6" y1="6" x2="18" y2="18"/>
              </svg>
            </button>
          </div>

          {createError && (
            <div className="admin-users-create-error">
              {createError}
            </div>
          )}

          <form onSubmit={handleCreate} className="admin-users-create-form">
            <div className="admin-users-form-group">
              <label htmlFor="username">Username</label>
              <input
                id="username"
                type="text"
                value={createUsername}
                onChange={(e) => setCreateUsername(e.target.value)}
                placeholder="Enter username"
                autoFocus
                disabled={isCreating}
              />
            </div>

            <div className="admin-users-form-group">
              <label htmlFor="password">Password</label>
              <input
                id="password"
                type="password"
                value={createPassword}
                onChange={(e) => setCreatePassword(e.target.value)}
                placeholder="Enter password"
                disabled={isCreating}
              />
            </div>

            <div className="admin-users-form-group">
              <label htmlFor="email">Email (optional)</label>
              <input
                id="email"
                type="email"
                value={createEmail}
                onChange={(e) => setCreateEmail(e.target.value)}
                placeholder="user@example.com"
                disabled={isCreating}
              />
            </div>

            <div className="admin-users-form-group admin-users-checkbox-group">
              <label className="admin-users-checkbox-label">
                <input
                  type="checkbox"
                  checked={createIsAdmin}
                  onChange={(e) => setCreateIsAdmin(e.target.checked)}
                  disabled={isCreating}
                />
                <span className="admin-users-checkbox-custom"></span>
                Grant admin privileges
              </label>
            </div>

            <div className="admin-users-form-actions">
              <button
                type="button"
                className="admin-users-cancel-button"
                onClick={() => {
                  setShowCreateForm(false);
                  setCreateUsername('');
                  setCreatePassword('');
                  setCreateEmail('');
                  setCreateIsAdmin(false);
                  setCreateError(null);
                }}
                disabled={isCreating}
              >
                Cancel
              </button>
              <button
                type="submit"
                className="admin-users-submit-button"
                disabled={isCreating || !createUsername.trim() || !createPassword.trim()}
              >
                {isCreating ? (
                  <>
                    <span className="admin-users-button-spinner"></span>
                    Creating...
                  </>
                ) : (
                  'Create User'
                )}
              </button>
            </div>
          </form>
        </div>
      )}

      {resetPasswordUsername && (
        <div className="admin-users-reset-password-card">
          <div className="admin-users-reset-password-header">
            <h2>Reset Password</h2>
            <button
              className="admin-users-create-form-close"
              onClick={() => {
                setResetPasswordUsername(null);
                setNewPassword('');
              }}
            >
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <line x1="18" y1="6" x2="6" y2="18"/>
                <line x1="6" y1="6" x2="18" y2="18"/>
              </svg>
            </button>
          </div>
          <p className="admin-users-reset-password-info">
            Set a new password for <strong>{resetPasswordUsername}</strong>
          </p>
          <form onSubmit={handleResetPassword} className="admin-users-reset-password-form">
            <div className="admin-users-form-group">
              <label htmlFor="new-password">New Password</label>
              <input
                id="new-password"
                type="password"
                value={newPassword}
                onChange={(e) => setNewPassword(e.target.value)}
                placeholder="Enter new password"
                autoFocus
                disabled={isResetting}
              />
            </div>
            <div className="admin-users-form-actions">
              <button
                type="button"
                className="admin-users-cancel-button"
                onClick={() => {
                  setResetPasswordUsername(null);
                  setNewPassword('');
                }}
                disabled={isResetting}
              >
                Cancel
              </button>
              <button
                type="submit"
                className="admin-users-submit-button"
                disabled={isResetting || !newPassword.trim()}
              >
                {isResetting ? (
                  <>
                    <span className="admin-users-button-spinner"></span>
                    Resetting...
                  </>
                ) : (
                  'Reset Password'
                )}
              </button>
            </div>
          </form>
        </div>
      )}

      <div className="admin-users-list-container">
        {loading ? (
          <div className="admin-users-list-loading">
            <div className="admin-users-spinner"></div>
            <span>Loading users...</span>
          </div>
        ) : users.length === 0 ? (
          <div className="admin-users-empty">
            <div className="admin-users-empty-icon">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                <circle cx="9" cy="7" r="4"/>
                <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
                <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
              </svg>
            </div>
            <h3>No Users</h3>
            <p>Create a user to get started</p>
          </div>
        ) : (
          <div className="admin-users-list">
            <div className="admin-users-list-header">
              <span className="admin-users-col-user">User</span>
              <span className="admin-users-col-status">Status</span>
              <span className="admin-users-col-created">Created</span>
              <span className="admin-users-col-login">Last Login</span>
              <span className="admin-users-col-actions">Actions</span>
            </div>
            {users.map((u) => (
              <div key={u.id} className={`admin-users-list-item ${!u.is_active ? 'admin-users-inactive' : ''}`}>
                <div className="admin-users-col-user">
                  <div className="admin-users-item-avatar">
                    {u.username.charAt(0).toUpperCase()}
                  </div>
                  <div className="admin-users-item-info">
                    <div className="admin-users-item-username">
                      {u.username}
                      {u.is_admin && <span className="admin-users-admin-badge">Admin</span>}
                    </div>
                    {u.email && (
                      <div className="admin-users-item-email">{u.email}</div>
                    )}
                  </div>
                </div>
                <div className="admin-users-col-status">
                  <span className={`admin-users-status-badge ${u.is_active ? 'active' : 'inactive'}`}>
                    {u.is_active ? 'Active' : 'Disabled'}
                  </span>
                </div>
                <div className="admin-users-col-created">
                  {formatDate(u.created_at)}
                </div>
                <div className="admin-users-col-login">
                  {formatDate(u.last_login)}
                </div>
                <div className="admin-users-col-actions">
                  <div className="admin-users-actions-menu">
                    <button
                      className="admin-users-action-button"
                      onClick={() => handleToggleAdmin(u)}
                      disabled={togglingUser === u.username || u.username === user.username}
                      title={u.is_admin ? 'Remove admin' : 'Make admin'}
                    >
                      {togglingUser === u.username ? (
                        <span className="admin-users-action-spinner"></span>
                      ) : (
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                        </svg>
                      )}
                      {u.is_admin ? 'Revoke' : 'Admin'}
                    </button>
                    <button
                      className="admin-users-action-button"
                      onClick={() => handleToggleActive(u)}
                      disabled={togglingUser === u.username || u.username === user.username}
                      title={u.is_active ? 'Disable user' : 'Enable user'}
                    >
                      {togglingUser === u.username ? (
                        <span className="admin-users-action-spinner"></span>
                      ) : u.is_active ? (
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                          <circle cx="12" cy="12" r="10"/>
                          <line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/>
                        </svg>
                      ) : (
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                          <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
                          <polyline points="22 4 12 14.01 9 11.01"/>
                        </svg>
                      )}
                      {u.is_active ? 'Disable' : 'Enable'}
                    </button>
                    <button
                      className="admin-users-action-button"
                      onClick={() => setResetPasswordUsername(u.username)}
                      disabled={togglingUser === u.username}
                      title="Reset password"
                    >
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
                        <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                      </svg>
                      Reset
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

export default AdminUsersPage;