video-compliance-ai/frontend/app/brand/page.tsx

'use client'

import { useState } from 'react'
import Link from 'next/link'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { Button } from '@/components/ui/Button'
import { Input } from '@/components/ui/Input'
import { SuccessTag, PendingTag, WarningTag } from '@/components/ui/Tag'
import { Modal } from '@/components/ui/Modal'
import {
  Search,
  Plus,
  Filter,
  FileText,
  Video,
  ChevronRight,
  Calendar,
  Users,
  Pencil
} from 'lucide-react'

// 平台选项 - 抖音用青色(品牌渐变色之一)，深色主题下更清晰
const platformOptions = [
  { id: 'douyin', name: '抖音', icon: '🎵', bgColor: 'bg-[#25F4EE]/15', textColor: 'text-[#25F4EE]', borderColor: 'border-[#25F4EE]/30' },
  { id: 'xiaohongshu', name: '小红书', icon: '📕', bgColor: 'bg-[#fe2c55]/15', textColor: 'text-[#fe2c55]', borderColor: 'border-[#fe2c55]/30' },
  { id: 'bilibili', name: 'B站', icon: '📺', bgColor: 'bg-[#00a1d6]/15', textColor: 'text-[#00a1d6]', borderColor: 'border-[#00a1d6]/30' },
  { id: 'kuaishou', name: '快手', icon: '⚡', bgColor: 'bg-[#ff4906]/15', textColor: 'text-[#ff4906]', borderColor: 'border-[#ff4906]/30' },
  { id: 'weibo', name: '微博', icon: '🔴', bgColor: 'bg-[#e6162d]/15', textColor: 'text-[#e6162d]', borderColor: 'border-[#e6162d]/30' },
  { id: 'wechat', name: '微信视频号', icon: '💬', bgColor: 'bg-[#07c160]/15', textColor: 'text-[#07c160]', borderColor: 'border-[#07c160]/30' },
]

// 项目类型定义
interface Project {
  id: string
  name: string
  status: string
  platform: string
  deadline: string
  scriptCount: { total: number; passed: number; pending: number; rejected: number }
  videoCount: { total: number; passed: number; pending: number; rejected: number }
  agencyCount: number
  creatorCount: number
}

// 模拟项目数据
const initialProjects: Project[] = [
  {
    id: 'proj-001',
    name: 'XX品牌618推广',
    status: 'active',
    platform: 'douyin',
    deadline: '2026-06-18',
    scriptCount: { total: 20, passed: 15, pending: 3, rejected: 2 },
    videoCount: { total: 20, passed: 12, pending: 5, rejected: 3 },
    agencyCount: 3,
    creatorCount: 15,
  },
  {
    id: 'proj-002',
    name: '新品口红系列',
    status: 'active',
    platform: 'xiaohongshu',
    deadline: '2026-03-15',
    scriptCount: { total: 12, passed: 10, pending: 1, rejected: 1 },
    videoCount: { total: 12, passed: 8, pending: 3, rejected: 1 },
    agencyCount: 2,
    creatorCount: 8,
  },
  {
    id: 'proj-003',
    name: '护肤品秋季活动',
    status: 'completed',
    platform: 'bilibili',
    deadline: '2025-11-30',
    scriptCount: { total: 15, passed: 15, pending: 0, rejected: 0 },
    videoCount: { total: 15, passed: 15, pending: 0, rejected: 0 },
    agencyCount: 2,
    creatorCount: 10,
  },
  {
    id: 'proj-004',
    name: '双11预热活动',
    status: 'active',
    platform: 'kuaishou',
    deadline: '2026-11-11',
    scriptCount: { total: 18, passed: 8, pending: 6, rejected: 4 },
    videoCount: { total: 18, passed: 5, pending: 10, rejected: 3 },
    agencyCount: 4,
    creatorCount: 20,
  },
]

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

function StatusTag({ status }: { status: string }) {
  if (status === 'active') return <SuccessTag>进行中</SuccessTag>
  if (status === 'completed') return <PendingTag>已完成</PendingTag>
  return <WarningTag>暂停</WarningTag>
}

function ProjectCard({ project, onEditDeadline }: { project: Project; onEditDeadline: (project: Project) => void }) {
  const scriptProgress = Math.round((project.scriptCount.passed / project.scriptCount.total) * 100)
  const videoProgress = Math.round((project.videoCount.passed / project.videoCount.total) * 100)
  const platform = getPlatformInfo(project.platform)

  return (
    <Link href={`/brand/projects/${project.id}`}>
      <Card className="hover:border-accent-indigo/50 transition-colors cursor-pointer h-full overflow-hidden">
        {/* 平台顶部条 */}
        {platform && (
          <div className={`px-6 py-2 ${platform.bgColor} border-b ${platform.borderColor} flex items-center justify-between`}>
            <div className="flex items-center gap-2">
              <span className="text-base">{platform.icon}</span>
              <span className={`text-sm font-medium ${platform.textColor}`}>{platform.name}</span>
            </div>
            <StatusTag status={project.status} />
          </div>
        )}
        <CardContent className="p-6 space-y-4">
          {/* 项目头部 */}
          <div>
            <h3 className="text-lg font-semibold text-text-primary truncate">{project.name}</h3>
            <div className="flex items-center gap-2 mt-1 text-sm text-text-secondary">
              <Calendar size={14} />
              <span>截止 {project.deadline}</span>
              <button
                type="button"
                onClick={(e) => {
                  e.preventDefault()
                  e.stopPropagation()
                  onEditDeadline(project)
                }}
                className="p-1 rounded hover:bg-bg-page transition-colors"
                title="修改截止日期"
              >
                <Pencil size={12} className="text-text-tertiary hover:text-accent-indigo" />
              </button>
            </div>
          </div>

          {/* 脚本进度 */}
          <div>
            <div className="flex items-center justify-between text-sm mb-2">
              <span className="flex items-center gap-2 text-text-secondary">
                <FileText size={14} />
                脚本审核
              </span>
              <span className="text-text-primary font-medium">
                {project.scriptCount.passed}/{project.scriptCount.total}
              </span>
            </div>
            <div className="h-2 bg-bg-elevated rounded-full overflow-hidden">
              <div
                className="h-full bg-accent-green transition-all"
                style={{ width: `${scriptProgress}%` }}
              />
            </div>
            <div className="flex gap-4 mt-1 text-xs text-text-tertiary">
              <span>通过 {project.scriptCount.passed}</span>
              <span>待审 {project.scriptCount.pending}</span>
              <span>驳回 {project.scriptCount.rejected}</span>
            </div>
          </div>

          {/* 视频进度 */}
          <div>
            <div className="flex items-center justify-between text-sm mb-2">
              <span className="flex items-center gap-2 text-text-secondary">
                <Video size={14} />
                视频审核
              </span>
              <span className="text-text-primary font-medium">
                {project.videoCount.passed}/{project.videoCount.total}
              </span>
            </div>
            <div className="h-2 bg-bg-elevated rounded-full overflow-hidden">
              <div
                className="h-full bg-accent-indigo transition-all"
                style={{ width: `${videoProgress}%` }}
              />
            </div>
            <div className="flex gap-4 mt-1 text-xs text-text-tertiary">
              <span>通过 {project.videoCount.passed}</span>
              <span>待审 {project.videoCount.pending}</span>
              <span>驳回 {project.videoCount.rejected}</span>
            </div>
          </div>

          {/* 参与方统计 */}
          <div className="flex items-center justify-between pt-4 border-t border-border-subtle">
            <div className="flex items-center gap-4 text-sm text-text-secondary">
              <span className="flex items-center gap-1">
                <Users size={14} />
                {project.agencyCount} 代理商
              </span>
              <span>{project.creatorCount} 达人</span>
            </div>
            <ChevronRight size={16} className="text-text-tertiary" />
          </div>
        </CardContent>
      </Card>
    </Link>
  )
}

export default function BrandProjectsPage() {
  const [searchQuery, setSearchQuery] = useState('')
  const [statusFilter, setStatusFilter] = useState<string>('all')
  const [platformFilter, setPlatformFilter] = useState<string>('all')
  const [projects, setProjects] = useState<Project[]>(initialProjects)

  // 编辑截止日期相关状态
  const [showDeadlineModal, setShowDeadlineModal] = useState(false)
  const [editingProject, setEditingProject] = useState<Project | null>(null)
  const [newDeadline, setNewDeadline] = useState('')

  // 打开编辑截止日期弹窗
  const handleEditDeadline = (project: Project) => {
    setEditingProject(project)
    setNewDeadline(project.deadline)
    setShowDeadlineModal(true)
  }

  // 保存截止日期
  const handleSaveDeadline = () => {
    if (!editingProject || !newDeadline) return

    setProjects(prev => prev.map(p =>
      p.id === editingProject.id ? { ...p, deadline: newDeadline } : p
    ))
    setShowDeadlineModal(false)
    setEditingProject(null)
    setNewDeadline('')
  }

  const filteredProjects = projects.filter(project => {
    const matchesSearch = project.name.toLowerCase().includes(searchQuery.toLowerCase())
    const matchesStatus = statusFilter === 'all' || project.status === statusFilter
    const matchesPlatform = platformFilter === 'all' || project.platform === platformFilter
    return matchesSearch && matchesStatus && matchesPlatform
  })

  return (
    <div className="space-y-6">
      {/* 页面标题和操作 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-text-primary">项目看板</h1>
          <p className="text-sm text-text-secondary mt-1">管理所有营销项目的审核进度</p>
        </div>
        <Link href="/brand/projects/create">
          <Button>
            <Plus size={16} />
            创建项目
          </Button>
        </Link>
      </div>

      {/* 搜索和筛选 */}
      <div className="flex items-center gap-4 flex-wrap">
        <div className="relative flex-1 max-w-md">
          <Search size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-text-tertiary" />
          <input
            type="text"
            placeholder="搜索项目名称..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="w-full pl-10 pr-4 py-2 border border-border-subtle rounded-lg bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
          />
        </div>
        <div className="flex items-center gap-2">
          <Filter size={16} className="text-text-tertiary" />
          <select
            value={platformFilter}
            onChange={(e) => setPlatformFilter(e.target.value)}
            className="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"
          >
            <option value="all">全部平台</option>
            {platformOptions.map(p => (
              <option key={p.id} value={p.id}>{p.icon} {p.name}</option>
            ))}
          </select>
          <select
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value)}
            className="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"
          >
            <option value="all">全部状态</option>
            <option value="active">进行中</option>
            <option value="completed">已完成</option>
            <option value="paused">已暂停</option>
          </select>
        </div>
      </div>

      {/* 平台快捷筛选 */}
      <div className="flex items-center gap-2 flex-wrap">
        <button
          type="button"
          onClick={() => setPlatformFilter('all')}
          className={`px-4 py-2 rounded-xl text-sm font-medium transition-all ${
            platformFilter === 'all'
              ? 'bg-accent-indigo text-white shadow-sm'
              : 'bg-bg-elevated text-text-secondary hover:bg-bg-card border border-transparent hover:border-border-subtle'
          }`}
        >
          全部
        </button>
        {platformOptions.map(platform => (
          <button
            key={platform.id}
            type="button"
            onClick={() => setPlatformFilter(platform.id)}
            className={`px-4 py-2 rounded-xl text-sm font-medium transition-all flex items-center gap-2 border ${
              platformFilter === platform.id
                ? `${platform.bgColor} ${platform.textColor} ${platform.borderColor} shadow-sm`
                : 'bg-bg-elevated text-text-secondary border-transparent hover:bg-bg-card hover:border-border-subtle'
            }`}
          >
            <span className="text-base">{platform.icon}</span>
            {platform.name}
          </button>
        ))}
      </div>

      {/* 项目卡片网格 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {filteredProjects.map((project) => (
          <ProjectCard key={project.id} project={project} onEditDeadline={handleEditDeadline} />
        ))}
      </div>

      {filteredProjects.length === 0 && (
        <div className="text-center py-16">
          <div className="text-text-tertiary mb-4">
            <FileText size={48} className="mx-auto opacity-50" />
          </div>
          <p className="text-text-secondary">暂无匹配的项目</p>
          <Link href="/brand/projects/create">
            <Button variant="secondary" className="mt-4">
              <Plus size={16} />
              创建新项目
            </Button>
          </Link>
        </div>
      )}

      {/* 编辑截止日期弹窗 */}
      <Modal
        isOpen={showDeadlineModal}
        onClose={() => {
          setShowDeadlineModal(false)
          setEditingProject(null)
          setNewDeadline('')
        }}
        title="修改截止日期"
      >
        <div className="space-y-4">
          {editingProject && (
            <div className="p-3 rounded-lg bg-bg-elevated">
              <p className="text-sm text-text-secondary">项目名称</p>
              <p className="font-medium text-text-primary">{editingProject.name}</p>
            </div>
          )}

          <div>
            <label className="block text-sm font-medium text-text-primary mb-2">
              新截止日期
            </label>
            <div className="relative">
              <Calendar size={18} className="absolute left-4 top-1/2 -translate-y-1/2 text-text-tertiary" />
              <input
                type="date"
                value={newDeadline}
                onChange={(e) => setNewDeadline(e.target.value)}
                className="w-full pl-12 pr-4 py-3 border border-border-subtle rounded-lg bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
              />
            </div>
          </div>

          <div className="flex gap-3 pt-2">
            <Button
              variant="secondary"
              className="flex-1"
              onClick={() => {
                setShowDeadlineModal(false)
                setEditingProject(null)
                setNewDeadline('')
              }}
            >
              取消
            </Button>
            <Button
              variant="primary"
              className="flex-1"
              onClick={handleSaveDeadline}
              disabled={!newDeadline}
            >
              保存
            </Button>
          </div>
        </div>
      </Modal>
    </div>
  )
}