'use client'

import { useEffect, useState } from 'react'
import { tokenManager } from '@/lib/auth/token'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'

export function DeviceInfo() {
  const [deviceId, setDeviceId] = useState<string>('')
  const [token, setToken] = useState<string>('')

  useEffect(() => {
    // 获取当前的设备ID和token
    const currentDeviceId = tokenManager.getDeviceId()
    const currentToken = tokenManager.getToken() || ''

    setDeviceId(currentDeviceId)
    setToken(currentToken)
  }, [])

  const refreshDeviceId = () => {
    // 生成新的设备ID
    const newDeviceId = tokenManager.getDeviceId()
    setDeviceId(newDeviceId)
  }

  const clearAllData = () => {
    tokenManager.clearAll()
    setDeviceId('')
    setToken('')
    // 重新生成设备ID
    setTimeout(() => {
      const newDeviceId = tokenManager.getDeviceId()
      setDeviceId(newDeviceId)
    }, 100)
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>📱 设备信息</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div>
          <h4 className="mb-2 text-sm font-medium text-gray-700">Device ID (sd) Device ID (sd)</h4>
          <div className="rounded border bg-gray-50 p-3 font-mono text-sm break-all">
            {deviceId || '未生成'}
          </div>
          <p className="mt-1 text-xs text-gray-500">
            Stored in a cookie, field named'sd ', sent as AUTH_DID' in the request header
          </p>
        </div>

        <div>
          <h4 className="mb-2 text-sm font-medium text-gray-700">
            Authentication token (st) Authentication token (st)
          </h4>
          <div className="rounded border bg-gray-50 p-3 font-mono text-sm break-all">
            {token || '未登录'}
          </div>
          <p className="mt-1 text-xs text-gray-500">
            Stored in a cookie, field named'st ', sent as AUTH_TK in the request header
          </p>
        </div>

        <div className="flex gap-2">
          <Button onClick={refreshDeviceId} variant="secondary" size="small">
            Refresh device ID
          </Button>
          <Button onClick={clearAllData} variant="secondary" size="small">
            Clear all data
          </Button>
        </div>

        <div className="rounded border border-blue-200 bg-blue-50 p-3 text-sm">
          <h5 className="mb-1 font-medium text-blue-800">💡 设备ID说明</h5>
          <ul className="space-y-1 text-xs text-blue-700">
            <li>
              Automatically generated when a user visits for the first time Automatically generated
              when a user visits for the first time
            </li>
            <li>
              • Contains timestamp, random string and browser information • Contains timestamp,
              random string and browser information
            </li>
            <li>
              Store in a cookie with a valid period of 365 days Store in a cookie with a valid
              period of 365 days
            </li>
            <li>
              • For device identification and security verification • For device identification and
              security verification
            </li>
            <li>
              • Will not be cleared when logging out (only clearAll will be cleared) • Will not be
              cleared when logging out (only clearAll will be cleared)
            </li>
          </ul>
        </div>
      </CardContent>
    </Card>
  )
}
