import React, { useEffect } from 'react'
import { createFileRoute } from '@tanstack/react-router'
import { useAuth } from '../lib/authContext'

export const Route = createFileRoute('/login')({
  validateSearch: (s: Record<string, unknown>) => ({
    return_to: typeof s['return_to'] === 'string' ? s['return_to'] : '/',
  }),
  component: LoginRoute,
})

function LoginRoute(): React.JSX.Element {
  const { signIn } = useAuth()
  const { return_to } = Route.useSearch()

  useEffect(() => {
    signIn(return_to)
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []) // mount-only: trigger redirect once

  return (
    <div
      className="body body-pad"
      style={{ display: 'flex', justifyContent: 'center', paddingTop: 60 }}
    >
      <div className="card" style={{ padding: '24px 32px', textAlign: 'center' }}>
        <div className="uppercase-mono" style={{ marginBottom: 8 }}>redirecting…</div>
        <div className="muted">Taking you to the sign-in page.</div>
      </div>
    </div>
  )
}