'use client'

import React, { useEffect, useState } from 'react'

type UserRole = 'USER' | 'MODERATOR' | 'ADMIN'

interface AdminUser {
  id: string
  name: string | null
  email: string
  role: UserRole
  createdAt: string
  _count: { spots: number; reviews: number }
}

const ROLE_LABELS: Record<UserRole, string> = {
  USER: 'Utilizador', MODERATOR: 'Moderador', ADMIN: 'Admin',
}

export default function AdminUsersPage() {
  const [users, setUsers] = useState<AdminUser[]>([])
  const [loading, setLoading] = useState(true)
  const [updating, setUpdating] = useState<string | null>(null)
  const [search, setSearch] = useState('')

  useEffect(() => {
    fetch('/api/admin/users')
      .then((r) => r.json())
      .then((d) => { setUsers(d.users ?? []); setLoading(false) })
  }, [])

  const changeRole = async (userId: string, role: UserRole) => {
    setUpdating(userId)
    const res = await fetch('/api/admin/users', {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ userId, role }),
    })
    const data = await res.json()
    if (res.ok) {
      setUsers((prev) => prev.map((u) => u.id === userId ? { ...u, role: data.user.role } : u))
    }
    setUpdating(null)
  }

  const filtered = users.filter((u) =>
    (u.name ?? '').toLowerCase().includes(search.toLowerCase()) ||
    u.email.toLowerCase().includes(search.toLowerCase())
  )

  return (
    <div className="admin-page">
      <div className="admin-container">
        <h1 className="admin-title">Utilizadores</h1>
        <p className="admin-subtitle">{users.length} utilizadores registados</p>

        <input
          className="form-input"
          style={{ maxWidth: 360, marginBottom: 'var(--ov-space-6)' }}
          placeholder="Pesquisar por nome ou email…"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />

        {loading ? (
          <div className="admin-empty">A carregar…</div>
        ) : filtered.length === 0 ? (
          <div className="admin-empty">Nenhum utilizador encontrado.</div>
        ) : (
          <div className="admin-user-list">
            {filtered.map((user) => (
              <div key={user.id} className="admin-user-card">
                <div className="admin-user-avatar">
                  {(user.name ?? user.email).charAt(0).toUpperCase()}
                </div>
                <div className="admin-user-info">
                  <span className="admin-user-name">{user.name ?? '(sem nome)'}</span>
                  <span className="admin-user-email">{user.email}</span>
                  <span className="admin-user-meta">
                    {user._count.spots} spots · {user._count.reviews} reviews ·{' '}
                    {new Date(user.createdAt).toLocaleDateString('pt-PT')}
                  </span>
                </div>
                <div className="admin-user-actions">
                  <select
                    className="form-input"
                    style={{ fontSize: 12, padding: '4px 8px', width: 'auto' }}
                    value={user.role}
                    disabled={updating === user.id}
                    onChange={(e) => changeRole(user.id, e.target.value as UserRole)}
                    aria-label={`Role de ${user.name ?? user.email}`}
                  >
                    <option value="USER">Utilizador</option>
                    <option value="MODERATOR">Moderador</option>
                    <option value="ADMIN">Admin</option>
                  </select>
                  <span className="mod-status-badge" data-role={user.role}>
                    {ROLE_LABELS[user.role]}
                  </span>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}