'use client'

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

type TimelineHop = {
  service: string
  status: string
  details?: Record<string, any>
  timestamp?: string
}

type Snapshot = {
  request_id: string
  title: string
  year?: number
  request_type: string
  state: string
  state_reason?: string
  timeline: TimelineHop[]
  actions: { id: string; label: string; risk: string; requires_confirmation: boolean }[]
  artwork?: { poster_url?: string; backdrop_url?: string }
  raw?: Record<string, any>
}

type ReleaseOption = {
  title?: string
  indexer?: string
  indexerId?: number
  guid?: string
  size?: number
  seeders?: number
  leechers?: number
  protocol?: string
  infoUrl?: string
  downloadUrl?: string
}

type SnapshotHistory = {
  request_id: string
  state: string
  state_reason?: string
  created_at: string
}

type ActionHistory = {
  request_id: string
  action_id: string
  label: string
  status: string
  message?: string
  created_at: string
}

const percentFromTorrent = (torrent: Record<string, any>) => {
  const progress = Number(torrent.progress)
  if (!Number.isNaN(progress) && progress >= 0 && progress <= 1) {
    return Math.round(progress * 100)
  }
  const size = Number(torrent.size)
  const left = Number(torrent.amount_left)
  if (!Number.isNaN(size) && size > 0 && !Number.isNaN(left)) {
    return Math.round(((size - left) / size) * 100)
  }
  return null
}

const formatBytes = (value?: number) => {
  if (!value || Number.isNaN(value)) return 'n/a'
  const units = ['B', 'KB', 'MB', 'GB', 'TB']
  let size = value
  let idx = 0
  while (size >= 1024 && idx < units.length - 1) {
    size /= 1024
    idx += 1
  }
  return `${size.toFixed(1)} ${units[idx]}`
}

type SeasonStat = {
  seasonNumber: number
  available: number
  missing: number
}

const seasonStatsFromSeries = (series: Record<string, any>): SeasonStat[] => {
  const dateValue = series?.previousAiring ?? series?.firstAired
  const airedAt = dateValue ? new Date(dateValue) : null
  if (!airedAt || Number.isNaN(airedAt.valueOf()) || airedAt > new Date()) {
    return []
  }
  const seasons = Array.isArray(series?.seasons) ? series.seasons : []
  return seasons
    .filter((season: Record<string, any>) => season?.monitored === true)
    .map((season: Record<string, any>) => {
      const stats = season.statistics
      const available = stats && typeof stats === 'object' ? Number(stats.episodeFileCount) : NaN
      const aired = stats && typeof stats === 'object' ? Number(stats.episodeCount) : NaN
      const fallbackTotal =
        stats && typeof stats === 'object' ? Number(stats.totalEpisodeCount) : NaN
      const total = !Number.isNaN(aired) && aired > 0 ? aired : fallbackTotal
      const seasonDateValue = stats?.previousAiring ?? stats?.firstAired ?? null
      const seasonAiredAt = seasonDateValue ? new Date(seasonDateValue) : null
      if (
        !Number.isNaN(available) &&
        !Number.isNaN(total) &&
        total > 0 &&
        (!seasonAiredAt || Number.isNaN(seasonAiredAt.valueOf()) || seasonAiredAt <= new Date())
      ) {
        return {
          seasonNumber: season.seasonNumber,
          available,
          missing: Math.max(0, total - available),
        }
      }
      return null
    })
    .filter((season): season is SeasonStat => season !== null && season.missing > 0)
}

const friendlyState = (value: string) => {
  const map: Record<string, string> = {
    REQUESTED: 'Waiting for approval',
    APPROVED: 'Approved and queued',
    NEEDS_ADD: 'Needs adding to the library',
    ADDED_TO_ARR: 'Added to the library queue',
    SEARCHING: 'Searching for releases',
    GRABBED: 'Download queued',
    DOWNLOADING: 'Downloading',
    IMPORTING: 'Adding to your library',
    COMPLETED: 'Ready to watch',
    AVAILABLE: 'Ready to watch',
    FAILED: 'Needs attention',
    UNKNOWN: 'Status not available yet',
  }
  return map[value] ?? value.replaceAll('_', ' ').toLowerCase()
}

const friendlyTimelineStatus = (service: string, status: string) => {
  if (service === 'Jellyseerr') {
    const map: Record<string, string> = {
      Pending: 'Waiting for approval',
      Approved: 'Approved',
      Declined: 'Declined',
      Available: 'Ready to watch',
      Processing: 'Working on it',
      'Partially Available': 'Partially ready',
      'Waiting for approval': 'Waiting for approval',
      'Working on it': 'Working on it',
      'Partially ready': 'Partially ready',
      'Ready to watch': 'Ready to watch',
    }
    return map[status] ?? status
  }
  if (service === 'Sonarr/Radarr') {
    const map: Record<string, string> = {
      missing: 'Not added yet',
      added: 'Added to the library queue',
      searching: 'Searching for releases',
      available: 'Ready to watch',
      error: 'Needs attention',
      unknown: 'Checking…',
    }
    return map[status] ?? status
  }
  if (service === 'Prowlarr') {
    const map: Record<string, string> = {
      ok: 'Search sources OK',
      issues: 'Search sources need attention',
      error: 'Search sources unavailable',
    }
    return map[status] ?? status
  }
  if (service === 'qBittorrent') {
    const map: Record<string, string> = {
      downloading: 'Downloading',
      paused: 'Paused',
      completed: 'Content downloaded',
      idle: 'No active downloads',
      error: 'Downloader error',
    }
    return map[status] ?? status
  }
  if (service === 'Jellyfin') {
    const map: Record<string, string> = {
      available: 'Ready to watch',
      missing: 'Not in Jellyfin yet',
      error: 'Jellyfin unavailable',
    }
    return map[status] ?? status
  }
  return status
}

export default function RequestTimelinePage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [snapshot, setSnapshot] = useState<Snapshot | null>(null)
  const [loading, setLoading] = useState(true)
  const [showDetails, setShowDetails] = useState(false)
  const [actionMessage, setActionMessage] = useState<string | null>(null)
  const [releaseOptions, setReleaseOptions] = useState<ReleaseOption[]>([])
  const [searchRan, setSearchRan] = useState(false)
  const [modalMessage, setModalMessage] = useState<string | null>(null)
  const [historySnapshots, setHistorySnapshots] = useState<SnapshotHistory[]>([])
  const [historyActions, setHistoryActions] = useState<ActionHistory[]>([])

  useEffect(() => {
    const load = async () => {
      try {
        if (!getToken()) {
          router.push('/login')
          return
        }
        const baseUrl = getApiBase()
        const [snapshotResponse, historyResponse, actionsResponse] = await Promise.all([
          authFetch(`${baseUrl}/requests/${params.id}/snapshot`),
          authFetch(`${baseUrl}/requests/${params.id}/history?limit=5`),
          authFetch(`${baseUrl}/requests/${params.id}/actions?limit=5`),
        ])

        if (snapshotResponse.status === 401) {
          clearToken()
          router.push('/login')
          return
        }
        const snapshotData = await snapshotResponse.json()
        setSnapshot(snapshotData)
        setReleaseOptions([])
        setSearchRan(false)
        setModalMessage(null)

        if (historyResponse.ok) {
          const historyData = await historyResponse.json()
          if (Array.isArray(historyData.snapshots)) {
            setHistorySnapshots(historyData.snapshots)
          }
        }
        if (actionsResponse.ok) {
          const actionsData = await actionsResponse.json()
          if (Array.isArray(actionsData.actions)) {
            setHistoryActions(actionsData.actions)
          }
        }
      } catch (error) {
        console.error(error)
      } finally {
        setLoading(false)
      }
    }

    load()
  }, [params.id])

  if (loading) {
    return (
      <main className="card">
        <div className="loading-center" role="status" aria-live="polite">
          <div className="spinner" aria-hidden="true" />
          <div className="loading-text">Loading request timeline...</div>
        </div>
      </main>
    )
  }

  if (!snapshot) {
    return <main className="card">Could not load that request.</main>
  }

  const summary =
    snapshot.state_reason ??
    `This request is currently ${snapshot.state.replaceAll('_', ' ').toLowerCase()}.`

  const downloadHop = snapshot.timeline.find((hop) => hop.service === 'qBittorrent')
  const downloadState = downloadHop?.details?.summary ?? downloadHop?.status ?? 'Unknown'
  const jellyfinAvailable = Boolean(snapshot.raw?.jellyfin?.available)
  const pipelineSteps = [
    { key: 'Jellyseerr', label: 'Jellyseerr' },
    { key: 'Sonarr/Radarr', label: 'Library queue' },
    { key: 'Prowlarr', label: 'Search' },
    { key: 'qBittorrent', label: 'Download' },
    { key: 'Jellyfin', label: 'Jellyfin' },
  ]
  const stageFromState = (state: string) => {
    if (jellyfinAvailable || state === 'COMPLETED' || state === 'AVAILABLE') return 4
    if (state === 'DOWNLOADING' || state === 'IMPORTING') return 3
    if (state === 'GRABBED') return 2
    if (state === 'SEARCHING' || state === 'ADDED_TO_ARR' || state === 'NEEDS_ADD') return 1
    if (state === 'APPROVED' || state === 'REQUESTED') return 0
    return 1
  }
  const activeStage = stageFromState(snapshot.state)
  const extendedTimeline: TimelineHop[] = [
    ...snapshot.timeline,
    {
      service: 'Jellyfin',
      status: jellyfinAvailable ? 'available' : 'missing',
      details: snapshot.raw?.jellyfin ?? {},
    },
  ]
  const jellyfinLink = snapshot.raw?.jellyfin?.link
  const posterUrl = snapshot.artwork?.poster_url
  const resolvedPoster =
    posterUrl && posterUrl.startsWith('http') ? posterUrl : posterUrl ? `${getApiBase()}${posterUrl}` : null

  return (
    <main className="card">
      <div className="request-header">
        <div className="request-header-main">
          {resolvedPoster && (
            <img
              className="request-poster"
              src={resolvedPoster}
              alt={`${snapshot.title} poster`}
              loading="lazy"
            />
          )}
          <div>
            <h1>{snapshot.title}</h1>
            <div className="meta">{snapshot.request_type.toUpperCase()} {snapshot.year ?? ''}</div>
          </div>
        </div>
        {jellyfinAvailable && jellyfinLink && (
          <a className="ghost-button" href={jellyfinLink} target="_blank" rel="noreferrer">
            Open in Jellyfin
          </a>
        )}
      </div>

      <section className="status-box">
        <div>
          <h2>Status</h2>
          <p className="status-text">{friendlyState(snapshot.state)}</p>
        </div>
        <div>
          <h2>What this means</h2>
          <p>{summary}</p>
        </div>
        {(actionMessage || (searchRan && releaseOptions.length === 0)) && (
          <div>
            <h2>Last action</h2>
            {actionMessage && <p>{actionMessage}</p>}
            {searchRan && releaseOptions.length === 0 && (
              <p>Nothing to grab yet. We did not find a match on your torrent providers.</p>
            )}
          </div>
        )}
        <div>
          <h2>Current download state</h2>
          <p>{downloadState}</p>
        </div>
        <div>
          <h2>Next step</h2>
          <p>
            {snapshot.actions.length === 0
              ? 'Nothing to do right now.'
              : snapshot.actions[0].label}
          </p>
          <p className="helper">
            Use the buttons below if you want to run a safe retry or a fix.
          </p>
        </div>
      </section>

      <div className="details-toggle">
        <button type="button" onClick={() => setShowDetails((value) => !value)}>
          {showDetails ? 'Hide details' : 'Show details (advanced)'}
        </button>
      </div>

      <section className="pipeline-map">
        <h2>Pipeline location</h2>
        <div className="pipeline-steps">
          {pipelineSteps.map((step, index) => (
            <div
              key={step.key}
              className={`pipeline-step ${
                index === activeStage ? 'is-active' : index < activeStage ? 'is-complete' : ''
              }`}
            >
              <div className="pipeline-dot" />
              <span>{step.label}</span>
            </div>
          ))}
        </div>
        <p className="pipeline-hint">The glowing light shows where your request is right now.</p>
      </section>

      <section className="timeline">
        {extendedTimeline.map((hop, index) => (
          <div
            key={`${hop.service}-${index}`}
            className={`timeline-item ${
              hop.service === pipelineSteps[activeStage]?.key ? 'is-active' : ''
            }`}
          >
            <div className="timeline-marker" />
            <div className="timeline-card">
              <div className="timeline-title">
                <strong>{hop.service}</strong>
                <span>{friendlyTimelineStatus(hop.service, hop.status)}</span>
              </div>
              {hop.service === 'Sonarr/Radarr' && hop.details?.series && (() => {
                const seasons = seasonStatsFromSeries(hop.details.series)
                if (seasons.length === 0) {
                  return <div className="meta">Up to date</div>
                }
                return (
                  <div className="timeline-sublist">
                    <div className="meta">Seasons available vs missing</div>
                    <ul>
                      {seasons.map((season) => (
                        <li key={season.seasonNumber}>
                          <span>Season {season.seasonNumber}</span>
                          <span>{season.available} available / {season.missing} missing</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                )
              })()}
              {hop.service === 'Sonarr/Radarr' && hop.details?.missingEpisodes && (
                <div className="timeline-sublist">
                  <div className="meta">Missing episodes</div>
                  <ul>
                    {Object.entries(hop.details.missingEpisodes as Record<string, number[]>).map(
                      ([seasonNumber, episodes]) => (
                        <li key={seasonNumber}>
                          <span>Season {seasonNumber}</span>
                          <span>
                            {episodes.length
                              ? episodes.map((ep) => `E${ep}`).join(', ')
                              : 'Episode numbers unavailable'}
                          </span>
                        </li>
                      )
                    )}
                  </ul>
                </div>
              )}
              {hop.service === 'Sonarr/Radarr' && hop.details?.note && (
                <div className="meta">{hop.details.note}</div>
              )}
              {hop.service === 'qBittorrent' &&
                Array.isArray(hop.details?.torrents) &&
                hop.details.torrents.length > 0 && (
                  <div className="timeline-sublist">
                    <div className="meta">Downloads in qBittorrent</div>
                    <ul>
                      {hop.details.torrents.map((torrent: Record<string, any>) => {
                        const percent = percentFromTorrent(torrent)
                        return (
                          <li key={torrent.hash ?? torrent.name}>
                            <span>{torrent.name ?? 'Unknown item'}</span>
                            <span>{percent === null ? 'n/a' : `${percent}%`}</span>
                          </li>
                        )
                      })}
                    </ul>
                  </div>
                )}
              {showDetails && hop.details && (
                <pre>{JSON.stringify(hop.details, null, 2)}</pre>
              )}
            </div>
          </div>
        ))}
      </section>

      <section className="actions">
        <h2>Try a safe fix</h2>
        {actionMessage && <div className="action-message">{actionMessage}</div>}
        <div className="action-grid">
          {snapshot.actions.map((action) => (
            <button
              key={action.id}
              type="button"
              onClick={async () => {
                if (!snapshot) return
                if (action.requires_confirmation) {
                  const ok = window.confirm(
                    `Run "${action.label}"? This action may change system state.`
                  )
                  if (!ok) return
                }
                const baseUrl = getApiBase()
                const actionMap: Record<string, string> = {
                  search_releases: 'actions/search',
                  search_auto: 'actions/search_auto',
                  resume_torrent: 'actions/qbit/resume',
                  readd_to_arr: 'actions/readd',
                }
                const path = actionMap[action.id]
                if (!path) {
                  setActionMessage('This action is not wired yet.')
                  return
                }
                if (action.id === 'search_releases') {
                  setActionMessage(null)
                  setReleaseOptions([])
                  setSearchRan(false)
                  setModalMessage(null)
                }
                try {
                  const response = await authFetch(`${baseUrl}/requests/${snapshot.request_id}/${path}`, {
                    method: 'POST',
                  })
                  if (!response.ok) {
                    if (response.status === 401) {
                      clearToken()
                      router.push('/login')
                      return
                    }
                    const text = await response.text()
                    throw new Error(text || `Request failed: ${response.status}`)
                  }
                  const data = await response.json()
                  if (action.id === 'search_releases') {
                    if (Array.isArray(data.releases)) {
                      setReleaseOptions(data.releases)
                    }
                    setSearchRan(true)
                    if (!Array.isArray(data.releases) || data.releases.length === 0) {
                      setModalMessage(
                        'Nothing to grab yet. We searched your torrent providers but found no matches.'
                      )
                    } else {
                      setModalMessage('Search complete. Pick an option below if you want to download.')
                    }
                    setActionMessage(`${action.label} started.`)
                  } else if (action.id === 'search_auto') {
                    const message = data?.message ?? 'Search sent to Sonarr/Radarr.'
                    setActionMessage(message)
                    setModalMessage(message)
                  } else {
                    const message = data?.message ?? `${action.label} started.`
                    setActionMessage(message)
                    setModalMessage(message)
                  }
                } catch (error) {
                  console.error(error)
                  const message = `${action.label} failed. Check the backend logs.`
                  setActionMessage(message)
                  setModalMessage(message)
                }
              }}
            >
              {action.label}
              <span>
                {action.risk === 'low'
                  ? 'safe'
                  : action.risk === 'medium'
                    ? 'caution'
                    : action.risk === 'high'
                      ? 'high impact'
                      : action.risk}
              </span>
            </button>
          ))}
        </div>
        {releaseOptions.length > 0 && (
          <div className="timeline-sublist">
            <div className="meta">Download options found</div>
            <ul>
              {releaseOptions.map((release) => (
                <li key={`${release.guid ?? release.title}`}>
                  <span>
                    {release.title ?? 'Unknown option'}{' '}
                    <small>{release.indexer ? `(${release.indexer})` : ''}</small>
                  </span>
                  <span>{release.seeders ?? 0} seeders · {formatBytes(release.size)}</span>
                  <button
                    type="button"
                    disabled={!release.guid || !release.indexerId}
                    onClick={async () => {
                      if (!snapshot || !release.guid || !release.indexerId) {
                        setActionMessage('Missing details to start the download.')
                        setModalMessage('Missing details to start the download.')
                        return
                      }
                      const ok = window.confirm(`Download "${release.title}"?`)
                      if (!ok) return
                      const baseUrl = getApiBase()
                      try {
                        const response = await authFetch(
                          `${baseUrl}/requests/${snapshot.request_id}/actions/grab`,
                          {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify({
                              guid: release.guid,
                              indexerId: release.indexerId,
                              downloadUrl: release.downloadUrl,
                            }),
                          }
                        )
                        if (!response.ok) {
                          if (response.status === 401) {
                            clearToken()
                            router.push('/login')
                            return
                          }
                          const text = await response.text()
                          throw new Error(text || `Request failed: ${response.status}`)
                        }
                        setActionMessage('Download sent to Sonarr/Radarr.')
                        setModalMessage('Download sent to Sonarr/Radarr.')
                      } catch (error) {
                        console.error(error)
                        const message = 'Download failed. Check the logs.'
                        setActionMessage(message)
                        setModalMessage(message)
                      }
                    }}
                  >
                    Download
                  </button>
                </li>
              ))}
            </ul>
          </div>
        )}
      </section>

      <section className="history">
        <h2>History</h2>
        <div className="history-grid">
          <div className="summary-card">
            <h3>Recent status changes</h3>
            <ul>
              {historySnapshots.length === 0 ? (
                <li>No history recorded yet.</li>
              ) : (
                historySnapshots.map((entry) => (
                  <li key={`${entry.created_at}-${entry.state}`}>
                    <span>{entry.state.replaceAll('_', ' ')}</span>
                    <span>{entry.state_reason ?? 'No reason provided.'}</span>
                  </li>
                ))
              )}
            </ul>
          </div>
          <div className="summary-card">
            <h3>Recent actions</h3>
            <ul>
              {historyActions.length === 0 ? (
                <li>No actions recorded yet.</li>
              ) : (
                historyActions.map((entry) => (
                  <li key={`${entry.created_at}-${entry.action_id}`}>
                    <span>{entry.label}</span>
                    <span>{entry.message ?? entry.status}</span>
                  </li>
                ))
              )}
            </ul>
          </div>
        </div>
      </section>

      {modalMessage && (
        <div className="modal-backdrop" role="dialog" aria-modal="true">
          <div className="modal-card">
            <h2>Update</h2>
            <p>{modalMessage}</p>
            <button type="button" onClick={() => setModalMessage(null)}>
              Got it
            </button>
          </div>
        </div>
      )}
    </main>
  )
}