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'

// 项目类型定义
interface Project {
  id: string
  name: string
  status: 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',
    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',
    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',
    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,
  },
]

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)

  return (
    <Link href={`/brand/projects/${project.id}`}>
      <Card className="hover:border-accent-indigo/50 transition-colors cursor-pointer h-full">
        <CardContent className="p-6 space-y-4">
          {/* 项目头部 */}
          <div className="flex items-start justify-between">
            <div>
              <h3 className="text-lg font-semibold text-text-primary">{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>
            <StatusTag status={project.status} />
          </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 [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
    return matchesSearch && matchesStatus
  })

  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">
        <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={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="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>
  )
}