'use client'

import { useEffect, useMemo, useState } from 'react'
import { canAssignManagedRole, hasUserManagementAccess } from '@/lib/auth/roles'
import { createManagedUser, fetchManagedUsers, updateManagedUser } from '@/lib/users/api'
import type { AppUser, LeadRecord, ManagedUserRecord, TeamUserRecord, UserRole } from '@/lib/types'

interface TeamManagementViewProps {
  currentUser: AppUser
  users: TeamUserRecord[]
  leads: LeadRecord[]
  onOpenLibrary: () => void
  onUsersChanged: () => Promise<unknown> | void
}

type DraftMap = Record<string, { display_name: string; role: UserRole; team_slug: string }>

const ROLE_OPTIONS: UserRole[] = ['super_admin', 'admin', 'manager']

function formatDateTime(value: string | null): string {
  if (!value) return 'Never'

  return new Intl.DateTimeFormat('en', {
    dateStyle: 'medium',
    timeStyle: 'short',
  }).format(new Date(value))
}

export default function TeamManagementView({
  currentUser,
  users,
  leads,
  onOpenLibrary,
  onUsersChanged,
}: TeamManagementViewProps) {
  const [managedUsers, setManagedUsers] = useState<ManagedUserRecord[]>([])
  const [rowDrafts, setRowDrafts] = useState<DraftMap>({})
  const [passwordDrafts, setPasswordDrafts] = useState<Record<string, string>>({})
  const [loading, setLoading] = useState(true)
  const [creating, setCreating] = useState(false)
  const [savingUserId, setSavingUserId] = useState<string | null>(null)
  const [error, setError] = useState('')
  const [success, setSuccess] = useState('')
  const [newUser, setNewUser] = useState({
    email: '',
    display_name: '',
    password: '',
    role: currentUser.role === 'super_admin' ? 'admin' as UserRole : 'manager' as UserRole,
    team_slug: currentUser.team_slug,
  })

  const canManageUsers = hasUserManagementAccess(currentUser)

  useEffect(() => {
    if (!canManageUsers) {
      setLoading(false)
      return
    }

    setLoading(true)
    setError('')

    void fetchManagedUsers()
      .then(result => {
        setManagedUsers(result)
        setRowDrafts(Object.fromEntries(result.map(user => [user.id, {
          display_name: user.display_name,
          role: user.role,
          team_slug: user.team_slug,
        }])))
      })
      .catch(err => setError(err instanceof Error ? err.message : 'Unable to load users'))
      .finally(() => setLoading(false))
  }, [canManageUsers])

  const stats = useMemo(() => ({
    users: managedUsers.length || users.length,
    superAdmins: managedUsers.filter(user => user.role === 'super_admin').length,
    admins: managedUsers.filter(user => user.role === 'admin').length,
    managers: managedUsers.filter(user => user.role === 'manager').length || users.filter(user => user.role === 'manager').length,
    inactive: managedUsers.filter(user => !user.is_active).length,
    assigned: leads.filter(lead => Boolean(lead.assigned_to)).length,
  }), [leads, managedUsers, users])

  const setRowDraft = (userId: string, key: 'display_name' | 'role' | 'team_slug', value: string) => {
    setRowDrafts(prev => ({
      ...prev,
      [userId]: {
        display_name: prev[userId]?.display_name ?? '',
        role: (prev[userId]?.role ?? 'manager') as UserRole,
        team_slug: prev[userId]?.team_slug ?? 'core',
        [key]: value,
      },
    }))
  }

  const mergeUser = (updatedUser: ManagedUserRecord) => {
    setManagedUsers(prev => prev.map(user => user.id === updatedUser.id ? updatedUser : user))
    setRowDrafts(prev => ({
      ...prev,
      [updatedUser.id]: {
        display_name: updatedUser.display_name,
        role: updatedUser.role,
        team_slug: updatedUser.team_slug,
      },
    }))
  }

  const handleCreateUser = async (event: React.FormEvent) => {
    event.preventDefault()
    setCreating(true)
    setError('')
    setSuccess('')

    try {
      const created = await createManagedUser(newUser)
      setManagedUsers(prev => [created, ...prev])
      setRowDrafts(prev => ({
        ...prev,
        [created.id]: {
          display_name: created.display_name,
          role: created.role,
          team_slug: created.team_slug,
        },
      }))
      setNewUser({
        email: '',
        display_name: '',
        password: '',
        role: currentUser.role === 'super_admin' ? 'admin' : 'manager',
        team_slug: currentUser.team_slug,
      })
      await onUsersChanged()
      setSuccess(`User created: ${created.email}`)
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unable to create user')
    } finally {
      setCreating(false)
    }
  }

  const handleSaveProfile = async (user: ManagedUserRecord) => {
    const draft = rowDrafts[user.id]
    if (!draft) return

    setSavingUserId(user.id)
    setError('')
    setSuccess('')

    try {
      const updated = await updateManagedUser(user.id, {
        display_name: draft.display_name,
        role: draft.role,
        team_slug: draft.team_slug,
      })
      mergeUser(updated)
      await onUsersChanged()
      setSuccess(`Profile updated for ${updated.email}`)
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unable to update user')
    } finally {
      setSavingUserId(null)
    }
  }

  const handleToggleActive = async (user: ManagedUserRecord) => {
    setSavingUserId(user.id)
    setError('')
    setSuccess('')

    try {
      const updated = await updateManagedUser(user.id, {
        is_active: !user.is_active,
      })
      mergeUser(updated)
      await onUsersChanged()
      setSuccess(`${updated.email} is now ${updated.is_active ? 'active' : 'inactive'}.`)
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unable to update status')
    } finally {
      setSavingUserId(null)
    }
  }

  const handleResetPassword = async (user: ManagedUserRecord) => {
    const nextPassword = passwordDrafts[user.id]?.trim()
    if (!nextPassword) {
      setError('Enter a new password before resetting it.')
      return
    }

    setSavingUserId(user.id)
    setError('')
    setSuccess('')

    try {
      const updated = await updateManagedUser(user.id, {
        password: nextPassword,
      })
      mergeUser(updated)
      setPasswordDrafts(prev => ({ ...prev, [user.id]: '' }))
      setSuccess(`Password reset for ${updated.email}`)
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unable to reset password')
    } finally {
      setSavingUserId(null)
    }
  }

  if (!canManageUsers) {
    return (
      <div className="flex-1 flex items-center justify-center p-8">
        <div className="max-w-md rounded-2xl border border-[#574143]/10 bg-[#060e20] p-8 text-center">
          <span className="material-symbols-outlined text-5xl text-slate-700">lock</span>
          <p className="mt-4 text-base font-bold text-slate-200">User management is restricted to admin accounts.</p>
          <p className="mt-2 text-sm leading-relaxed text-slate-500">
            Managers can keep working in the lead library and CRM, but only admins can create accounts, assign roles, and reset passwords.
          </p>
          <button
            type="button"
            onClick={onOpenLibrary}
            className="mt-6 rounded-xl bg-[#131b2e] px-4 py-3 text-sm font-black text-slate-200 border border-[#574143]/10 hover:border-[#ffb2b9]/30"
          >
            Open Lead Library
          </button>
        </div>
      </div>
    )
  }

  return (
    <div className="flex-1 overflow-auto px-6 py-6 space-y-6">
      <div className="grid grid-cols-5 gap-3">
        {[
          ['Users', String(stats.users)],
          ['Super Admins', String(stats.superAdmins)],
          ['Admins', String(stats.admins)],
          ['Managers', String(stats.managers)],
          ['Inactive', String(stats.inactive)],
        ].map(([label, value]) => (
          <div key={label} className="rounded-xl border border-[#574143]/10 bg-[#060e20] p-4">
            <p className="mb-1 text-[10px] font-black uppercase tracking-widest text-slate-500">{label}</p>
            <p className="text-2xl font-black text-slate-100">{value}</p>
          </div>
        ))}
      </div>

      {(error || success) && (
        <div className={`rounded-xl border px-4 py-3 text-sm ${error ? 'border-red-500/20 bg-red-500/10 text-red-300' : 'border-[#22c55e]/20 bg-[#22c55e]/10 text-[#b7f5cf]'}`}>
          {error || success}
        </div>
      )}

      <form onSubmit={handleCreateUser} className="rounded-xl border border-[#574143]/10 bg-[#060e20] p-5">
        <div className="flex items-center justify-between mb-4">
          <div>
            <p className="text-[10px] font-black uppercase tracking-widest text-slate-500">Create User</p>
            <p className="text-sm text-slate-400">No public signup exists. New accounts are provisioned here by admins only.</p>
          </div>
          <button
            type="submit"
            disabled={creating}
            className="rounded-xl bg-gradient-to-br from-[#ffb2b9] to-[#fb7185] px-4 py-3 text-sm font-black text-[#6f0122] disabled:opacity-50"
          >
            {creating ? 'Creating...' : 'Create User'}
          </button>
        </div>

        <div className="grid grid-cols-5 gap-3">
          <input
            type="email"
            required
            value={newUser.email}
            onChange={event => setNewUser(prev => ({ ...prev, email: event.target.value }))}
            placeholder="Email"
            className="rounded-xl border border-[#574143]/10 bg-[#131b2e] px-3 py-3 text-sm text-slate-100"
          />
          <input
            type="text"
            required
            value={newUser.display_name}
            onChange={event => setNewUser(prev => ({ ...prev, display_name: event.target.value }))}
            placeholder="Display name"
            className="rounded-xl border border-[#574143]/10 bg-[#131b2e] px-3 py-3 text-sm text-slate-100"
          />
          <input
            type="password"
            required
            value={newUser.password}
            onChange={event => setNewUser(prev => ({ ...prev, password: event.target.value }))}
            placeholder="Initial password"
            className="rounded-xl border border-[#574143]/10 bg-[#131b2e] px-3 py-3 text-sm text-slate-100"
          />
          <select
            value={newUser.role}
            onChange={event => setNewUser(prev => ({ ...prev, role: event.target.value as UserRole }))}
            className="rounded-xl border border-[#574143]/10 bg-[#131b2e] px-3 py-3 text-sm text-slate-100"
          >
            {ROLE_OPTIONS.filter(role => canAssignManagedRole(currentUser.role, role)).map(role => (
              <option key={role} value={role}>{role}</option>
            ))}
          </select>
          <input
            type="text"
            value={newUser.team_slug}
            onChange={event => setNewUser(prev => ({ ...prev, team_slug: event.target.value }))}
            placeholder="Team slug"
            className="rounded-xl border border-[#574143]/10 bg-[#131b2e] px-3 py-3 text-sm text-slate-100"
          />
        </div>
      </form>

      <div className="rounded-xl border border-[#574143]/10 bg-[#060e20] overflow-hidden">
        <div className="flex items-center justify-between border-b border-[#574143]/10 px-4 py-3">
          <div>
            <p className="text-[10px] font-black uppercase tracking-widest text-slate-500">Internal User Directory</p>
            <p className="text-sm text-slate-400">Create accounts, change roles, deactivate access, and reset passwords from one place.</p>
          </div>
          <button
            type="button"
            onClick={onOpenLibrary}
            className="rounded-xl bg-[#131b2e] px-3 py-2 text-[11px] font-black uppercase tracking-widest text-slate-200 border border-[#574143]/10 hover:border-[#ffb2b9]/30"
          >
            Open Library
          </button>
        </div>

        {loading ? (
          <div className="p-8 text-center text-slate-500">Loading users...</div>
        ) : (
          <div className="overflow-auto">
            <table className="w-full text-left">
              <thead className="sticky top-0 z-10 bg-[#131b2e]">
                <tr>
                  {['User', 'Role', 'Team', 'Status', 'Last Login', 'Lead Load', 'Actions'].map(label => (
                    <th key={label} className="px-4 py-3 text-[10px] font-black uppercase tracking-widest text-slate-500">
                      {label}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {managedUsers.map(user => {
                  const draft = rowDrafts[user.id] ?? {
                    display_name: user.display_name,
                    role: user.role,
                    team_slug: user.team_slug,
                  }
                  const allowedRoleOptions = ROLE_OPTIONS.filter(role => canAssignManagedRole(currentUser.role, role))
                  const rowRoleOptions = allowedRoleOptions.includes(draft.role)
                    ? allowedRoleOptions
                    : [draft.role, ...allowedRoleOptions]

                  return (
                    <tr key={user.id} className="border-b border-[#574143]/5 align-top">
                      <td className="px-4 py-4 min-w-[260px]">
                        <div className="space-y-2">
                          <input
                            type="text"
                            value={draft.display_name}
                            onChange={event => setRowDraft(user.id, 'display_name', event.target.value)}
                            disabled={!user.can_manage}
                            className="w-full rounded-xl border border-[#574143]/10 bg-[#131b2e] px-3 py-2 text-sm text-slate-100 disabled:opacity-60"
                          />
                          <p className="text-[11px] text-slate-500">
                            {user.email}
                            {user.id === currentUser.id ? ' (You)' : ''}
                          </p>
                        </div>
                      </td>
                      <td className="px-4 py-4 min-w-[160px]">
                        <select
                          value={draft.role}
                          onChange={event => setRowDraft(user.id, 'role', event.target.value)}
                          disabled={!user.can_edit_role}
                          className="w-full rounded-xl border border-[#574143]/10 bg-[#131b2e] px-3 py-2 text-sm text-slate-100 disabled:opacity-60"
                        >
                          {rowRoleOptions.map(role => (
                            <option key={role} value={role}>{role}</option>
                          ))}
                        </select>
                      </td>
                      <td className="px-4 py-4 min-w-[140px]">
                        <input
                          type="text"
                          value={draft.team_slug}
                          onChange={event => setRowDraft(user.id, 'team_slug', event.target.value)}
                          disabled={!user.can_manage}
                          className="w-full rounded-xl border border-[#574143]/10 bg-[#131b2e] px-3 py-2 text-sm text-slate-100 disabled:opacity-60"
                        />
                      </td>
                      <td className="px-4 py-4 min-w-[130px]">
                        <span className={`inline-flex rounded-full px-3 py-1 text-[11px] font-black uppercase tracking-widest ${user.is_active ? 'bg-[#22c55e]/10 text-[#9fe8c4] border border-[#22c55e]/20' : 'bg-[#574143]/20 text-slate-400 border border-[#574143]/20'}`}>
                          {user.is_active ? 'Active' : 'Inactive'}
                        </span>
                      </td>
                      <td className="px-4 py-4 min-w-[160px] text-sm text-slate-400">
                        {formatDateTime(user.last_login_at)}
                      </td>
                      <td className="px-4 py-4 min-w-[150px]">
                        <div className="text-sm text-slate-200 font-bold">{user.owned_lead_count} owned</div>
                        <div className="text-[11px] text-slate-500">{user.assigned_lead_count} assigned</div>
                      </td>
                      <td className="px-4 py-4 min-w-[280px]">
                        <div className="space-y-2">
                          <div className="flex gap-2">
                            <button
                              type="button"
                              disabled={!user.can_manage || savingUserId === user.id}
                              onClick={() => void handleSaveProfile(user)}
                              className="rounded-xl bg-[#131b2e] px-3 py-2 text-[11px] font-black uppercase tracking-widest text-slate-100 border border-[#574143]/10 disabled:opacity-50"
                            >
                              Save
                            </button>
                            <button
                              type="button"
                              disabled={!user.can_toggle_active || savingUserId === user.id}
                              onClick={() => void handleToggleActive(user)}
                              className="rounded-xl bg-[#131b2e] px-3 py-2 text-[11px] font-black uppercase tracking-widest text-slate-100 border border-[#574143]/10 disabled:opacity-50"
                            >
                              {user.is_active ? 'Deactivate' : 'Activate'}
                            </button>
                          </div>
                          <div className="flex gap-2">
                            <input
                              type="password"
                              value={passwordDrafts[user.id] ?? ''}
                              onChange={event => setPasswordDrafts(prev => ({ ...prev, [user.id]: event.target.value }))}
                              disabled={!user.can_reset_password}
                              placeholder="New password"
                              className="flex-1 rounded-xl border border-[#574143]/10 bg-[#131b2e] px-3 py-2 text-sm text-slate-100 disabled:opacity-60"
                            />
                            <button
                              type="button"
                              disabled={!user.can_reset_password || savingUserId === user.id}
                              onClick={() => void handleResetPassword(user)}
                              className="rounded-xl bg-gradient-to-br from-[#ffb2b9] to-[#fb7185] px-3 py-2 text-[11px] font-black uppercase tracking-widest text-[#6f0122] disabled:opacity-50"
                            >
                              Reset
                            </button>
                          </div>
                        </div>
                      </td>
                    </tr>
                  )
                })}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  )
}