import { View, Text, Input, Button } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useState, useEffect } from 'react'
import './index.scss'
import {
  listAllUsers,
  switchUser,
  deleteUser,
  createUser,
  getUserInfo,
  verifyAdminPassword
} from '../../utils/store'
import { useThemeContext } from '../../context/ThemeContext'
import { useSafeArea } from '../../hooks/useSafeArea'
import { useStatusBar } from '../../hooks/useStatusBar'
import ThemedPageMeta from '../../components/ThemedPageMeta'

export default function UserDatabasePage() {
  const { theme, resolvedTheme } = useThemeContext()
  const safe = useSafeArea()
  useStatusBar(resolvedTheme)
  const [isUnlocked, setIsUnlocked] = useState(false)
  const [password, setPassword] = useState('')
  const [pwdError, setPwdError] = useState(false)
  const [users, setUsers] = useState<any[]>([])
  const [showAdd, setShowAdd] = useState(false)
  const [newNick, setNewNick] = useState('')

  const refresh = () => setUsers(listAllUsers())

  useEffect(() => {
    refresh()
  }, [])

  const handleUnlock = () => {
    if (verifyAdminPassword(password)) {
      setIsUnlocked(true)
      setPwdError(false)
      refresh()
    } else {
      setPwdError(true)
    }
  }

  const handleSwitch = (openid: string) => {
    if (switchUser(openid)) {
      Taro.showToast({ title: '切换成功', icon: 'success' })
      refresh()
    } else {
      Taro.showToast({ title: '切换失败', icon: 'none' })
    }
  }

  const handleDelete = (openid: string) => {
    Taro.showModal({
      title: '确认删除',
      content: '删除后将清空该用户所有数据，无法恢复',
      confirmColor: '#e64340',
      success: (res) => {
        if (res.confirm) {
          deleteUser(openid)
          refresh()
          Taro.showToast({ title: '已删除', icon: 'success' })
        }
      }
    })
  }

  const handleCreate = () => {
    if (!newNick.trim()) {
      Taro.showToast({ title: '请输入昵称', icon: 'none' })
      return
    }
    createUser(newNick.trim())
    setShowAdd(false)
    setNewNick('')
    refresh()
    Taro.showToast({ title: '创建成功', icon: 'success' })
  }

  const activeOpenid = getUserInfo()?.openid || ''

  if (!isUnlocked) {
    return (
      <View className={`theme-${resolvedTheme}`}>
        <ThemedPageMeta />
        <View className='udb-page'>
          <View className='udb-lock-card dashed-card mt-20'>
            <View className='star-badge' />
            <Text className='udb-lock-icon'>🔐</Text>
            <Text className='udb-lock-title'>管理员验证</Text>
            <Text className='udb-lock-desc'>请输入密码以访问用户数据库</Text>
            <Input
              className='udb-password-input'
              type='text'
              password
              placeholder='输入密码'
              value={password}
              onInput={(e: any) => setPassword(e.detail.value)}
            />
            {pwdError && (
              <Text className='udb-error'>密码错误，请重试</Text>
            )}
            <View className='btn-gradient udb-btn' onTap={handleUnlock}>
              <Text>进入数据库</Text>
            </View>
          </View>
        </View>
      </View>
    )
  }

  return (
    <View className={`theme-${resolvedTheme}`}>
      <ThemedPageMeta />
      <View className='udb-page'>

        <View className='page-header dashed-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
          <View className='star-badge' />
          <Text className='page-title'>本地用户数据库</Text>
        </View>

        <View className='udb-toolbar'>
          <View className='btn-gradient udb-add-btn' onTap={() => setShowAdd(true)}>
            <Text>+ 新建账号</Text>
          </View>
        </View>

        <View className='udb-table'>
          <View className='udb-row udb-header'>
            <Text className='udb-col col-nick'>昵称</Text>
            <Text className='udb-col col-id'>ID</Text>
            <Text className='udb-col col-stats'>设计/订单</Text>
            <Text className='udb-col col-action'>操作</Text>
          </View>
          {users.map((u) => (
            <View key={u.openid} className={`udb-row ${u.openid === activeOpenid ? 'active' : ''}`}>
              <Text className='udb-col col-nick'>{u.nickName}</Text>
              <Text className='udb-col col-id'>{u.openid}</Text>
              <Text className='udb-col col-stats'>{u.designCount} / {u.orderCount}</Text>
              <View className='udb-col col-action'>
                {u.openid !== activeOpenid && (
                  <View className='udb-link' onTap={() => handleSwitch(u.openid)}>
                    <Text>切换</Text>
                  </View>
                )}
                {u.openid === activeOpenid && (
                  <Text className='udb-current'>当前</Text>
                )}
                <View className='udb-link udb-danger' onTap={() => handleDelete(u.openid)}>
                  <Text>删除</Text>
                </View>
              </View>
            </View>
          ))}
          {users.length === 0 && (
            <View className='udb-empty'>
              <Text>暂无用户数据</Text>
            </View>
          )}
        </View>

        {/* 新建账号弹窗 */}
        {showAdd && (
          <View className='modal-overlay'>
            <View className='udb-add-card dashed-card'>
              <View className='star-badge' />
              <Text className='udb-add-title'>新建本地账号</Text>
              <Input
                className='udb-add-input'
                type='text'
                placeholder='请输入昵称'
                value={newNick}
                onInput={(e: any) => setNewNick(e.detail.value)}
              />
              <View className='udb-add-actions'>
                <View className='btn-outline' onTap={() => setShowAdd(false)}>
                  <Text>取消</Text>
                </View>
                <View className='btn-gradient' onTap={handleCreate}>
                  <Text>创建</Text>
                </View>
              </View>
            </View>
          </View>
        )}
      </View>
    </View>
  )
}