"use client"

import { useState } from "react"
import Link from "next/link"
import { useHelpCategories } from "@/services/help_categories/query"
import { Button } from "@/components/ui/button"
import { Plus, FolderPlus } from "lucide-react"
import { CategoryFilter } from "@/components/admin/help/category-filter"
import { HelpArticleTable } from "@/components/admin/help/help-article-table"

export default function HelpArticlesPage() {
  const { categories, loading } = useHelpCategories()
  const [selectedCategoryId, setSelectedCategoryId] = useState<number | null>(null)

  const handleCategoryChange = (categoryId: number | null) => {
    setSelectedCategoryId(categoryId)
  }

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold">Help Articles</h1>
        <div className="flex space-x-2">
          <Link href="/admin/help/categories/create">
            <Button variant="outline">
              <FolderPlus className="h-4 w-4 mr-2" />
              New Category
            </Button>
          </Link>
          <Link href="/admin/help/question-answers/create">
            <Button>
              <Plus className="h-4 w-4 mr-2" />
              New Article
            </Button>
          </Link>
        </div>
      </div>

      <div className="bg-white p-6 rounded-lg shadow">
        <div className="mb-6">
          <CategoryFilter onCategoryChange={handleCategoryChange} selectedCategoryId={selectedCategoryId} />
        </div>

        <HelpArticleTable categoryId={selectedCategoryId} />
      </div>

      {!loading && categories.length > 0 && (
        <div className="bg-white p-6 rounded-lg shadow">
          <h2 className="text-xl font-semibold mb-4">Categories</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {categories.map((category) => (
              <div key={category.id} className="border rounded-lg p-4">
                <h3 className="font-medium">{category.name}</h3>
                <p className="text-sm text-gray-500 mt-1">{category.description}</p>
                <div className="mt-4 flex justify-end space-x-2">
                  <Link href={`/admin/help/categories/${category.id}/edit`}>
                    <Button variant="outline" size="sm">
                      Edit
                    </Button>
                  </Link>
                  <Link href={`/admin/help/categories/${category.id}/delete`}>
                    <Button variant="destructive" size="sm">
                      Delete
                    </Button>
                  </Link>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}