'use client'

import { useEffect, useState } from 'react'
import { authFetch, clearToken, getApiBase } from '../lib/auth'
import '../welcome.css'

export default function WelcomePage() {
  const [ready, setReady] = useState(false)
  const [url, setUrl] = useState<string | null>(null)
  const [error, setError] = useState('')
  useEffect(() => {
    const controller = new AbortController()
    void (async () => {
      try {
        const response = await authFetch(`${getApiBase()}/site/info`, { signal: controller.signal })
        if (response.status === 401) { clearToken(); window.location.replace('/login'); return }
        if (!response.ok) throw new Error('Unavailable')
        const data = await response.json()
        const candidate = data.mediaServerUrl ? new URL(data.mediaServerUrl) : null
        if (candidate && ['https:', 'http:'].includes(candidate.protocol) && !candidate.username && !candidate.password) setUrl(candidate.href)
        setReady(true)
      } catch {
        if (!controller.signal.aborted) setError('We couldn’t load your welcome page. Please try again.')
      }
    })()
    return () => controller.abort()
  }, [])
  return <main className="welcome-page">
    <header><span className="welcome-kicker">GrizzlyFlix + Magent</span><h1>Make yourself at home.</h1><p>Something to watch, or something to sort out?</p></header>
    {error ? <div role="alert"><p>{error}</p><button onClick={() => window.location.reload()}>Try again</button> <a href="/login">Back to sign in</a></div> : !ready ? <p role="status">Getting things ready…</p> : <div className="welcome-choices">
      {url ? <a className="welcome-choice" href={url}><span className="welcome-icon" aria-hidden="true">▷</span><h2>Go to GrizzlyFlix</h2><p>Find your next favourite. Watch movies and TV shows.</p><strong>Let’s watch <span aria-hidden="true">→</span></strong></a> : <section className="welcome-choice"><span className="welcome-icon" aria-hidden="true">▷</span><h2>Go to GrizzlyFlix</h2><p>The watch link hasn’t been set up yet. Please ask an admin to add the public playback URL.</p></section>}
      <a className="welcome-choice" href="/"><span className="welcome-icon" aria-hidden="true">☷</span><h2>Manage your account</h2><p>Track requests, report a problem, or update your profile.</p><strong>Open 01 My Requests <span aria-hidden="true">→</span></strong></a>
    </div>}
    <footer>First time here? <a href="/how-it-works">Here’s how it works</a>.</footer>
  </main>
}