import { useState, useEffect, useMemo } from 'react'
import { useNavigate } from 'react-router-dom'
import {
  Input, Button, Empty, message, Modal, Form, Select, Popconfirm, Spin, Pagination,
} from 'antd'
import {
  SearchOutlined, PhoneOutlined, MailOutlined, EditOutlined, PlusOutlined,
  DeleteOutlined, ExportOutlined, CloseOutlined, GlobalOutlined, MessageOutlined,
} from '@ant-design/icons'
import {
  createCustomer, deleteCustomer, exportCustomersCSV, getCustomer, getCustomerTags, getCustomers, updateCustomer,
  type Customer, type CustomerTag, type Session,
} from '@/services/api'
import { useAuth } from '@/stores/auth'

const statusMap: Record<string, { color: string; text: string; dot: string }> = {
  online: { color: '#16a34a', text: '在线', dot: '#16a34a' },
  offline: { color: '#94a3b8', text: '离线', dot: '#94a3b8' },
  busy: { color: '#d97706', text: '忙碌', dot: '#d97706' },
}

const tagColorMap: Record<string, { bg: string; color: string }> = {
  amber: { bg: '#fef3c7', color: '#92400e' },
  green: { bg: '#f0fdf4', color: '#16a34a' },
  blue: { bg: '#dbeafe', color: '#2563eb' },
  cyan: { bg: '#ecfeff', color: '#0891b2' },
  violet: { bg: '#f3e8ff', color: '#7c3aed' },
  rose: { bg: '#fff1f2', color: '#e11d48' },
  orange: { bg: '#fffbeb', color: '#d97706' },
  slate: { bg: '#f1f5f9', color: '#475569' },
  // 兼容历史写死名称
  'VIP客户': { bg: '#fef3c7', color: '#92400e' },
  'VIP': { bg: '#fef3c7', color: '#92400e' },
  '新客户': { bg: '#f0fdf4', color: '#16a34a' },
  '活跃': { bg: '#dbeafe', color: '#2563eb' },
  '沉默': { bg: '#fffbeb', color: '#d97706' },
  '企业客户': { bg: '#ecfeff', color: '#0891b2' },
}

/** 浅底深字头像色，对齐效果图 */
const avatarPalettes = [
  { bg: '#dbeafe', color: '#2563eb' },
  { bg: '#fce7f3', color: '#be185d' },
  { bg: '#ede9fe', color: '#6d28d9' },
  { bg: '#d1fae5', color: '#047857' },
  { bg: '#fef3c7', color: '#b45309' },
  { bg: '#e0e7ff', color: '#4338ca' },
  { bg: '#ffedd5', color: '#c2410c' },
  { bg: '#f0fdf4', color: '#166534' },
]

function parseTags(tagsStr: string): string[] {
  try {
    const parsed = JSON.parse(tagsStr)
    return Array.isArray(parsed) ? parsed : []
  } catch {
    return tagsStr ? tagsStr.split(',').map(t => t.trim()).filter(Boolean) : []
  }
}

function relativeTime(iso?: string | null) {
  if (!iso) return '—'
  const diff = Date.now() - new Date(iso).getTime()
  const mins = Math.floor(diff / 60000)
  if (mins < 1) return '刚刚'
  if (mins < 60) return `${mins} 分钟前`
  const hours = Math.floor(mins / 60)
  if (hours < 24) return `${hours} 小时前`
  const days = Math.floor(hours / 24)
  if (days < 30) return `${days} 天前`
  return new Date(iso).toLocaleDateString('zh-CN')
}

function avatarPalette(name: string) {
  let h = 0
  for (let i = 0; i < name.length; i++) h = name.charCodeAt(i) + ((h << 5) - h)
  return avatarPalettes[Math.abs(h) % avatarPalettes.length]
}

function maskPhone(phone?: string) {
  if (!phone) return '—'
  const digits = phone.replace(/\D/g, '')
  if (digits.length === 11) return `${digits.slice(0, 3)}****${digits.slice(7)}`
  return phone
}

/** 左侧活跃度色条：在线偏亮，沉默偏灰 */
function activityBar(c: Customer): string {
  const tags = parseTags(c.tags)
  if (c.status === 'online') return 'linear-gradient(to top, #93c5fd, #2563eb)'
  if (tags.includes('沉默')) return 'linear-gradient(to top, #f1f5f9, #cbd5e1)'
  if (c.status === 'busy') return 'linear-gradient(to top, #fde68a, #d97706)'
  const t = c.last_contact_at ? Date.now() - new Date(c.last_contact_at).getTime() : Infinity
  if (t < 3600000) return 'linear-gradient(to top, #bfdbfe, #3b82f6)'
  if (t < 86400000) return 'linear-gradient(to top, #e2e8f0, #60a5fa)'
  return 'linear-gradient(to top, #f1f5f9, #cbd5e1)'
}

function sessionTopic(s: Session) {
  if (s.last_message && s.last_message.length > 0 && s.last_message.length <= 12 && !s.last_message.startsWith('http')) {
    return s.last_message
  }
  const map: Record<string, string> = {
    active: '进行中会话', waiting: '等待接入', ended: '已结束会话', archived: '归档会话',
  }
  return map[s.status] || `会话 #${s.id}`
}

const TagPill = ({ tag, catalog }: { tag: string; catalog?: CustomerTag[] }) => {
  const meta = catalog?.find(t => t.name === tag)
  const byColor = meta?.color ? tagColorMap[meta.color] : undefined
  const s = byColor || tagColorMap[tag] || { bg: '#f1f5f9', color: '#475569' }
  const label = tag === 'VIP客户' ? 'VIP' : tag
  return (
    <span
      className="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium whitespace-nowrap"
      style={{ backgroundColor: s.bg, color: s.color }}
    >
      {label}
    </span>
  )
}

const StatusDot = ({ status }: { status: string }) => {
  const s = statusMap[status] || statusMap.offline
  return (
    <span className="inline-flex items-center gap-1.5">
      <span className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: s.dot }} />
      <span className="text-[12px] whitespace-nowrap" style={{ color: s.color }}>{s.text}</span>
    </span>
  )
}

const Customers = () => {
  const { user } = useAuth()
  const navigate = useNavigate()
  const canDelete = user?.role === 'admin' || user?.role === 'supervisor'
  const [customers, setCustomers] = useState<Customer[]>([])
  const [loading, setLoading] = useState(true)
  const [total, setTotal] = useState(0)
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const [search, setSearch] = useState('')
  const [exporting, setExporting] = useState(false)
  const [tagFilter, setTagFilter] = useState('all')
  const [selectedCustomer, setSelectedCustomer] = useState<Customer | null>(null)
  const [editingId, setEditingId] = useState<number | null>(null)
  const [historySessions, setHistorySessions] = useState<Session[]>([])
  const [detailLoading, setDetailLoading] = useState(false)
  const [panelOpen, setPanelOpen] = useState(false)
  const [editOpen, setEditOpen] = useState(false)
  const [saving, setSaving] = useState(false)
  const [form] = Form.useForm()
  const [tagCatalog, setTagCatalog] = useState<CustomerTag[]>([])

  useEffect(() => {
    loadCustomers()
  }, [page, pageSize, search])

  useEffect(() => {
    getCustomerTags()
      .then(res => setTagCatalog(Array.isArray(res.data) ? res.data : []))
      .catch(() => setTagCatalog([]))
  }, [])

  const filterChips = useMemo(() => {
    const chips = [{ key: 'all', label: '全部' }]
    tagCatalog.forEach(t => {
      chips.push({
        key: t.name,
        label: t.name === 'VIP客户' ? 'VIP' : t.name,
      })
    })
    return chips
  }, [tagCatalog])

  const tagSelectOptions = useMemo(
    () => tagCatalog.map(t => ({ value: t.name, label: t.name })),
    [tagCatalog],
  )

  const loadCustomers = async () => {
    setLoading(true)
    try {
      const res = await getCustomers({ search, page, pageSize })
      setCustomers(res.list)
      setTotal(res.total)
    } catch {
      setCustomers([])
    } finally {
      setLoading(false)
    }
  }

  const displayed = useMemo(() => {
    if (tagFilter === 'all') return customers
    return customers.filter(c =>
      parseTags(c.tags).some(t => t === tagFilter || (tagFilter === 'VIP客户' && (t === 'VIP' || t === 'VIP客户'))),
    )
  }, [customers, tagFilter])

  const openDetail = async (record: Customer) => {
    setSelectedCustomer(record)
    setPanelOpen(true)
    setHistorySessions([])
    setDetailLoading(true)
    try {
      const res = await getCustomer(record.id)
      setSelectedCustomer(res.data.customer)
      setHistorySessions(Array.isArray(res.data.sessions) ? res.data.sessions : [])
    } catch {
      // keep list snapshot
    } finally {
      setDetailLoading(false)
    }
  }

  const closePanel = () => {
    setPanelOpen(false)
  }

  const openCreate = () => {
    setEditingId(null)
    form.resetFields()
    form.setFieldsValue({ status: 'offline', source: '手动录入', tags: [] })
    setEditOpen(true)
  }

  const openEdit = (customer: Customer) => {
    setEditingId(customer.id)
    form.setFieldsValue({
      name: customer.name,
      phone: customer.phone,
      email: customer.email,
      source: customer.source,
      status: customer.status,
      tags: parseTags(customer.tags),
    })
    setEditOpen(true)
  }

  const handleSave = async (values: {
    name: string; phone?: string; email?: string; source?: string; status?: string; tags?: string[]
  }) => {
    setSaving(true)
    try {
      const payload = {
        name: values.name.trim(),
        phone: values.phone?.trim() || '',
        email: values.email?.trim() || '',
        source: values.source?.trim() || '手动录入',
        status: values.status || 'offline',
        tags: JSON.stringify(values.tags || []),
      }
      if (editingId) {
        const res = await updateCustomer(editingId, payload)
        message.success('客户已更新')
        setSelectedCustomer(res.data)
        setEditOpen(false)
        await loadCustomers()
        if (panelOpen) await openDetail(res.data)
      } else {
        await createCustomer(payload)
        message.success('客户已创建')
        setEditOpen(false)
        setPage(1)
        await loadCustomers()
      }
    } catch (e) {
      message.error(e instanceof Error ? e.message : '保存失败')
    } finally {
      setSaving(false)
    }
  }

  const handleDelete = async (id: number) => {
    try {
      await deleteCustomer(id)
      message.success('已删除')
      if (selectedCustomer?.id === id) {
        setPanelOpen(false)
        setSelectedCustomer(null)
      }
      await loadCustomers()
    } catch (e) {
      message.error(e instanceof Error ? e.message : '删除失败')
    }
  }

  const pendingCount = historySessions.filter(s => s.status === 'waiting' || s.status === 'active').length
  const avgSatisfaction = (() => {
    const scores = historySessions
      .map(s => s.satisfaction_score)
      .filter((n): n is number => typeof n === 'number' && n > 0)
    if (scores.length === 0) return '—'
    return (scores.reduce((a, b) => a + b, 0) / scores.length).toFixed(1)
  })()

  return (
    <div className="h-full flex flex-col min-h-0 bg-neutral-50 overflow-hidden">
      {/* 顶栏标题 — 对齐设计稿 header */}
      <header className="shrink-0 h-14 px-6 flex items-center justify-between bg-white border-b border-neutral-200">
        <h1 className="text-base font-semibold text-neutral-800 m-0">客户管理</h1>
      </header>

      <div className="flex flex-1 min-h-0 overflow-hidden">
        {/* 主内容区 */}
        <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
          {/* 工具栏：搜索 + 筛选 + 操作 同一行 */}
          <div className="shrink-0 px-6 py-4 bg-white">
            <div className="flex items-center gap-3 flex-wrap">
              <div
                className="flex items-center gap-2 px-3 h-9 rounded-lg max-w-xs w-full sm:w-64 border border-neutral-200"
                style={{ backgroundColor: 'var(--neutral-100)' }}
              >
                <SearchOutlined className="text-neutral-400 shrink-0 text-sm" />
                <input
                  type="text"
                  placeholder="搜索客户名称、手机号、邮箱..."
                  value={search}
                  onChange={e => { setSearch(e.target.value); setPage(1) }}
                  className="flex-1 bg-transparent outline-none text-[13px] min-w-0 text-neutral-700 placeholder:text-neutral-400 border-0"
                />
              </div>

              <div className="flex items-center gap-1.5 flex-wrap">
                {filterChips.map(chip => {
                  const active = tagFilter === chip.key
                  return (
                    <button
                      key={chip.key}
                      type="button"
                      onClick={() => setTagFilter(chip.key)}
                      className={`px-3 py-1.5 rounded-md text-[13px] font-medium whitespace-nowrap border-0 cursor-pointer transition-colors ${
                        active
                          ? 'bg-[#2563eb] text-white'
                          : 'bg-transparent text-neutral-600 hover:bg-neutral-100'
                      }`}
                    >
                      {chip.label}
                    </button>
                  )
                })}
              </div>

              <div className="flex items-center gap-2 ml-auto">
                <Button
                  icon={<ExportOutlined />}
                  loading={exporting}
                  className="!text-[13px] !h-8 !px-3 !font-medium !text-neutral-600 !border-neutral-200"
                  onClick={async () => {
                    setExporting(true)
                    try {
                      await exportCustomersCSV({ search: search || undefined })
                      message.success('客户列表已导出')
                    } catch (e) {
                      message.error(e instanceof Error ? e.message : '导出失败')
                    } finally {
                      setExporting(false)
                    }
                  }}
                >
                  导出
                </Button>
                <Button
                  type="primary"
                  icon={<PlusOutlined />}
                  className="!text-[13px] !h-8 !px-3 !font-medium !bg-[#2563eb]"
                  onClick={openCreate}
                >
                  添加客户
                </Button>
              </div>
            </div>
          </div>

          {/* 表格 + 分页 */}
          <div className="flex-1 min-h-0 overflow-auto px-6 pb-4">
            <div className="rounded-lg overflow-hidden border border-neutral-200 bg-white">
              {loading ? (
                <div className="py-24 flex justify-center"><Spin /></div>
              ) : displayed.length === 0 ? (
                <Empty className="py-16" description="暂无客户数据" image={Empty.PRESENTED_IMAGE_SIMPLE} />
              ) : (
                <div className="overflow-x-auto">
                  <table className="w-full" style={{ minWidth: 960 }}>
                    <thead>
                      <tr className="bg-neutral-50">
                        {['客户', '手机号', '邮箱', '来源渠道', '标签', '最后对话', '状态', '操作'].map((h, i) => (
                          <th
                            key={h}
                            className={`py-3 px-3 text-[12px] font-medium uppercase tracking-wide whitespace-nowrap text-neutral-500 ${
                              i === 7 ? 'text-right' : 'text-left'
                            }`}
                            style={{
                              width: [200, 120, 160, 100, 130, 110, 80, 110][i],
                            }}
                          >
                            {h}
                          </th>
                        ))}
                      </tr>
                    </thead>
                    <tbody>
                      {displayed.map(record => {
                        const pal = avatarPalette(record.name || '?')
                        const selected = panelOpen && selectedCustomer?.id === record.id
                        return (
                          <tr
                            key={record.id}
                            onClick={() => openDetail(record)}
                            className={`group cursor-pointer border-t border-neutral-100 transition-colors ${
                              selected ? 'bg-blue-50/50' : 'hover:bg-neutral-50'
                            }`}
                          >
                            <td className="py-3 px-3 relative">
                              <div
                                className="absolute left-0 top-0 bottom-0 w-[3px]"
                                style={{ background: activityBar(record) }}
                              />
                              <div className="flex items-center gap-2.5 min-w-0 pl-1">
                                <div
                                  className="w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibold shrink-0"
                                  style={{ backgroundColor: pal.bg, color: pal.color }}
                                >
                                  {(record.name || '?').slice(0, 1)}
                                </div>
                                <div className="min-w-0">
                                  <div className="text-[13px] font-medium text-neutral-800 truncate">{record.name}</div>
                                  <div className="text-[11px] text-neutral-400 truncate">
                                    ID: C{String(record.id).padStart(5, '0')}
                                  </div>
                                </div>
                              </div>
                            </td>
                            <td className="py-3 px-3 text-[13px] text-neutral-600 whitespace-nowrap">
                              {maskPhone(record.phone)}
                            </td>
                            <td className="py-3 px-3 text-[13px] text-neutral-600 max-w-[160px] truncate">
                              {record.email || '—'}
                            </td>
                            <td className="py-3 px-3 text-[13px] text-neutral-600 whitespace-nowrap">
                              {record.source || '—'}
                            </td>
                            <td className="py-3 px-3">
                              <div className="flex items-center gap-1.5 flex-wrap">
                                {parseTags(record.tags).length === 0
                                  ? <span className="text-neutral-300 text-xs">—</span>
                                  : parseTags(record.tags).map(t => <TagPill key={t} tag={t} catalog={tagCatalog} />)}
                              </div>
                            </td>
                            <td className="py-3 px-3 text-[13px] text-neutral-500 whitespace-nowrap">
                              {relativeTime(record.last_contact_at)}
                            </td>
                            <td className="py-3 px-3">
                              <StatusDot status={record.status} />
                            </td>
                            <td className="py-3 px-3 text-right" onClick={e => e.stopPropagation()}>
                              <div className="flex items-center justify-end gap-1">
                                <button
                                  type="button"
                                  className="px-2 py-1 rounded text-[12px] font-medium text-[#2563eb] hover:bg-blue-50 border-0 bg-transparent cursor-pointer"
                                  onClick={() => openDetail(record)}
                                >
                                  查看
                                </button>
                                <button
                                  type="button"
                                  className="px-2 py-1 rounded text-[12px] font-medium text-neutral-500 hover:bg-neutral-100 border-0 bg-transparent cursor-pointer"
                                  onClick={() => openEdit(record)}
                                >
                                  编辑
                                </button>
                              </div>
                            </td>
                          </tr>
                        )
                      })}
                    </tbody>
                  </table>
                </div>
              )}
            </div>

            {/* 分页 — 在表格卡片外 */}
            <div className="flex items-center justify-between mt-4 flex-wrap gap-3">
              <div className="text-[13px] text-neutral-500">
                共 <span className="font-medium text-neutral-700">{total}</span> 位客户
              </div>
              <Pagination
                current={page}
                total={total}
                pageSize={pageSize}
                showSizeChanger
                pageSizeOptions={[10, 20, 50]}
                onChange={(p, ps) => {
                  setPage(p)
                  if (ps !== pageSize) {
                    setPageSize(ps)
                    setPage(1)
                  }
                }}
                size="small"
              />
            </div>
          </div>
        </div>

        {/* 右侧详情面板 — 内嵌 360px，非遮罩 Drawer */}
        {panelOpen && selectedCustomer && (
          <aside className="w-[360px] shrink-0 flex flex-col bg-white border-l border-neutral-200 overflow-hidden">
            <div className="flex items-center justify-between px-5 py-4 shrink-0 border-b border-neutral-200">
              <h2 className="text-[15px] font-semibold text-neutral-800 m-0">客户详情</h2>
              <button
                type="button"
                className="w-7 h-7 rounded-md flex items-center justify-center text-neutral-400 hover:bg-neutral-100 border-0 bg-transparent cursor-pointer"
                onClick={closePanel}
              >
                <CloseOutlined className="text-xs" />
              </button>
            </div>

            {detailLoading ? (
              <div className="flex-1 flex items-center justify-center"><Spin /></div>
            ) : (
              <div className="flex-1 overflow-y-auto">
                {/* 头像区 */}
                {(() => {
                  const pal = avatarPalette(selectedCustomer.name)
                  return (
                    <div className="px-5 py-5 text-center border-b border-neutral-100">
                      <div
                        className="w-16 h-16 rounded-full flex items-center justify-center text-xl font-bold mx-auto mb-3"
                        style={{ backgroundColor: pal.bg, color: pal.color }}
                      >
                        {selectedCustomer.name.slice(0, 1)}
                      </div>
                      <div className="text-base font-semibold text-neutral-800 mb-0.5">{selectedCustomer.name}</div>
                      <div className="text-[13px] text-neutral-500 mb-2">
                        ID: C{String(selectedCustomer.id).padStart(5, '0')}
                      </div>
                      <div className="flex items-center justify-center">
                        <StatusDot status={selectedCustomer.status} />
                      </div>
                    </div>
                  )
                })()}

                {/* 标签 */}
                <div className="px-5 py-3 border-b border-neutral-100">
                  <div className="text-[11px] font-medium uppercase tracking-wide text-neutral-400 mb-2">标签</div>
                  <div className="flex flex-wrap gap-1.5">
                    {parseTags(selectedCustomer.tags).length === 0 ? (
                      <span className="text-xs text-neutral-400">暂无标签</span>
                    ) : parseTags(selectedCustomer.tags).map(t => <TagPill key={t} tag={t} catalog={tagCatalog} />)}
                  </div>
                </div>

                {/* 联系方式 */}
                <div className="px-5 py-3 border-b border-neutral-100">
                  <div className="text-[11px] font-medium uppercase tracking-wide text-neutral-400 mb-2">联系方式</div>
                  <div className="space-y-2">
                    <div className="flex items-center gap-2.5">
                      <PhoneOutlined className="text-neutral-400 text-[13px]" />
                      <span className="text-[13px] text-neutral-700">
                        {selectedCustomer.phone || '—'}
                      </span>
                    </div>
                    <div className="flex items-center gap-2.5 min-w-0">
                      <MailOutlined className="text-neutral-400 text-[13px] shrink-0" />
                      <span className="text-[13px] text-neutral-700 truncate">
                        {selectedCustomer.email || '—'}
                      </span>
                    </div>
                    <div className="flex items-center gap-2.5">
                      <GlobalOutlined className="text-neutral-400 text-[13px]" />
                      <span className="text-[13px] text-neutral-700 whitespace-nowrap">
                        来源: {selectedCustomer.source || '—'}
                      </span>
                    </div>
                  </div>
                </div>

                {/* 活跃数据 — 三列 */}
                <div className="px-5 py-3 border-b border-neutral-100">
                  <div className="text-[11px] font-medium uppercase tracking-wide text-neutral-400 mb-2">活跃数据</div>
                  <div className="grid grid-cols-3 gap-2">
                    {[
                      { value: selectedCustomer.conversation_count, label: '对话次数' },
                      { value: avgSatisfaction, label: '满意度' },
                      { value: pendingCount, label: '待处理' },
                    ].map(item => (
                      <div key={item.label} className="text-center py-2 rounded-md bg-neutral-50">
                        <div className="text-lg font-bold text-[#2563eb]">{item.value}</div>
                        <div className="text-[11px] text-neutral-500">{item.label}</div>
                      </div>
                    ))}
                  </div>
                </div>

                {/* 最近对话 */}
                <div className="px-5 py-3 border-b border-neutral-100">
                  <div className="text-[11px] font-medium uppercase tracking-wide text-neutral-400 mb-2">最近对话</div>
                  <div className="space-y-2.5">
                    {historySessions.length === 0 ? (
                      <div className="text-xs text-neutral-400 py-3 text-center">暂无会话记录</div>
                    ) : historySessions.slice(0, 6).map(s => (
                      <div key={s.id} className="flex items-start gap-2.5">
                        <div className="w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-semibold shrink-0 mt-0.5 bg-[#dbeafe] text-[#2563eb]">
                          客
                        </div>
                        <div className="flex-1 min-w-0">
                          <div className="flex items-center justify-between gap-2">
                            <span className="text-[12px] font-medium text-neutral-700 truncate">
                              {sessionTopic(s)}
                            </span>
                            <span className="text-[11px] text-neutral-400 whitespace-nowrap shrink-0">
                              {relativeTime(s.last_message_at || s.created_at)}
                            </span>
                          </div>
                          <p className="text-[12px] mt-0.5 text-neutral-500 line-clamp-2 m-0">
                            {s.last_message || statusMap[s.status]?.text || s.status}
                          </p>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            )}

            {/* 底部操作 — 发起对话 + 编辑信息 */}
            <div className="px-5 py-4 shrink-0 mt-auto border-t border-neutral-100">
              <div className="flex gap-2">
                <button
                  type="button"
                  className="flex-1 flex items-center justify-center gap-1.5 px-3 py-2 rounded-md text-[13px] font-medium bg-[#2563eb] text-white border-0 cursor-pointer hover:bg-[#1d4ed8] transition-colors"
                  onClick={() => {
                    message.info('请在工作台接待访客会话')
                    navigate('/agent/dashboard')
                  }}
                >
                  <MessageOutlined className="text-sm" />
                  发起对话
                </button>
                <button
                  type="button"
                  className="flex-1 flex items-center justify-center gap-1.5 px-3 py-2 rounded-md text-[13px] font-medium border border-neutral-200 text-neutral-600 bg-white cursor-pointer hover:bg-neutral-50 transition-colors"
                  onClick={() => openEdit(selectedCustomer)}
                >
                  <EditOutlined className="text-sm" />
                  编辑信息
                </button>
              </div>
              {canDelete && (
                <Popconfirm title="确认删除该客户？" onConfirm={() => handleDelete(selectedCustomer.id)}>
                  <button
                    type="button"
                    className="w-full mt-2 flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-md text-[12px] text-red-500 border-0 bg-transparent cursor-pointer hover:bg-red-50"
                  >
                    <DeleteOutlined />
                    删除客户
                  </button>
                </Popconfirm>
              )}
            </div>
          </aside>
        )}
      </div>

      <Modal
        title={editingId ? '编辑客户' : '添加客户'}
        open={editOpen}
        onCancel={() => setEditOpen(false)}
        onOk={() => form.submit()}
        confirmLoading={saving}
        destroyOnClose
        okText="保存"
      >
        <Form form={form} layout="vertical" className="mt-3" onFinish={handleSave}>
          <Form.Item name="name" label="客户名称" rules={[{ required: true, message: '请输入名称' }, { min: 2, max: 50, message: '2-50 个字符' }]}>
            <Input maxLength={50} placeholder="姓名或昵称" />
          </Form.Item>
          <div className="grid grid-cols-2 gap-3">
            <Form.Item name="phone" label="手机号" rules={[{ pattern: /^$|^1[3-9]\d{9}$/, message: '手机号格式不正确' }]}>
              <Input maxLength={20} placeholder="可选" />
            </Form.Item>
            <Form.Item name="status" label="状态">
              <Select options={Object.entries(statusMap).map(([k, v]) => ({ value: k, label: v.text }))} />
            </Form.Item>
          </div>
          <Form.Item name="email" label="邮箱" rules={[{ type: 'email', message: '邮箱格式不正确' }]}>
            <Input maxLength={100} placeholder="可选" />
          </Form.Item>
          <Form.Item name="source" label="来源渠道">
            <Input maxLength={30} placeholder="如：官网咨询、微信、APP" />
          </Form.Item>
          <Form.Item
            name="tags"
            label="标签"
            extra={
              tagSelectOptions.length === 0
                ? '暂无标签库，请管理员在「系统设置 → 客户标签」中创建'
                : '仅可从标签库中选择（由管理员维护）'
            }
          >
            <Select
              mode="multiple"
              maxCount={10}
              allowClear
              options={tagSelectOptions}
              placeholder={tagSelectOptions.length === 0 ? '请先配置标签库' : '选择标签'}
              disabled={tagSelectOptions.length === 0}
              optionFilterProp="label"
            />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}

export default Customers