'use client'

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

type ProfileInfo = {
  username: string
  role: string
  auth_provider: string
  invite_management_enabled?: boolean
  password_change_supported?: boolean
  password_provider?: 'local' | 'jellyfin' | null
}

type ProfileStats = {
  total: number
  ready: number
  pending: number
  in_progress: number
  declined: number
  working: number
  partial: number
  approved: number
  last_request_at?: string | null
  share: number
  global_total: number
  most_active_user?: { username: string; total: number } | null
}

type ActivityEntry = {
  ip: string
  user_agent: string
  first_seen_at: string
  last_seen_at: string
  hit_count: number
}

type ProfileActivity = {
  last_ip?: string | null
  last_user_agent?: string | null
  last_seen_at?: string | null
  device_count: number
  recent: ActivityEntry[]
}

type ProfileResponse = {
  user: ProfileInfo
  stats: ProfileStats
  activity: ProfileActivity
}

type ProfileTab = 'overview' | 'activity' | 'security'

const normalizeProfileTab = (value?: string | null): ProfileTab => {
  if (value === 'activity' || value === 'security') {
    return value
  }
  return 'overview'
}

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

const parseBrowser = (agent?: string | null) => {
  if (!agent) return 'Unknown'
  const value = agent.toLowerCase()
  if (value.includes('edg/')) return 'Edge'
  if (value.includes('chrome/') && !value.includes('edg/')) return 'Chrome'
  if (value.includes('firefox/')) return 'Firefox'
  if (value.includes('safari/') && !value.includes('chrome/')) return 'Safari'
  return 'Unknown'
}

export default function ProfilePage() {
  const router = useRouter()
  const [profile, setProfile] = useState<ProfileInfo | null>(null)
  const [stats, setStats] = useState<ProfileStats | null>(null)
  const [activity, setActivity] = useState<ProfileActivity | null>(null)
  const [currentPassword, setCurrentPassword] = useState('')
  const [newPassword, setNewPassword] = useState('')
  const [confirmPassword, setConfirmPassword] = useState('')
  const [status, setStatus] = useState<{ tone: 'status' | 'error'; message: string } | null>(null)
  const [activeTab, setActiveTab] = useState<ProfileTab>('overview')
  const [loading, setLoading] = useState(true)

  const inviteLink = useMemo(() => '/profile/invites', [])

  useEffect(() => {
    if (typeof window === 'undefined') return
    const syncTabFromLocation = () => {
      const params = new URLSearchParams(window.location.search)
      setActiveTab(normalizeProfileTab(params.get('tab')))
    }
    syncTabFromLocation()
    window.addEventListener('popstate', syncTabFromLocation)
    return () => window.removeEventListener('popstate', syncTabFromLocation)
  }, [])

  const selectTab = (tab: ProfileTab) => {
    setActiveTab(tab)
    router.replace(tab === 'overview' ? '/profile' : `/profile?tab=${tab}`)
  }

  useEffect(() => {
    if (!getToken()) {
      router.push('/login')
      return
    }
    const load = async () => {
      try {
        const baseUrl = getApiBase()
        const profileResponse = await authFetch(`${baseUrl}/auth/profile`)
        if (!profileResponse.ok) {
          clearToken()
          router.push('/login')
          return
        }
        const data = (await profileResponse.json()) as ProfileResponse
        const user = data?.user ?? {}
        setProfile({
          username: user?.username ?? 'Unknown',
          role: user?.role ?? 'user',
          auth_provider: user?.auth_provider ?? 'local',
          invite_management_enabled: Boolean(user?.invite_management_enabled ?? false),
          password_change_supported: Boolean(user?.password_change_supported ?? false),
          password_provider:
            user?.password_provider === 'jellyfin' || user?.password_provider === 'local'
              ? user.password_provider
              : null,
        })
        setStats(data?.stats ?? null)
        setActivity(data?.activity ?? null)
      } catch (err) {
        console.error(err)
        setStatus({ tone: 'error', message: 'Could not load your profile.' })
      } finally {
        setLoading(false)
      }
    }
    void load()
  }, [router])

  const submit = async (event: React.FormEvent) => {
    event.preventDefault()
    setStatus(null)
    if (!currentPassword || !newPassword) {
      setStatus({ tone: 'error', message: 'Enter your current password and a new password.' })
      return
    }
    if (newPassword !== confirmPassword) {
      setStatus({ tone: 'error', message: 'New password and confirmation do not match.' })
      return
    }
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(`${baseUrl}/auth/password`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          current_password: currentPassword,
          new_password: newPassword,
        }),
      })
      if (!response.ok) {
        let detail = 'Update failed'
        try {
          const payload = await response.json()
          if (typeof payload?.detail === 'string' && payload.detail.trim()) {
            detail = payload.detail
          }
        } catch {
          const text = await response.text().catch(() => '')
          if (text?.trim()) detail = text
        }
        throw new Error(detail)
      }
      const data = await response.json().catch(() => ({}))
      setCurrentPassword('')
      setNewPassword('')
      setConfirmPassword('')
      setStatus({
        tone: 'status',
        message:
          data?.provider === 'jellyfin'
            ? 'Password updated across Jellyfin and Magent. Seerr continues to use the same Jellyfin password.'
            : 'Password updated.',
      })
    } catch (err) {
      console.error(err)
      if (err instanceof Error && err.message) {
        setStatus({ tone: 'error', message: `Could not update password. ${err.message}` })
      } else {
        setStatus({ tone: 'error', message: 'Could not update password. Check your current password.' })
      }
    }
  }

  const authProvider = profile?.auth_provider ?? 'local'
  const passwordProvider = profile?.password_provider ?? (authProvider === 'jellyfin' ? 'jellyfin' : 'local')
  const canManageInvites = profile?.role === 'admin' || Boolean(profile?.invite_management_enabled)
  const canChangePassword = Boolean(profile?.password_change_supported ?? (authProvider === 'local' || authProvider === 'jellyfin'))
  const securityHelpText =
    passwordProvider === 'jellyfin'
      ? 'Reset your password here once. Magent updates Jellyfin directly, Seerr continues to use Jellyfin authentication, and Magent keeps the same password in sync.'
      : passwordProvider === 'local'
        ? 'Change your Magent account password.'
        : 'Password changes are not available for this sign-in provider.'

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

  return (
    <main className="card">
      <div className="user-directory-panel-header profile-page-header">
        <div>
          <h1>My profile</h1>
          <p className="lede">Review your account, activity, and security settings.</p>
        </div>
        {canManageInvites || canChangePassword ? (
          <div className="admin-inline-actions">
            {canManageInvites ? (
              <button type="button" className="ghost-button" onClick={() => router.push(inviteLink)}>
                Open invite page
              </button>
            ) : null}
            {canChangePassword ? (
              <button type="button" onClick={() => selectTab('security')}>
                {passwordProvider === 'jellyfin' ? 'Reset Jellyfin password' : 'Change password'}
              </button>
            ) : null}
          </div>
        ) : null}
      </div>

      {profile && (
        <div className="status-banner">
          Signed in as <strong>{profile.username}</strong> ({profile.role}). Login type:{' '}
          {profile.auth_provider}.
        </div>
      )}

      <div className="profile-tabbar">
        <div className="admin-segmented" role="tablist" aria-label="Profile sections">
          <button
            type="button"
            role="tab"
            aria-selected={activeTab === 'overview'}
            className={activeTab === 'overview' ? 'is-active' : ''}
            onClick={() => selectTab('overview')}
          >
            Overview
          </button>
          <button
            type="button"
            role="tab"
            aria-selected={activeTab === 'activity'}
            className={activeTab === 'activity' ? 'is-active' : ''}
            onClick={() => selectTab('activity')}
          >
            Activity
          </button>
          {canManageInvites ? (
            <button type="button" role="tab" aria-selected={false} onClick={() => router.push(inviteLink)}>
              My invites
            </button>
          ) : null}
          <button
            type="button"
            role="tab"
            aria-selected={activeTab === 'security'}
            className={activeTab === 'security' ? 'is-active' : ''}
            onClick={() => selectTab('security')}
          >
            Password
          </button>
        </div>
      </div>

      {activeTab === 'overview' && (
        <section className="profile-section profile-tab-panel">
          {canManageInvites ? (
            <div className="profile-quick-link-card">
              <div>
                <h2>Invite tools</h2>
                <p className="lede">
                  Create invite links, send them by email, and track who you have invited from a dedicated page.
                </p>
              </div>
              <div className="admin-inline-actions">
                <button type="button" onClick={() => router.push(inviteLink)}>
                  Go to invites
                </button>
              </div>
            </div>
          ) : null}
          {canChangePassword ? (
            <div className="profile-quick-link-card">
              <div>
                <h2>{passwordProvider === 'jellyfin' ? 'Jellyfin password' : 'Password'}</h2>
                <p className="lede">
                  {passwordProvider === 'jellyfin'
                    ? 'Update your shared Jellyfin, Seerr, and Magent password without leaving Magent.'
                    : 'Update your Magent account password.'}
                </p>
              </div>
              <div className="admin-inline-actions">
                <button type="button" onClick={() => selectTab('security')}>
                  {passwordProvider === 'jellyfin' ? 'Reset Jellyfin password' : 'Change password'}
                </button>
              </div>
            </div>
          ) : null}
          <h2>Account stats</h2>
          <div className="stat-grid">
            <div className="stat-card">
              <div className="stat-label">Requests submitted</div>
              <div className="stat-value">{stats?.total ?? 0}</div>
            </div>
            <div className="stat-card">
              <div className="stat-label">Ready to watch</div>
              <div className="stat-value">{stats?.ready ?? 0}</div>
            </div>
            <div className="stat-card">
              <div className="stat-label">In progress</div>
              <div className="stat-value">{stats?.in_progress ?? 0}</div>
            </div>
            <div className="stat-card">
              <div className="stat-label">Pending approval</div>
              <div className="stat-value">{stats?.pending ?? 0}</div>
            </div>
            <div className="stat-card">
              <div className="stat-label">Declined</div>
              <div className="stat-value">{stats?.declined ?? 0}</div>
            </div>
            <div className="stat-card">
              <div className="stat-label">Working</div>
              <div className="stat-value">{stats?.working ?? 0}</div>
            </div>
            <div className="stat-card">
              <div className="stat-label">Partial</div>
              <div className="stat-value">{stats?.partial ?? 0}</div>
            </div>
            <div className="stat-card">
              <div className="stat-label">Approved</div>
              <div className="stat-value">{stats?.approved ?? 0}</div>
            </div>
            <div className="stat-card">
              <div className="stat-label">Last request</div>
              <div className="stat-value stat-value--small">
                {formatDate(stats?.last_request_at)}
              </div>
            </div>
            <div className="stat-card">
              <div className="stat-label">Share of all requests</div>
              <div className="stat-value">
                {stats?.global_total ? `${Math.round((stats.share || 0) * 1000) / 10}%` : '0%'}
              </div>
            </div>
            <div className="stat-card">
              <div className="stat-label">Total requests (global)</div>
              <div className="stat-value">{stats?.global_total ?? 0}</div>
            </div>
            {profile?.role === 'admin' ? (
              <div className="stat-card">
                <div className="stat-label">Most active user</div>
                <div className="stat-value stat-value--small">
                  {stats?.most_active_user
                    ? `${stats.most_active_user.username} (${stats.most_active_user.total})`
                    : 'N/A'}
                </div>
              </div>
            ) : null}
          </div>
        </section>
      )}

      {activeTab === 'activity' && (
        <section className="profile-section profile-tab-panel">
          <h2>Connection history</h2>
          <div className="status-banner">
            Last seen {formatDate(activity?.last_seen_at)} from {activity?.last_ip ?? 'Unknown'}.
          </div>
          <div className="connection-list">
            {(activity?.recent ?? []).map((entry, index) => (
              <div key={`${entry.ip}-${entry.last_seen_at}-${index}`} className="connection-item">
                <div>
                  <div className="connection-label">{parseBrowser(entry.user_agent)}</div>
                  <div className="meta">IP: {entry.ip}</div>
                  <div className="meta">First seen: {formatDate(entry.first_seen_at)}</div>
                  <div className="meta">Last seen: {formatDate(entry.last_seen_at)}</div>
                </div>
                <div className="connection-count">{entry.hit_count} visits</div>
              </div>
            ))}
            {activity && activity.recent.length === 0 ? (
              <div className="status-banner">No connection history yet.</div>
            ) : null}
          </div>
        </section>
      )}

      {activeTab === 'security' && (
        <section className="profile-section profile-tab-panel">
          <h2>{passwordProvider === 'jellyfin' ? 'Jellyfin password reset' : 'Password'}</h2>
          <div className="status-banner">{securityHelpText}</div>
          {canChangePassword ? (
            <form onSubmit={submit} className="auth-form profile-security-form">
              <label>
                {passwordProvider === 'jellyfin' ? 'Current Jellyfin password' : 'Current password'}
                <input
                  type="password"
                  value={currentPassword}
                  onChange={(event) => setCurrentPassword(event.target.value)}
                  autoComplete="current-password"
                />
              </label>
              <label>
                {passwordProvider === 'jellyfin' ? 'New Jellyfin password' : 'New password'}
                <input
                  type="password"
                  value={newPassword}
                  onChange={(event) => setNewPassword(event.target.value)}
                  autoComplete="new-password"
                />
              </label>
              <label>
                Confirm new password
                <input
                  type="password"
                  value={confirmPassword}
                  onChange={(event) => setConfirmPassword(event.target.value)}
                  autoComplete="new-password"
                />
              </label>
              {status ? (
                <div className={status.tone === 'error' ? 'error-banner' : 'status-banner'}>
                  {status.message}
                </div>
              ) : null}
              <div className="auth-actions">
                <button type="submit">
                  {passwordProvider === 'jellyfin' ? 'Reset Jellyfin password' : 'Update password'}
                </button>
              </div>
            </form>
          ) : (
            <div className="status-banner">
              Password changes are not available for {authProvider} sign-in accounts from Magent.
            </div>
          )}
        </section>
      )}
    </main>
  )
}