'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 {
  Search,
  Plus,
  Filter,
  FileText,
  Video,
  ChevronRight,
  Calendar,
  Users
} from 'lucide-react'

// 模拟项目数据
const mockProjects = [
  {
    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 }: { project: typeof mockProjects[0] }) {
  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>
              </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 filteredProjects = mockProjects.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} />
        ))}
      </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>
      )}
    </div>
  )
}