import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { ApiHttpError } from '../../api/http'
import { fetchRfidComingSoon, type RfidComingSoonPayload } from '../../api/rfid'

const DEFAULT_TITLE = 'RFID — coming soon'
const DEFAULT_SUBTITLE = 'Tap-in and attendance hardware integration'
const DEFAULT_MESSAGE =
  'RFID-based check-in and related tools are not available in this web client yet. When the API is ready, copy and links shown here can be driven from the backend.'

/** CI `rfid/rfid_coming_soon.php` — optional JSON from `GET /api/v1/rfid/coming-soon`. */
export function RfidComingSoonPage() {
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [payload, setPayload] = useState<RfidComingSoonPayload | null>(null)

  useEffect(() => {
    let cancelled = false
    ;(async () => {
      setLoading(true)
      setError(null)
      try {
        const data = await fetchRfidComingSoon()
        if (!cancelled) setPayload(data)
      } catch (e) {
        if (cancelled) return
        if (e instanceof ApiHttpError && e.status === 404) {
          setPayload(null)
        } else {
          setError(e instanceof Error ? e.message : 'Unable to load.')
        }
      } finally {
        if (!cancelled) setLoading(false)
      }
    })()
    return () => {
      cancelled = true
    }
  }, [])

  const title =
    typeof payload?.title === 'string' && payload.title.trim() ? payload.title.trim() : DEFAULT_TITLE
  const subtitle =
    typeof payload?.subtitle === 'string' && payload.subtitle.trim()
      ? payload.subtitle.trim()
      : DEFAULT_SUBTITLE
  const message =
    typeof payload?.message === 'string' && payload.message.trim()
      ? payload.message.trim()
      : DEFAULT_MESSAGE

  return (
    <div className="container-fluid px-0">
      <div className="row justify-content-center px-2">
        <div className="col-12 col-lg-8 col-xl-7">
          <div className="card border-0 rounded-3 shadow-sm mt-4 mb-4">
            <div className="card-body p-4 p-md-5">
              <h1 className="h3 mb-2">{title}</h1>
              <p className="text-muted mb-4">{subtitle}</p>

              {loading ? <p className="text-muted mb-0">Loading…</p> : null}

              {error ? <div className="alert alert-danger">{error}</div> : null}

              {!loading && !error ? (
                <>
                  <p className="mb-4">{message}</p>
                  <p className="small text-muted mb-3">
                    API: <code>GET /api/v1/rfid/coming-soon</code> (JWT{' '}
                    <code>Authorization: Bearer</code>). See{' '}
                    <Link to="/docs">API docs</Link> for the contract your Laravel app exposes.
                  </p>
                </>
              ) : null}

              <div className="d-flex flex-wrap gap-2">
                <Link to="/app/home" className="btn btn-primary">
                  Back to home
                </Link>
                <Link to="/docs" className="btn btn-outline-secondary">
                  Open API docs
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
