import React, { useState, useEffect } from 'react'

// 信息页面 - 寻配号发布和发布管理（包含寻号/行情区分）
export default function Info() {
  // 检查登录状态，未登录则跳转到登录页
  if (!localStorage.getItem('token')) {
    window.location.hash = '#/login'
    return null
  }

  // 顶部tab：寻配号发布 / 发布管理
  const [activeTab, setActiveTab] = useState('publish')
  const [showPublish, setShowPublish] = useState(false)
  const [myList, setMyList] = useState([])
  const [loading, setLoading] = useState(false)
  const [editingItem, setEditingItem] = useState(null)
  const [filterType, setFilterType] = useState('all') // all/seek/deal

  const [formData, setFormData] = useState({
    edition: '龙钞', type: '标百', isGraded: true, category: '成交', source: '直播', title: ''
  })

  // 寻配号发布表单（新版）
  const [seekForm, setSeekForm] = useState({
    edition: '龙钞,马钞,蛇钞', price: '', features: '', contact: '', content: ''
  })

  const API_BASE = localStorage.getItem('API_BASE') || ''

  useEffect(() => {
    if (activeTab === 'manage') fetchMyList()
  }, [activeTab])

  useEffect(() => {
    // 自动生成标题
    if (seekForm.edition || seekForm.features) {
      const title = `「寻号 ${seekForm.edition || '龙钞,马钞,蛇钞'} J0${seekForm.features || 'XXXXXXXX'}」`
      setSeekForm(prev => ({ ...prev, title }))
    }
  }, [seekForm.edition, seekForm.features])

  const fetchMyList = async () => {
    setLoading(true)
    try {
      const token = localStorage.getItem('token')
      const res = await fetch(`${API_BASE}/api/information/my/list`, {
        headers: { Authorization: `Bearer ${token}` }
      })
      if (res.ok) {
        const data = await res.json()
        setMyList(data || [])
      }
    } catch (e) {
      console.error(e)
    }
    setLoading(false)
  }

  // 发布寻配号
  const handlePublishSeek = async () => {
    if (!seekForm.contact) {
      alert('请填写联系方式')
      return
    }
    try {
      const token = localStorage.getItem('token')
      const res = await fetch(`${API_BASE}/api/information/`, {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${token}`,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          title: seekForm.title,
          content: document.getElementById('seekContent')?.value || seekForm.content,
          info_type: 'seek',
          expect_category: seekForm.edition,
          expect_number: seekForm.features ? `J0${seekForm.features}` : null
        })
      })
      const data = await res.json()
      if (data.id || data.code === 0) {
        alert('发布成功！')
        setShowPublish(false)
        setSeekForm({ edition: '龙钞,马钞,蛇钞', price: '', features: '', contact: '', content: '', title: '' })
        const contentEl = document.getElementById('seekContent')
        if (contentEl) contentEl.value = ''
        fetchMyList()
      } else {
        alert(data.message || '发布失败')
      }
    } catch (e) {
      alert('发布失败: ' + e.message)
    }
  }

  // 发布行情
  const handlePublishDeal = async () => {
    const content = document.getElementById('publishContent')?.value || ''
    if (!formData.title) {
      alert('请填写标题')
      return
    }
    try {
      const token = localStorage.getItem('token')
      const res = await fetch(`${API_BASE}/api/information/`, {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${token}`,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          title: formData.title,
          content: content,
          info_type: formData.category === '成交' ? 'deal' : 'seek'
        })
      })
      const data = await res.json()
      if (data.id || data.code === 0) {
        alert('发布成功！')
        setShowPublish(false)
        setFormData({ edition: '龙钞', type: '标百', isGraded: true, category: '成交', source: '直播', title: '' })
        const contentEl = document.getElementById('publishContent')
        if (contentEl) contentEl.value = ''
        fetchMyList()
      } else {
        alert(data.message || '发布失败')
      }
    } catch (e) {
      alert('发布失败: ' + e.message)
    }
  }

  // 删除
  const handleDelete = async (id) => {
    if (!confirm('确定删除这条信息吗？')) return
    try {
      const token = localStorage.getItem('token')
      const res = await fetch(`${API_BASE}/api/information/${id}`, {
        method: 'DELETE',
        headers: { Authorization: `Bearer ${token}` }
      })
      if (res.ok) {
        alert('删除成功')
        fetchMyList()
      } else {
        alert('删除失败')
      }
    } catch (e) {
      alert('删除失败: ' + e.message)
    }
  }

  // 编辑
  const handleEdit = (item) => {
    setEditingItem({ id: item.id, title: item.title, content: item.content })
  }

  const saveEdit = async () => {
    if (!editingItem) return
    try {
      const token = localStorage.getItem('token')
      const res = await fetch(`${API_BASE}/api/information/${editingItem.id}`, {
        method: 'PUT',
        headers: {
          'Authorization': `Bearer ${token}`,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ title: editingItem.title, content: editingItem.content })
      })
      if (res.ok) {
        alert('保存成功')
        setEditingItem(null)
        fetchMyList()
      } else {
        alert('保存失败')
      }
    } catch (e) {
      alert('保存失败: ' + e.message)
    }
  }

  const getUserPhone = () => {
    try {
      const user = JSON.parse(localStorage.getItem('user') || '{}')
      return user.phone || user.phoneNumber || user.mobile || user.tel || ''
    } catch {
      return ''
    }
  }

  useEffect(() => {
    setSeekForm(prev => ({ ...prev, contact: getUserPhone() }))
  }, [])

  // 格式化日期
  const formatDate = (date) => {
    if (!date) return '-'
    return new Date(date).toLocaleString('zh-CN').slice(0, 16)
  }

  // 过滤后的列表
  const filteredList = myList.filter(item => filterType === 'all' || item.info_type === filterType)

  return (
    <div style={{ minHeight: '100vh', background: 'linear-gradient(180deg, #0f172a 0%, #1e293b 100%)', paddingBottom: '80px' }}>
      {/* 顶部 Tab 切换 */}
      <div style={{ position: 'sticky', top: 0, background: 'rgba(15,23,42,0.95)', backdropFilter: 'blur(10px)', padding: '16px 20px', borderBottom: '1px solid #1e293b', zIndex: 100 }}>
        <div style={{ display: 'flex', gap: '8px', background: '#1e293b', borderRadius: '12px', padding: '4px' }}>
          {[
            { key: 'publish', label: '📝 寻配号发布' },
            { key: 'manage', label: '📋 发布管理' }
          ].map(tab => (
            <div
              key={tab.key}
              onClick={() => setActiveTab(tab.key)}
              style={{
                flex: 1,
                padding: '12px 16px',
                borderRadius: '10px',
                background: activeTab === tab.key ? 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)' : 'transparent',
                color: activeTab === tab.key ? '#fff' : '#9ca3af',
                cursor: 'pointer',
                textAlign: 'center',
                fontSize: '14px',
                fontWeight: '600',
                transition: 'all 0.3s'
              }}
            >
              {tab.label}
            </div>
          ))}
        </div>
      </div>

      <div style={{ padding: '20px' }}>
        {/* 寻配号发布页 */}
        {activeTab === 'publish' && (
          <div style={{ padding: '40px', textAlign: 'center', color: '#94a3b8' }}>
            <div style={{ fontSize: '48px', marginBottom: '16px' }}>📝</div>
            <div style={{ fontSize: '16px', marginBottom: '8px', color: '#fff' }}>寻配号发布</div>
            <div style={{ fontSize: '13px' }}>请到「发布管理」tab进行发布</div>
          </div>
        )}

        {/* 发布管理页 */}
        {activeTab === 'manage' && (
          <div>
            {/* 新增发布区域 */}
            <div style={{ background: 'linear-gradient(145deg, #1f2937 0%, #111827 100%)', borderRadius: '16px', padding: '20px', marginBottom: '16px', border: '1px solid #374151', boxShadow: '0 4px 20px rgba(0,0,0,0.3)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
                <h3 style={{ color: '#f9fafb', margin: 0, fontSize: '16px', fontWeight: '600' }}>📋 发布管理</h3>
                <button
                  onClick={() => setShowPublish(!showPublish)}
                  style={{
                    padding: '8px 16px',
                    background: showPublish ? 'rgba(108,114,132,0.5)' : '#10b981',
                    border: 'none',
                    borderRadius: '8px',
                    color: '#fff',
                    cursor: 'pointer',
                    fontSize: '13px'
                  }}
                >
                  {showPublish ? '收起' : '+ 新增发布'}
                </button>
              </div>

              {/* 发布表单 - 两个Tab：寻配号 / 行情 */}
              {showPublish && (
                <div style={{ background: '#0f172a', borderRadius: '12px', padding: '16px', marginBottom: '16px' }}>
                  {/* 内部Tab：寻配号 / 行情 */}
                  <div style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
                    <button
                      onClick={() => setSeekForm(prev => ({ ...prev, _tab: 'seek' }))}
                      style={{
                        flex: 1,
                        padding: '10px',
                        borderRadius: '8px',
                        border: '1px solid #10b981',
                        background: 'rgba(16,185,129,0.15)',
                        color: '#10b981',
                        cursor: 'pointer',
                        fontSize: '14px',
                        fontWeight: '600'
                      }}
                    >
                      🔍 寻配号
                    </button>
                    <button
                      onClick={() => setSeekForm(prev => ({ ...prev, _tab: 'deal' }))}
                      style={{
                        flex: 1,
                        padding: '10px',
                        borderRadius: '8px',
                        border: '1px solid #f59e0b',
                        background: 'rgba(245,158,11,0.15)',
                        color: '#f59e0b',
                        cursor: 'pointer',
                        fontSize: '14px',
                        fontWeight: '600'
                      }}
                    >
                      💰 行情
                    </button>
                  </div>

                  {/* 寻配号表单 */}
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                    <div>
                      <label style={{ color: '#9ca3af', fontSize: '12px', display: 'block', marginBottom: '6px' }}>版别（多选）</label>
                      <div style={{ display: 'flex', gap: '8px' }}>
                        {['龙钞', '马钞', '蛇钞'].map(ed => {
                          const selected = seekForm.edition?.split(',').includes(ed)
                          return (
                            <button
                              key={ed}
                              onClick={() => {
                                const editions = seekForm.edition ? seekForm.edition.split(',').filter(e => e) : []
                                if (selected) {
                                  setSeekForm({ ...seekForm, edition: editions.filter(e => e !== ed).join(',') })
                                } else {
                                  editions.push(ed)
                                  setSeekForm({ ...seekForm, edition: editions.join(',') })
                                }
                              }}
                              style={{
                                flex: 1,
                                padding: '8px',
                                borderRadius: '6px',
                                border: selected ? '2px solid #10b981' : '1px solid #334155',
                                background: selected ? 'rgba(16,185,129,0.2)' : '#1f2937',
                                color: '#fff',
                                cursor: 'pointer',
                                fontSize: '12px'
                              }}
                            >
                              {ed}
                            </button>
                          )
                        })}
                      </div>
                    </div>

                    <div>
                      <label style={{ color: '#9ca3af', fontSize: '12px', display: 'block', marginBottom: '6px' }}>价格（选填）</label>
                      <input
                        type="text"
                        value={seekForm.price}
                        onChange={e => setSeekForm({ ...seekForm, price: e.target.value })}
                        placeholder="请输入价格"
                        style={{ width: '100%', padding: '8px', background: '#1f2937', border: '1px solid #334155', borderRadius: '6px', color: '#fff', fontSize: '13px', boxSizing: 'border-box' }}
                      />
                    </div>

                    <div>
                      <label style={{ color: '#9ca3af', fontSize: '12px', display: 'block', marginBottom: '6px' }}>号码特征（8位）</label>
                      <input
                        type="text"
                        value={seekForm.features}
                        onChange={e => setSeekForm({ ...seekForm, features: e.target.value.toUpperCase().slice(0, 8) })}
                        placeholder="输入号码特征，如：12345678 或 XXXXXXXX"
                        maxLength={8}
                        style={{ width: '100%', padding: '8px', background: '#1f2937', border: '1px solid #334155', borderRadius: '6px', color: '#fff', fontSize: '13px', boxSizing: 'border-box' }}
                      />
                    </div>

                    <div>
                      <label style={{ color: '#ef4444', fontSize: '12px', display: 'block', marginBottom: '6px' }}>联系方式 *</label>
                      <input
                        type="text"
                        value={seekForm.contact}
                        onChange={e => setSeekForm({ ...seekForm, contact: e.target.value })}
                        placeholder="请输入手机号或微信"
                        style={{ width: '100%', padding: '8px', background: '#1f2937', border: '1px solid #334155', borderRadius: '6px', color: '#fff', fontSize: '13px', boxSizing: 'border-box' }}
                      />
                    </div>

                    <div>
                      <label style={{ color: '#9ca3af', fontSize: '12px', display: 'block', marginBottom: '6px' }}>正文</label>
                      <textarea
                        id="seekContent"
                        placeholder="请输入详细信息..."
                        style={{ width: '100%', padding: '8px', background: '#1f2937', border: '1px solid #334155', borderRadius: '6px', color: '#fff', fontSize: '13px', boxSizing: 'border-box', resize: 'vertical', minHeight: '60px' }}
                      />
                    </div>

                    <div style={{ display: 'flex', gap: '12px' }}>
                      <button
                        onClick={handlePublishSeek}
                        style={{
                          flex: 1,
                          padding: '12px',
                          background: '#10b981',
                          border: 'none',
                          borderRadius: '8px',
                          color: '#fff',
                          fontSize: '14px',
                          fontWeight: 'bold',
                          cursor: 'pointer'
                        }}
                      >
                        🔍 发布寻号
                      </button>
                      <button
                        onClick={() => setShowPublish(false)}
                        style={{
                          flex: 1,
                          padding: '12px',
                          background: 'transparent',
                          border: '1px solid #334155',
                          borderRadius: '8px',
                          color: '#94a3b8',
                          fontSize: '14px',
                          cursor: 'pointer'
                        }}
                      >
                        取消
                      </button>
                    </div>
                  </div>
                </div>
              )}
            </div>

            {/* 列表过滤：全部 / 寻号 / 行情 */}
            <div style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
              <button
                onClick={() => setFilterType('all')}
                style={{
                  padding: '8px 16px',
                  background: filterType === 'all' ? '#3b82f6' : '#374151',
                  border: 'none',
                  borderRadius: '6px',
                  color: '#fff',
                  fontSize: '13px',
                  cursor: 'pointer'
                }}
              >
                全部
              </button>
              <button
                onClick={() => setFilterType('seek')}
                style={{
                  padding: '8px 16px',
                  background: filterType === 'seek' ? '#10b981' : '#374151',
                  border: 'none',
                  borderRadius: '6px',
                  color: '#fff',
                  fontSize: '13px',
                  cursor: 'pointer'
                }}
              >
                🔍 寻号
              </button>
              <button
                onClick={() => setFilterType('deal')}
                style={{
                  padding: '8px 16px',
                  background: filterType === 'deal' ? '#f59e0b' : '#374151',
                  border: 'none',
                  borderRadius: '6px',
                  color: '#fff',
                  fontSize: '13px',
                  cursor: 'pointer'
                }}
              >
                💰 行情
              </button>
            </div>

            {/* 发布列表 */}
            {loading ? (
              <div style={{ color: '#9ca3af', textAlign: 'center', padding: '30px' }}>加载中...</div>
            ) : filteredList.length === 0 ? (
              <div style={{ color: '#9ca3af', textAlign: 'center', padding: '30px', fontSize: '14px' }}>暂无发布记录</div>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                {filteredList.map(item => (
                  <div key={item.id} style={{ background: '#0f172a', borderRadius: '12px', padding: '16px', border: '1px solid #374151' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '8px' }}>
                      <div style={{ color: '#10b981', fontSize: '15px', fontWeight: '600', flex: 1 }}>{item.title}</div>
                      <span style={{
                        background: item.info_type === 'deal' ? 'rgba(245,158,11,0.2)' : 'rgba(16,185,129,0.2)',
                        color: item.info_type === 'deal' ? '#f59e0b' : '#10b981',
                        padding: '4px 10px',
                        borderRadius: '20px',
                        fontSize: '12px'
                      }}>
                        {item.info_type === 'deal' ? '💰 行情' : '🔍 寻号'}
                      </span>
                    </div>
                    {item.content && <div style={{ color: '#9ca3af', fontSize: '13px', marginBottom: '12px', lineHeight: '1.5' }}>{item.content}</div>}
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <div style={{ color: '#6b7280', fontSize: '12px' }}>{formatDate(item.created_at)}</div>
                      <div style={{ display: 'flex', gap: '8px' }}>
                        <button onClick={() => handleEdit(item)} style={{ padding: '6px 12px', borderRadius: '6px', border: '1px solid #3b82f6', background: 'transparent', color: '#3b82f6', cursor: 'pointer', fontSize: '12px' }}>✏️ 编辑</button>
                        <button onClick={() => handleDelete(item.id)} style={{ padding: '6px 12px', borderRadius: '6px', border: '1px solid #ef4444', background: 'transparent', color: '#ef4444', cursor: 'pointer', fontSize: '12px' }}>🗑️ 删除</button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}
      </div>

      {/* 编辑弹窗 */}
      {editingItem && (
        <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.8)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000, padding: '20px' }}>
          <div style={{ background: '#1f2937', borderRadius: '16px', padding: '24px', width: '100%', maxWidth: '420px', border: '1px solid #374151' }}>
            <h3 style={{ color: '#f9fafb', marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>✏️ 编辑信息</h3>
            <div style={{ marginBottom: '16px' }}>
              <label style={{ color: '#9ca3af', fontSize: '13px', display: 'block', marginBottom: '8px' }}>标题</label>
              <input
                type="text"
                value={editingItem.title}
                onChange={e => setEditingItem({ ...editingItem, title: e.target.value })}
                style={{ width: '100%', padding: '12px', background: '#0f172a', border: '1px solid #374151', borderRadius: '8px', color: '#fff', boxSizing: 'border-box', fontSize: '14px' }}
              />
            </div>
            <div style={{ marginBottom: '20px' }}>
              <label style={{ color: '#9ca3af', fontSize: '13px', display: 'block', marginBottom: '8px' }}>内容</label>
              <textarea
                value={editingItem.content}
                onChange={e => setEditingItem({ ...editingItem, content: e.target.value })}
                rows={4}
                style={{ width: '100%', padding: '12px', background: '#0f172a', border: '1px solid #374151', borderRadius: '8px', color: '#fff', boxSizing: 'border-box', fontSize: '14px', resize: 'vertical' }}
              />
            </div>
            <div style={{ display: 'flex', gap: '12px' }}>
              <button onClick={saveEdit} style={{ flex: 1, padding: '12px', background: '#10b981', border: 'none', borderRadius: '8px', color: '#fff', cursor: 'pointer', fontSize: '14px', fontWeight: '600' }}>💾 保存</button>
              <button onClick={() => setEditingItem(null)} style={{ flex: 1, padding: '12px', border: '1px solid #374151', borderRadius: '8px', background: 'transparent', color: '#9ca3af', cursor: 'pointer', fontSize: '14px' }}>取消</button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}