import { GraduationCap } from "lucide-react"

import { DEFAULT_BRAND_CONFIG, type BrandConfig } from "@/modules/settings/brand-config"

interface AuthLayoutProps {
  children: React.ReactNode
  /** audit-P2-6: 品牌配置（由 Server Component layout 注入，未配置时使用默认值） */
  brand?: BrandConfig
}

/**
 * 认证页面布局（audit-P2-6: 支持品牌配置注入）
 *
 * 品牌配置通过 props 注入，来源：
 * - `app/(auth)/layout.tsx`（Server Component）调用 `getBrandConfig()` 获取
 * - 未配置时使用 `DEFAULT_BRAND_CONFIG` 默认值
 */
export function AuthLayout({ children, brand = DEFAULT_BRAND_CONFIG }: AuthLayoutProps) {
  const { schoolName, logoUrl, testimonialQuote, testimonialAuthor } = brand

  return (
    <div className="container relative h-screen flex-col items-center justify-center grid lg:max-w-none lg:grid-cols-2 lg:px-0">
      <div className="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex">
        <div className="absolute inset-0 bg-zinc-900" />
        <div className="relative z-20 flex items-center text-lg font-medium">
          {logoUrl ? (
            // eslint-disable-next-line @next/next/no-img-element -- brand logo from admin config
            <img src={logoUrl} alt={schoolName} className="mr-2 h-6 w-6 object-contain" />
          ) : (
            <GraduationCap className="mr-2 h-6 w-6" />
          )}
          {schoolName}
        </div>
        <div className="relative z-20 mt-auto">
          <blockquote className="space-y-2">
            <p className="text-lg">
              &ldquo;{testimonialQuote}&rdquo;
            </p>
            <footer className="text-sm">{testimonialAuthor}</footer>
          </blockquote>
        </div>
      </div>
      <div className="lg:p-8">
        <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
          {children}
        </div>
      </div>
    </div>
  )
}