import { createFileRoute, Link } from '@tanstack/react-router'
import { useTranslation } from 'react-i18next'
import { Tv } from 'lucide-react'
import { useAuthStore } from '@/features/auth/store'
import { Button } from '@/shared/ui/button'

export const Route = createFileRoute('/')({ component: HomePage })

function HomePage() {
  const { t } = useTranslation()
  const { user } = useAuthStore()

  return (
    <div className="flex flex-col items-center gap-8 py-16 text-center">
      <div className="crt-panel flex h-40 w-full max-w-md items-center justify-center rounded-md">
        <Tv className="crt-glow h-16 w-16" strokeWidth={1} />
      </div>

      <div className="flex flex-col gap-2">
        <h1 className="crt-glow text-4xl font-bold tracking-[0.2em]">{t('home.title')}</h1>
        <p className="text-sm uppercase tracking-[0.3em] text-muted-foreground">
          {t('home.subtitle')}
        </p>
      </div>

      <p className="max-w-md text-muted-foreground">{t('home.tagline')}</p>

      <div className="flex gap-3">
        {user ? (
          <Button asChild size="lg">
            <Link to="/dashboard">{t('home.cta')}</Link>
          </Button>
        ) : (
          <>
            <Button asChild size="lg">
              <Link to="/login">{t('home.cta')}</Link>
            </Button>
            <Button asChild size="lg" variant="outline">
              <Link to="/register">{t('home.ctaRegister')}</Link>
            </Button>
          </>
        )}
      </div>
    </div>
  )
}