"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { ChevronLeft, Plus, X, Image as ImageIcon, UploadCloud, Link, Video, FileText, Layers, CalendarDays, ChevronDown } from "lucide-react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { toast } from "@/components/ui/use-toast"
import Image from "next/image"
import { Input } from "@/components/ui/input"
import { cn } from "@/lib/utils"
import { api } from "@/lib/api"
import { showToast } from "@/lib/toast"

interface ApiResponse<T = any> {
  code: number
  msg: string
  data: T
}

// 素材类型枚举
const MATERIAL_TYPES = [
  { id: 1, name: "图片", icon: ImageIcon },
  { id: 2, name: "链接", icon: Link },
  { id: 3, name: "视频", icon: Video },
  { id: 4, name: "文本", icon: FileText },
  { id: 5, name: "小程序", icon: Layers }
]

export default function NewMaterialPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [content, setContent] = useState("")
  const [images, setImages] = useState<string[]>([])
  const [previewUrls, setPreviewUrls] = useState<string[]>([])
  const [materialType, setMaterialType] = useState<number>(1)
  const [url, setUrl] = useState<string>("")
  const [title, setTitle] = useState<string>("")
  const [coverImage, setCoverImage] = useState<string>("")
  const [videoUrl, setVideoUrl] = useState<string>("")
  const [publishTime, setPublishTime] = useState("")
  const [comment, setComment] = useState("")
  const [loading, setLoading] = useState(false)

  // 图片上传
  const handleUploadImage = () => {
    const mockImageUrls = [
      "https://picsum.photos/id/237/200/300",
      "https://picsum.photos/id/238/200/300",
      "https://picsum.photos/id/239/200/300"
    ]
    const randomIndex = Math.floor(Math.random() * mockImageUrls.length)
    const newImage = mockImageUrls[randomIndex]
    if (!images.includes(newImage)) {
      setImages([...images, newImage])
      setPreviewUrls([...previewUrls, newImage])
    }
  }
  const handleRemoveImage = (indexToRemove: number) => {
    setImages(images.filter((_, index) => index !== indexToRemove))
    setPreviewUrls(previewUrls.filter((_, index) => index !== indexToRemove))
  }

  // 创建素材
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    // 校验
    if (!content) {
      showToast("请输入内容", "error")
      return
    }
    if (!comment) {
      showToast("请输入评论内容", "error")
      return
    }
    if (materialType === 1 && images.length === 0) {
      showToast("请上传图片", "error")
      return
    } else if (materialType === 2 && (!url || !title)) {
      showToast("请输入标题和链接地址", "error")
      return
    } else if (materialType === 3 && (!url && !videoUrl)) {
      showToast("请填写视频链接或上传视频", "error")
      return
    }
    setLoading(true)
    const loadingToast = showToast("正在创建素材...", "loading", true)
    try {
      const payload: any = {
        libraryId: params.id,
        type: materialType,
        content: content,
        comment: comment,
        sendTime: publishTime,
      }
      if (materialType === 1) {
        payload.resUrls = images
      } else if (materialType === 2) {
        payload.title = title
        payload.urls = [url]
        payload.coverImage = coverImage
      } else if (materialType === 3) {
        payload.urls = videoUrl ? [videoUrl] : []
      }
      const response = await api.post<ApiResponse>('/v1/content/library/create-item', payload)
      if (response.code === 200) {
        showToast("创建成功", "success")
        router.push(`/content/${params.id}/materials`)
      } else {
        showToast(response.msg || "创建失败", "error")
      }
    } catch (error: any) {
      showToast(error?.message || "创建素材失败", "error")
    } finally {
      loadingToast.remove && loadingToast.remove()
      setLoading(false)
    }
  }

  return (
    <div className="flex-1 bg-gray-50 min-h-screen">
      <header className="sticky top-0 z-10 bg-white border-b">
        <div className="flex items-center justify-between p-4">
          <div className="flex items-center space-x-3">
            <Button variant="ghost" size="icon" onClick={() => router.back()}>
              <ChevronLeft className="h-5 w-5" />
            </Button>
            <h1 className="text-lg font-medium">新建素材</h1>
          </div>
        </div>
      </header>
      <div className="p-4">
        <Card className="p-8 rounded-3xl shadow-xl bg-white max-w-lg mx-auto">
          <form onSubmit={handleSubmit} className="space-y-8">
            {/* 基础信息分组 */}
            <div className="mb-6">
              <div className="text-xs text-gray-400 mb-2 tracking-widest">基础信息</div>
              <div className="mb-4">
                <Label className="font-bold flex items-center mb-2">发布时间</Label>
                <div className="relative">
                  <Input
                    id="publish-time"
                    type="datetime-local"
                    step="60"
                    value={publishTime}
                    onChange={(e) => setPublishTime(e.target.value)}
                    className="w-full h-12 rounded-2xl border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 px-4 text-base placeholder:text-gray-300"
                    placeholder="请选择发布时间"
                    style={{ width: 'auto' }}
                  />
                  <CalendarDays className="absolute right-4 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 pointer-events-none" />
                </div>
              </div>
              <div>
                <Label className="font-bold flex items-center mb-2">
                  <span className="text-red-500 mr-1">*</span>类型
                </Label>
                <div className="relative">
                  <select
                    style={{ border: '1px solid #e0e0e0' }}
                    className="appearance-none w-full h-12 rounded-2xl border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 px-4 pr-10 text-base bg-white placeholder:text-gray-300"
                    value={materialType}
                    onChange={e => setMaterialType(Number(e.target.value))}
                  >
                    {MATERIAL_TYPES.map(type => (
                      <option key={type.id} value={type.id}>{type.name}</option>
                    ))}
                  </select>
                  <ChevronDown className="absolute right-4 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 pointer-events-none" />
                </div>
              </div>
            </div>
            <div className="border-b border-gray-100 my-4" />
            {/* 内容信息分组（所有类型都展示内容和评论） */}
            <div className="mb-6">
              <div className="text-xs text-gray-400 mb-2 tracking-widest">内容信息</div>
              <Label htmlFor="content" className="font-bold flex items-center mb-2">
                <span className="text-red-500 mr-1">*</span>内容
              </Label>
              <Textarea
                id="content"
                value={content}
                onChange={(e) => setContent(e.target.value)}
                placeholder="请输入内容"
                className="w-full rounded-2xl border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 px-4 text-base min-h-[120px] bg-gray-50 placeholder:text-gray-300"
                rows={10}
              />
              <div className="mt-4">
                <Label htmlFor="comment" className="font-bold mb-2">评论</Label>
                <Textarea
                  id="comment"
                  value={comment}
                  onChange={(e) => setComment(e.target.value)}
                  placeholder="请输入评论内容"
                  className="w-full rounded-2xl border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 px-4 text-base min-h-[80px] bg-gray-50 placeholder:text-gray-300"
                  rows={4}
                />
              </div>
            </div>
            {(materialType === 2 || materialType === 3) && (
              <div className="mb-6">
                <div className="text-xs text-gray-400 mb-2 tracking-widest">内容信息</div>
                {materialType === 2 && (
                  <div className="mb-4">
                    <Label htmlFor="title" className="font-bold flex items-center mb-2">
                      <span className="text-red-500 mr-1">*</span>标题
                    </Label>
                    <Input
                      id="title"
                      value={title}
                      onChange={(e) => setTitle(e.target.value)}
                      placeholder="请输入标题"
                      className="w-full h-12 rounded-2xl border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 px-4 text-base placeholder:text-gray-300"/>
                    {/* 封面图上传 */}
                    <div className="mt-4">
                      <Label className="font-bold mb-2">封面图</Label>
                      <div className="flex items-center gap-4">
                        <Button
                          type="button"
                          variant="outline"
                          className="rounded-2xl border-dashed border-2 border-blue-300 bg-white hover:bg-blue-50 h-28 w-28 flex flex-col items-center justify-center p-0"
                          onClick={() => {
                            const mock = [
                              "https://cdn-icons-png.flaticon.com/512/732/732212.png",
                              "https://cdn-icons-png.flaticon.com/512/5968/5968764.png",
                              "https://cdn-icons-png.flaticon.com/512/5968/5968705.png"
                            ];
                            const random = mock[Math.floor(Math.random() * mock.length)];
                            setCoverImage(random);
                          }}
                        >
                          {coverImage ? (
                            <Image src={coverImage} alt="封面图" width={80} height={80} className="object-contain rounded-xl mx-auto my-auto" />
                          ) : (
                            <>
                              <UploadCloud className="h-8 w-8 mb-2 text-gray-400 mx-auto" />
                              <span className="text-sm text-gray-500">上传封面图</span>
                            </>
                          )}
                        </Button>
                        {coverImage && (
                          <Button type="button" variant="destructive" size="sm" className="h-8 px-2 rounded-lg" onClick={() => setCoverImage("")}>删除</Button>
                        )}
                      </div>
                      <div className="text-xs text-gray-400 mt-1">建议尺寸 80x80，支持 PNG/JPG</div>
                    </div>
                  </div>
                )}
                {materialType === 2 && (
                  <>
                    <Label htmlFor="url" className="font-bold flex items-center mb-2">
                      <span className="text-red-500 mr-1">*</span>链接地址
                    </Label>
                    <Input
                      id="url"
                      value={url}
                      onChange={(e) => setUrl(e.target.value)}
                      placeholder="请输入链接地址"
                      className="w-full h-12 rounded-2xl border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 px-4 text-base placeholder:text-gray-300"
                    />
                  </>
                )}
                {materialType === 3 && (
                  <div className="mt-4">
                    <Label className="font-bold mb-2">上传视频</Label>
                    <div className="flex items-center gap-4">
                      <Button
                        type="button"
                        variant="outline"
                        className="rounded-2xl border-dashed border-2 border-blue-300 bg-white hover:bg-blue-50 h-28 w-44 flex flex-col items-center justify-center p-0"
                        onClick={() => {
                          const mock = [
                            "https://www.w3schools.com/html/mov_bbb.mp4",
                            "https://www.w3schools.com/html/movie.mp4"
                          ];
                          const random = mock[Math.floor(Math.random() * mock.length)];
                          setVideoUrl(random);
                        }}
                      >
                        {videoUrl ? (
                          <video src={videoUrl} controls className="object-contain rounded-xl h-24 w-40 mx-auto my-auto" />
                        ) : (
                          <>
                            <UploadCloud className="h-8 w-8 mb-2 text-gray-400 mx-auto" />
                            <span className="text-sm text-gray-500">上传视频</span>
                          </>
                        )}
                      </Button>
                      {videoUrl && (
                        <Button type="button" variant="destructive" size="sm" className="h-8 px-2 rounded-lg" onClick={() => setVideoUrl("")}>删除</Button>
                      )}
                    </div>
                    <div className="text-xs text-gray-400 mt-1">支持MP4，建议不超过20MB</div>
                  </div>
                )}
              </div>
            )}
            {/* 素材上传分组（仅图片类型和小程序类型） */}
            {(materialType === 1 || materialType === 5) && (
              <div className="mb-6">
                <div className="text-xs text-gray-400 mb-2 tracking-widest">素材上传</div>
                {materialType === 1 && (
                  <>
                    <Label className="font-bold mb-2">素材</Label>
                    <div className="border border-dashed border-gray-300 rounded-2xl p-4 text-center bg-gray-50">
                      <Button 
                        type="button" 
                        variant="outline" 
                        onClick={handleUploadImage} 
                        className="w-full py-8 flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-blue-300 bg-white hover:bg-blue-50"
                      >
                        <UploadCloud className="h-8 w-8 mb-2 text-gray-400" />
                        <span>点击上传图片</span>
                        <span className="text-xs text-gray-500 mt-1">支持 JPG、PNG 格式</span>
                      </Button>
                    </div>
                    {previewUrls.length > 0 && (
                      <div className="mt-2">
                        <Label className="font-bold mb-2">已上传图片</Label>
                        <div className="grid grid-cols-2 md:grid-cols-3 gap-3 mt-2">
                          {previewUrls.map((url, index) => (
                            <div key={index} className="relative group">
                              <div className="aspect-square relative rounded-2xl overflow-hidden border border-gray-200">
                                <Image
                                  src={url}
                                  alt={`图片 ${index + 1}`}
                                  fill
                                  className="object-cover"
                                />
                              </div>
                              <Button
                                type="button"
                                variant="destructive"
                                size="sm"
                                className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity h-6 w-6 p-0 rounded-full"
                                onClick={() => handleRemoveImage(index)}
                              >
                                <X className="h-3 w-3" />
                              </Button>
                            </div>
                          ))}
                        </div>
                      </div>
                    )}
                  </>
                )}
                {materialType === 5 && (
                  <div className="space-y-6">
                    <div>
                      <Label htmlFor="appTitle" className="font-bold mb-2">小程序名称</Label>
                      <Input
                        id="appTitle"
                        placeholder="请输入小程序名称"
                        className="w-full h-12 rounded-2xl border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 px-4 text-base placeholder:text-gray-300"
                      />
                    </div>
                    <div>
                      <Label htmlFor="appId" className="font-bold mb-2">AppID</Label>
                      <Input
                        id="appId"
                        placeholder="请输入AppID"
                        className="w-full h-12 rounded-2xl border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 px-4 text-base placeholder:text-gray-300"
                      />
                    </div>
                    <div>
                      <Label className="font-bold mb-2">小程序封面图</Label>
                      <div className="border border-dashed border-gray-300 rounded-2xl p-4 text-center bg-gray-50">
                        <Button 
                          type="button" 
                          variant="outline" 
                          onClick={handleUploadImage} 
                          className="w-full py-4 flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-blue-300 bg-white hover:bg-blue-50"
                        >
                          <UploadCloud className="h-6 w-6 mb-2 text-gray-400" />
                          <span>上传小程序封面图</span>
                        </Button>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            )}
            <Button type="submit" className="w-full h-12 rounded-2xl bg-blue-600 hover:bg-blue-700 text-base font-bold mt-12 shadow" disabled={loading}>
              {loading ? "创建中..." : "保存素材"}
            </Button>
          </form>
        </Card>
      </div>
    </div>
  )
}