"use client"

import { useMemo, useState } from "react"
import { toast } from "sonner"
import { Plus, Search, Boxes, X, Settings, Sparkles } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import type { KnowledgeItem, KnowledgeItemInput } from "@/lib/types"
import { CATEGORIES, MASTERY_LEVELS, MASTERY_META } from "@/lib/types"
import {
  createItem,
  deleteItem,
  reviewItem,
  toggleFavorite,
  updateItem,
} from "@/lib/knowledge"
import { StatsBar } from "@/components/stats-bar"
import { KnowledgeCard } from "@/components/knowledge-card"
import { ItemDialog } from "@/components/item-dialog"
import { DetailDialog } from "@/components/detail-dialog"
import { AISettingsDialog } from "@/components/ai/ai-settings-dialog"
import { AIBatchImportDialog } from "@/components/ai/ai-batch-import-dialog"

type SortKey = "recent" | "review" | "title"

type SelectOption<T extends string = string> = { value: T; label: string }

// 通过对象定义 value 与展示文案，下方循环渲染，便于维护
const CATEGORY_OPTIONS: SelectOption[] = [
  { value: "all", label: "全部分类" },
  ...CATEGORIES.map((c) => ({ value: c, label: c })),
]

const MASTERY_OPTIONS: SelectOption[] = [
  { value: "all", label: "全部状态" },
  ...MASTERY_LEVELS.map((m) => ({ value: m, label: MASTERY_META[m].label })),
]

const SORT_OPTIONS: SelectOption<SortKey>[] = [
  { value: "recent", label: "最近添加" },
  { value: "review", label: "待复习" },
  { value: "title", label: "按标题" },
]

export function KnowledgeDashboard({ initialItems }: { initialItems: KnowledgeItem[] }) {
  const [items, setItems] = useState<KnowledgeItem[]>(initialItems)
  const [query, setQuery] = useState("")
  const [category, setCategory] = useState<string>("all")
  const [mastery, setMastery] = useState<string>("all")
  const [favoritesOnly, setFavoritesOnly] = useState(false)
  const [sort, setSort] = useState<SortKey>("recent")
  const [activeTag, setActiveTag] = useState<string | null>(null)

  const [formOpen, setFormOpen] = useState(false)
  const [editing, setEditing] = useState<KnowledgeItem | null>(null)
  const [detail, setDetail] = useState<KnowledgeItem | null>(null)
  const [settingsOpen, setSettingsOpen] = useState(false)
  const [batchOpen, setBatchOpen] = useState(false)

  const allTags = useMemo(() => {
    const map = new Map<string, number>()
    for (const it of items) for (const t of it.tags) map.set(t, (map.get(t) ?? 0) + 1)
    return [...map.entries()].sort((a, b) => b[1] - a[1])
  }, [items])

  const filtered = useMemo(() => {
    let list = items.filter((it) => {
      if (category !== "all" && it.category !== category) return false
      if (mastery !== "all" && it.mastery !== mastery) return false
      if (favoritesOnly && !it.is_favorite) return false
      if (activeTag && !it.tags.includes(activeTag)) return false
      if (query) {
        const q = query.toLowerCase()
        const hay = [it.title, it.summary, it.content, it.notes, it.tags.join(" ")]
          .filter(Boolean)
          .join(" ")
          .toLowerCase()
        if (!hay.includes(q)) return false
      }
      return true
    })
    list = [...list].sort((a, b) => {
      if (sort === "title") return a.title.localeCompare(b.title, "zh")
      if (sort === "review") {
        const av = a.next_review_at ? new Date(a.next_review_at).getTime() : Infinity
        const bv = b.next_review_at ? new Date(b.next_review_at).getTime() : Infinity
        return av - bv
      }
      return new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
    })
    return list
  }, [items, category, mastery, favoritesOnly, activeTag, query, sort])

  function openCreate() {
    setEditing(null)
    setFormOpen(true)
  }

  function openEdit(item: KnowledgeItem) {
    setEditing(item)
    setDetail(null)
    setFormOpen(true)
  }

  async function handleSubmit(input: KnowledgeItemInput) {
    try {
      if (editing) {
        const updated = await updateItem(editing.id, input)
        setItems((prev) => prev.map((it) => (it.id === updated.id ? updated : it)))
        toast.success("知识点已更新")
      } else {
        const created = await createItem(input)
        setItems((prev) => [created, ...prev])
        toast.success("知识点已添加")
      }
      setFormOpen(false)
      setEditing(null)
    } catch (e) {
      toast.error("操作失败，请重试")
      console.log("[v0] submit error:", e)
    }
  }

  function handleBatchInserted(created: KnowledgeItem[]) {
    setItems((prev) => [...created, ...prev])
  }

  async function handleDelete(id: string) {
    try {
      await deleteItem(id)
      setItems((prev) => prev.filter((it) => it.id !== id))
      setDetail(null)
      toast.success("已删除")
    } catch (e) {
      toast.error("删除失败")
      console.log("[v0] delete error:", e)
    }
  }

  async function handleToggleFav(item: KnowledgeItem) {
    const value = !item.is_favorite
    setItems((prev) => prev.map((it) => (it.id === item.id ? { ...it, is_favorite: value } : it)))
    try {
      await toggleFavorite(item.id, value)
    } catch (e) {
      setItems((prev) => prev.map((it) => (it.id === item.id ? { ...it, is_favorite: !value } : it)))
      toast.error("收藏失败")
      console.log("[v0] fav error:", e)
    }
  }

  async function handleReview(item: KnowledgeItem) {
    try {
      const updated = await reviewItem(item.id, item.review_count, item.mastery)
      setItems((prev) => prev.map((it) => (it.id === updated.id ? updated : it)))
      setDetail((d) => (d && d.id === updated.id ? updated : d))
      toast.success(`已复习 · 累计 ${updated.review_count} 次`)
    } catch (e) {
      toast.error("记录复习失败")
      console.log("[v0] review error:", e)
    }
  }

  const hasFilters = category !== "all" || mastery !== "all" || favoritesOnly || activeTag || query

  return (
    <main className="flex min-h-screen flex-col">
      {/* Header */}
      <header className="sticky top-0 z-30 border-b border-border/60 bg-background/80 backdrop-blur-xl">
        <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-4 sm:px-6">
          <div className="flex items-center gap-3">
            <div className="flex size-10 items-center justify-center rounded-lg border border-primary/30 bg-primary/10 text-primary glow-ring">
              <Boxes className="size-5" />
            </div>
            <div>
              <h1 className="text-balance text-lg font-semibold tracking-tight">前端知识库</h1>
              <p className="font-mono text-xs text-muted-foreground">DevVault · 收集 · 整理 · 复习</p>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <Button
              variant="outline"
              onClick={() => setBatchOpen(true)}
              className="gap-2 border-primary/30 text-primary hover:text-primary"
            >
              <Sparkles className="size-4" />
              <span className="hidden sm:inline">AI 批量整理</span>
              <span className="sm:hidden">AI</span>
            </Button>
            <Button onClick={openCreate} className="gap-2">
              <Plus className="size-4" />
              <span className="hidden sm:inline">新增知识点</span>
              <span className="sm:hidden">新增</span>
            </Button>
            <Button variant="ghost" size="icon" onClick={() => setSettingsOpen(true)} aria-label="设置">
              <Settings className="size-5" />
            </Button>
          </div>
        </div>
      </header>

      <div className="tech-grid-bg flex-1">
        <div className="mx-auto max-w-6xl px-4 py-6 sm:px-6 sm:py-8">
          <StatsBar items={items} />

          {/* Toolbar */}
          <div className="mt-6 flex flex-col gap-3">
            <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
              <div className="relative flex-1">
                <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
                <Input
                  value={query}
                  onChange={(e) => setQuery(e.target.value)}
                  placeholder="搜索标题、内容、标签..."
                  className="pl-9"
                />
              </div>
              <div className="flex flex-wrap gap-2">
                <Select value={category} onValueChange={setCategory} items={CATEGORY_OPTIONS}>
                  <SelectTrigger className="w-[120px]">
                    <SelectValue placeholder="分类" />
                  </SelectTrigger>
                  <SelectContent>
                    {CATEGORY_OPTIONS.map((opt) => (
                      <SelectItem key={opt.value} value={opt.value}>
                        {opt.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                <Select value={mastery} onValueChange={setMastery} items={MASTERY_OPTIONS}>
                  <SelectTrigger className="w-[110px]">
                    <SelectValue placeholder="掌握度" />
                  </SelectTrigger>
                  <SelectContent>
                    {MASTERY_OPTIONS.map((opt) => (
                      <SelectItem key={opt.value} value={opt.value}>
                        {opt.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                <Select value={sort} onValueChange={(v) => setSort(v as SortKey)} items={SORT_OPTIONS}>
                  <SelectTrigger className="w-[110px]">
                    <SelectValue placeholder="排序" />
                  </SelectTrigger>
                  <SelectContent>
                    {SORT_OPTIONS.map((opt) => (
                      <SelectItem key={opt.value} value={opt.value}>
                        {opt.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                <Button
                  variant={favoritesOnly ? "default" : "outline"}
                  onClick={() => setFavoritesOnly((v) => !v)}
                >
                  收藏
                </Button>
              </div>
            </div>

            {/* Tag cloud */}
            {allTags.length > 0 && (
              <div className="flex flex-wrap items-center gap-2">
                {allTags.slice(0, 16).map(([tag, count]) => (
                  <button key={tag} onClick={() => setActiveTag((t) => (t === tag ? null : tag))}>
                    <Badge
                      variant={activeTag === tag ? "default" : "secondary"}
                      className="cursor-pointer font-mono text-xs"
                    >
                      #{tag}
                      <span className="ml-1 opacity-60">{count}</span>
                    </Badge>
                  </button>
                ))}
                {hasFilters && (
                  <button
                    onClick={() => {
                      setQuery("")
                      setCategory("all")
                      setMastery("all")
                      setFavoritesOnly(false)
                      setActiveTag(null)
                    }}
                    className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
                  >
                    <X className="size-3" /> 清除筛选
                  </button>
                )}
              </div>
            )}
          </div>

          {/* Grid */}
          <div className="mt-6">
            <p className="mb-3 font-mono text-xs text-muted-foreground">
              {filtered.length} / {items.length} 条记录
            </p>
            {filtered.length === 0 ? (
              <div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-border py-20 text-center">
                <Boxes className="mb-3 size-8 text-muted-foreground" />
                <p className="text-sm text-muted-foreground">
                  {items.length === 0 ? "还没有知识点，点击「新增」开始收集吧" : "没有匹配的结果"}
                </p>
              </div>
            ) : (
              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                {filtered.map((item) => (
                  <KnowledgeCard
                    key={item.id}
                    item={item}
                    onOpen={() => setDetail(item)}
                    onToggleFav={() => handleToggleFav(item)}
                    onTagClick={(t) => setActiveTag((cur) => (cur === t ? null : t))}
                  />
                ))}
              </div>
            )}
          </div>
        </div>
      </div>

      <ItemDialog
        open={formOpen}
        onOpenChange={setFormOpen}
        initial={editing}
        onSubmit={handleSubmit}
      />
      <DetailDialog
        item={detail}
        onOpenChange={(o) => !o && setDetail(null)}
        onEdit={openEdit}
        onDelete={handleDelete}
        onReview={handleReview}
        onToggleFav={handleToggleFav}
        onItemUpdated={(updated) => {
          setItems((prev) => prev.map((it) => (it.id === updated.id ? updated : it)))
          setDetail((d) => (d && d.id === updated.id ? updated : d))
        }}
      />
      <AISettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} />
      <AIBatchImportDialog open={batchOpen} onOpenChange={setBatchOpen} onInserted={handleBatchInserted} />
    </main>
  )
}