import { useEffect, useState } from 'react'
import { SpinLoading, Empty, Toast } from 'antd-mobile'

const CORPID = 'wwd483c2fba24ae30a'
const AGENTID = '1000021'
const REDIRECT_URI = encodeURIComponent('https://ai.9artedu.com/sidebar/summary.html')

interface SummaryItem {
  id?: number
  msgTime?: string
  msgType?: number
  fromUser?: string
  toUser?: string
  roomId?: string
  messageContext?: string
  summary?: string
  createdAt?: number
  staffId?: string
  staffName?: string
}

interface SummarySection {
  title: string
  items: string[]
}

interface ParsedSummary {
  sections: SummarySection[]
  tags: string[]
  raw: string
}

function SummaryApp() {
  const [loading, setLoading] = useState(true)
  const [list, setList] = useState<SummaryItem[]>([])
  const [error, setError] = useState('')
  const [needLogin, setNeedLogin] = useState(false)

  useEffect(() => {
    const init = async () => {
      const urlParams = new URLSearchParams(window.location.search)
      const code = urlParams.get('code')

      // 1. URL 中有 code → 先登录
      if (code) {
        const cleanUrl = window.location.pathname + window.location.hash
        window.history.replaceState({}, document.title, cleanUrl)
        const ok = await tryCodeLogin(code)
        if (!ok) {
          setLoading(false)
          setNeedLogin(true)
          setError('登录失败，请重试')
          return
        }
      }

      // 2. 检查员工登录态
      const staffId = urlParams.get('staffId') || localStorage.getItem('staff_user_id') || ''
      if (!staffId) {
        setLoading(false)
        setNeedLogin(true)
        setError('未获取到员工ID，请先登录')
        return
      }

      // 3. 加载每日总结
      await loadSummary(staffId)
    }

    init()
  }, [])

  const noCacheFetch = async (url: string, options?: RequestInit) => {
    const sep = url.includes('?') ? '&' : '?'
    const nocacheUrl = `${url}${sep}_t=${Date.now()}`
    return fetch(nocacheUrl, {
      ...options,
      headers: {
        'Cache-Control': 'no-cache, no-store, must-revalidate',
        'Pragma': 'no-cache',
        ...options?.headers
      }
    })
  }

  const tryCodeLogin = async (code: string): Promise<boolean> => {
    try {
      const res = await noCacheFetch(`/api/v1/auth/login?code=${encodeURIComponent(code)}`, { method: 'POST' })
      const data = await res.json()
      if (data.code === 0 && data.data) {
        const info = data.data
        localStorage.setItem('staff_token', info.token)
        localStorage.setItem('staff_user_id', info.userId)
        localStorage.setItem('staff_user_name', info.userName || '')
        localStorage.setItem('staff_avatar', info.avatar || '')
        localStorage.setItem('staff_role', info.role || 'SEAT')
        console.log('OAuth 登录成功:', info.userId, info.userName)
        return true
      }
      console.error('OAuth login failed:', data.message)
    } catch (e) {
      console.error('Code login error:', e)
    }
    return false
  }

  const redirectToWeComOAuth = () => {
    const oauthUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${CORPID}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=snsapi_base&agentid=${AGENTID}&state=summary#wechat_redirect`
    console.log('跳转企微 OAuth:', oauthUrl)
    window.location.href = oauthUrl
  }

  const initWxConfigAndGetCustomerId = (): Promise<string> => {
    return new Promise((resolve) => {
      const wx = (window as any).wx
      if (!wx || !wx.config) {
        console.log('非企微环境，跳过 JS-SDK')
        resolve('')
        return
      }

      const currentUrl = window.location.href.split('#')[0]

      noCacheFetch(`/api/v1/auth/signature?url=${encodeURIComponent(currentUrl)}`)
        .then(res => res.json())
        .then(corpData => {
          if (corpData.code !== 0 || !corpData.data) {
            resolve('')
            return
          }

          const cfg = corpData.data
          wx.config({
            beta: true,
            debug: false,
            appId: cfg.corpId,
            timestamp: cfg.timestamp,
            nonceStr: cfg.nonceStr,
            signature: cfg.signature,
            jsApiList: ['agentConfig', 'getContext', 'getCurExternalContact']
          })

          wx.ready(() => {
            noCacheFetch(`/api/v1/auth/signature?type=agent&agentId=${AGENTID}&url=${encodeURIComponent(currentUrl)}`)
              .then(res => res.json())
              .then(agentData => {
                if (agentData.code !== 0 || !agentData.data) {
                  resolve('')
                  return
                }

                const ac = agentData.data
                wx.agentConfig({
                  corpid: ac.corpId,
                  agentid: ac.agentId,
                  timestamp: ac.timestamp,
                  nonceStr: ac.nonceStr,
                  signature: ac.signature,
                  jsApiList: ['getContext', 'getCurExternalContact'],
                  success: () => {
                    wx.invoke('getCurExternalContact', {}, (res: any) => {
                      if (res.err_msg === 'getCurExternalContact:ok' && res.userId) {
                        console.log('JS-SDK 获取客户ID:', res.userId)
                        resolve(res.userId)
                      } else {
                        console.warn('getCurExternalContact failed:', res)
                        resolve('')
                      }
                    })
                  },
                  fail: (err: any) => {
                    console.warn('agentConfig fail:', err)
                    resolve('')
                  }
                })
              })
              .catch((e: any) => {
                console.error('agentConfig fetch error:', e)
                resolve('')
              })
          })

          wx.error((err: any) => {
            console.error('wx.config error:', err)
            resolve('')
          })
        })
        .catch((e: any) => {
          console.error('initWxConfig error:', e)
          resolve('')
        })
    })
  }

  const loadSummary = async (staffId: string) => {
    const urlParams = new URLSearchParams(window.location.search)
    let customerId = urlParams.get('customerId') || ''

    // 优先通过企微 JS-SDK 获取当前客户ID
    const sdkCustomerId = await initWxConfigAndGetCustomerId()
    if (sdkCustomerId) {
      customerId = sdkCustomerId
      localStorage.setItem('current_customer_id', sdkCustomerId)
    } else {
      customerId = customerId || localStorage.getItem('current_customer_id') || ''
    }

    if (!customerId) {
      setLoading(false)
      setError('缺少客户ID参数')
      Toast.show({ content: '缺少客户ID参数', icon: 'fail' })
      return
    }

    try {
      const res = await fetch(
        `/api/v1/archive/daily-summary/all?customerId=${encodeURIComponent(customerId)}&staffId=${encodeURIComponent(staffId)}&_t=${Date.now()}`,
        {
          headers: {
            'Cache-Control': 'no-cache, no-store, must-revalidate',
            'Pragma': 'no-cache'
          }
        }
      )
      const data = await res.json()
      if (data.code === 0 && Array.isArray(data.data)) {
        setList(data.data)
      } else {
        const msg = data.message || '加载失败'
        setError(msg)
        Toast.show({ content: msg, icon: 'fail' })
      }
    } catch (e) {
      console.error('加载每日总结失败:', e)
      setError('网络错误')
      Toast.show({ content: '网络错误', icon: 'fail' })
    } finally {
      setLoading(false)
    }
  }

  if (loading) {
    return (
      <div style={{ padding: 60, textAlign: 'center' }}>
        <SpinLoading style={{ '--size': '32px' } as any} />
        <div style={{ marginTop: 16, color: '#999', fontSize: 14 }}>加载每日总结中...</div>
      </div>
    )
  }

  if (needLogin) {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100vh', padding: 20 }}>
        <div style={{ fontSize: 14, color: '#999', marginBottom: 24 }}>{error || '未获取到员工ID，请先登录'}</div>
        <button
          onClick={redirectToWeComOAuth}
          style={{
            padding: '10px 32px',
            background: '#1677ff',
            color: '#fff',
            border: 'none',
            borderRadius: 6,
            fontSize: 15,
            cursor: 'pointer',
            fontWeight: 500
          }}
        >
          企微一键登录
        </button>
      </div>
    )
  }

  if (error) {
    return (
      <div style={{ padding: 60, textAlign: 'center' }}>
        <div style={{ color: '#999', fontSize: 14 }}>{error}</div>
      </div>
    )
  }

  if (list.length === 0) {
    return (
      <div style={{ padding: 60 }}>
        <Empty description="暂无每日总结" />
      </div>
    )
  }

  return (
    <div style={{ padding: 12, background: '#f5f5f5', minHeight: '100vh' }}>
      <div style={{
        background: '#fff',
        borderRadius: 12,
        padding: '14px 16px',
        marginBottom: 14,
        boxShadow: '0 1px 4px rgba(0,0,0,0.06)'
      }}>
        <div style={{ fontSize: 17, fontWeight: 600, color: '#333' }}>
          📋 每日总结
        </div>
        <div style={{ fontSize: 12, color: '#999', marginTop: 4 }}>
          共 {list.length} 条 · 按时间倒序
        </div>
      </div>

      {list.map((item, index) => (
        <SummaryCard key={item.id || index} item={item} />
      ))}
    </div>
  )
}

function SummaryCard({ item }: { item: SummaryItem }) {
  const parsed = parseSummary(item.summary)
  const hasStructure = parsed.sections.length > 0 || parsed.tags.length > 0

  return (
    <div style={{
      background: '#fff',
      borderRadius: 14,
      padding: '18px 16px',
      marginBottom: 14,
      boxShadow: '0 2px 10px rgba(0,0,0,0.05)'
    }}>
      {/* 头部 */}
      <div style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingBottom: 14,
        marginBottom: 16,
        borderBottom: '1px solid #f0f0f0'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <CalendarIcon />
          <span style={{ fontSize: 15, fontWeight: 600, color: '#1677ff' }}>
            {item.msgTime || formatDate(item.createdAt)}
          </span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <UserIcon />
          <span style={{ fontSize: 14, color: '#666' }}>
            {item.staffName || item.staffId || '未知老师'}
          </span>
        </div>
      </div>

      {hasStructure ? (
        <>
          {parsed.sections.map((section, idx) => (
            <SectionBlock key={idx} section={section} />
          ))}
          {parsed.tags.length > 0 && <TagList tags={parsed.tags} />}
        </>
      ) : (
        <div style={{ fontSize: 14, lineHeight: 1.8, color: '#333', whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
          {item.summary || item.messageContext || '无内容'}
        </div>
      )}
    </div>
  )
}

function SectionBlock({ section }: { section: SummarySection }) {
  const config = getSectionConfig(section.title)
  const showTitle = displaySectionTitle(section.title)

  return (
    <div style={{ marginBottom: 18 }}>
      <div style={{
        display: 'flex',
        alignItems: 'center',
        gap: 8,
        marginBottom: 12,
        fontSize: 15,
        fontWeight: 600,
        color: config.titleColor
      }}>
        <span style={{ fontSize: 16 }}>{config.icon}</span>
        {showTitle}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {section.items.map((text, idx) => (
          <div key={idx} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
            <div style={{ flexShrink: 0, marginTop: 2 }}>
              {section.title.includes('核心诉求') ? (
                <NumberBadge n={idx + 1} />
              ) : section.title.includes('处理结果') ? (
                <GreenCheck />
              ) : section.title.includes('待办') ? (
                <OrangeClock />
              ) : (
                <Dot color={config.titleColor} />
              )}
            </div>
            <div style={{
              fontSize: 14,
              lineHeight: 1.7,
              color: '#333',
              wordBreak: 'break-all',
              flex: 1
            }}>
              {text}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

function TagList({ tags }: { tags: string[] }) {
  return (
    <div style={{ marginTop: 4 }}>
      <div style={{
        display: 'flex',
        alignItems: 'center',
        gap: 8,
        marginBottom: 10,
        fontSize: 15,
        fontWeight: 600,
        color: '#1677ff'
      }}>
        <span style={{ fontSize: 16 }}>🏷️</span>
        关键标签
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
        {tags.map((tag, idx) => (
          <span key={idx} style={{
            display: 'inline-block',
            padding: '5px 12px',
            background: '#e6f4ff',
            color: '#1677ff',
            borderRadius: 16,
            fontSize: 13,
            fontWeight: 500,
            border: '1px solid #bae0ff'
          }}>
            #{tag}
          </span>
        ))}
      </div>
    </div>
  )
}

function getSectionConfig(title: string) {
  if (title.includes('核心诉求')) {
    return { icon: '📝', titleColor: '#1677ff' }
  }
  if (title.includes('处理结果')) {
    return { icon: '✅', titleColor: '#52c41a' }
  }
  if (title.includes('待办') || title.includes('后续')) {
    return { icon: '⏰', titleColor: '#fa8c16' }
  }
  return { icon: '•', titleColor: '#666' }
}

function displaySectionTitle(title: string) {
  if (title.includes('核心诉求')) return '学员咨询'
  if (title.includes('处理结果')) return '老师解答'
  if (title.includes('待办')) return '跟进建议'
  return title
}

function NumberBadge({ n }: { n: number }) {
  return (
    <div style={{
      width: 20,
      height: 20,
      borderRadius: '50%',
      background: '#1677ff',
      color: '#fff',
      fontSize: 12,
      fontWeight: 600,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    }}>
      {n}
    </div>
  )
}

function GreenCheck() {
  return (
    <div style={{
      width: 20,
      height: 20,
      borderRadius: '50%',
      background: '#f6ffed',
      border: '1px solid #b7eb8f',
      color: '#52c41a',
      fontSize: 12,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    }}>
      ✓
    </div>
  )
}

function OrangeClock() {
  return (
    <div style={{
      width: 20,
      height: 20,
      borderRadius: '50%',
      background: '#fff7e6',
      border: '1px solid #ffd591',
      color: '#fa8c16',
      fontSize: 12,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    }}>
      🕐
    </div>
  )
}

function Dot({ color }: { color: string }) {
  return (
    <div style={{
      width: 8,
      height: 8,
      borderRadius: '50%',
      background: color,
      marginTop: 6
    }} />
  )
}

function CalendarIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#1677ff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
      <line x1="16" y1="2" x2="16" y2="6"></line>
      <line x1="8" y1="2" x2="8" y2="6"></line>
      <line x1="3" y1="10" x2="21" y2="10"></line>
    </svg>
  )
}

function UserIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#999" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
      <circle cx="12" cy="7" r="4"></circle>
    </svg>
  )
}

function parseSummary(text?: string): ParsedSummary {
  if (!text) return { sections: [], tags: [], raw: '' }

  const result: ParsedSummary = { sections: [], tags: [], raw: text }
  let content = text

  // 提取关键标签：支持 "**关键标签**：#a#b" 或 "关键标签：#a#b" 或单独行
  const tagPatterns = [
    /(?:\*\*)?关键标签(?:\*\*)?[:：]\s*(.+?)(?=\n\s*\*\*|\n\s*$|$)/s,
    /(?:\*\*)?标签(?:\*\*)?[:：]\s*(.+?)(?=\n\s*\*\*|\n\s*$|$)/s
  ]
  for (const pattern of tagPatterns) {
    const tagMatch = content.match(pattern)
    if (tagMatch) {
      result.tags = parseTags(tagMatch[1])
      content = content.replace(tagMatch[0], '')
      break
    }
  }

  // 按 **标题** 分隔区块，标题可能有空格
  const sectionRegex = /\*\*\s*(核心诉求|处理结果|待办事项|待处理|后续跟进|关键标签)\s*\*\*/g
  const parts: { title: string; text: string }[] = []
  let lastIndex = 0
  let lastTitle = ''
  let match

  while ((match = sectionRegex.exec(content)) !== null) {
    if (lastTitle) {
      parts.push({ title: lastTitle, text: content.slice(lastIndex, match.index) })
    }
    lastTitle = match[1]
    lastIndex = match.index + match[0].length
  }
  if (lastTitle) {
    parts.push({ title: lastTitle, text: content.slice(lastIndex) })
  }

  for (const part of parts) {
    if (part.title === '关键标签') {
      const tags = parseTags(part.text)
      if (tags.length) result.tags = tags
      continue
    }
    const items = parseItems(part.text)
    if (items.length > 0) {
      result.sections.push({ title: part.title, items })
    }
  }

  // 没有任何结构化区块时，尝试整段按行解析列表
  if (result.sections.length === 0 && result.tags.length === 0) {
    const items = parseItems(content)
    if (items.length > 1) {
      result.sections.push({ title: '总结', items })
    }
  }

  return result
}

function parseItems(text: string): string[] {
  const lines = text.split('\n').map(l => l.trim()).filter(l => l.length > 0)
  const items: string[] = []

  for (const line of lines) {
    // 匹配 1. / 1． / - / * / • 开头的列表项
    const match = line.match(/^(?:\d+[.．]\s*|[\-*•]\s+)(.+)$/)
    if (match) {
      items.push(cleanText(match[1]))
    } else if (items.length > 0 && !line.match(/^\*\*/)) {
      // 续行（非标题）
      items[items.length - 1] += ' ' + cleanText(line)
    }
  }

  // 如果整段没有列表项，把段落本身作为一条内容（兼容纯文本区块）
  if (items.length === 0 && text.trim().length > 0) {
    items.push(cleanText(text.trim()))
  }

  return items
}

function parseTags(text: string): string[] {
  const s = text.trim()
  if (!s) return []
  // 支持 #标签1#标签2 或 标签1#标签2 或 #标签1 #标签2
  return s.split(/[#\s]+/)
    .map(t => t.trim())
    .filter(t => t.length > 0 && t !== '、' && t !== ',')
}

function cleanText(s: string): string {
  return s.replace(/\*\*/g, '').trim()
}

function formatDate(timestamp?: number) {
  if (!timestamp) return '-'
  const date = new Date(timestamp)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

export default SummaryApp