import { useMemo, useState } from 'react'
import { View, Text } from '@tarojs/components'
import { ConfigProvider, Empty, Popup, SearchBar } from '@nutui/nutui-react-taro'

type AgentOrderRow = {
  id: string
  agentName: string
  companyName: string
  follower: string
  // 预留：若经办人为老板，可用于后续扩展“老板名下多企业订单”
  isBoss?: boolean
}

const MOCK_LIST: AgentOrderRow[] = [
  { id: '1', agentName: '邓莉莉', companyName: '网宿公司', follower: '章鱼' },
  { id: '2', agentName: '邓莉莉', companyName: '飞数公司', follower: '章鱼' }
]

export default function CreditCustomerPage() {
  const [searchValue, setSearchValue] = useState('')
  const [detailVisible, setDetailVisible] = useState(false)
  const [activeRow, setActiveRow] = useState<AgentOrderRow | null>(null)

  const filteredList = useMemo(() => {
    const q = searchValue.trim()
    if (!q) return MOCK_LIST
    return MOCK_LIST.filter(r => String(r.agentName || '').includes(q))
  }, [searchValue])

  const totalText = useMemo(() => `${filteredList.length}个订单`, [filteredList.length])

  return (
    <View className="bg-gray-50 min-h-screen">
      <ConfigProvider>
        <View className="py-2 px-3">
          <SearchBar placeholder="请输入经办人姓名" value={searchValue} onChange={setSearchValue} />
        </View>

        <View className="px-3">
          <View className="bg-yellow-50 border border-yellow-200 rounded-lg p-3 text-sm text-yellow-900">
            <View className="font-medium mb-1">功能说明</View>
            <View>可根据经办人姓名进行搜索；</View>
            <View>搜索结果以列表形式展示：企业经办人、企业名称、跟进人；</View>
            <View>点击任意一行可进入查看该订单的跟进详情内容；</View>
            <View>若某企业经办人是老板，则可通过此功能查看该老板名下关联的所有企业订单数量。</View>
            <View className="mt-2 text-xs text-yellow-700">zzl</View>
          </View>
        </View>

        <View className="px-3 mt-3 flex items-center justify-between">
          <Text className="text-sm text-gray-700">搜索结果</Text>
          <Text className="text-sm text-gray-600">{totalText}</Text>
        </View>

        <View className="px-3 mt-2">
          <View className="bg-white rounded-lg overflow-hidden border border-gray-100">
            <View className="flex bg-gray-50 text-xs text-gray-600 px-3 py-2">
              <View className="flex-1">企业经办人</View>
              <View className="flex-1">企业名称</View>
              <View className="flex-1">跟进人</View>
            </View>

            {filteredList.length === 0 ? (
              <View className="py-10">
                <Empty description="暂无数据" />
              </View>
            ) : (
              filteredList.map(r => (
                <View
                  key={r.id}
                  className="flex px-3 py-3 text-sm text-gray-900 border-t border-gray-100"
                  onClick={() => {
                    setActiveRow(r)
                    setDetailVisible(true)
                  }}
                >
                  <View className="flex-1 truncate">{r.agentName}</View>
                  <View className="flex-1 truncate">{r.companyName}</View>
                  <View className="flex-1 truncate">{r.follower}</View>
                </View>
              ))
            )}
          </View>
        </View>

        <Popup
          visible={detailVisible}
          position="bottom"
          style={{ height: '45vh' }}
          onClose={() => setDetailVisible(false)}
        >
          <View className="p-4">
            <View className="flex items-center justify-between mb-3">
              <Text className="text-base font-medium">订单跟进详情</Text>
              <Text className="text-sm text-gray-500" onClick={() => setDetailVisible(false)}>
                关闭
              </Text>
            </View>
            {activeRow ? (
              <View className="text-sm text-gray-700 leading-6">
                <View>企业经办人：{activeRow.agentName}</View>
                <View>企业名称：{activeRow.companyName}</View>
                <View>跟进人：{activeRow.follower}</View>
                <View className="mt-2 text-xs text-gray-500">此处可接入真实“订单跟进详情”页面或接口返回内容。</View>
              </View>
            ) : (
              <View className="text-sm text-gray-500">暂无详情</View>
            )}
          </View>
        </Popup>
      </ConfigProvider>
    </View>
  )
}