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

'use client'

import { useState, useEffect, useCallback } from 'react'
import Link from 'next/link'
import { Card, CardContent } from '@/components/ui/Card'
import { Button } from '@/components/ui/Button'
import { SuccessTag, PendingTag, WarningTag } from '@/components/ui/Tag'
import { Modal } from '@/components/ui/Modal'
import {
  Search,
  Plus,
  Filter,
  FileText,
  Video,
  ChevronRight,
  Calendar,
  Users,
  Pencil,
  Loader2
} from 'lucide-react'
import { api } from '@/lib/api'
import { USE_MOCK } from '@/contexts/AuthContext'
import { useSSE } from '@/contexts/SSEContext'
import { useToast } from '@/components/ui/Toast'
import { getPlatformInfo } from '@/lib/platforms'
import type { ProjectResponse } from '@/types/project'

// ==================== Mock 数据 ====================
const mockProjects: ProjectResponse[] = [
  {
    id: 'proj-001', name: 'XX品牌618推广', brand_id: 'br-001', brand_name: 'XX品牌',
    platform: 'douyin', status: 'active', deadline: '2026-06-18', agencies: [],
    task_count: 20, created_at: '2026-02-01T00:00:00Z', updated_at: '2026-02-05T00:00:00Z',
  },
  {
    id: 'proj-002', name: '新品口红系列', brand_id: 'br-001', brand_name: 'XX品牌',
    platform: 'xiaohongshu', status: 'active', deadline: '2026-03-15', agencies: [],
    task_count: 12, created_at: '2026-01-15T00:00:00Z', updated_at: '2026-02-01T00:00:00Z',
  },
  {
    id: 'proj-003', name: '护肤品秋季活动', brand_id: 'br-001', brand_name: 'XX品牌',
    platform: 'bilibili', status: 'completed', deadline: '2025-11-30', agencies: [],
    task_count: 15, created_at: '2025-08-01T00:00:00Z', updated_at: '2025-11-30T00:00:00Z',
  },
  {
    id: 'proj-004', name: '双11预热活动', brand_id: 'br-001', brand_name: 'XX品牌',
    platform: 'kuaishou', status: 'active', deadline: '2026-11-11', agencies: [],
    task_count: 18, created_at: '2026-01-10T00:00:00Z', updated_at: '2026-02-04T00:00:00Z',
  },
]

// ==================== 组件 ====================

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

function ProjectCard({ project, onEditDeadline }: { project: ProjectResponse; onEditDeadline: (project: ProjectResponse) => void }) {
  const platformInfo = project.platform ? getPlatformInfo(project.platform) : null

  return (
    <Link href={`/brand/projects/${project.id}`}>
      <Card className="hover:border-accent-indigo/50 transition-colors cursor-pointer h-full overflow-hidden">
        <div className={`px-6 py-2 border-b flex items-center justify-between ${
          platformInfo
            ? `${platformInfo.bgColor} ${platformInfo.borderColor}`
            : 'bg-accent-indigo/10 border-accent-indigo/20'
        }`}>
          <span className={`text-sm font-medium flex items-center gap-1.5 ${
            platformInfo ? platformInfo.textColor : 'text-accent-indigo'
          }`}>
            {platformInfo ? (
              <><span>{platformInfo.icon}</span>{platformInfo.name}</>
            ) : (
              project.brand_name || '品牌项目'
            )}
          </span>
          <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 ? new Date(project.deadline).toLocaleDateString('zh-CN') : '未设置'}</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 className="flex items-center justify-between text-sm text-text-secondary">
            <span>{project.task_count} 个任务</span>
            <span>{project.agencies.length} 个代理商</span>
          </div>

          <div className="flex items-center justify-between pt-4 border-t border-border-subtle">
            <div className="text-xs text-text-tertiary">
              创建于 {new Date(project.created_at).toLocaleDateString('zh-CN')}
            </div>
            <ChevronRight size={16} className="text-text-tertiary" />
          </div>
        </CardContent>
      </Card>
    </Link>
  )
}

function ProjectsSkeleton() {
  return (
    <div className="space-y-6 animate-pulse">
      <div className="flex items-center justify-between">
        <div className="h-8 w-32 bg-bg-elevated rounded" />
        <div className="h-10 w-28 bg-bg-elevated rounded" />
      </div>
      <div className="h-10 w-full max-w-md bg-bg-elevated rounded-lg" />
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {[1, 2, 3, 4].map(i => (
          <div key={i} className="h-56 bg-bg-elevated rounded-xl" />
        ))}
      </div>
    </div>
  )
}

export default function BrandProjectsPage() {
  const [searchQuery, setSearchQuery] = useState('')
  const [statusFilter, setStatusFilter] = useState<string>('all')
  const [projects, setProjects] = useState<ProjectResponse[]>([])
  const [loading, setLoading] = useState(true)
  const toast = useToast()
  const { subscribe } = useSSE()

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

  const loadProjects = useCallback(async () => {
    if (USE_MOCK) {
      setProjects(mockProjects)
      setLoading(false)
      return
    }

    try {
      const statusParam = statusFilter !== 'all' ? statusFilter : undefined
      const data = await api.listProjects(1, 50, statusParam)
      setProjects(data.items)
    } catch (err) {
      console.error('Failed to load projects:', err)
      toast.error('加载项目列表失败')
    } finally {
      setLoading(false)
    }
  }, [statusFilter, toast])

  useEffect(() => {
    loadProjects()
  }, [loadProjects])

  useEffect(() => {
    const unsub = subscribe('task_updated', () => loadProjects())
    return unsub
  }, [subscribe, loadProjects])

  const handleEditDeadline = (project: ProjectResponse) => {
    setEditingProject(project)
    setNewDeadline(project.deadline || '')
    setShowDeadlineModal(true)
  }

  const handleSaveDeadline = async () => {
    if (!editingProject || !newDeadline) return

    try {
      if (!USE_MOCK) {
        await api.updateProject(editingProject.id, { deadline: newDeadline })
      }
      setProjects(prev => prev.map(p =>
        p.id === editingProject.id ? { ...p, deadline: newDeadline } : p
      ))
      toast.success('截止日期已更新')
    } catch (err) {
      console.error('Failed to update deadline:', err)
      toast.error('更新失败')
    }
    setShowDeadlineModal(false)
    setEditingProject(null)
  }

  if (loading) return <ProjectsSkeleton />

  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 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={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="archived">已归档</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) }}
        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) }}>
              取消
            </Button>
            <Button variant="primary" className="flex-1" onClick={handleSaveDeadline} disabled={!newDeadline}>
              保存
            </Button>
          </div>
        </div>
      </Modal>
    </div>
  )
}