'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { ALL_ROLES, type UserRole } from '@/lib/auth/roles'

export type AdminUser = {
  id: string
  name: string
  email: string
  role: string
  department: string | null
  site_id: string | null
  active: boolean
}

export type SiteOption = { id: string; name: string }

interface Props {
  users: AdminUser[]
  sites: SiteOption[]
}

export function UserManager({ users, sites }: Props) {
  const router = useRouter()
  const [busyId, setBusyId] = useState<string | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [invite, setInvite] = useState({ email: '', name: '', role: 'reporter' as UserRole, site_id: '' })
  const [inviting, setInviting] = useState(false)

  const patchUser = async (id: string, update: Record<string, unknown>) => {
    setBusyId(id)
    setError(null)
    const res = await fetch('/ims/api/admin/users', {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ id, ...update }),
    })
    setBusyId(null)
    if (!res.ok) {
      const data = await res.json().catch(() => ({}))
      setError(data.error ?? 'Update failed')
      return
    }
    router.refresh()
  }

  const sendInvite = async (e: React.FormEvent) => {
    e.preventDefault()
    setInviting(true)
    setError(null)
    const res = await fetch('/ims/api/admin/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ ...invite, site_id: invite.site_id || undefined }),
    })
    setInviting(false)
    if (!res.ok) {
      const data = await res.json().catch(() => ({}))
      setError(data.error ?? 'Invite failed')
      return
    }
    setInvite({ email: '', name: '', role: 'reporter', site_id: '' })
    router.refresh()
  }

  return (
    <div className="bg-white rounded-xl shadow-sm p-5">
      <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-4">Users</h2>

      <form onSubmit={sendInvite} className="flex flex-wrap gap-2 mb-5 items-end">
        <input
          type="email" required placeholder="email@company.com"
          value={invite.email}
          onChange={e => setInvite(v => ({ ...v, email: e.target.value }))}
          className="border border-gray-300 rounded-lg px-3 py-2 text-sm w-52"
        />
        <input
          type="text" placeholder="Full name"
          value={invite.name}
          onChange={e => setInvite(v => ({ ...v, name: e.target.value }))}
          className="border border-gray-300 rounded-lg px-3 py-2 text-sm w-40"
        />
        <select
          value={invite.role}
          onChange={e => setInvite(v => ({ ...v, role: e.target.value as UserRole }))}
          className="border border-gray-300 rounded-lg px-3 py-2 text-sm"
        >
          {ALL_ROLES.map(r => <option key={r} value={r}>{r.replace(/_/g, ' ')}</option>)}
        </select>
        <select
          value={invite.site_id}
          onChange={e => setInvite(v => ({ ...v, site_id: e.target.value }))}
          className="border border-gray-300 rounded-lg px-3 py-2 text-sm"
        >
          <option value="">No site</option>
          {sites.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
        </select>
        <button
          type="submit" disabled={inviting}
          className="bg-blue-600 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-blue-700 disabled:opacity-50"
        >
          {inviting ? 'Inviting…' : 'Invite User'}
        </button>
      </form>

      {error && <p className="text-sm text-red-600 mb-3">{error}</p>}

      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead>
            <tr className="text-left text-xs text-gray-500 uppercase tracking-wide border-b border-gray-100">
              <th className="py-2 pr-3">Name</th>
              <th className="py-2 pr-3">Email</th>
              <th className="py-2 pr-3">Role</th>
              <th className="py-2 pr-3">Site</th>
              <th className="py-2">Status</th>
            </tr>
          </thead>
          <tbody>
            {users.map(u => (
              <tr key={u.id} className={`border-b border-gray-50 ${u.active ? '' : 'opacity-50'}`}>
                <td className="py-2 pr-3 text-gray-900">{u.name || '—'}</td>
                <td className="py-2 pr-3 text-gray-600">{u.email}</td>
                <td className="py-2 pr-3">
                  <select
                    value={u.role}
                    disabled={busyId === u.id}
                    onChange={e => patchUser(u.id, { role: e.target.value })}
                    className="border border-gray-200 rounded px-2 py-1 text-xs"
                  >
                    {ALL_ROLES.map(r => <option key={r} value={r}>{r.replace(/_/g, ' ')}</option>)}
                  </select>
                </td>
                <td className="py-2 pr-3">
                  <select
                    value={u.site_id ?? ''}
                    disabled={busyId === u.id}
                    onChange={e => patchUser(u.id, { site_id: e.target.value || null })}
                    className="border border-gray-200 rounded px-2 py-1 text-xs"
                  >
                    <option value="">No site</option>
                    {sites.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
                  </select>
                </td>
                <td className="py-2">
                  <button
                    disabled={busyId === u.id}
                    onClick={() => patchUser(u.id, { active: !u.active })}
                    className={`text-xs px-2 py-1 rounded-full font-medium ${
                      u.active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'
                    }`}
                  >
                    {u.active ? 'Active' : 'Deactivated'}
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}