"use client"

import { standardSchemaResolver } from "@hookform/resolvers/standard-schema"
import { ArrowLeft, ImagePlus, X } from "lucide-react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { useState } from "react"
import { useForm } from "react-hook-form"
import { z } from "zod"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { mockPosts } from "@/lib/mock"
import { useRequireAuth } from "@/lib/use-require-auth"

const postSchema = z.object({
  title: z.string().min(2, "标题至少2个字符").max(50, "标题最多50个字符"),
  content: z.string().min(10, "内容至少10个字符"),
})

const tagOptions = ["英雄联盟", "王者荣耀", "CS2", "原神", "上分", "攻略", "好评", "吐槽", "求组队"]

export default function NewPostPage() {
  const router = useRouter()
  const { isAuthenticated, requireAuth } = useRequireAuth()
  const [postType, setPostType] = useState("normal")
  const [selectedTags, setSelectedTags] = useState<string[]>([])
  const [imageCount, setImageCount] = useState(0)
  const [selectedQuotePostId, setSelectedQuotePostId] = useState<string | undefined>(undefined)

  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm({
    resolver: standardSchemaResolver(postSchema),
  })

  const toggleTag = (tag: string) => {
    setSelectedTags((prev) =>
      prev.includes(tag) ? prev.filter((t) => t !== tag) : prev.length < 5 ? [...prev, tag] : prev,
    )
  }

  const onSubmit = async () => {
    if (!isAuthenticated) {
      requireAuth(() => undefined)
      return
    }

    await new Promise((r) => setTimeout(r, 500))
    router.push("/community")
  }

  return (
    <div className="container mx-auto py-8 px-4 max-w-2xl">
      <Link
        href="/community"
        className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground mb-4"
      >
        <ArrowLeft className="h-4 w-4" />
        返回社区
      </Link>

      <Card>
        <CardHeader>
          <CardTitle>发布帖子</CardTitle>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
            <div className="space-y-2">
              <Label>帖子类型</Label>
              <Select value={postType} onValueChange={setPostType}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="normal">普通帖</SelectItem>
                  <SelectItem value="show_order">秀单帖</SelectItem>
                  <SelectItem value="quote">引用帖</SelectItem>
                </SelectContent>
              </Select>
            </div>

            {postType === "show_order" && (
              <div className="space-y-2">
                <Label>关联订单</Label>
                <Select>
                  <SelectTrigger>
                    <SelectValue placeholder="选择要展示的订单" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="ord2">英雄联盟上分陪玩 · 已完成</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            )}

            {postType === "quote" && (
              <div className="space-y-2">
                <Label>引用帖子</Label>
                <Select value={selectedQuotePostId} onValueChange={setSelectedQuotePostId}>
                  <SelectTrigger>
                    <SelectValue placeholder="选择要引用的帖子" />
                  </SelectTrigger>
                  <SelectContent>
                    {mockPosts.map((post) => (
                      <SelectItem key={post.id} value={post.id}>
                        {post.title}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                <div className="mt-2 rounded-md border bg-muted/50 p-3 text-sm text-muted-foreground">
                  <p className="font-medium text-foreground">预览：</p>
                  {selectedQuotePostId ? (
                    (() => {
                      const post = mockPosts.find((p) => p.id === selectedQuotePostId)
                      if (!post) return <p className="mt-1">未找到帖子</p>
                      return (
                        <div className="mt-2 rounded border bg-background p-3">
                          <p className="font-medium text-foreground">{post.title}</p>
                          <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">
                            {post.content}
                          </p>
                          <div className="mt-2 flex items-center gap-2 text-xs text-muted-foreground">
                            <span>@{post.author.nickname}</span>
                            <span>·</span>
                            <span>{new Date(post.createdAt).toLocaleDateString("zh-CN")}</span>
                          </div>
                        </div>
                      )
                    })()
                  ) : (
                    <p className="mt-1">选择一个帖子以查看预览...</p>
                  )}
                </div>
              </div>
            )}

            <div className="space-y-2">
              <Label htmlFor="title">标题</Label>
              <Input id="title" placeholder="请输入帖子标题" {...register("title")} />
              {errors.title && <p className="text-xs text-destructive">{errors.title.message}</p>}
            </div>

            <div className="space-y-2">
              <Label htmlFor="content">内容</Label>
              <Textarea id="content" placeholder="写点什么..." rows={6} {...register("content")} />
              {errors.content && (
                <p className="text-xs text-destructive">{errors.content.message}</p>
              )}
            </div>

            <div className="space-y-2">
              <Label>图片（最多9张）</Label>
              <div className="flex gap-2 flex-wrap">
                {Array.from({ length: imageCount }).map((_, i) => (
                  <div
                    key={`img-${i.toString()}`}
                    className="h-20 w-20 rounded-md bg-muted flex items-center justify-center relative"
                  >
                    <span className="text-xs text-muted-foreground">图片</span>
                    <button
                      type="button"
                      onClick={() => setImageCount((c) => c - 1)}
                      className="absolute -top-1 -right-1 h-4 w-4 rounded-full bg-destructive text-destructive-foreground flex items-center justify-center"
                    >
                      <X className="h-3 w-3" />
                    </button>
                  </div>
                ))}
                {imageCount < 9 && (
                  <button
                    type="button"
                    onClick={() => setImageCount((c) => c + 1)}
                    className="h-20 w-20 rounded-md border-2 border-dashed border-muted-foreground/25 flex flex-col items-center justify-center gap-1 text-muted-foreground hover:border-muted-foreground/50 transition-colors"
                  >
                    <ImagePlus className="h-5 w-5" />
                    <span className="text-[10px]">添加</span>
                  </button>
                )}
              </div>
            </div>

            <div className="space-y-2">
              <Label>标签（最多5个）</Label>
              <div className="flex flex-wrap gap-2">
                {tagOptions.map((tag) => (
                  <Badge
                    key={tag}
                    variant={selectedTags.includes(tag) ? "default" : "outline"}
                    className="cursor-pointer"
                    onClick={() => toggleTag(tag)}
                  >
                    {tag}
                  </Badge>
                ))}
              </div>
            </div>

            <div className="flex gap-2">
              <Button type="submit" className="flex-1" disabled={isSubmitting}>
                {isSubmitting ? "发布中..." : "发布"}
              </Button>
              <Button type="button" variant="outline" asChild>
                <Link href="/community">取消</Link>
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}