'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 [form, setForm] = useState(EMPTY_FORM)
  const [submitting, setSubmitting] = useState(false)
  const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null)

  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 deleteUser = async (id: string) => {
    setBusyId(id)
    setError(null)
    const res = await fetch(`/api/admin/users?id=${encodeURIComponent(id)}`, { method: 'DELETE' })
    setBusyId(null)
    setConfirmDeleteId(null)
    if (!res.ok) {
      const data = await res.json().catch(() => ({}))
      setError(data.error ?? 'Delete failed')
      return
    }
    router.refresh()
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setSubmitting(true)
    setError(null)
    const res = await fetch('/ims/api/admin/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        email: form.email,
        name: form.name || undefined,
        phone: form.phone || undefined,
        role: form.role,
        site_id: form.site_id || undefined,
        password: form.password,
      }),
    })
    setSubmitting(false)
    if (!res.ok) {
      const data = await res.json().catch(() => ({}))
      setError(data.error ?? 'Add 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>

      <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>
        <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 ? 'Adding…' : 'Add 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>
              <th className="py-2"></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>
                <td className="py-2">
                  {confirmDeleteId === u.id ? (
                    <span className="flex items-center gap-1">
                      <span className="text-xs text-red-600 font-medium">Sure?</span>
                      <button
                        disabled={busyId === u.id}
                        onClick={() => deleteUser(u.id)}
                        className="text-xs px-2 py-0.5 rounded bg-red-600 text-white font-medium hover:bg-red-700"
                      >
                        {busyId === u.id ? '…' : 'Yes'}
                      </button>
                      <button
                        disabled={busyId === u.id}
                        onClick={() => setConfirmDeleteId(null)}
                        className="text-xs px-2 py-0.5 rounded border border-gray-300 text-gray-600 hover:bg-gray-50"
                      >
                        No
                      </button>
                    </span>
                  ) : (
                    <button
                      disabled={busyId === u.id}
                      onClick={() => setConfirmDeleteId(u.id)}
                      className="text-xs px-2 py-1 rounded text-red-600 hover:bg-red-50 font-medium"
                    >
                      Delete
                    </button>
                  )}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}