ims/components/admin/user-manager.tsx

'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[]
}

const EMPTY_FORM = { email: '', name: '', phone: '', role: 'reporter' as UserRole, site_id: '', password: '' }

export function UserManager({ users, sites }: Props) {
  const router = useRouter()
  const [busyId, setBusyId] = useState<string | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [mode, setMode] = useState<'invite' | 'create'>('invite')
  const [form, setForm] = useState(EMPTY_FORM)
  const [submitting, setSubmitting] = 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 handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setSubmitting(true)
    setError(null)
    const payload: Record<string, unknown> = {
      email: form.email,
      name: form.name || undefined,
      phone: form.phone || undefined,
      role: form.role,
      site_id: form.site_id || undefined,
    }
    if (mode === 'create') payload.password = form.password
    const res = await fetch('/ims/api/admin/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    })
    setSubmitting(false)
    if (!res.ok) {
      const data = await res.json().catch(() => ({}))
      setError(data.error ?? `${mode === 'create' ? 'Add' : 'Invite'} failed`)
      return
    }
    setForm(EMPTY_FORM)
    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>

      {/* Mode toggle */}
      <div className="flex gap-2 mb-4">
        {(['invite', 'create'] as const).map(m => (
          <button
            key={m}
            type="button"
            onClick={() => { setMode(m); setError(null) }}
            className={`text-xs font-medium px-3 py-1.5 rounded-full border transition-colors ${
              mode === m
                ? 'bg-gray-800 text-white border-gray-800'
                : 'border-gray-300 text-gray-600 hover:bg-gray-50'
            }`}
          >
            {m === 'invite' ? 'Invite by email' : 'Add directly'}
          </button>
        ))}
      </div>

      <form onSubmit={handleSubmit} className="flex flex-wrap gap-2 mb-5 items-end">
        <input
          type="email" required placeholder="email@company.com"
          value={form.email}
          onChange={e => setForm(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={form.name}
          onChange={e => setForm(v => ({ ...v, name: e.target.value }))}
          className="border border-gray-300 rounded-lg px-3 py-2 text-sm w-40"
        />
        <input
          type="tel" placeholder="Phone (e.g. +60123456789)"
          value={form.phone}
          onChange={e => setForm(v => ({ ...v, phone: e.target.value }))}
          className="border border-gray-300 rounded-lg px-3 py-2 text-sm w-44"
        />
        <select
          value={form.role}
          onChange={e => setForm(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={form.site_id}
          onChange={e => setForm(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>
        {mode === 'create' && (
          <input
            type="password"
            required
            minLength={8}
            placeholder="Password (min 8 chars)"
            value={form.password}
            onChange={e => setForm(v => ({ ...v, password: e.target.value }))}
            className="border border-gray-300 rounded-lg px-3 py-2 text-sm w-48"
          />
        )}
        <button
          type="submit" disabled={submitting}
          className="bg-blue-600 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-blue-700 disabled:opacity-50"
        >
          {submitting
            ? (mode === 'create' ? 'Adding…' : 'Inviting…')
            : (mode === 'create' ? 'Add User' : '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>
  )
}