'use client'

import { useState } from 'react'
import { useRouter } 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 { Input } from '@/components/ui/Input'
import {
  ArrowLeft,
  Upload,
  Calendar,
  FileText,
  CheckCircle,
  X,
  Users,
  Search,
  Building2,
  Check
} from 'lucide-react'

// 平台选项
const platformOptions = [
  { id: 'douyin', name: '抖音', icon: '🎵', color: 'bg-[#1a1a1a]' },
  { id: 'xiaohongshu', name: '小红书', icon: '📕', color: 'bg-[#fe2c55]' },
  { id: 'bilibili', name: 'B站', icon: '📺', color: 'bg-[#00a1d6]' },
  { id: 'kuaishou', name: '快手', icon: '⚡', color: 'bg-[#ff4906]' },
  { id: 'weibo', name: '微博', icon: '🔴', color: 'bg-[#e6162d]' },
  { id: 'wechat', name: '微信视频号', icon: '💬', color: 'bg-[#07c160]' },
]

// 模拟品牌方已添加的代理商（来自代理商管理）
const mockAgencies = [
  { id: 'AG789012', name: '星耀传媒', companyName: '上海星耀文化传媒有限公司', creatorCount: 50, passRate: 92 },
  { id: 'AG456789', name: '创意无限', companyName: '深圳创意无限广告有限公司', creatorCount: 35, passRate: 88 },
  { id: 'AG123456', name: '美妆达人MCN', companyName: '杭州美妆达人网络科技有限公司', creatorCount: 28, passRate: 82 },
  { id: 'AG111111', name: '蓝海科技', companyName: '北京蓝海数字科技有限公司', creatorCount: 42, passRate: 85 },
  { id: 'AG222222', name: '云创网络', companyName: '杭州云创网络技术有限公司', creatorCount: 30, passRate: 90 },
  { id: 'AG333333', name: '天府传媒', companyName: '成都天府传媒集团有限公司', creatorCount: 25, passRate: 87 },
]

export default function CreateProjectPage() {
  const router = useRouter()
  const toast = useToast()
  const [projectName, setProjectName] = useState('')
  const [deadline, setDeadline] = useState('')
  const [briefFile, setBriefFile] = useState<File | null>(null)
  const [selectedAgencies, setSelectedAgencies] = useState<string[]>([])
  const [selectedPlatform, setSelectedPlatform] = useState<string>('')
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [agencySearch, setAgencySearch] = useState('')

  // 搜索过滤代理商
  const filteredAgencies = mockAgencies.filter(agency =>
    agencySearch === '' ||
    agency.name.toLowerCase().includes(agencySearch.toLowerCase()) ||
    agency.id.toLowerCase().includes(agencySearch.toLowerCase()) ||
    agency.companyName.toLowerCase().includes(agencySearch.toLowerCase())
  )

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      setBriefFile(file)
    }
  }

  const toggleAgency = (agencyId: string) => {
    setSelectedAgencies(prev =>
      prev.includes(agencyId)
        ? prev.filter(id => id !== agencyId)
        : [...prev, agencyId]
    )
  }

  const handleSubmit = async () => {
    if (!projectName.trim() || !deadline || !briefFile || selectedAgencies.length === 0 || !selectedPlatform) {
      toast.error('请填写完整信息')
      return
    }

    setIsSubmitting(true)
    // 模拟提交
    await new Promise(resolve => setTimeout(resolve, 1500))
    toast.success('项目创建成功！')
    router.push('/brand')
  }

  const isValid = projectName.trim() && deadline && briefFile && selectedAgencies.length > 0 && selectedPlatform

  return (
    <div className="space-y-6 max-w-4xl">
      {/* 顶部导航 */}
      <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>
        <h1 className="text-2xl font-bold text-text-primary">创建项目</h1>
      </div>

      <Card>
        <CardContent className="p-6 space-y-6">
          {/* 项目名称 */}
          <div>
            <label className="block text-sm font-medium text-text-primary mb-2">
              项目名称 <span className="text-accent-coral">*</span>
            </label>
            <input
              type="text"
              value={projectName}
              onChange={(e) => setProjectName(e.target.value)}
              placeholder="例如：XX品牌618推广"
              className="w-full px-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>
            <label className="block text-sm font-medium text-text-primary mb-2">
              发布平台 <span className="text-accent-coral">*</span>
            </label>
            <p className="text-xs text-text-tertiary mb-3">选择视频将发布的平台，系统将应用对应平台的审核规则</p>
            <div className="grid grid-cols-3 md:grid-cols-6 gap-3">
              {platformOptions.map((platform) => (
                <button
                  key={platform.id}
                  type="button"
                  onClick={() => setSelectedPlatform(platform.id)}
                  className={`p-3 rounded-xl border-2 transition-all flex flex-col items-center gap-2 ${
                    selectedPlatform === platform.id
                      ? 'border-accent-indigo bg-accent-indigo/10'
                      : 'border-border-subtle hover:border-accent-indigo/50'
                  }`}
                >
                  <div className={`w-10 h-10 ${platform.color} rounded-lg flex items-center justify-center text-lg`}>
                    {platform.icon}
                  </div>
                  <span className="text-sm font-medium text-text-primary">{platform.name}</span>
                  {selectedPlatform === platform.id && (
                    <div className="absolute top-1 right-1 w-4 h-4 rounded-full bg-accent-indigo flex items-center justify-center">
                      <Check size={10} className="text-white" />
                    </div>
                  )}
                </button>
              ))}
            </div>
          </div>

          {/* 截止日期 */}
          <div>
            <label className="block text-sm font-medium text-text-primary mb-2">
              截止日期 <span className="text-accent-coral">*</span>
            </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={deadline}
                onChange={(e) => setDeadline(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>

          {/* Brief 上传 */}
          <div>
            <label className="block text-sm font-medium text-text-primary mb-2">
              上传 Brief <span className="text-accent-coral">*</span>
            </label>
            <div className="border-2 border-dashed border-border-subtle rounded-lg p-8 text-center hover:border-accent-indigo/50 transition-colors">
              {briefFile ? (
                <div className="flex items-center justify-center gap-3">
                  <FileText size={24} className="text-accent-indigo" />
                  <span className="text-text-primary">{briefFile.name}</span>
                  <button
                    type="button"
                    onClick={() => setBriefFile(null)}
                    className="p-1 hover:bg-bg-elevated rounded-full"
                  >
                    <X size={16} className="text-text-tertiary" />
                  </button>
                </div>
              ) : (
                <label className="cursor-pointer">
                  <Upload size={32} className="mx-auto text-text-tertiary mb-3" />
                  <p className="text-text-secondary mb-1">点击或拖拽上传 Brief 文件</p>
                  <p className="text-xs text-text-tertiary">支持 PDF、Word、Excel 格式</p>
                  <input
                    type="file"
                    accept=".pdf,.doc,.docx,.xls,.xlsx"
                    onChange={handleFileChange}
                    className="hidden"
                  />
                </label>
              )}
            </div>
          </div>

          {/* 选择代理商 */}
          <div>
            <label className="block text-sm font-medium text-text-primary mb-2">
              选择代理商 <span className="text-accent-coral">*</span>
              <span className="text-text-tertiary font-normal ml-2">
                已选择 {selectedAgencies.length} 个
              </span>
            </label>

            {/* 搜索框 */}
            <div className="relative mb-4">
              <Search size={18} className="absolute left-4 top-1/2 -translate-y-1/2 text-text-tertiary" />
              <input
                type="text"
                value={agencySearch}
                onChange={(e) => setAgencySearch(e.target.value)}
                placeholder="搜索代理商名称、ID或公司名..."
                className="w-full pl-11 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 className="grid grid-cols-1 md:grid-cols-2 gap-3 max-h-80 overflow-y-auto">
              {filteredAgencies.length > 0 ? (
                filteredAgencies.map((agency) => {
                  const isSelected = selectedAgencies.includes(agency.id)
                  return (
                    <button
                      key={agency.id}
                      type="button"
                      onClick={() => toggleAgency(agency.id)}
                      className={`p-4 rounded-xl border-2 text-left transition-all ${
                        isSelected
                          ? 'border-accent-indigo bg-accent-indigo/10'
                          : 'border-border-subtle hover:border-accent-indigo/50'
                      }`}
                    >
                      <div className="flex items-start gap-3">
                        <div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${
                          isSelected ? 'bg-accent-indigo' : 'bg-accent-indigo/15'
                        }`}>
                          {isSelected ? (
                            <CheckCircle size={20} className="text-white" />
                          ) : (
                            <Building2 size={20} className="text-accent-indigo" />
                          )}
                        </div>
                        <div className="flex-1 min-w-0">
                          <div className="flex items-center gap-2">
                            <span className="font-medium text-text-primary">{agency.name}</span>
                            <span className="text-xs text-text-tertiary font-mono">{agency.id}</span>
                          </div>
                          <p className="text-sm text-text-secondary truncate mt-0.5">{agency.companyName}</p>
                          <div className="flex items-center gap-4 mt-1.5 text-xs text-text-tertiary">
                            <span className="flex items-center gap-1">
                              <Users size={12} />
                              {agency.creatorCount} 达人
                            </span>
                            <span className={agency.passRate >= 90 ? 'text-accent-green' : agency.passRate >= 80 ? 'text-accent-indigo' : 'text-orange-400'}>
                              通过率 {agency.passRate}%
                            </span>
                          </div>
                        </div>
                      </div>
                    </button>
                  )
                })
              ) : (
                <div className="col-span-2 text-center py-8 text-text-tertiary">
                  <Search size={32} className="mx-auto mb-2 opacity-50" />
                  <p>未找到匹配的代理商</p>
                </div>
              )}
            </div>

            <p className="text-xs text-text-tertiary mt-3">
              仅显示已在"代理商管理"中添加的代理商
            </p>
          </div>

          {/* 操作按钮 */}
          <div className="flex items-center justify-end gap-4 pt-4 border-t border-border-subtle">
            <Button variant="secondary" onClick={() => router.back()}>
              取消
            </Button>
            <Button
              onClick={handleSubmit}
              disabled={!isValid || isSubmitting}
            >
              {isSubmitting ? '创建中...' : '创建项目'}
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}