/*
Copyright (C) 2023-2026 QuantumNous

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.

For commercial licensing, please contact support@quantumnous.com
*/
import { Link } from '@tanstack/react-router'
import { useTranslation } from 'react-i18next'

import { Skeleton } from '@/components/ui/skeleton'
import { useSystemConfig } from '@/hooks/use-system-config'

type AuthLayoutProps = {
  children: React.ReactNode
}

export function AuthLayout({ children }: AuthLayoutProps) {
  const { t } = useTranslation()
  const { systemName, logo, loading } = useSystemConfig()

  return (
    <div className='bg-background grid min-h-svh lg:grid-cols-[minmax(0,1.45fr)_minmax(460px,0.85fr)]'>
      <section className='relative hidden min-h-svh overflow-hidden bg-[#0f3470] text-white lg:flex'>
        <div
          aria-hidden
          className='absolute inset-0'
          style={{
            background:
              'radial-gradient(circle at 18% 12%, rgba(96,165,250,0.26), transparent 34%), radial-gradient(circle at 76% 78%, rgba(14,165,233,0.34), transparent 42%), linear-gradient(135deg, #0b2348 0%, #123e80 54%, #1677ff 100%)',
          }}
        />
        <div
          aria-hidden
          className='absolute inset-0 opacity-[0.16]'
          style={{
            backgroundImage:
              'linear-gradient(rgba(255,255,255,0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.18) 1px, transparent 1px)',
            backgroundSize: '48px 48px',
          }}
        />

        <div className='relative z-10 mx-auto flex w-full max-w-2xl flex-col items-center justify-center px-12 text-center'>
          <Link
            to='/'
            className='mb-10 flex flex-col items-center gap-5 transition-opacity hover:opacity-90'
          >
            <div className='relative flex h-18 w-18 items-center justify-center rounded-2xl bg-white/10 shadow-2xl shadow-blue-950/30 ring-1 ring-white/20 backdrop-blur'>
              {loading ? (
                <Skeleton className='absolute inset-0 rounded-2xl bg-white/20' />
              ) : (
                <img
                  src={logo}
                  alt={t('Logo')}
                  className='h-12 w-12 rounded-xl object-cover'
                />
              )}
            </div>
            {loading ? (
              <Skeleton className='h-8 w-44 bg-white/20' />
            ) : (
              <h1 className='text-3xl font-semibold tracking-wide'>
                {systemName}
              </h1>
            )}
          </Link>

          <p className='text-base font-medium text-blue-50/90'>
            企业级 AI 能力与运营管理平台
          </p>

          <div className='mt-14 grid grid-cols-4 gap-8 text-sm text-blue-50/90'>
            {[
              ['🔐', '安全访问'],
              ['📊', '精准计量'],
              ['🛡️', '合规治理'],
              ['⚡', '智能调度'],
            ].map(([icon, label]) => (
              <div key={label} className='flex flex-col items-center gap-3'>
                <span className='text-3xl'>{icon}</span>
                <span>{label}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <div className='relative flex min-h-svh items-center justify-center px-5 py-10 sm:px-8 lg:px-12'>
        <Link
          to='/'
          className='absolute top-5 left-5 flex items-center gap-2 transition-opacity hover:opacity-80 lg:hidden'
        >
          <div className='relative h-8 w-8'>
            {loading ? (
              <Skeleton className='absolute inset-0 rounded-full' />
            ) : (
              <img
                src={logo}
                alt={t('Logo')}
                className='h-8 w-8 rounded-full object-cover'
              />
            )}
          </div>
          {loading ? (
            <Skeleton className='h-6 w-24' />
          ) : (
            <h1 className='text-xl font-medium'>{systemName}</h1>
          )}
        </Link>

        <div className='w-full max-w-[360px] pt-14 sm:pt-0'>{children}</div>
      </div>
    </div>
  )
}
