import { useEffect, useState } from 'react'
import {
  QueryClient,
  QueryClientProvider,
  useQuery,
  useQueryClient,
} from '@tanstack/react-query'
import { WebVitalsBeacon, type VitalsReporter } from '@platform-modules/perf-react'
import { installPersistence } from '@platform-modules/query-react/persist'
import { QueryBoundary } from '@platform-modules/ui-primitives/QueryBoundary'

declare global {
  var IS_REACT_ACT_ENVIRONMENT: boolean | undefined
}

type Snapshot = {
  version: number
  rows: string[]
}

const QUERY_KEY = ['instant-load', 'snapshot'] as const
const SOURCE_KEY = 'instant-load:source-version'
const QUERY_IDENTITY = {
  identity: 'instant-load-smoke',
  buster: 't5',
}

function sleep(ms: number): Promise<void> {
  return new Promise((resolve) => {
    window.setTimeout(resolve, ms)
  })
}

function readSourceVersion(): number {
  const raw = window.localStorage.getItem(SOURCE_KEY)
  const version = raw == null ? 1 : Number.parseInt(raw, 10)
  return Number.isFinite(version) && version > 0 ? version : 1
}

function writeSourceVersion(version: number): void {
  window.localStorage.setItem(SOURCE_KEY, String(version))
}

async function fetchSnapshot(): Promise<Snapshot> {
  await sleep(750)
  const version = readSourceVersion()
  return {
    version,
    rows: [`Version ${version}`, `Row ${version}.1`, `Row ${version}.2`, `Row ${version}.3`],
  }
}

function ResultCard({ snapshot }: { snapshot: Snapshot }) {
  return (
    <section
      data-testid="query-result"
      style={{
        minHeight: '10rem',
        border: '1px solid #d7dce5',
        borderRadius: '16px',
        padding: '1rem',
        background: '#fff',
      }}
    >
      <p style={{ margin: 0, fontSize: '0.875rem', color: '#526071' }}>Cached query payload</p>
      <h2 style={{ margin: '0.5rem 0 0.75rem', fontSize: '1.5rem' }}>{snapshot.rows[0]}</h2>
      <ul style={{ margin: 0, paddingInlineStart: '1.25rem' }}>
        {snapshot.rows.slice(1).map((row) => (
          <li key={row}>{row}</li>
        ))}
      </ul>
    </section>
  )
}

function InstantLoadDemo({
  bootMode,
  cls,
  onBumpSource,
}: {
  bootMode: 'cold' | 'cached'
  cls: number
  onBumpSource: () => void
}) {
  const queryClient = useQueryClient()
  const [holdColdSkeleton, setHoldColdSkeleton] = useState(bootMode === 'cold')
  const [savedDataUpdatedAt, setSavedDataUpdatedAt] = useState(0)
  const snapshot = useQuery({
    queryKey: QUERY_KEY,
    queryFn: fetchSnapshot,
    staleTime: 0,
    gcTime: 60_000,
  })

  useEffect(() => {
    if (bootMode !== 'cold') {
      setHoldColdSkeleton(false)
      return
    }

    setHoldColdSkeleton(true)
    const timeout = window.setTimeout(() => {
      setHoldColdSkeleton(false)
    }, 1_000)
    return () => {
      window.clearTimeout(timeout)
    }
  }, [bootMode])

  useEffect(() => {
    if (snapshot.data !== undefined && snapshot.dataUpdatedAt > savedDataUpdatedAt) {
      setSavedDataUpdatedAt(snapshot.dataUpdatedAt)
    }
  }, [savedDataUpdatedAt, snapshot.data, snapshot.dataUpdatedAt])

  const visibleSnapshot =
    bootMode === 'cold' && snapshot.data !== undefined && snapshot.dataUpdatedAt > savedDataUpdatedAt
      ? { ...snapshot, data: undefined, isPending: true }
      : snapshot

  return (
    <main
      style={{
        minHeight: '100vh',
        margin: 0,
        padding: '2rem 1rem',
        background:
          'radial-gradient(circle at top, rgba(185, 221, 255, 0.55), rgba(243, 247, 251, 1) 55%)',
        color: '#112033',
        fontFamily: 'Georgia, serif',
      }}
    >
      <section
        style={{
          display: 'grid',
          gap: '1rem',
          maxWidth: '42rem',
          margin: '0 auto',
        }}
      >
        <header style={{ display: 'grid', gap: '0.5rem' }}>
          <p style={{ margin: 0, textTransform: 'uppercase', letterSpacing: '0.12em', fontSize: '0.75rem' }}>
            Instant load smoke
          </p>
          <h1 style={{ margin: 0, fontSize: 'clamp(2rem, 5vw, 3.25rem)' }}>Cold, cached, refresh</h1>
          <p style={{ margin: 0, maxWidth: '34rem', lineHeight: 1.5 }}>
            Query state restores from persisted storage, keeps cached content visible during refetch,
            and stays layout-stable while the refresh signal runs.
          </p>
        </header>

        <div
          style={{
            display: 'flex',
            gap: '0.75rem',
            flexWrap: 'wrap',
            alignItems: 'center',
          }}
        >
          <button data-testid="source-bump" type="button" onClick={onBumpSource}>
            Bump source
          </button>
          <button
            data-testid="query-refresh"
            type="button"
            onClick={() => {
              void queryClient.invalidateQueries({ queryKey: QUERY_KEY })
            }}
          >
            Refresh query
          </button>
          <span data-testid="boot-mode">{bootMode}</span>
          <span data-testid="cls-oracle" data-cls={cls.toFixed(4)}>
            CLS {cls.toFixed(4)}
          </span>
        </div>

        {holdColdSkeleton ? (
          <div
            data-testid="query-skeleton"
            style={{
              minHeight: '10rem',
              borderRadius: '16px',
              background: 'linear-gradient(90deg, #dce5ef 0%, #eef3f8 50%, #dce5ef 100%)',
            }}
          />
        ) : (
          <QueryBoundary
            query={visibleSnapshot}
            skeleton={
              <div
                data-testid="query-skeleton"
                style={{
                  minHeight: '10rem',
                  borderRadius: '16px',
                  background: 'linear-gradient(90deg, #dce5ef 0%, #eef3f8 50%, #dce5ef 100%)',
                }}
              />
            }
          >
            {(data) => <ResultCard snapshot={data} />}
          </QueryBoundary>
        )}
      </section>
    </main>
  )
}

export default function InstantLoadHarness() {
  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            retry: false,
          },
        },
      }),
  )
  const [ready, setReady] = useState(false)
  const [bootMode, setBootMode] = useState<'cold' | 'cached'>('cold')
  const [cls, setCls] = useState(0)

  useEffect(() => {
    if (window.localStorage.getItem(SOURCE_KEY) == null) {
      writeSourceVersion(1)
    }

    const uninstall = installPersistence(queryClient, {
      userId: QUERY_IDENTITY.identity,
      buster: QUERY_IDENTITY.buster,
      storage: window.localStorage,
      maxAgeMs: 60_000,
      throttleMs: 0,
    })

    setBootMode(queryClient.getQueryData(QUERY_KEY) === undefined ? 'cold' : 'cached')
    setReady(true)

    return uninstall
  }, [queryClient])

  const reporter: VitalsReporter = {
    report(metric) {
      if (metric.name === 'CLS') {
        setCls(metric.value)
      }
    },
  }

  if (!ready) {
    return (
      <main style={{ minHeight: '100vh', padding: '2rem 1rem', background: '#f3f7fb' }}>
        <div
          data-testid="query-skeleton"
          style={{
            minHeight: '10rem',
            maxWidth: '42rem',
            margin: '0 auto',
            borderRadius: '16px',
            background: 'linear-gradient(90deg, #dce5ef 0%, #eef3f8 50%, #dce5ef 100%)',
          }}
        />
      </main>
    )
  }

  return (
    <QueryClientProvider client={queryClient}>
      <WebVitalsBeacon reporter={reporter} />
      <InstantLoadDemo
        bootMode={bootMode}
        cls={cls}
        onBumpSource={() => {
          writeSourceVersion(readSourceVersion() + 1)
        }}
      />
    </QueryClientProvider>
  )
}