'use client'

import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import { authFetch, getApiBase, getToken } from '../lib/auth'
import AdminShell from '../ui/AdminShell'
import { CONFIG_GROUPS, serviceStatusLabel } from './configNavigation'

type ServiceState = { name: string; status: string }

export default function AdminLandingPage() {
  const router = useRouter()
  const [services, setServices] = useState<ServiceState[]>([])
  const [ready, setReady] = useState(false)
  const [error, setError] = useState('')

  useEffect(() => {
    let active = true
    const load = async () => {
      if (!getToken()) { router.replace('/login'); return }
      try {
        const response = await authFetch(`${getApiBase()}/auth/me`)
        if (!response.ok) { router.replace('/login'); return }
        if ((await response.json())?.role !== 'admin') { router.replace('/'); return }
        if (!active) return
        setReady(true)
        const status = await authFetch(`${getApiBase()}/status/services`)
        if (!status.ok) throw new Error('Status unavailable')
        const data = await status.json()
        if (active) setServices(Array.isArray(data.services) ? data.services : [])
      } catch {
        if (active) setError('Connection status is unavailable. Refresh the page to try again.')
      }
    }
    void load()
    return () => { active = false }
  }, [router])

  return (
    <AdminShell title="Settings" subtitle="Connections, access and the way Magent works.">
      {!ready ? error ? <p className="error-banner" role="alert">{error}</p> : <p role="status">Loading settings…</p> : (
        <div className="config-directory">
          {error && <p className="error-banner" role="alert">{error}</p>}
          {CONFIG_GROUPS.filter((group) => !group.advanced).map((group) => (
            <section className="config-directory-region" key={group.title}>
              <header><h2>{group.title}</h2><p>{group.description}</p></header>
              <div className="config-directory-links">
                {group.items.map((item) => {
                  const service = services.find((entry) => entry.name.toLowerCase() === item.service?.toLowerCase())
                  return (
                    <a href={item.href} key={item.href} className="config-directory-link">
                      {item.symbol && <span className="config-link-icon" aria-hidden="true">{item.symbol}</span>}
                      <span className="config-link-copy"><strong>{item.label}</strong><small>{item.description}</small></span>
                      {item.service && <span className={`config-connection-badge is-${service?.status ?? 'unknown'}`}>{serviceStatusLabel(service?.status)}</span>}
                      <span className="config-link-arrow" aria-hidden="true">→</span>
                    </a>
                  )
                })}
              </div>
            </section>
          ))}
          <details className="config-advanced-directory">
            <summary><strong>Advanced tools</strong><span>Hosting, logs, caches and recovery</span></summary>
            <div className="config-directory-links">
              {CONFIG_GROUPS.filter((group) => group.advanced).flatMap((group) => group.items).map((item) => (
                <a href={item.href} key={item.href} className="config-directory-link">
                  <span className="config-link-copy"><strong>{item.label}</strong><small>{item.description}</small></span>
                  <span className="config-link-arrow" aria-hidden="true">→</span>
                </a>
              ))}
            </div>
          </details>
        </div>
      )}
    </AdminShell>
  )
}