import { headers } from 'next/headers'
import { getServerDeviceId } from '@/lib/http/server'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

export default async function ServerDeviceTestPage() {
  // 获取请求头信息
  const headersList = await headers()
  const userAgent = headersList.get('user-agent')
  const xDeviceId = headersList.get('x-device-id')

  // 获取当前设备ID
  const currentDeviceId = await getServerDeviceId()

  return (
    <div className="container mx-auto space-y-6 p-6">
      <div className="mb-8 text-center">
        <h1 className="mb-2 text-3xl font-bold">🖥️ 服务端设备ID测试</h1>
        <p className="text-gray-600">
          Device ID generation and management when testing server-side rendering
        </p>
      </div>

      <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
        {/* 设备ID信息 */}
        <Card>
          <CardHeader>
            <CardTitle>📱 设备ID信息</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div>
              <h4 className="mb-2 text-sm font-medium text-gray-700">
                Current Device ID (Cookie) Current Device ID (Cookie)
              </h4>
              <div
                className={`rounded border p-3 font-mono text-sm break-all ${
                  currentDeviceId ? 'bg-green-50' : 'bg-yellow-50'
                }`}
              >
                {currentDeviceId || '等待中间件生成'}
              </div>
            </div>

            <div>
              <h4 className="mb-2 text-sm font-medium text-gray-700">
                Device ID passed by middleware (Header) Device ID passed by middleware (Header)
              </h4>
              <div
                className={`rounded border p-3 font-mono text-sm break-all ${
                  xDeviceId ? 'bg-blue-50' : 'bg-red-50'
                }`}
              >
                {xDeviceId || '未传递'}
              </div>
            </div>

            <div className="rounded bg-gray-50 p-3 text-sm">
              <p className="mb-1 font-medium">Status description:</p>
              <ul className="space-y-1 text-xs">
                <li>
                  • First visit: Middleware generates device ID and sets cookies • First visit:
                  Middleware generates device ID and sets cookies • First visit: Middleware
                  generates device ID and sets cookies
                </li>
                <li>
                  • Subsequent visits: Read the existing device ID from the cookie • Subsequent
                  visits: Read the existing device ID from the cookie • Subsequent visits: Read the
                  existing device ID from the cookie
                </li>
                <li>
                  • Device ID is passed to server level component via header • Device ID is passed
                  to server level component via header
                </li>
              </ul>
            </div>
          </CardContent>
        </Card>

        {/* 请求信息 */}
        <Card>
          <CardHeader>
            <CardTitle>🌐 请求信息</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div>
              <h4 className="mb-2 text-sm font-medium text-gray-700">User-Agent</h4>
              <div className="rounded border bg-gray-50 p-3 text-xs break-all">
                {userAgent || '未知'}
              </div>
            </div>

            <div>
              <h4 className="mb-2 text-sm font-medium text-gray-700">render time</h4>
              <div className="rounded border bg-gray-50 p-3 text-sm">
                {new Date().toISOString()}
              </div>
            </div>

            <div>
              <h4 className="mb-2 text-sm font-medium text-gray-700">rendering environment</h4>
              <div className="rounded border bg-gray-50 p-3 text-sm">
                Server-side rendering (SSR) Server-side rendering (SSR)
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* 功能说明 */}
      <Card>
        <CardHeader>
          <CardTitle>📋 服务端设备ID处理流程</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="rounded border bg-blue-50 p-4">
              <h5 className="mb-2 font-medium text-blue-800">
                1. Middleware processing (middleware.ts) 1. Middleware processing (middleware.ts) 1.
                Middleware processing (middleware.ts)
              </h5>
              <p className="text-sm text-blue-700">
                • Check if there is a device ID cookie in the request • Check if there is a device
                ID cookie in the request • Check if there is a device ID cookie in the request
                <br />
                • If not, use User-Agent to generate a new device ID • If not, use User-Agent to
                generate a new device ID • If not, use User-Agent to generate a new device ID • If
                not, use User-Agent to generate a new device ID
                <br />
                • Set the device ID to respond to cookies • Set the device ID to respond to cookies
                <br />
                Pass to server level component via x-device-id header Pass to server level component
                via x-device-id header Pass to server level component via x-device-id header Pass to
                server level component via x-device-id header Pass to server level component via
                x-device-id header
              </p>
            </div>

            <div className="rounded border bg-green-50 p-4">
              <h5 className="mb-2 font-medium text-green-800">2. DeviceIdProvider 检查</h5>
              <p className="text-sm text-green-700">
                • Check device ID status in root layout • Check device ID status in root layout
                <br />
                Get the device ID from both cookies and headers Get the device ID from both cookies
                and headers
                <br />• Record device ID status for debugging • Record device ID status for
                debugging
              </p>
            </div>

            <div className="rounded border bg-yellow-50 p-4">
              <h5 className="mb-2 font-medium text-yellow-800">
                3. API calls at the server level 3. API calls at the server level
              </h5>
              <p className="text-sm text-yellow-700">
                All server level API requests attempt to carry the device ID All server level API
                requests attempt to carry the device ID
                <br />
                • Send via AUTH_DID request header • Send via AUTH_DID request header • Send via
                AUTH_DID request header • Send via AUTH_DID request header
                <br />• Pre-request function that supports server-side rendering • Pre-request
                function that supports server-side rendering
              </p>
            </div>

            <div className="rounded border bg-purple-50 p-4">
              <h5 className="mb-2 font-medium text-purple-800">4. Restrictions 4. Restrictions</h5>
              <p className="text-sm text-purple-700">
                • App Router can only modify cookies in middleware or Route Handler • App Router can
                only modify cookies in middleware or Route Handler • App Router can only modify
                cookies in middleware or Route Handler • App Router can only modify cookies in
                middleware or Route Handler • App Router can only modify cookies in middleware or
                Route Handler • App Router can only modify cookies in middleware or Route Handler •
                App Router can only modify cookies in middleware or Route Handler • App Router can
                only modify cookies in middleware or Route Handler
                <br />
                • Server level components can only read cookies and cannot be modified • Server
                level components can only read cookies and cannot be modified
                <br />
                The device ID may not be available on subsequent requests until the first visit The
                device ID may not be available on subsequent requests until the first visit
                <br />
                This is an architectural limitation of Next.js 13 + This is an architectural
                limitation of Next.js 13 + This is an architectural limitation of Next.js 13 + This
                is an architectural limitation of Next.js 13 + This is an architectural limitation
                of Next.js 13 +
              </p>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
