'use client'

import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import Link from 'next/link'
import { authFetch, clearToken, getApiBase, getToken } from '../lib/auth'
import AdminShell from '../ui/AdminShell'

type AdminUser = {
  id: number
  username: string
  role: string
  authProvider?: string | null
  lastLoginAt?: string | null
  isBlocked?: boolean
  autoSearchEnabled?: boolean
  profileId?: number | null
  expiresAt?: string | null
  isExpired?: boolean
  stats?: UserStats
}

type UserStats = {
  total: number
  ready: number
  pending: number
  approved: number
  working: number
  partial: number
  declined: number
  in_progress: number
  last_request_at?: string | null
}

const formatLastLogin = (value?: string | null) => {
  if (!value) return 'Never'
  const date = new Date(value)
  if (Number.isNaN(date.valueOf())) return value
  return date.toLocaleString()
}

const formatLastRequest = (value?: string | null) => {
  if (!value) return '—'
  const date = new Date(value)
  if (Number.isNaN(date.valueOf())) return value
  return date.toLocaleString()
}

const formatExpiry = (value?: string | null) => {
  if (!value) return 'Never'
  const date = new Date(value)
  if (Number.isNaN(date.valueOf())) return value
  return date.toLocaleString()
}

const emptyStats: UserStats = {
  total: 0,
  ready: 0,
  pending: 0,
  approved: 0,
  working: 0,
  partial: 0,
  declined: 0,
  in_progress: 0,
  last_request_at: null,
}

const normalizeStats = (stats: any): UserStats => ({
  total: Number(stats?.total ?? 0),
  ready: Number(stats?.ready ?? 0),
  pending: Number(stats?.pending ?? 0),
  approved: Number(stats?.approved ?? 0),
  working: Number(stats?.working ?? 0),
  partial: Number(stats?.partial ?? 0),
  declined: Number(stats?.declined ?? 0),
  in_progress: Number(stats?.in_progress ?? 0),
  last_request_at: stats?.last_request_at ?? null,
})

export default function UsersPage() {
  const router = useRouter()
  const [users, setUsers] = useState<AdminUser[]>([])
  const [error, setError] = useState<string | null>(null)
  const [loading, setLoading] = useState(true)
  const [query, setQuery] = useState('')
  const [jellyseerrSyncStatus, setJellyseerrSyncStatus] = useState<string | null>(null)
  const [jellyseerrSyncBusy, setJellyseerrSyncBusy] = useState(false)
  const [jellyseerrResyncBusy, setJellyseerrResyncBusy] = useState(false)
  const [bulkAutoSearchBusy, setBulkAutoSearchBusy] = useState(false)

  const loadUsers = async () => {
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(`${baseUrl}/admin/users/summary`)
      if (!response.ok) {
        if (response.status === 401) {
          clearToken()
          router.push('/login')
          return
        }
        if (response.status === 403) {
          router.push('/')
          return
        }
        throw new Error('Could not load users.')
      }
      const data = await response.json()
      if (Array.isArray(data?.users)) {
        setUsers(
          data.users.map((user: any) => ({
            username: user.username ?? 'Unknown',
            role: user.role ?? 'user',
            authProvider: user.auth_provider ?? 'local',
            lastLoginAt: user.last_login_at ?? null,
            isBlocked: Boolean(user.is_blocked),
            autoSearchEnabled: Boolean(user.auto_search_enabled ?? true),
            profileId:
              user.profile_id == null || Number.isNaN(Number(user.profile_id))
                ? null
                : Number(user.profile_id),
            expiresAt: user.expires_at ?? null,
            isExpired: Boolean(user.is_expired),
            id: Number(user.id ?? 0),
            stats: normalizeStats(user.stats ?? emptyStats),
          }))
        )
      } else {
        setUsers([])
      }
      setError(null)
    } catch (err) {
      console.error(err)
      setError('Could not load user list.')
    } finally {
      setLoading(false)
    }
  }

  const syncJellyseerrUsers = async () => {
    setJellyseerrSyncStatus(null)
    setJellyseerrSyncBusy(true)
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(`${baseUrl}/admin/jellyseerr/users/sync`, {
        method: 'POST',
      })
      if (!response.ok) {
        const text = await response.text()
        throw new Error(text || 'Sync failed')
      }
      const data = await response.json()
      setJellyseerrSyncStatus(
        `Matched ${data?.matched ?? 0} users. Skipped ${data?.skipped ?? 0}.`
      )
      await loadUsers()
    } catch (err) {
      console.error(err)
      setJellyseerrSyncStatus('Could not sync Seerr users.')
    } finally {
      setJellyseerrSyncBusy(false)
    }
  }

  const resyncJellyseerrUsers = async () => {
    const confirmed = window.confirm(
      'This will remove all non-admin users and re-import from Seerr. Continue?'
    )
    if (!confirmed) return
    setJellyseerrSyncStatus(null)
    setJellyseerrResyncBusy(true)
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(`${baseUrl}/admin/jellyseerr/users/resync`, {
        method: 'POST',
      })
      if (!response.ok) {
        const text = await response.text()
        throw new Error(text || 'Resync failed')
      }
      const data = await response.json()
      setJellyseerrSyncStatus(
        `Re-imported ${data?.imported ?? 0} users. Cleared ${data?.cleared ?? 0}.`
      )
      await loadUsers()
    } catch (err) {
      console.error(err)
      setJellyseerrSyncStatus('Could not resync Seerr users.')
    } finally {
      setJellyseerrResyncBusy(false)
    }
  }

  const bulkUpdateAutoSearch = async (enabled: boolean) => {
    setBulkAutoSearchBusy(true)
    setJellyseerrSyncStatus(null)
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(`${baseUrl}/admin/users/auto-search/bulk`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ enabled }),
      })
      if (!response.ok) {
        const text = await response.text()
        throw new Error(text || 'Bulk update failed')
      }
      const data = await response.json()
      setJellyseerrSyncStatus(
        `${enabled ? 'Enabled' : 'Disabled'} auto search/download for ${data?.updated ?? 0} non-admin users.`
      )
      await loadUsers()
    } catch (err) {
      console.error(err)
      setError('Could not update auto search/download for all users.')
    } finally {
      setBulkAutoSearchBusy(false)
    }
  }

  useEffect(() => {
    if (!getToken()) {
      router.push('/login')
      return
    }
    void loadUsers()
  }, [router])

  if (loading) {
    return <main className="card">Loading users...</main>
  }

  const nonAdminUsers = users.filter((user) => user.role !== 'admin')
  const autoSearchEnabledCount = nonAdminUsers.filter((user) => user.autoSearchEnabled !== false).length
  const blockedCount = users.filter((user) => user.isBlocked).length
  const expiredCount = users.filter((user) => user.isExpired).length
  const adminCount = users.filter((user) => user.role === 'admin').length
  const normalizedQuery = query.trim().toLowerCase()
  const filteredUsers = normalizedQuery
    ? users.filter((user) => {
        const fields = [
          user.username,
          user.role,
          user.authProvider || '',
          user.profileId != null ? String(user.profileId) : '',
        ]
        return fields.some((field) => field.toLowerCase().includes(normalizedQuery))
      })
    : users
  const filteredCountLabel =
    filteredUsers.length === users.length
      ? `${users.length} users`
      : `${filteredUsers.length} of ${users.length} users`
  const usersRail = (
    <div className="admin-rail-stack">
      <div className="admin-rail-card users-rail-summary">
        <div className="user-directory-panel-header">
          <div>
            <h2>Directory summary</h2>
            <p className="lede">A quick view of user access and account state.</p>
          </div>
        </div>
        <div className="users-summary-grid">
          <div className="users-summary-card">
            <div className="users-summary-row">
              <span className="users-summary-label">Total users</span>
              <strong className="users-summary-value">{users.length}</strong>
            </div>
            <p className="users-summary-meta">{adminCount} admin accounts</p>
          </div>
          <div className="users-summary-card">
            <div className="users-summary-row">
              <span className="users-summary-label">Auto search</span>
              <strong className="users-summary-value">{autoSearchEnabledCount}</strong>
            </div>
            <p className="users-summary-meta">of {nonAdminUsers.length} non-admin users enabled</p>
          </div>
          <div className="users-summary-card">
            <div className="users-summary-row">
              <span className="users-summary-label">Blocked</span>
              <strong className="users-summary-value">{blockedCount}</strong>
            </div>
            <p className="users-summary-meta">
              {blockedCount ? 'Accounts currently blocked' : 'No blocked users'}
            </p>
          </div>
          <div className="users-summary-card">
            <div className="users-summary-row">
              <span className="users-summary-label">Expired</span>
              <strong className="users-summary-value">{expiredCount}</strong>
            </div>
            <p className="users-summary-meta">
              {expiredCount ? 'Accounts with expired access' : 'No expiries'}
            </p>
          </div>
        </div>
      </div>
    </div>
  )

  return (
    <AdminShell
      title="Users"
      subtitle="Directory, access status, and request activity."
      rail={usersRail}
    >
      <section className="admin-section">
        <div className="admin-panel users-page-toolbar">
          <div className="users-page-toolbar-grid">
            <div className="users-page-toolbar-group">
              <span className="users-page-toolbar-label">Directory actions</span>
              <div className="users-page-toolbar-actions">
                <button
                  type="button"
                  className="ghost-button"
                  onClick={() => router.push('/admin/invites')}
                >
                  Invite management
                </button>
                <button type="button" onClick={loadUsers}>
                  Reload list
                </button>
              </div>
            </div>
            <div className="users-page-toolbar-group">
              <span className="users-page-toolbar-label">Seerr sync</span>
              <div className="users-page-toolbar-actions">
                <button type="button" onClick={syncJellyseerrUsers} disabled={jellyseerrSyncBusy}>
                  {jellyseerrSyncBusy ? 'Syncing Seerr users...' : 'Sync Seerr users'}
                </button>
                <button
                  type="button"
                  onClick={resyncJellyseerrUsers}
                  disabled={jellyseerrResyncBusy}
                >
                  {jellyseerrResyncBusy ? 'Resyncing Seerr users...' : 'Resync Seerr users'}
                </button>
              </div>
            </div>
          </div>
        </div>
        {error && <div className="error-banner">{error}</div>}
        {jellyseerrSyncStatus && <div className="status-banner">{jellyseerrSyncStatus}</div>}
        <div className="admin-panel user-directory-bulk-panel">
          <div className="user-directory-panel-header">
            <div>
              <h2>Bulk controls</h2>
              <p className="lede">
                Auto search/download can be enabled or disabled for all non-admin users.
              </p>
            </div>
          </div>
          <div className="user-bulk-toolbar">
            <div className="user-bulk-summary">
              <strong>Auto search/download</strong>
              <span>
                {autoSearchEnabledCount} of {nonAdminUsers.length} non-admin users enabled
              </span>
            </div>
            <div className="user-bulk-actions">
              <button
                type="button"
                onClick={() => bulkUpdateAutoSearch(true)}
                disabled={bulkAutoSearchBusy}
              >
                {bulkAutoSearchBusy ? 'Working...' : 'Enable for all users'}
              </button>
              <button
                type="button"
                className="ghost-button"
                onClick={() => bulkUpdateAutoSearch(false)}
                disabled={bulkAutoSearchBusy}
              >
                {bulkAutoSearchBusy ? 'Working...' : 'Disable for all users'}
              </button>
            </div>
          </div>
        </div>
        <div className="admin-panel user-directory-search-panel">
          <div className="user-directory-panel-header">
            <div>
              <h2>Directory search</h2>
              <p className="lede">
                Filter by username, role, login provider, or assigned profile.
              </p>
            </div>
            <span className="small-pill">{filteredCountLabel}</span>
          </div>
          <div className="user-directory-toolbar">
            <div className="user-directory-search">
              <label>
                <span className="user-bulk-label">Search users</span>
                <input
                  value={query}
                  onChange={(event) => setQuery(event.target.value)}
                  placeholder="Search username, login type, role, profile…"
                />
              </label>
            </div>
          </div>
        </div>
        {filteredUsers.length === 0 ? (
          <div className="status-banner">No users found yet.</div>
        ) : (
          <div className="user-directory-list">
            <div className="user-directory-header">
              <span>User</span>
              <span>Access</span>
              <span>Requests</span>
              <span>Activity</span>
            </div>
            {filteredUsers.map((user) => (
              <Link
                key={user.username}
                className="user-directory-row"
                href={`/users/${user.id}`}
              >
                <div className="user-directory-cell user-directory-cell--identity">
                  <div className="user-directory-title-row">
                    <strong>{user.username}</strong>
                    <span className="user-grid-meta">{user.role}</span>
                  </div>
                  <div className="user-directory-subtext">
                    Login: {user.authProvider || 'local'} • Profile: {user.profileId ?? 'None'}
                  </div>
                </div>
                <div className="user-directory-cell">
                  <div className="user-directory-pill-row">
                    <span className={`user-grid-pill ${user.isBlocked ? 'is-blocked' : ''}`}>
                      {user.isBlocked ? 'Blocked' : 'Active'}
                    </span>
                    <span
                      className={`user-grid-pill ${user.autoSearchEnabled === false ? 'is-disabled' : ''}`}
                    >
                      Auto {user.autoSearchEnabled === false ? 'Off' : 'On'}
                    </span>
                    <span className={`user-grid-pill ${user.isExpired ? 'is-blocked' : ''}`}>
                      {user.expiresAt ? (user.isExpired ? 'Expired' : 'Expiry set') : 'No expiry'}
                    </span>
                  </div>
                  <div className="user-directory-subtext">
                    {user.expiresAt ? `Expires: ${formatExpiry(user.expiresAt)}` : 'No account expiry'}
                  </div>
                </div>
                <div className="user-directory-cell">
                  <div className="user-directory-stats-inline">
                    <span><strong>{user.stats?.total ?? 0}</strong> total</span>
                    <span><strong>{user.stats?.ready ?? 0}</strong> ready</span>
                    <span><strong>{user.stats?.pending ?? 0}</strong> pending</span>
                    <span><strong>{user.stats?.in_progress ?? 0}</strong> in progress</span>
                  </div>
                </div>
                <div className="user-directory-cell">
                  <div className="user-directory-subtext">
                    Last login: {formatLastLogin(user.lastLoginAt)}
                  </div>
                  <div className="user-directory-subtext">
                    Last request: {formatLastRequest(user.stats?.last_request_at)}
                  </div>
                </div>
                <div className="user-directory-row-chevron" aria-hidden="true">
                  Open
                </div>
              </Link>
            ))}
          </div>
        )}
      </section>
    </AdminShell>
  )
}