import React from 'react'
import { View, ScrollView, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useQuery } from '@tanstack/react-query'
import { Navbar } from '@d8d/mini-shared-ui-components/components/navbar'
import { useRequireAuth } from '@d8d/rencai-auth-ui/hooks'
import type { LoginLog } from '../../types/settings'

/**
 * 账号与安全页
 * 显示登录日志列表
 * 非TabBar页面 - 带返回按钮
 */
const AccountSecurityPage: React.FC = () => {
  // 检查登录状态
  useRequireAuth()

  // 模拟登录日志数据（API待实现）
  const mockLoginLogs: LoginLog[] = [
    {
      id: 1,
      loginTime: '2025-12-28 10:30:25',
      device: 'iPhone 15 Pro',
      ipAddress: '192.168.1.100'
    },
    {
      id: 2,
      loginTime: '2025-12-27 18:45:12',
      device: 'iPhone 15 Pro',
      ipAddress: '192.168.1.100'
    },
    {
      id: 3,
      loginTime: '2025-12-26 09:15:33',
      device: 'iPhone 15 Pro',
      ipAddress: '192.168.1.100'
    },
    {
      id: 4,
      loginTime: '2025-12-25 20:22:18',
      device: 'iPad Air',
      ipAddress: '192.168.1.102'
    },
    {
      id: 5,
      loginTime: '2025-12-24 14:10:05',
      device: 'iPhone 15 Pro',
      ipAddress: '192.168.1.100'
    }
  ]

  // 返回上一页
  const handleBack = () => {
    Taro.navigateBack()
  }

  return (
    <View className="h-screen bg-gray-100">
      {/* Navbar导航栏 - 非TabBar页面带返回按钮 */}
      <Navbar
        title="账号与安全"
        leftIcon="i-heroicons-chevron-left-20-solid"
        leftText=""
        onClickLeft={handleBack}
        backgroundColor="bg-white"
        border={true}
        fixed={true}
        placeholder={true}
      />

      {/* 页面内容 */}
      <ScrollView scrollY className="h-full">
        {/* 登录日志标题 */}
        <View className="bg-white px-4 py-3 border-b border-gray-200">
          <Text className="text-sm font-medium text-gray-700">最近登录记录</Text>
        </View>

        {/* 登录日志列表 */}
        <View className="bg-white">
          {mockLoginLogs.map((log, index) => (
            <View
              key={log.id}
              className={`flex flex-col px-4 py-3 ${
                index < mockLoginLogs.length - 1 ? 'border-b border-gray-100' : ''
              }`}
            >
              {/* 登录时间和设备 */}
              <View className="flex flex-row justify-between items-center mb-2">
                <View className="flex flex-row items-center">
                  <View className="i-heroicons-device-phone-mobile-20-solid w-4 h-4 text-gray-500 mr-2" />
                  <Text className="text-sm text-gray-800">{log.device}</Text>
                </View>
                <Text className="text-xs text-gray-400">{log.loginTime}</Text>
              </View>

              {/* IP地址 */}
              <View className="flex flex-row items-center">
                <View className="i-heroicons-globe-alt-20-solid w-4 h-4 text-gray-500 mr-2" />
                <Text className="text-xs text-gray-500">IP: {log.ipAddress}</Text>
              </View>
            </View>
          ))}
        </View>

        {/* 安全提示 */}
        <View className="mx-4 mt-6 p-4 bg-blue-50 rounded-lg">
          <View className="flex flex-row items-start">
            <View className="i-heroicons-information-circle-20-solid w-5 h-5 text-blue-500 mr-2 mt-0.5" />
            <View className="flex flex-col">
              <Text className="text-sm font-medium text-blue-800 mb-1">安全提示</Text>
              <Text className="text-xs text-blue-600">
                如果发现异常登录记录，请立即修改密码并联系客服
              </Text>
            </View>
          </View>
        </View>
      </ScrollView>
    </View>
  )
}

export default AccountSecurityPage
