'use client'

import { useState, useEffect } from 'react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { Textarea } from '@/components/ui/textarea'
import {
  RefreshCw,
  Lock,
  Newspaper,
  Plus,
  Trash2,
  LogOut,
  Rss,
  Settings,
  Check,
  X,
  Eye,
  Globe
} from 'lucide-react'

type News = {
  id: number
  title: string
  category: string
  excerpt: string
  createdAt: string
}

type AutoFetchedNews = {
  id: number
  title: string
  source: string
  url: string
  imageUrl: string
  excerpt: string
  category: string
  publishTime: string
  status: string
  isDigitalEconomy: boolean
  createdAt: string
}

export default function AdminPage() {
  const [activeTab, setActiveTab] = useState<'news' | 'autofetch'>('news')
  const [isAuthenticated, setIsAuthenticated] = useState(false)
  const [password, setPassword] = useState('')
  const [newsList, setNewsList] = useState<News[]>([])
  const [autoFetchedNews, setAutoFetchedNews] = useState<AutoFetchedNews[]>([])
  const [isLoading, setIsLoading] = useState(false)
  
  // 新闻发布表单状态
  const [showAddNews, setShowAddNews] = useState(false)
  const [newNews, setNewNews] = useState({
    title: '',
    category: '公司新闻',
    excerpt: '',
    content: ''
  })

  // 自动抓取状态
  const [isAutoFetching, setIsAutoFetching] = useState(false)
  const [fetchStatus, setFetchStatus] = useState<{
    lastFetch: string | null
    nextFetch: string | null
  }>({
    lastFetch: null,
    nextFetch: null
  })

  const handleLogin = (e: React.FormEvent) => {
    e.preventDefault()
    if (password === 'admin123') {
      setIsAuthenticated(true)
      fetchAllData()
    } else {
      alert('密码错误')
    }
  }

  const fetchAllData = async () => {
    setIsLoading(true)
    try {
      const [newsRes, autoFetchRes] = await Promise.all([
        fetch('/api/news'),
        fetch('/api/auto-fetch')
      ])

      if (newsRes.ok) {
        const data = await newsRes.json()
        setNewsList(data.news || [])
      }
      if (autoFetchRes.ok) {
        const data = await autoFetchRes.json()
        // 合并待审核和已批准的内容
        const allNews = [
          ...(data.pending || []),
          ...(data.approved || []).filter((a: AutoFetchedNews) => 
            !data.pending?.some((p: AutoFetchedNews) => p.id === a.id)
          )
        ]
        setAutoFetchedNews(allNews)
        setFetchStatus({
          lastFetch: data.lastFetch,
          nextFetch: data.nextFetch
        })
      }
    } catch (error) {
      console.error('获取数据失败', error)
    } finally {
      setIsLoading(false)
    }
  }

  const handleAddNews = async (e: React.FormEvent) => {
    e.preventDefault()
    try {
      const res = await fetch('/api/news', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(newNews)
      })
      if (res.ok) {
        setNewNews({ title: '', category: '公司新闻', excerpt: '', content: '' })
        setShowAddNews(false)
        fetchAllData()
      }
    } catch (error) {
      alert('发布失败')
    }
  }

  // 自动抓取相关函数
  const triggerAutoFetch = async () => {
    setIsAutoFetching(true)
    try {
      const res = await fetch('/api/auto-fetch', { method: 'POST' })
      const data = await res.json()
      
      if (data.success) {
        alert(`成功抓取 ${data.articles?.length || 0} 条资讯`)
        fetchAllData()
      } else {
        alert('抓取失败：' + data.error)
      }
    } catch (error) {
      alert('抓取失败，请稍后重试')
    } finally {
      setIsAutoFetching(false)
    }
  }

  const approveArticle = async (id: number) => {
    try {
      const res = await fetch(`/api/auto-fetch/${id}/approve`, { method: 'POST' })
      if (res.ok) {
        fetchAllData()
      }
    } catch (error) {
      alert('操作失败')
    }
  }

  const rejectArticle = async (id: number) => {
    const reason = prompt('请输入拒绝原因：')
    if (reason === null) return
    
    try {
      const res = await fetch(`/api/auto-fetch/${id}/reject`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ reason })
      })
      if (res.ok) {
        fetchAllData()
      }
    } catch (error) {
      alert('操作失败')
    }
  }

  const deleteArticle = async (id: number) => {
    if (!confirm('确定要删除这条资讯吗？')) return
    
    try {
      const res = await fetch(`/api/auto-fetch/${id}`, { method: 'DELETE' })
      if (res.ok) {
        fetchAllData()
      }
    } catch (error) {
      alert('删除失败')
    }
  }

  if (!isAuthenticated) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-[#0A1931]">
        <Card className="w-[350px] shadow-2xl border-0">
          <CardHeader className="text-center pb-8 pt-10">
            <CardTitle className="text-2xl font-black text-[#0A1931] flex flex-col items-center gap-4">
              <div className="w-16 h-16 bg-[#FF6600] rounded-2xl flex items-center justify-center text-white shadow-lg">
                <Lock className="w-8 h-8" />
              </div>
              白马家园后台管理
            </CardTitle>
          </CardHeader>
          <CardContent className="pb-10 px-8">
            <form onSubmit={handleLogin} className="space-y-6">
              <div className="space-y-2">
                <label className="text-sm font-bold text-gray-500">管理员密码</label>
                <Input
                  type="password"
                  placeholder="请输入密码"
                  className="h-12 border-gray-200 focus:border-[#FF6600] focus:ring-[#FF6600]"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                />
              </div>
              <Button type="submit" className="w-full h-12 bg-[#0A1931] hover:bg-[#185ADB] font-bold text-lg rounded-xl transition-all">
                进入管理中心
              </Button>
            </form>
          </CardContent>
        </Card>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gray-50 flex">
      {/* Sidebar */}
      <aside className="w-64 bg-[#0A1931] text-white hidden md:flex flex-col">
        <div className="p-8 border-b border-white/10">
          <span className="text-xl font-black">管理中心</span>
        </div>
        <nav className="flex-grow p-4 space-y-2">
          <button 
            onClick={() => setActiveTab('news')}
            className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all font-bold ${activeTab === 'news' ? 'bg-[#FF6600] text-white shadow-lg' : 'hover:bg-white/5 text-gray-400'}`}
          >
            <Newspaper className="w-5 h-5" />
            新闻动态
          </button>
          <button 
            onClick={() => setActiveTab('autofetch')}
            className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all font-bold ${activeTab === 'autofetch' ? 'bg-[#FF6600] text-white shadow-lg' : 'hover:bg-white/5 text-gray-400'}`}
          >
            <Rss className="w-5 h-5" />
            自动抓取
          </button>
        </nav>
        <div className="p-6">
          <Button variant="ghost" className="w-full text-gray-400 hover:text-white" onClick={() => setIsAuthenticated(false)}>
            <LogOut className="w-4 h-4 mr-2" /> 退出登录
          </Button>
        </div>
      </aside>

      {/* Main Content */}
      <main className="flex-grow pt-24 pb-12 px-4 md:px-8 overflow-y-auto">
        <div className="max-w-6xl mx-auto">
          
          <div className="flex justify-between items-center mb-10">
            <div>
              <h1 className="text-3xl font-black text-[#0A1931]">
                {activeTab === 'news' && '公司/行业动态'}
                {activeTab === 'autofetch' && '资讯自动抓取'}
              </h1>
              <p className="text-gray-500 mt-1">
                {activeTab === 'news' && '发布和管理最新的公司动态与行业资讯'}
                {activeTab === 'autofetch' && '自动抓取白马精选公众号等资讯，智能筛选后展示'}
              </p>
            </div>
            <div className="flex gap-3">
              {activeTab === 'news' && (
                <Button 
                  onClick={() => setShowAddNews(!showAddNews)} 
                  className="bg-[#FF6600] hover:bg-[#FF8C00] font-bold"
                >
                  <Plus className="w-4 h-4 mr-2" /> 发布动态
                </Button>
              )}
              {activeTab === 'autofetch' && (
                <Button 
                  onClick={triggerAutoFetch}
                  disabled={isAutoFetching}
                  className="bg-[#FF6600] hover:bg-[#FF8C00] font-bold"
                >
                  <RefreshCw className={`w-4 h-4 mr-2 ${isAutoFetching ? 'animate-spin' : ''}`} /> 
                  {isAutoFetching ? '抓取中...' : '立即抓取'}
                </Button>
              )}
              <Button variant="outline" onClick={fetchAllData} disabled={isLoading} className="border-gray-200">
                <RefreshCw className={`w-4 h-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} /> 刷新
              </Button>
            </div>
          </div>

          {/* 新闻发布表单 */}
          {activeTab === 'news' && showAddNews && (
            <Card className="mb-10 border-2 border-[#FF6600]/20 shadow-xl overflow-hidden">
              <CardHeader className="bg-[#FF6600]/5 border-b">
                <CardTitle className="text-lg">撰写新动态</CardTitle>
              </CardHeader>
              <CardContent className="pt-6">
                <form onSubmit={handleAddNews} className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <label className="text-sm font-bold">标题</label>
                      <Input 
                        placeholder="输入新闻标题" 
                        required
                        onChange={(e) => setNewNews({...newNews, title: e.target.value})}
                      />
                    </div>
                    <div className="space-y-2">
                      <label className="text-sm font-bold">分类</label>
                      <select 
                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                        value={newNews.category}
                        onChange={(e) => setNewNews({...newNews, category: e.target.value})}
                      >
                        <option>公司新闻</option>
                        <option>行业洞察</option>
                        <option>媒体报道</option>
                        <option>产品发布</option>
                        <option>荣誉获奖</option>
                      </select>
                    </div>
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-bold">摘要</label>
                    <Input 
                      placeholder="输入新闻简介" 
                      value={newNews.excerpt}
                      onChange={(e) => setNewNews({...newNews, excerpt: e.target.value})}
                    />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-bold">详细内容</label>
                    <Textarea 
                      placeholder="输入详细报道内容..." 
                      className="min-h-[150px]" 
                      value={newNews.content}
                      onChange={(e) => setNewNews({...newNews, content: e.target.value})}
                    />
                  </div>
                  <div className="flex gap-3 justify-end">
                    <Button variant="ghost" onClick={() => setShowAddNews(false)}>取消</Button>
                    <Button type="submit" className="bg-[#0A1931] hover:bg-[#185ADB] px-8">立即发布</Button>
                  </div>
                </form>
              </CardContent>
            </Card>
          )}

          {/* 自动抓取状态面板 */}
          {activeTab === 'autofetch' && (
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
              <Card className="bg-gradient-to-br from-[#FF6600] to-[#FF8C00] text-white">
                <CardContent className="pt-6">
                  <div className="flex items-center gap-4">
                    <div className="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
                      <Rss className="w-6 h-6" />
                    </div>
                    <div>
                      <p className="text-sm opacity-80">上次抓取时间</p>
                      <p className="text-lg font-bold">
                        {fetchStatus.lastFetch 
                          ? new Date(fetchStatus.lastFetch).toLocaleString('zh-CN')
                          : '尚未抓取'}
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <Card className="bg-gradient-to-br from-[#0A1931] to-[#185ADB] text-white">
                <CardContent className="pt-6">
                  <div className="flex items-center gap-4">
                    <div className="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
                      <Settings className="w-6 h-6" />
                    </div>
                    <div>
                      <p className="text-sm opacity-80">下次抓取时间</p>
                      <p className="text-lg font-bold">
                        {fetchStatus.nextFetch 
                          ? new Date(fetchStatus.nextFetch).toLocaleString('zh-CN')
                          : '每6小时自动抓取'}
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <Card className="bg-gradient-to-br from-green-500 to-emerald-600 text-white">
                <CardContent className="pt-6">
                  <div className="flex items-center gap-4">
                    <div className="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
                      <Check className="w-6 h-6" />
                    </div>
                    <div>
                      <p className="text-sm opacity-80">待审核资讯</p>
                      <p className="text-2xl font-bold">
                        {autoFetchedNews.filter(n => n.status === 'PENDING').length} 条
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          )}

          {/* 数据列表 */}
          <div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
            {activeTab === 'news' && (
              <div className="overflow-x-auto">
                <table className="w-full text-sm text-left">
                  <thead className="text-xs text-gray-400 uppercase bg-gray-50/50 border-b">
                    <tr>
                      <th className="px-6 py-4">发布时间</th>
                      <th className="px-6 py-4">标题</th>
                      <th className="px-6 py-4">分类</th>
                      <th className="px-6 py-4">摘要</th>
                      <th className="px-6 py-4 text-right">操作</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y">
                    {newsList.length === 0 ? (
                      <tr><td colSpan={5} className="text-center py-20 text-gray-400">暂无动态数据</td></tr>
                    ) : (
                      newsList.map((n) => (
                        <tr key={n.id} className="hover:bg-gray-50 transition-colors">
                          <td className="px-6 py-4 text-xs text-gray-400 whitespace-nowrap">{new Date(n.createdAt).toLocaleDateString()}</td>
                          <td className="px-6 py-4 font-bold text-[#0A1931]">{n.title}</td>
                          <td className="px-6 py-4">
                            <span className="bg-orange-50 text-[#FF6600] px-2.5 py-1 rounded-full text-xs font-bold">{n.category}</span>
                          </td>
                          <td className="px-6 py-4 text-gray-500 max-w-xs truncate">{n.excerpt}</td>
                          <td className="px-6 py-4 text-right">
                            <Button variant="ghost" size="icon" className="text-gray-300 hover:text-red-500">
                              <Trash2 className="w-4 h-4" />
                            </Button>
                          </td>
                        </tr>
                      ))
                    )}
                  </tbody>
                </table>
              </div>
            )}

            {activeTab === 'autofetch' && (
              <div className="overflow-x-auto">
                <table className="w-full text-sm text-left">
                  <thead className="text-xs text-gray-400 uppercase bg-gray-50/50 border-b">
                    <tr>
                      <th className="px-6 py-4">发布时间</th>
                      <th className="px-6 py-4">标题</th>
                      <th className="px-6 py-4">来源</th>
                      <th className="px-6 py-4">分类</th>
                      <th className="px-6 py-4">状态</th>
                      <th className="px-6 py-4 text-right">操作</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y">
                    {autoFetchedNews.length === 0 ? (
                      <tr>
                        <td colSpan={6} className="text-center py-20">
                          <div className="flex flex-col items-center gap-4">
                            <Rss className="w-16 h-16 text-gray-300" />
                            <div>
                              <p className="text-gray-500 font-medium">暂无抓取数据</p>
                              <p className="text-gray-400 text-sm">点击"立即抓取"按钮开始抓取资讯</p>
                            </div>
                          </div>
                        </td>
                      </tr>
                    ) : (
                      autoFetchedNews.map((news) => (
                        <tr key={news.id} className="hover:bg-gray-50 transition-colors">
                          <td className="px-6 py-4 text-xs text-gray-400 whitespace-nowrap">
                            {new Date(news.publishTime).toLocaleDateString()}
                          </td>
                          <td className="px-6 py-4">
                            <div className="font-bold text-[#0A1931] max-w-xs truncate">{news.title}</div>
                            {news.excerpt && (
                              <div className="text-gray-400 text-xs mt-1 max-w-xs truncate">{news.excerpt}</div>
                            )}
                          </td>
                          <td className="px-6 py-4">
                            <div className="flex items-center gap-2">
                              <Globe className="w-4 h-4 text-[#FF6600]" />
                              <span className="text-gray-600">{news.source}</span>
                            </div>
                          </td>
                          <td className="px-6 py-4">
                            <span className="bg-blue-50 text-blue-600 px-2.5 py-1 rounded-full text-xs font-bold">
                              {news.category}
                            </span>
                          </td>
                          <td className="px-6 py-4">
                            <span className={`px-2.5 py-1 rounded-full text-xs font-bold ${
                              news.status === 'APPROVED' ? 'bg-green-50 text-green-600' :
                              news.status === 'REJECTED' ? 'bg-red-50 text-red-600' :
                              'bg-yellow-50 text-yellow-600'
                            }`}>
                              {news.status === 'APPROVED' ? '已发布' : 
                               news.status === 'REJECTED' ? '已拒绝' : '待审核'}
                            </span>
                          </td>
                          <td className="px-6 py-4 text-right">
                            <div className="flex justify-end gap-2">
                              {news.status === 'PENDING' && (
                                <>
                                  <Button 
                                    variant="ghost" 
                                    size="icon" 
                                    className="text-green-500 hover:text-green-600"
                                    onClick={() => approveArticle(news.id)}
                                    title="通过并发布"
                                  >
                                    <Check className="w-4 h-4" />
                                  </Button>
                                  <Button 
                                    variant="ghost" 
                                    size="icon" 
                                    className="text-red-500 hover:text-red-600"
                                    onClick={() => rejectArticle(news.id)}
                                    title="拒绝"
                                  >
                                    <X className="w-4 h-4" />
                                  </Button>
                                </>
                              )}
                              {news.url && (
                                <a 
                                  href={news.url} 
                                  target="_blank" 
                                  rel="noopener noreferrer"
                                  className="text-gray-400 hover:text-[#FF6600] p-2"
                                  title="查看原文"
                                >
                                  <Eye className="w-4 h-4" />
                                </a>
                              )}
                              <Button 
                                variant="ghost" 
                                size="icon" 
                                className="text-gray-300 hover:text-red-500"
                                onClick={() => deleteArticle(news.id)}
                                title="删除"
                              >
                                <Trash2 className="w-4 h-4" />
                              </Button>
                            </div>
                          </td>
                        </tr>
                      ))
                    )}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        </div>
      </main>
    </div>
  )
}