import { useState, useEffect } from 'react'
import { userManagement, type User, type Role, type RoleName, type UserStatus } from '../lib/supabase'
import { CreateUserModal } from './CreateUserModal'

export function UserManagement() {
  const [users, setUsers] = useState<User[]>([])
  const [roles, setRoles] = useState<Role[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [editingUser, setEditingUser] = useState<string | null>(null)
  const [showCreateModal, setShowCreateModal] = useState(false)

  useEffect(() => {
    loadData()
  }, [])

  const loadData = async () => {
    try {
      setLoading(true)
      setError(null)

      const [usersData, rolesData] = await Promise.all([
        userManagement.getAllUsers(),
        userManagement.getAllRoles()
      ])

      setUsers(usersData)
      setRoles(rolesData)
    } catch (err) {
      setError('Failed to load user data')
      console.error('Load data error:', err)
    } finally {
      setLoading(false)
    }
  }

  const handleStatusToggle = async (userId: string, currentStatus: UserStatus) => {
    try {
      const newStatus: UserStatus = currentStatus === 'active' ? 'disabled' : 'active'
      await userManagement.updateUserStatus(userId, newStatus)

      // Update local state
      setUsers(users.map(user =>
        user.id === userId ? { ...user, status: newStatus } : user
      ))
    } catch (err) {
      console.error('Status update error:', err)
      alert('Failed to update user status')
    }
  }

  const handleRoleUpdate = async (userId: string, newRoles: RoleName[]) => {
    try {
      await userManagement.updateUserRoles(userId, newRoles)

      // Update local state
      setUsers(users.map(user =>
        user.id === userId ? { ...user, roles: newRoles } : user
      ))

      setEditingUser(null)
    } catch (err) {
      console.error('Role update error:', err)
      alert('Failed to update user roles')
    }
  }

  const handleEmailUpdate = async (userId: string, newEmail: string) => {
    try {
      await userManagement.updateUserEmail(userId, newEmail)

      // Update local state
      setUsers(users.map(user =>
        user.id === userId ? { ...user, email: newEmail } : user
      ))

      setEditingUser(null)
    } catch (err) {
      console.error('Email update error:', err)
      alert('Failed to update user email')
    }
  }

  const handleUserCreated = (newUser: User) => {
    setUsers([...users, newUser])
    setShowCreateModal(false)
  }

  const getRoleBadgeColor = (role: string) => {
    switch (role) {
      case 'admin':
        return 'bg-red-100 text-red-800'
      case 'conductor':
        return 'bg-blue-100 text-blue-800'
      case 'analyst':
        return 'bg-green-100 text-green-800'
      case 'data recorder':
        return 'bg-purple-100 text-purple-800'
      default:
        return 'bg-gray-100 text-gray-800'
    }
  }

  if (loading) {
    return (
      <div className="p-6">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto"></div>
          <p className="mt-4 text-gray-600">Loading users...</p>
        </div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="p-6">
        <div className="rounded-md bg-red-50 p-4">
          <div className="text-sm text-red-700">{error}</div>
        </div>
        <button
          onClick={loadData}
          className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
        >
          Retry
        </button>
      </div>
    )
  }

  return (
    <div className="p-6">
      {/* Header */}
      <div className="mb-8">
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-3xl font-bold text-gray-900">User Management</h1>
            <p className="mt-2 text-gray-600">Manage user accounts, roles, and permissions</p>
          </div>
          <button
            onClick={() => setShowCreateModal(true)}
            className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
          >
            ➕ Add New User
          </button>
        </div>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
        <div className="bg-white overflow-hidden shadow rounded-lg">
          <div className="p-5">
            <div className="flex items-center">
              <div className="flex-shrink-0">
                <span className="text-2xl">👥</span>
              </div>
              <div className="ml-5 w-0 flex-1">
                <dl>
                  <dt className="text-sm font-medium text-gray-500 truncate">Total Users</dt>
                  <dd className="text-lg font-medium text-gray-900">{users.length}</dd>
                </dl>
              </div>
            </div>
          </div>
        </div>

        <div className="bg-white overflow-hidden shadow rounded-lg">
          <div className="p-5">
            <div className="flex items-center">
              <div className="flex-shrink-0">
                <span className="text-2xl">✅</span>
              </div>
              <div className="ml-5 w-0 flex-1">
                <dl>
                  <dt className="text-sm font-medium text-gray-500 truncate">Active Users</dt>
                  <dd className="text-lg font-medium text-gray-900">
                    {users.filter(u => u.status === 'active').length}
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </div>

        <div className="bg-white overflow-hidden shadow rounded-lg">
          <div className="p-5">
            <div className="flex items-center">
              <div className="flex-shrink-0">
                <span className="text-2xl">🔴</span>
              </div>
              <div className="ml-5 w-0 flex-1">
                <dl>
                  <dt className="text-sm font-medium text-gray-500 truncate">Disabled Users</dt>
                  <dd className="text-lg font-medium text-gray-900">
                    {users.filter(u => u.status === 'disabled').length}
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </div>

        <div className="bg-white overflow-hidden shadow rounded-lg">
          <div className="p-5">
            <div className="flex items-center">
              <div className="flex-shrink-0">
                <span className="text-2xl">👑</span>
              </div>
              <div className="ml-5 w-0 flex-1">
                <dl>
                  <dt className="text-sm font-medium text-gray-500 truncate">Admins</dt>
                  <dd className="text-lg font-medium text-gray-900">
                    {users.filter(u => u.roles.includes('admin')).length}
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Users Table */}
      <div className="bg-white shadow overflow-hidden sm:rounded-md">
        <div className="px-4 py-5 sm:px-6">
          <h3 className="text-lg leading-6 font-medium text-gray-900">Users</h3>
          <p className="mt-1 max-w-2xl text-sm text-gray-500">
            Click on any field to edit user details
          </p>
        </div>
        <div className="overflow-x-auto">
          <table className="min-w-full divide-y divide-gray-200">
            <thead className="bg-gray-50">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Email
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Roles
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Status
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Created
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Actions
                </th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {users.map((user) => (
                <UserRow
                  key={user.id}
                  user={user}
                  roles={roles}
                  isEditing={editingUser === user.id}
                  onEdit={() => setEditingUser(user.id)}
                  onCancel={() => setEditingUser(null)}
                  onStatusToggle={handleStatusToggle}
                  onRoleUpdate={handleRoleUpdate}
                  onEmailUpdate={handleEmailUpdate}
                  getRoleBadgeColor={getRoleBadgeColor}
                />
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Create User Modal */}
      {showCreateModal && (
        <CreateUserModal
          roles={roles}
          onClose={() => setShowCreateModal(false)}
          onUserCreated={handleUserCreated}
        />
      )}
    </div>
  )
}

// UserRow component for inline editing
interface UserRowProps {
  user: User
  roles: Role[]
  isEditing: boolean
  onEdit: () => void
  onCancel: () => void
  onStatusToggle: (userId: string, currentStatus: UserStatus) => void
  onRoleUpdate: (userId: string, newRoles: RoleName[]) => void
  onEmailUpdate: (userId: string, newEmail: string) => void
  getRoleBadgeColor: (role: string) => string
}

function UserRow({
  user,
  roles,
  isEditing,
  onEdit,
  onCancel,
  onStatusToggle,
  onRoleUpdate,
  onEmailUpdate,
  getRoleBadgeColor
}: UserRowProps) {
  const [editEmail, setEditEmail] = useState(user.email)
  const [editRoles, setEditRoles] = useState<RoleName[]>(user.roles)

  const handleSave = () => {
    if (editEmail !== user.email) {
      onEmailUpdate(user.id, editEmail)
    }
    if (JSON.stringify(editRoles.sort()) !== JSON.stringify(user.roles.sort())) {
      onRoleUpdate(user.id, editRoles)
    }
    if (editEmail === user.email && JSON.stringify(editRoles.sort()) === JSON.stringify(user.roles.sort())) {
      onCancel()
    }
  }

  const handleRoleToggle = (roleName: RoleName) => {
    if (editRoles.includes(roleName)) {
      setEditRoles(editRoles.filter(r => r !== roleName))
    } else {
      setEditRoles([...editRoles, roleName])
    }
  }

  return (
    <tr>
      <td className="px-6 py-4 whitespace-nowrap">
        {isEditing ? (
          <input
            type="email"
            value={editEmail}
            onChange={(e) => setEditEmail(e.target.value)}
            className="block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
          />
        ) : (
          <div
            className="text-sm text-gray-900 cursor-pointer hover:text-blue-600"
            onClick={onEdit}
          >
            {user.email}
          </div>
        )}
      </td>
      <td className="px-6 py-4">
        {isEditing ? (
          <div className="space-y-2">
            {roles.map((role) => (
              <label key={role.id} className="flex items-center">
                <input
                  type="checkbox"
                  checked={editRoles.includes(role.name)}
                  onChange={() => handleRoleToggle(role.name)}
                  className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                />
                <span className="ml-2 text-sm text-gray-700">{role.name}</span>
              </label>
            ))}
          </div>
        ) : (
          <div
            className="flex flex-wrap gap-1 cursor-pointer"
            onClick={onEdit}
          >
            {user.roles.map((role) => (
              <span
                key={role}
                className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${getRoleBadgeColor(role)}`}
              >
                {role.charAt(0).toUpperCase() + role.slice(1)}
              </span>
            ))}
          </div>
        )}
      </td>
      <td className="px-6 py-4 whitespace-nowrap">
        <button
          onClick={() => onStatusToggle(user.id, user.status)}
          className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${user.status === 'active'
              ? 'bg-green-100 text-green-800 hover:bg-green-200'
              : 'bg-red-100 text-red-800 hover:bg-red-200'
            }`}
        >
          {user.status.charAt(0).toUpperCase() + user.status.slice(1)}
        </button>
      </td>
      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
        {new Date(user.created_at).toLocaleDateString()}
      </td>
      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
        {isEditing ? (
          <div className="flex space-x-2">
            <button
              onClick={handleSave}
              className="text-blue-600 hover:text-blue-900"
            >
              Save
            </button>
            <button
              onClick={onCancel}
              className="text-gray-600 hover:text-gray-900"
            >
              Cancel
            </button>
          </div>
        ) : (
          <button
            onClick={onEdit}
            className="text-blue-600 hover:text-blue-900"
          >
            Edit
          </button>
        )}
      </td>
    </tr>
  )
}