'use client'

import { useState } from 'react'
import { useRouter, useParams } from 'next/navigation'
import { useToast } from '@/components/ui/Toast'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { Button } from '@/components/ui/Button'
import { Modal } from '@/components/ui/Modal'
import { SuccessTag } from '@/components/ui/Tag'
import {
  ArrowLeft,
  FileText,
  Download,
  Eye,
  Target,
  Ban,
  AlertTriangle,
  Sparkles,
  FileDown,
  CheckCircle,
  Clock,
  Building2,
  Info,
  Plus,
  X,
  Save,
  Upload,
  Trash2,
  File
} from 'lucide-react'
import { getPlatformInfo } from '@/lib/platforms'

// 文件类型
type BriefFile = {
  id: string
  name: string
  type: 'brief' | 'rule' | 'reference'
  size: string
  uploadedAt: string
}

// 模拟品牌方 Brief（只读）
const mockBrandBrief = {
  id: 'brief-001',
  projectName: 'XX品牌618推广',
  brandName: 'XX护肤品牌',
  platform: 'douyin',
  // 品牌方上传的文件列表
  files: [
    { id: 'f1', name: 'XX品牌618推广Brief.pdf', type: 'brief' as const, size: '2.3MB', uploadedAt: '2026-02-01' },
    { id: 'f2', name: '产品卖点说明.docx', type: 'reference' as const, size: '1.2MB', uploadedAt: '2026-02-01' },
    { id: 'f3', name: '品牌视觉指南.pdf', type: 'reference' as const, size: '5.8MB', uploadedAt: '2026-02-01' },
  ],
  // 品牌方配置的规则（只读）
  brandRules: {
    restrictions: '不可提及竞品，不可使用绝对化用语',
    competitors: ['安耐晒', '资生堂', '兰蔻'],
  },
}

// 代理商上传的Brief文档（可编辑）
type AgencyFile = {
  id: string
  name: string
  size: string
  uploadedAt: string
  description?: string
}

// 代理商自己的配置（可编辑）
const mockAgencyConfig = {
  status: 'configured',
  configuredAt: '2026-02-02',
  // 代理商上传的Brief文档（给达人看的）
  agencyFiles: [
    { id: 'af1', name: '达人拍摄指南.pdf', size: '1.5MB', uploadedAt: '2026-02-02', description: '详细的拍摄流程和注意事项' },
    { id: 'af2', name: '产品卖点话术.docx', size: '800KB', uploadedAt: '2026-02-02', description: '推荐使用的话术和表达方式' },
  ] as AgencyFile[],
  // AI 解析出的内容
  aiParsedContent: {
    productName: 'XX品牌防晒霜',
    targetAudience: '18-35岁女性',
    contentRequirements: '需展示产品质地、使用效果，视频时长30-60秒',
  },
  // 代理商配置的卖点（可编辑）
  sellingPoints: [
    { id: 'sp1', content: 'SPF50+ PA++++', required: true },
    { id: 'sp2', content: '轻薄质地，不油腻', required: true },
    { id: 'sp3', content: '延展性好，易推开', required: false },
    { id: 'sp4', content: '适合敏感肌', required: false },
    { id: 'sp5', content: '夏日必备防晒', required: true },
  ],
  // 代理商配置的违禁词（可编辑）
  blacklistWords: [
    { id: 'bw1', word: '最好', reason: '绝对化用语' },
    { id: 'bw2', word: '第一', reason: '绝对化用语' },
    { id: 'bw3', word: '神器', reason: '夸大宣传' },
    { id: 'bw4', word: '完美', reason: '绝对化用语' },
  ],
}

// 平台规则
const platformRules = {
  douyin: {
    name: '抖音',
    rules: [
      { category: '广告法违禁词', items: ['最', '第一', '顶级', '极致', '绝对', '永久', '万能', '特效'] },
      { category: '医疗相关禁用', items: ['治疗', '药用', '医学', '临床', '处方'] },
      { category: '虚假宣传', items: ['100%', '纯天然', '无副作用', '立竿见影'] },
    ],
  },
  xiaohongshu: {
    name: '小红书',
    rules: [
      { category: '广告法违禁词', items: ['最', '第一', '顶级', '极品', '绝对'] },
      { category: '功效承诺禁用', items: ['包治', '根治', '祛除', '永久'] },
    ],
  },
  bilibili: {
    name: 'B站',
    rules: [
      { category: '广告法违禁词', items: ['最', '第一', '顶级', '极致'] },
      { category: '虚假宣传', items: ['100%', '纯天然', '无副作用'] },
    ],
  },
}

export default function BriefConfigPage() {
  const router = useRouter()
  const params = useParams()
  const toast = useToast()

  // 品牌方 Brief（只读）
  const [brandBrief] = useState(mockBrandBrief)

  // 代理商配置（可编辑）
  const [agencyConfig, setAgencyConfig] = useState(mockAgencyConfig)
  const [newSellingPoint, setNewSellingPoint] = useState('')
  const [newBlacklistWord, setNewBlacklistWord] = useState('')

  // 弹窗状态
  const [showFilesModal, setShowFilesModal] = useState(false)
  const [showAgencyFilesModal, setShowAgencyFilesModal] = useState(false)
  const [previewFile, setPreviewFile] = useState<BriefFile | null>(null)
  const [previewAgencyFile, setPreviewAgencyFile] = useState<AgencyFile | null>(null)
  const [isExporting, setIsExporting] = useState(false)
  const [isSaving, setIsSaving] = useState(false)
  const [isAIParsing, setIsAIParsing] = useState(false)
  const [isUploading, setIsUploading] = useState(false)

  const platform = getPlatformInfo(brandBrief.platform)
  const rules = platformRules[brandBrief.platform as keyof typeof platformRules] || platformRules.douyin

  // 下载文件
  const handleDownload = (file: BriefFile) => {
    toast.info(`下载文件: ${file.name}`)
  }

  // 预览文件
  const handlePreview = (file: BriefFile) => {
    setPreviewFile(file)
  }

  // 导出平台规则文档
  const handleExportRules = async () => {
    setIsExporting(true)
    await new Promise(resolve => setTimeout(resolve, 1500))
    setIsExporting(false)
    toast.success('平台规则文档已导出！')
  }

  // AI 解析
  const handleAIParse = async () => {
    setIsAIParsing(true)
    await new Promise(resolve => setTimeout(resolve, 2000))
    setIsAIParsing(false)
    toast.success('AI 解析完成！')
  }

  // 保存配置
  const handleSave = async () => {
    setIsSaving(true)
    await new Promise(resolve => setTimeout(resolve, 1000))
    setIsSaving(false)
    toast.success('配置已保存！')
  }

  // 卖点操作
  const addSellingPoint = () => {
    if (!newSellingPoint.trim()) return
    setAgencyConfig(prev => ({
      ...prev,
      sellingPoints: [...prev.sellingPoints, { id: `sp${Date.now()}`, content: newSellingPoint, required: false }]
    }))
    setNewSellingPoint('')
  }

  const removeSellingPoint = (id: string) => {
    setAgencyConfig(prev => ({
      ...prev,
      sellingPoints: prev.sellingPoints.filter(sp => sp.id !== id)
    }))
  }

  const toggleRequired = (id: string) => {
    setAgencyConfig(prev => ({
      ...prev,
      sellingPoints: prev.sellingPoints.map(sp =>
        sp.id === id ? { ...sp, required: !sp.required } : sp
      )
    }))
  }

  // 违禁词操作
  const addBlacklistWord = () => {
    if (!newBlacklistWord.trim()) return
    setAgencyConfig(prev => ({
      ...prev,
      blacklistWords: [...prev.blacklistWords, { id: `bw${Date.now()}`, word: newBlacklistWord, reason: '自定义' }]
    }))
    setNewBlacklistWord('')
  }

  const removeBlacklistWord = (id: string) => {
    setAgencyConfig(prev => ({
      ...prev,
      blacklistWords: prev.blacklistWords.filter(bw => bw.id !== id)
    }))
  }

  // 代理商文档操作
  const handleUploadAgencyFile = async () => {
    setIsUploading(true)
    // 模拟上传
    await new Promise(resolve => setTimeout(resolve, 1500))
    const newFile: AgencyFile = {
      id: `af${Date.now()}`,
      name: '新上传文档.pdf',
      size: '1.2MB',
      uploadedAt: new Date().toISOString().split('T')[0],
      description: '新上传的文档'
    }
    setAgencyConfig(prev => ({
      ...prev,
      agencyFiles: [...prev.agencyFiles, newFile]
    }))
    setIsUploading(false)
    toast.success('文档上传成功！')
  }

  const removeAgencyFile = (id: string) => {
    setAgencyConfig(prev => ({
      ...prev,
      agencyFiles: prev.agencyFiles.filter(f => f.id !== id)
    }))
  }

  const handlePreviewAgencyFile = (file: AgencyFile) => {
    setPreviewAgencyFile(file)
  }

  const handleDownloadAgencyFile = (file: AgencyFile) => {
    toast.info(`下载文件: ${file.name}`)
  }

  return (
    <div className="space-y-6">
      {/* 顶部导航 */}
      <div className="flex items-center gap-4">
        <button type="button" onClick={() => router.back()} className="p-2 hover:bg-bg-elevated rounded-full">
          <ArrowLeft size={20} className="text-text-primary" />
        </button>
        <div className="flex-1">
          <div className="flex items-center gap-3">
            <h1 className="text-xl font-bold text-text-primary">{brandBrief.projectName}</h1>
            {platform && (
              <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium ${platform.bgColor} ${platform.textColor} border ${platform.borderColor}`}>
                <span>{platform.icon}</span>
                {platform.name}
              </span>
            )}
          </div>
          <p className="text-sm text-text-secondary flex items-center gap-2 mt-1">
            <Building2 size={14} />
            {brandBrief.brandName}
          </p>
        </div>
        <Button variant="secondary" onClick={handleExportRules} disabled={isExporting}>
          <FileDown size={16} />
          {isExporting ? '导出中...' : '导出规则'}
        </Button>
        <Button onClick={handleSave} disabled={isSaving}>
          <Save size={16} />
          {isSaving ? '保存中...' : '保存配置'}
        </Button>
      </div>

      {/* ===== 第一部分：品牌方 Brief（只读）===== */}
      <div className="p-4 bg-purple-500/10 rounded-lg border border-purple-500/30">
        <div className="flex items-start gap-3">
          <Building2 size={20} className="text-purple-400 flex-shrink-0 mt-0.5" />
          <div>
            <p className="text-sm text-purple-400 font-medium">品牌方 Brief（只读）</p>
            <p className="text-sm text-purple-400/80 mt-1">
              以下是品牌方上传的 Brief 文件和规则，仅供参考，不可编辑。
            </p>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* 品牌方文件 */}
        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle className="flex items-center justify-between">
              <span className="flex items-center gap-2">
                <FileText size={18} className="text-purple-400" />
                品牌方 Brief 文件
                <span className="text-sm font-normal text-text-secondary">
                  {brandBrief.files.length} 个文件
                </span>
              </span>
              <Button variant="secondary" size="sm" onClick={() => setShowFilesModal(true)}>
                <Eye size={14} />
                查看全部
              </Button>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            {brandBrief.files.slice(0, 2).map((file) => (
              <div key={file.id} className="flex items-center justify-between p-4 bg-bg-elevated rounded-lg">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-lg bg-purple-500/15 flex items-center justify-center">
                    <FileText size={20} className="text-purple-400" />
                  </div>
                  <div>
                    <p className="font-medium text-text-primary text-sm">{file.name}</p>
                    <p className="text-xs text-text-secondary">{file.size} · {file.uploadedAt}</p>
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <Button variant="ghost" size="sm" onClick={() => handlePreview(file)}>
                    <Eye size={14} />
                  </Button>
                  <Button variant="ghost" size="sm" onClick={() => handleDownload(file)}>
                    <Download size={14} />
                  </Button>
                </div>
              </div>
            ))}
            {brandBrief.files.length > 2 && (
              <button
                type="button"
                onClick={() => setShowFilesModal(true)}
                className="w-full p-3 text-sm text-purple-400 hover:bg-purple-500/5 rounded-lg transition-colors"
              >
                查看全部 {brandBrief.files.length} 个文件 →
              </button>
            )}
          </CardContent>
        </Card>

        {/* 品牌方规则（只读） */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <AlertTriangle size={18} className="text-orange-400" />
              品牌方限制
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div>
              <p className="text-xs text-text-tertiary mb-2">限制条件</p>
              <p className="text-sm text-text-primary">{brandBrief.brandRules.restrictions}</p>
            </div>
            <div>
              <p className="text-xs text-text-tertiary mb-2">竞品黑名单</p>
              <div className="flex flex-wrap gap-2">
                {brandBrief.brandRules.competitors.map((c, i) => (
                  <span key={i} className="px-2 py-1 text-xs bg-orange-500/15 text-orange-400 rounded border border-orange-500/30">
                    {c}
                  </span>
                ))}
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* ===== 第二部分：代理商配置（可编辑）===== */}
      <div className="p-4 bg-accent-indigo/10 rounded-lg border border-accent-indigo/30">
        <div className="flex items-start gap-3">
          <Sparkles size={20} className="text-accent-indigo flex-shrink-0 mt-0.5" />
          <div>
            <p className="text-sm text-accent-indigo font-medium">代理商配置（可编辑）</p>
            <p className="text-sm text-accent-indigo/80 mt-1">
              以下配置由代理商编辑，将展示给达人查看。
            </p>
          </div>
        </div>
      </div>

      {/* 代理商Brief文档管理 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center justify-between">
            <span className="flex items-center gap-2">
              <File size={18} className="text-accent-indigo" />
              代理商 Brief 文档
              <span className="text-sm font-normal text-text-secondary">
                {agencyConfig.agencyFiles.length} 个文件（达人可见）
              </span>
            </span>
            <div className="flex items-center gap-2">
              <Button variant="secondary" size="sm" onClick={() => setShowAgencyFilesModal(true)}>
                <Eye size={14} />
                管理文档
              </Button>
              <Button size="sm" onClick={handleUploadAgencyFile} disabled={isUploading}>
                <Upload size={14} />
                {isUploading ? '上传中...' : '上传文档'}
              </Button>
            </div>
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {agencyConfig.agencyFiles.map((file) => (
              <div key={file.id} className="p-4 bg-accent-indigo/5 rounded-lg border border-accent-indigo/20 hover:border-accent-indigo/40 transition-colors">
                <div className="flex items-start gap-3">
                  <div className="w-10 h-10 rounded-lg bg-accent-indigo/15 flex items-center justify-center flex-shrink-0">
                    <FileText size={20} className="text-accent-indigo" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="font-medium text-text-primary text-sm truncate">{file.name}</p>
                    <p className="text-xs text-text-tertiary mt-0.5">{file.size} · {file.uploadedAt}</p>
                    {file.description && (
                      <p className="text-xs text-text-secondary mt-1 line-clamp-2">{file.description}</p>
                    )}
                  </div>
                </div>
                <div className="flex items-center gap-2 mt-3 pt-3 border-t border-border-subtle">
                  <Button variant="ghost" size="sm" onClick={() => handlePreviewAgencyFile(file)} className="flex-1">
                    <Eye size={14} />
                    预览
                  </Button>
                  <Button variant="ghost" size="sm" onClick={() => handleDownloadAgencyFile(file)} className="flex-1">
                    <Download size={14} />
                    下载
                  </Button>
                  <Button variant="ghost" size="sm" onClick={() => removeAgencyFile(file.id)} className="text-accent-coral hover:text-accent-coral">
                    <Trash2 size={14} />
                  </Button>
                </div>
              </div>
            ))}
            {/* 上传占位卡片 */}
            <button
              type="button"
              onClick={handleUploadAgencyFile}
              disabled={isUploading}
              className="p-4 rounded-lg border-2 border-dashed border-border-subtle hover:border-accent-indigo/50 transition-colors flex flex-col items-center justify-center gap-2 min-h-[140px]"
            >
              <div className="w-10 h-10 rounded-full bg-bg-elevated flex items-center justify-center">
                <Plus size={20} className="text-text-tertiary" />
              </div>
              <span className="text-sm text-text-secondary">上传新文档</span>
            </button>
          </div>
          <div className="mt-4 p-3 bg-accent-indigo/10 rounded-lg border border-accent-indigo/20">
            <p className="text-xs text-accent-indigo flex items-center gap-2">
              <Info size={14} />
              以上文档将展示给达人查看，请确保内容准确完整。
            </p>
          </div>
        </CardContent>
      </Card>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* 左侧：AI解析 + 卖点配置 */}
        <div className="lg:col-span-2 space-y-6">
          {/* AI 解析结果 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center justify-between">
                <span className="flex items-center gap-2">
                  <Sparkles size={18} className="text-purple-400" />
                  AI 解析结果
                </span>
                <Button variant="secondary" size="sm" onClick={handleAIParse} disabled={isAIParsing}>
                  <Sparkles size={14} />
                  {isAIParsing ? '解析中...' : '重新解析'}
                </Button>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-2 gap-4">
                <div className="p-3 bg-bg-elevated rounded-lg">
                  <p className="text-xs text-text-tertiary mb-1">产品名称</p>
                  <p className="text-text-primary font-medium">{agencyConfig.aiParsedContent.productName}</p>
                </div>
                <div className="p-3 bg-bg-elevated rounded-lg">
                  <p className="text-xs text-text-tertiary mb-1">目标人群</p>
                  <p className="text-text-primary font-medium">{agencyConfig.aiParsedContent.targetAudience}</p>
                </div>
                <div className="p-3 bg-bg-elevated rounded-lg col-span-2">
                  <p className="text-xs text-text-tertiary mb-1">内容要求</p>
                  <p className="text-text-primary">{agencyConfig.aiParsedContent.contentRequirements}</p>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* 卖点配置（可编辑） */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Target size={18} className="text-accent-green" />
                卖点配置
                <span className="text-sm font-normal text-text-secondary ml-2">
                  {agencyConfig.sellingPoints.length} 个卖点
                </span>
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              {agencyConfig.sellingPoints.map((sp) => (
                <div key={sp.id} className="flex items-center gap-3 p-3 bg-bg-elevated rounded-lg">
                  <button
                    type="button"
                    onClick={() => toggleRequired(sp.id)}
                    className={`px-2 py-1 text-xs rounded ${
                      sp.required ? 'bg-accent-coral/20 text-accent-coral' : 'bg-bg-page text-text-tertiary'
                    }`}
                  >
                    {sp.required ? '必选' : '可选'}
                  </button>
                  <span className="flex-1 text-text-primary">{sp.content}</span>
                  <button
                    type="button"
                    onClick={() => removeSellingPoint(sp.id)}
                    className="p-1 hover:bg-bg-page rounded"
                  >
                    <X size={16} className="text-text-tertiary" />
                  </button>
                </div>
              ))}
              <div className="flex gap-2">
                <input
                  type="text"
                  value={newSellingPoint}
                  onChange={(e) => setNewSellingPoint(e.target.value)}
                  placeholder="添加新卖点..."
                  className="flex-1 px-3 py-2 border border-border-subtle rounded-lg bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
                  onKeyDown={(e) => e.key === 'Enter' && addSellingPoint()}
                />
                <Button variant="secondary" onClick={addSellingPoint}>
                  <Plus size={16} />
                  添加
                </Button>
              </div>
            </CardContent>
          </Card>

          {/* 平台规则 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center justify-between">
                <span className="flex items-center gap-2">
                  <AlertTriangle size={18} className="text-accent-amber" />
                  {rules.name}平台规则
                </span>
                <Button variant="secondary" size="sm" onClick={handleExportRules} disabled={isExporting}>
                  <FileDown size={14} />
                  导出
                </Button>
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              {rules.rules.map((rule, index) => (
                <div key={index}>
                  <p className="text-sm font-medium text-text-primary mb-2">{rule.category}</p>
                  <div className="flex flex-wrap gap-2">
                    {rule.items.map((item, i) => (
                      <span key={i} className="px-2 py-1 text-xs bg-accent-amber/15 text-accent-amber rounded border border-accent-amber/30">
                        {item}
                      </span>
                    ))}
                  </div>
                </div>
              ))}
            </CardContent>
          </Card>
        </div>

        {/* 右侧：违禁词配置 */}
        <div className="space-y-6">
          {/* 违禁词配置（可编辑） */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Ban size={18} className="text-accent-coral" />
                违禁词配置
                <span className="text-sm font-normal text-text-secondary ml-2">
                  {agencyConfig.blacklistWords.length} 个
                </span>
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-2">
              {agencyConfig.blacklistWords.map((bw) => (
                <div key={bw.id} className="flex items-center justify-between p-3 bg-accent-coral/10 rounded-lg border border-accent-coral/30">
                  <div>
                    <span className="font-medium text-accent-coral">「{bw.word}」</span>
                    <span className="text-xs text-text-tertiary ml-2">{bw.reason}</span>
                  </div>
                  <button
                    type="button"
                    onClick={() => removeBlacklistWord(bw.id)}
                    className="p-1 hover:bg-accent-coral/20 rounded"
                  >
                    <X size={14} className="text-text-tertiary" />
                  </button>
                </div>
              ))}
              <div className="flex gap-2 mt-3">
                <input
                  type="text"
                  value={newBlacklistWord}
                  onChange={(e) => setNewBlacklistWord(e.target.value)}
                  placeholder="添加违禁词..."
                  className="flex-1 px-3 py-2 border border-border-subtle rounded-lg bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
                  onKeyDown={(e) => e.key === 'Enter' && addBlacklistWord()}
                />
                <Button variant="secondary" size="sm" onClick={addBlacklistWord}>
                  <Plus size={14} />
                </Button>
              </div>
            </CardContent>
          </Card>

          {/* 配置信息 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Clock size={18} className="text-text-tertiary" />
                配置状态
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-3 text-sm">
              <div className="flex justify-between">
                <span className="text-text-secondary">状态</span>
                <SuccessTag>已配置</SuccessTag>
              </div>
              <div className="flex justify-between">
                <span className="text-text-secondary">配置时间</span>
                <span className="text-text-primary">{agencyConfig.configuredAt}</span>
              </div>
            </CardContent>
          </Card>

          {/* 配置提示 */}
          <div className="p-4 bg-accent-green/10 rounded-lg border border-accent-green/30">
            <div className="flex items-start gap-3">
              <CheckCircle size={20} className="text-accent-green flex-shrink-0 mt-0.5" />
              <div>
                <p className="text-sm text-accent-green font-medium">配置说明</p>
                <ul className="text-xs text-accent-green/80 mt-1 space-y-1">
                  <li>• 必选卖点必须在内容中提及</li>
                  <li>• 违禁词会触发 AI 审核警告</li>
                  <li>• 此配置将展示给达人查看</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 文件列表弹窗 */}
      <Modal
        isOpen={showFilesModal}
        onClose={() => setShowFilesModal(false)}
        title="品牌方 Brief 文件"
        size="lg"
      >
        <div className="space-y-3">
          {brandBrief.files.map((file) => (
            <div key={file.id} className="flex items-center justify-between p-4 bg-bg-elevated rounded-lg">
              <div className="flex items-center gap-3">
                <div className="w-12 h-12 rounded-lg bg-purple-500/15 flex items-center justify-center">
                  <FileText size={24} className="text-purple-400" />
                </div>
                <div>
                  <p className="font-medium text-text-primary">{file.name}</p>
                  <p className="text-sm text-text-secondary">{file.size} · 上传于 {file.uploadedAt}</p>
                </div>
              </div>
              <div className="flex items-center gap-2">
                <Button variant="secondary" size="sm" onClick={() => handlePreview(file)}>
                  <Eye size={14} />
                  预览
                </Button>
                <Button variant="secondary" size="sm" onClick={() => handleDownload(file)}>
                  <Download size={14} />
                  下载
                </Button>
              </div>
            </div>
          ))}
        </div>
      </Modal>

      {/* 文件预览弹窗（品牌方） */}
      <Modal
        isOpen={!!previewFile}
        onClose={() => setPreviewFile(null)}
        title={previewFile?.name || '文件预览'}
        size="lg"
      >
        <div className="space-y-4">
          <div className="aspect-[4/3] bg-bg-elevated rounded-lg flex items-center justify-center">
            <div className="text-center">
              <FileText size={48} className="mx-auto text-text-tertiary mb-4" />
              <p className="text-text-secondary">文件预览区域</p>
              <p className="text-xs text-text-tertiary mt-1">实际开发中将嵌入文件预览组件</p>
            </div>
          </div>
          <div className="flex justify-end gap-2">
            <Button variant="secondary" onClick={() => setPreviewFile(null)}>
              关闭
            </Button>
            {previewFile && (
              <Button onClick={() => handleDownload(previewFile)}>
                <Download size={16} />
                下载文件
              </Button>
            )}
          </div>
        </div>
      </Modal>

      {/* 代理商文档管理弹窗 */}
      <Modal
        isOpen={showAgencyFilesModal}
        onClose={() => setShowAgencyFilesModal(false)}
        title="管理代理商 Brief 文档"
        size="lg"
      >
        <div className="space-y-4">
          <div className="flex justify-between items-center">
            <p className="text-sm text-text-secondary">
              以下文档将展示给达人查看，可以添加、删除或预览文档
            </p>
            <Button size="sm" onClick={handleUploadAgencyFile} disabled={isUploading}>
              <Upload size={14} />
              {isUploading ? '上传中...' : '上传文档'}
            </Button>
          </div>
          <div className="space-y-3">
            {agencyConfig.agencyFiles.map((file) => (
              <div key={file.id} className="flex items-center justify-between p-4 bg-bg-elevated rounded-lg">
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 rounded-lg bg-accent-indigo/15 flex items-center justify-center">
                    <FileText size={24} className="text-accent-indigo" />
                  </div>
                  <div>
                    <p className="font-medium text-text-primary">{file.name}</p>
                    <p className="text-sm text-text-secondary">{file.size} · 上传于 {file.uploadedAt}</p>
                    {file.description && (
                      <p className="text-xs text-text-tertiary mt-1">{file.description}</p>
                    )}
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <Button variant="secondary" size="sm" onClick={() => handlePreviewAgencyFile(file)}>
                    <Eye size={14} />
                    预览
                  </Button>
                  <Button variant="secondary" size="sm" onClick={() => handleDownloadAgencyFile(file)}>
                    <Download size={14} />
                    下载
                  </Button>
                  <Button variant="ghost" size="sm" onClick={() => removeAgencyFile(file.id)} className="text-accent-coral hover:text-accent-coral">
                    <Trash2 size={14} />
                    删除
                  </Button>
                </div>
              </div>
            ))}
            {agencyConfig.agencyFiles.length === 0 && (
              <div className="py-12 text-center">
                <File size={48} className="mx-auto text-text-tertiary mb-4" />
                <p className="text-text-secondary">暂无文档</p>
                <p className="text-sm text-text-tertiary mt-1">点击上方按钮上传文档</p>
              </div>
            )}
          </div>
        </div>
      </Modal>

      {/* 代理商文档预览弹窗 */}
      <Modal
        isOpen={!!previewAgencyFile}
        onClose={() => setPreviewAgencyFile(null)}
        title={previewAgencyFile?.name || '文件预览'}
        size="lg"
      >
        <div className="space-y-4">
          <div className="aspect-[4/3] bg-bg-elevated rounded-lg flex items-center justify-center">
            <div className="text-center">
              <FileText size={48} className="mx-auto text-accent-indigo mb-4" />
              <p className="text-text-secondary">文件预览区域</p>
              <p className="text-xs text-text-tertiary mt-1">实际开发中将嵌入文件预览组件</p>
            </div>
          </div>
          <div className="flex justify-end gap-2">
            <Button variant="secondary" onClick={() => setPreviewAgencyFile(null)}>
              关闭
            </Button>
            {previewAgencyFile && (
              <Button onClick={() => handleDownloadAgencyFile(previewAgencyFile)}>
                <Download size={16} />
                下载文件
              </Button>
            )}
          </div>
        </div>
      </Modal>
    </div>
  )
}