'use client'

import PageHeading from './ui/PageHeading'

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

const normalizeRecentResults = (items: any[]) =>
  items
    .filter((item: any) => item?.id)
    .map((item: any) => {
      const id = item.id
      const rawTitle = item.title
      const placeholder =
        typeof rawTitle === 'string' && rawTitle.trim().toLowerCase() === `request ${id}`
      return {
        id,
        title: !rawTitle || placeholder ? `Request #${id}` : rawTitle,
        year: item.year,
        type: item.type,
        statusLabel: item.statusLabel,
        artwork: item.artwork,
        createdAt: item.createdAt ?? null,
      }
    })

const REQUEST_STAGE_OPTIONS = [
  { value: 'all', label: 'All stages' },
  { value: 'pending', label: 'Waiting' },
  { value: 'approved', label: 'Approved' },
  { value: 'in_progress', label: 'In progress' },
  { value: 'working', label: 'Working' },
  { value: 'partial', label: 'Partial' },
  { value: 'ready', label: 'Ready' },
  { value: 'declined', label: 'Declined' },
]

export default function HomePage() {
  const router = useRouter()
  const [query, setQuery] = useState('')
  const [recent, setRecent] = useState<
    {
      id: number
      title: string
      year?: number
      type?: string
      statusLabel?: string
      artwork?: { poster_url?: string; backdrop_url?: string }
      createdAt?: string | null
    }[]
  >([])
  const [recentError, setRecentError] = useState<string | null>(null)
  const [recentLoading, setRecentLoading] = useState(false)
  const [searchResults, setSearchResults] = useState<
    {
      title: string
      year?: number
      type?: string
      requestId?: number
      statusLabel?: string
      requestedBy?: string | null
      accessible?: boolean
    }[]
  >([])
  const [searchError, setSearchError] = useState<string | null>(null)
  const [role, setRole] = useState<string | null>(null)
  const [recentDays, setRecentDays] = useState(90)
  const [recentStage, setRecentStage] = useState('all')
  const [authReady, setAuthReady] = useState(false)

  const submit = (event: React.FormEvent) => {
    event.preventDefault()
    const trimmed = query.trim()
    if (!trimmed) return
    if (/^\d+$/.test(trimmed)) {
      router.push(`/requests/${encodeURIComponent(trimmed)}`)
      return
    }
    void runSearch(trimmed)
  }

  useEffect(() => {
    if (!getToken()) {
      router.push('/login')
      return
    }
    const load = async () => {
      setRecentLoading(true)
      setRecentError(null)
      try {
        const baseUrl = getApiBase()
        const meResponse = await authFetch(`${baseUrl}/auth/me`)
        if (!meResponse.ok) {
          if (meResponse.status === 401) {
            clearToken()
            router.push('/login')
            return
          }
          throw new Error(`Auth failed: ${meResponse.status}`)
        }
        const me = await meResponse.json()
        const userRole = me?.role ?? null
        setRole(userRole)
        setAuthReady(true)
        const take = userRole === 'admin' ? 50 : 6
        const params = new URLSearchParams({
          take: String(take),
          days: String(recentDays),
        })
        if (recentStage !== 'all') {
          params.set('stage', recentStage)
        }
        const response = await authFetch(`${baseUrl}/requests/recent?${params.toString()}`)
        if (!response.ok) {
          if (response.status === 401) {
            clearToken()
            router.push('/login')
            return
          }
          throw new Error(`Recent requests failed: ${response.status}`)
        }
        const data = await response.json()
        if (Array.isArray(data?.results)) {
          setRecent(normalizeRecentResults(data.results))
        }
      } catch (error) {
        console.error(error)
        setRecentError('Recent requests are not available right now.')
      } finally {
        setRecentLoading(false)
      }
    }

    load()
  }, [recentDays, recentStage])

  useEffect(() => {
    if (!authReady) {
      return
    }
    if (!getToken()) {
      return
    }
    const baseUrl = getApiBase()
    let closed = false
    let source: EventSource | null = null

    const connect = async () => {
      try {
        const streamToken = await getEventStreamToken()
        if (closed) return
        const params = new URLSearchParams({
          stream_token: streamToken,
          recent_days: String(recentDays),
        })
        if (recentStage !== 'all') {
          params.set('recent_stage', recentStage)
        }
        const streamUrl = `${baseUrl}/events/stream?${params.toString()}`
        source = new EventSource(streamUrl)

        source.onmessage = (event) => {
          if (closed) return
          try {
            const payload = JSON.parse(event.data)
            if (!payload || typeof payload !== 'object') {
              return
            }
            if (payload.type === 'home_recent') {
              if (Array.isArray(payload.results)) {
                setRecent(normalizeRecentResults(payload.results))
                setRecentError(null)
                setRecentLoading(false)
              } else if (typeof payload.error === 'string' && payload.error.trim()) {
                setRecentError('Recent requests are not available right now.')
                setRecentLoading(false)
              }
              return
            }
          } catch (error) {
            console.error(error)
          }
        }

      } catch (error) {
        if (closed) return
        console.error(error)
      }
    }

    void connect()

    return () => {
      closed = true
      source?.close()
    }
  }, [authReady, recentDays, recentStage])

  const runSearch = async (term: string) => {
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(`${baseUrl}/requests/search?query=${encodeURIComponent(term)}`)
      if (!response.ok) {
        if (response.status === 401) {
          clearToken()
          router.push('/login')
          return
        }
        throw new Error(`Search failed: ${response.status}`)
      }
      const data = await response.json()
      if (Array.isArray(data?.results)) {
        setSearchResults(
            data.results.map((item: any) => ({
              title: item.title,
              year: item.year,
              type: item.type,
              requestId: item.requestId,
              statusLabel: item.statusLabel,
              requestedBy: item.requestedBy ?? null,
              accessible: Boolean(item.accessible),
            }))
          )
        setSearchError(null)
      }
    } catch (error) {
      console.error(error)
      setSearchError('Search failed. Try a request ID instead.')
      setSearchResults([])
    }
  }

  const resolveArtworkUrl = (url?: string | null) => {
    if (!url) return null
    return url.startsWith('http') ? url : `${getApiBase()}${url}`
  }

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

  const activeRecentCount = recent.filter((item) => {
    const label = String(item.statusLabel ?? '').toLowerCase()
    return !label.includes('ready') && !label.includes('available') && !label.includes('declined')
  }).length
  const readyRecentCount = recent.filter((item) => {
    const label = String(item.statusLabel ?? '').toLowerCase()
    return label.includes('ready') || label.includes('available')
  }).length

  const requestCardState = (value?: string) => {
    const label = String(value ?? '').toLowerCase()
    if (label.includes('partial')) return { key: 'attention', label: value || 'Partially ready', progress: 65 }
    if (!/not |unavailable|waiting/.test(label) && (label.includes('ready') || label.includes('available'))) return { key: 'ready', label: value || 'Ready', progress: 100 }
    if (label.includes('declined') || label.includes('failed') || label.includes('error')) return { key: 'attention', label: value || 'Needs attention', progress: 12 }
    if (label.includes('working') || label.includes('progress') || label.includes('download')) return { key: 'processing', label: value || 'In progress', progress: 58 }
    return { key: 'waiting', label: value || 'Waiting', progress: 4 }
  }

  return (
    <main className="card home-page">
      <PageHeading title="My requests" description="Follow your requests from collection to ready to watch." actions={
        <form onSubmit={submit} className="home-search">
          <label htmlFor="request-search">Title, year, or request number</label>
          <div className="home-search-row">
            <input
              id="request-search"
              value={query}
              onChange={(event) => setQuery(event.target.value)}
              placeholder="Dune 2021 or 1289"
            />
            <button type="submit">Find request</button>
          </div>
        </form>
      } />

      {(searchError || searchResults.length > 0) && (
        <section className="home-search-results" aria-live="polite">
          <div className="home-section-heading">
            <div>
              <span className="section-kicker">Search results</span>
              <h2>{searchError ? 'Search unavailable' : `${searchResults.length} match${searchResults.length === 1 ? '' : 'es'} found`}</h2>
            </div>
            <button type="button" className="ghost-button" onClick={() => {
              setSearchResults([])
              setSearchError(null)
            }}>
              Clear
            </button>
          </div>
          {searchError ? (
            <div className="error-banner">{searchError}</div>
          ) : (
            <div className="home-result-grid">
              {searchResults.map((item, index) => (
                <button
                  key={`${item.title || 'Untitled'}-${index}`}
                  type="button"
                  className="home-result-card"
                  disabled={!item.requestId}
                  onClick={() => item.requestId && router.push(`/requests/${item.requestId}`)}
                >
                  <span>
                    <strong>{item.title || 'Untitled'}{item.year ? ` (${item.year})` : ''}</strong>
                    <small>{item.type?.toUpperCase() || 'MEDIA'}</small>
                  </span>
                  <span>{!item.requestId ? 'Not requested' : item.statusLabel || 'Already requested'}</span>
                </button>
              ))}
            </div>
          )}
        </section>
      )}

      <section className="home-metric-strip" aria-label="Request summary">
        <div><span>In view</span><strong>{recent.length}</strong></div>
        <div><span>In progress</span><strong>{activeRecentCount}</strong></div>
        <div><span>Ready</span><strong>{readyRecentCount}</strong></div>
      </section>

      <section className="recent home-recent">
        <div className="recent-header home-section-heading">
          <div>
            <span className="section-kicker">Request activity</span>
            <h2>{role === 'admin' ? 'Recent requests' : 'My recent requests'}</h2>
          </div>
          {authReady && (
            <div className="recent-filter-group">
              <label className="recent-filter">
                <span>Period</span>
                <select value={recentDays} onChange={(event) => setRecentDays(Number(event.target.value))}>
                  <option value={0}>All time</option>
                  <option value={30}>30 days</option>
                  <option value={60}>60 days</option>
                  <option value={90}>90 days</option>
                  <option value={180}>180 days</option>
                </select>
              </label>
            </div>
          )}
        </div>
        {authReady && (
          <div className="request-filter-chips" aria-label="Filter requests by stage">
            {REQUEST_STAGE_OPTIONS.filter((option) => ['all', 'pending', 'in_progress', 'working', 'ready'].includes(option.value)).map((option) => (
              <button
                type="button"
                key={option.value}
                className={recentStage === option.value ? 'is-active' : undefined}
                onClick={() => setRecentStage(option.value)}
              >
                {option.value === 'working' ? <i aria-hidden="true" /> : null}
                {option.value === 'all' ? 'All' : option.label}
              </button>
            ))}
          </div>
        )}
        <div className="recent-grid home-recent-grid">
          {recentLoading ? (
            <div className="loading-center">
              <div className="spinner" aria-hidden="true" />
              <span className="loading-text">Loading recent requests...</span>
            </div>
          ) : recentError ? (
            <div className="error-banner">{recentError}</div>
          ) : recent.length === 0 ? (
            <div className="home-empty-state">
              <strong>No requests match these filters</strong>
              <span>Try a wider period or a different stage.</span>
            </div>
          ) : (
            recent.map((item) => (
              <button
                key={item.id}
                type="button"
                onClick={() => router.push(`/requests/${item.id}`)}
                className={`recent-card is-${requestCardState(item.statusLabel).key}`}
              >
                {item.artwork?.poster_url ? (
                  <img
                    className="recent-poster"
                    src={resolveArtworkUrl(item.artwork.poster_url) ?? ''}
                    alt=""
                    loading="lazy"
                  />
                ) : (
                  <span className="recent-poster recent-poster-placeholder" aria-hidden="true">#{item.id}</span>
                )}
                <span className="recent-info">
                  <span className="recent-title">{item.title || 'Untitled'}{item.year ? ` (${item.year})` : ''}</span>
                  <span className="recent-status-badge">
                    <span aria-hidden="true">{({ ready: '✓', processing: '↻', attention: '!', waiting: '◷' })[requestCardState(item.statusLabel).key]}</span>
                    {item.statusLabel || 'Status not available yet'}
                  </span>
                  <span className="recent-meta">
                    Request {item.id}
                    {item.createdAt ? ` · ${formatRequestTime(item.createdAt)}` : ''}
                  </span>
                </span>
                <span className="recent-open-cue" aria-hidden="true">Open</span>
              </button>
            ))
          )}
        </div>
      </section>
    </main>
  )
}