'use client'

import { useState } from 'react'
import { Plus, FileText, Upload, Trash2, Edit, Check, Search, X, Eye } from 'lucide-react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { Button } from '@/components/ui/Button'
import { Input } from '@/components/ui/Input'
import { Modal } from '@/components/ui/Modal'
import { SuccessTag, PendingTag } from '@/components/ui/Tag'

// 平台选项
const platformOptions = [
  { id: 'douyin', name: '抖音', icon: '🎵', color: 'bg-[#1a1a1a]' },
  { id: 'xiaohongshu', name: '小红书', icon: '📕', color: 'bg-[#fe2c55]' },
  { id: 'bilibili', name: 'B站', icon: '📺', color: 'bg-[#00a1d6]' },
  { id: 'kuaishou', name: '快手', icon: '⚡', color: 'bg-[#ff4906]' },
  { id: 'weibo', name: '微博', icon: '🔴', color: 'bg-[#e6162d]' },
  { id: 'wechat', name: '微信视频号', icon: '💬', color: 'bg-[#07c160]' },
]

// 模拟 Brief 列表
const mockBriefs = [
  {
    id: 'brief-001',
    name: '2024 夏日护肤活动',
    description: '夏日护肤系列产品推广规范',
    status: 'active',
    platforms: ['douyin', 'xiaohongshu'],
    rulesCount: 12,
    creatorsCount: 45,
    createdAt: '2024-01-15',
    updatedAt: '2024-02-01',
  },
  {
    id: 'brief-002',
    name: '新品口红上市',
    description: '春季新品口红营销 Brief',
    status: 'active',
    platforms: ['xiaohongshu', 'bilibili'],
    rulesCount: 8,
    creatorsCount: 32,
    createdAt: '2024-02-01',
    updatedAt: '2024-02-03',
  },
  {
    id: 'brief-003',
    name: '年货节活动',
    description: '春节年货促销活动规范',
    status: 'archived',
    platforms: ['douyin', 'kuaishou'],
    rulesCount: 15,
    creatorsCount: 78,
    createdAt: '2024-01-01',
    updatedAt: '2024-01-20',
  },
]

export default function BriefsPage() {
  const [briefs, setBriefs] = useState(mockBriefs)
  const [showCreateModal, setShowCreateModal] = useState(false)
  const [searchQuery, setSearchQuery] = useState('')

  // 新建 Brief 表单
  const [newBriefName, setNewBriefName] = useState('')
  const [newBriefDesc, setNewBriefDesc] = useState('')
  const [selectedPlatforms, setSelectedPlatforms] = useState<string[]>([])

  // 查看详情
  const [showDetailModal, setShowDetailModal] = useState(false)
  const [selectedBrief, setSelectedBrief] = useState<typeof mockBriefs[0] | null>(null)

  const filteredBriefs = briefs.filter((brief) =>
    brief.name.toLowerCase().includes(searchQuery.toLowerCase())
  )

  // 切换平台选择
  const togglePlatform = (platformId: string) => {
    setSelectedPlatforms(prev =>
      prev.includes(platformId)
        ? prev.filter(id => id !== platformId)
        : [...prev, platformId]
    )
  }

  // 获取平台信息
  const getPlatformInfo = (platformId: string) => {
    return platformOptions.find(p => p.id === platformId)
  }

  // 创建 Brief
  const handleCreateBrief = () => {
    if (!newBriefName.trim() || selectedPlatforms.length === 0) return

    const newBrief = {
      id: `brief-${Date.now()}`,
      name: newBriefName,
      description: newBriefDesc,
      status: 'active' as const,
      platforms: selectedPlatforms,
      rulesCount: 0,
      creatorsCount: 0,
      createdAt: new Date().toISOString().split('T')[0],
      updatedAt: new Date().toISOString().split('T')[0],
    }

    setBriefs([newBrief, ...briefs])
    setShowCreateModal(false)
    setNewBriefName('')
    setNewBriefDesc('')
    setSelectedPlatforms([])
  }

  // 查看 Brief 详情
  const viewBriefDetail = (brief: typeof mockBriefs[0]) => {
    setSelectedBrief(brief)
    setShowDetailModal(true)
  }

  // 删除 Brief
  const handleDeleteBrief = (id: string) => {
    setBriefs(briefs.filter(b => b.id !== id))
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-text-primary">Brief 管理</h1>
          <p className="text-sm text-text-secondary mt-1">创建和管理营销 Brief，配置不同平台的审核规则</p>
        </div>
        <Button onClick={() => setShowCreateModal(true)}>
          <Plus size={16} />
          新建 Brief
        </Button>
      </div>

      {/* 搜索 */}
      <div className="relative max-w-md">
        <Search size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-text-tertiary" />
        <input
          type="text"
          placeholder="搜索 Brief..."
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          className="w-full pl-10 pr-4 py-2.5 border border-border-subtle rounded-xl bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
        />
      </div>

      {/* Brief 列表 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {filteredBriefs.map((brief) => (
          <Card key={brief.id} className="hover:shadow-md transition-shadow border border-border-subtle">
            <CardContent className="p-5">
              <div className="flex items-start justify-between mb-3">
                <div className="p-2 bg-accent-indigo/15 rounded-lg">
                  <FileText size={24} className="text-accent-indigo" />
                </div>
                {brief.status === 'active' ? (
                  <SuccessTag>使用中</SuccessTag>
                ) : (
                  <PendingTag>已归档</PendingTag>
                )}
              </div>

              <h3 className="font-semibold text-text-primary mb-1">{brief.name}</h3>
              <p className="text-sm text-text-tertiary mb-3">{brief.description}</p>

              {/* 平台标签 */}
              <div className="flex flex-wrap gap-1.5 mb-3">
                {brief.platforms.map(platformId => {
                  const platform = getPlatformInfo(platformId)
                  return platform ? (
                    <span
                      key={platformId}
                      className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-bg-elevated text-xs text-text-secondary"
                    >
                      <span>{platform.icon}</span>
                      {platform.name}
                    </span>
                  ) : null
                })}
              </div>

              <div className="flex gap-4 text-sm text-text-tertiary mb-4">
                <span>{brief.rulesCount} 条规则</span>
                <span>{brief.creatorsCount} 位达人</span>
              </div>

              <div className="flex items-center justify-between pt-3 border-t border-border-subtle">
                <span className="text-xs text-text-tertiary">
                  更新于 {brief.updatedAt}
                </span>
                <div className="flex gap-1">
                  <button
                    type="button"
                    onClick={() => viewBriefDetail(brief)}
                    className="p-1.5 hover:bg-bg-elevated rounded-lg transition-colors"
                    title="查看详情"
                  >
                    <Eye size={16} className="text-text-tertiary hover:text-accent-indigo" />
                  </button>
                  <button
                    type="button"
                    className="p-1.5 hover:bg-bg-elevated rounded-lg transition-colors"
                    title="编辑"
                  >
                    <Edit size={16} className="text-text-tertiary hover:text-accent-indigo" />
                  </button>
                  <button
                    type="button"
                    onClick={() => handleDeleteBrief(brief.id)}
                    className="p-1.5 hover:bg-accent-coral/10 rounded-lg transition-colors"
                    title="删除"
                  >
                    <Trash2 size={16} className="text-text-tertiary hover:text-accent-coral" />
                  </button>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}

        {/* 新建卡片 */}
        <button
          type="button"
          onClick={() => setShowCreateModal(true)}
          className="p-5 rounded-xl border-2 border-dashed border-border-subtle hover:border-accent-indigo hover:bg-accent-indigo/5 transition-all flex flex-col items-center justify-center min-h-[240px]"
        >
          <div className="p-3 bg-bg-elevated rounded-full mb-3">
            <Plus size={24} className="text-text-tertiary" />
          </div>
          <span className="text-text-tertiary font-medium">新建 Brief</span>
        </button>
      </div>

      {/* 新建 Brief 弹窗 */}
      <Modal
        isOpen={showCreateModal}
        onClose={() => {
          setShowCreateModal(false)
          setNewBriefName('')
          setNewBriefDesc('')
          setSelectedPlatforms([])
        }}
        title="新建 Brief"
        size="lg"
      >
        <div className="space-y-5">
          <div>
            <label className="block text-sm font-medium text-text-primary mb-2">Brief 名称</label>
            <input
              type="text"
              value={newBriefName}
              onChange={(e) => setNewBriefName(e.target.value)}
              placeholder="输入 Brief 名称"
              className="w-full px-4 py-2.5 border border-border-subtle rounded-xl bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-text-primary mb-2">描述</label>
            <textarea
              value={newBriefDesc}
              onChange={(e) => setNewBriefDesc(e.target.value)}
              className="w-full h-20 px-4 py-3 border border-border-subtle rounded-xl bg-bg-elevated text-text-primary resize-none focus:outline-none focus:ring-2 focus:ring-accent-indigo"
              placeholder="输入 Brief 描述..."
            />
          </div>

          {/* 选择平台规则库 */}
          <div>
            <label className="block text-sm font-medium text-text-primary mb-2">
              选择平台规则库 <span className="text-accent-coral">*</span>
            </label>
            <p className="text-xs text-text-tertiary mb-3">选择要应用的平台审核规则，可多选</p>
            <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
              {platformOptions.map((platform) => (
                <button
                  key={platform.id}
                  type="button"
                  onClick={() => togglePlatform(platform.id)}
                  className={`p-3 rounded-xl border-2 transition-all flex items-center gap-3 ${
                    selectedPlatforms.includes(platform.id)
                      ? 'border-accent-indigo bg-accent-indigo/10'
                      : 'border-border-subtle hover:border-accent-indigo/50'
                  }`}
                >
                  <div className={`w-10 h-10 ${platform.color} rounded-lg flex items-center justify-center text-lg`}>
                    {platform.icon}
                  </div>
                  <div className="flex-1 text-left">
                    <p className="font-medium text-text-primary">{platform.name}</p>
                  </div>
                  {selectedPlatforms.includes(platform.id) && (
                    <div className="w-5 h-5 rounded-full bg-accent-indigo flex items-center justify-center">
                      <Check size={12} className="text-white" />
                    </div>
                  )}
                </button>
              ))}
            </div>
          </div>

          {/* 上传 PDF */}
          <div>
            <label className="block text-sm font-medium text-text-primary mb-2">
              上传 Brief 文档（可选）
            </label>
            <div className="border-2 border-dashed border-border-subtle rounded-xl p-6 text-center hover:border-accent-indigo transition-colors cursor-pointer">
              <Upload size={32} className="mx-auto text-text-tertiary mb-2" />
              <p className="text-sm text-text-primary">点击或拖拽上传 PDF 文件</p>
              <p className="text-xs text-text-tertiary mt-1">AI 将自动提取规则</p>
            </div>
          </div>

          <div className="flex gap-3 justify-end pt-4 border-t border-border-subtle">
            <Button
              variant="ghost"
              onClick={() => {
                setShowCreateModal(false)
                setNewBriefName('')
                setNewBriefDesc('')
                setSelectedPlatforms([])
              }}
            >
              取消
            </Button>
            <Button
              onClick={handleCreateBrief}
              disabled={!newBriefName.trim() || selectedPlatforms.length === 0}
            >
              创建 Brief
            </Button>
          </div>
        </div>
      </Modal>

      {/* Brief 详情弹窗 */}
      <Modal
        isOpen={showDetailModal}
        onClose={() => {
          setShowDetailModal(false)
          setSelectedBrief(null)
        }}
        title={selectedBrief?.name || 'Brief 详情'}
        size="lg"
      >
        {selectedBrief && (
          <div className="space-y-5">
            <div className="flex items-center gap-4 p-4 rounded-xl bg-bg-elevated">
              <div className="p-3 bg-accent-indigo/15 rounded-xl">
                <FileText size={28} className="text-accent-indigo" />
              </div>
              <div className="flex-1">
                <h3 className="text-lg font-semibold text-text-primary">{selectedBrief.name}</h3>
                <p className="text-sm text-text-tertiary mt-0.5">{selectedBrief.description}</p>
              </div>
              {selectedBrief.status === 'active' ? (
                <SuccessTag>使用中</SuccessTag>
              ) : (
                <PendingTag>已归档</PendingTag>
              )}
            </div>

            {/* 应用的平台规则库 */}
            <div>
              <h4 className="text-sm font-medium text-text-primary mb-3">应用的平台规则库</h4>
              <div className="grid grid-cols-2 gap-3">
                {selectedBrief.platforms.map(platformId => {
                  const platform = getPlatformInfo(platformId)
                  return platform ? (
                    <div
                      key={platformId}
                      className="p-3 rounded-xl bg-bg-elevated border border-border-subtle flex items-center gap-3"
                    >
                      <div className={`w-10 h-10 ${platform.color} rounded-lg flex items-center justify-center text-lg`}>
                        {platform.icon}
                      </div>
                      <div>
                        <p className="font-medium text-text-primary">{platform.name}</p>
                        <p className="text-xs text-text-tertiary">规则库已启用</p>
                      </div>
                    </div>
                  ) : null
                })}
              </div>
            </div>

            {/* 统计数据 */}
            <div className="grid grid-cols-3 gap-4">
              <div className="p-4 rounded-xl bg-accent-indigo/10 border border-accent-indigo/20 text-center">
                <p className="text-2xl font-bold text-accent-indigo">{selectedBrief.rulesCount}</p>
                <p className="text-sm text-text-secondary mt-1">自定义规则</p>
              </div>
              <div className="p-4 rounded-xl bg-accent-green/10 border border-accent-green/20 text-center">
                <p className="text-2xl font-bold text-accent-green">{selectedBrief.creatorsCount}</p>
                <p className="text-sm text-text-secondary mt-1">关联达人</p>
              </div>
              <div className="p-4 rounded-xl bg-accent-amber/10 border border-accent-amber/20 text-center">
                <p className="text-2xl font-bold text-accent-amber">{selectedBrief.platforms.length}</p>
                <p className="text-sm text-text-secondary mt-1">平台规则库</p>
              </div>
            </div>

            {/* 时间信息 */}
            <div className="flex items-center justify-between p-4 rounded-xl bg-bg-elevated text-sm">
              <div>
                <span className="text-text-tertiary">创建时间：</span>
                <span className="text-text-primary">{selectedBrief.createdAt}</span>
              </div>
              <div>
                <span className="text-text-tertiary">最后更新：</span>
                <span className="text-text-primary">{selectedBrief.updatedAt}</span>
              </div>
            </div>

            <div className="flex gap-3 justify-end pt-4 border-t border-border-subtle">
              <Button variant="ghost" onClick={() => setShowDetailModal(false)}>
                关闭
              </Button>
              <Button>
                编辑 Brief
              </Button>
            </div>
          </div>
        )}
      </Modal>
    </div>
  )
}