"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { useHelpCategories } from "@/services/help_categories/query"
import { useHelpQuestionAnswer, deleteHelpQuestionAnswer } from "@/services/help_question_answers/query"
import { Button } from "@/components/ui/button"
import { ArrowLeft, AlertTriangle, Trash2 } from "lucide-react"

export default function DeleteHelpArticlePage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const qaId = Number.parseInt(params.id)
  const { categories } = useHelpCategories()
  const { questionAnswer, loading, error } = useHelpQuestionAnswer(qaId)
  const [isDeleting, setIsDeleting] = useState(false)

  const getCategoryName = (categoryId: number) => {
    const category = categories.find((cat) => cat.id === categoryId)
    return category ? category.name : "Unknown Category"
  }

  const handleDelete = async () => {
    setIsDeleting(true)

    try {
      await deleteHelpQuestionAnswer(qaId)
      router.push("/admin/help")
    } catch (error) {
      console.error("Error deleting help article:", error)
      setIsDeleting(false)
    }
  }

  if (loading) {
    return <div className="py-10 text-center">Loading help article...</div>
  }

  if (error || !questionAnswer) {
    return <div className="py-10 text-center text-red-500">Error loading help article. Please try again.</div>
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold">Delete Help Article</h1>
        <Link href="/admin/help">
          <Button variant="outline">
            <ArrowLeft className="h-4 w-4 mr-2" />
            Back to Help Articles
          </Button>
        </Link>
      </div>

      <div className="bg-white p-6 rounded-lg shadow">
        <div className="flex items-start space-x-4 p-4 bg-amber-50 border border-amber-200 rounded-lg mb-6">
          <AlertTriangle className="h-6 w-6 text-amber-500 flex-shrink-0 mt-0.5" />
          <div>
            <h3 className="font-medium text-amber-800">Warning</h3>
            <p className="text-amber-700 mt-1">
              You are about to delete this help article. This action cannot be undone.
            </p>
          </div>
        </div>

        <div className="space-y-4">
          <div>
            <h2 className="text-lg font-medium">Article Details</h2>
            <div className="mt-2 space-y-2">
              <div>
                <span className="font-medium">Question:</span> {questionAnswer.question}
              </div>
              <div>
                <span className="font-medium">Category:</span> {getCategoryName(questionAnswer.category_id)}
              </div>
              <div>
                <span className="font-medium">Featured:</span> {questionAnswer.is_featured ? "Yes" : "No"}
              </div>
              <div>
                <span className="font-medium">Display Order:</span> {questionAnswer.order}
              </div>
            </div>
          </div>

          <div className="pt-4 border-t">
            <h3 className="text-lg font-medium text-red-600">Confirm Deletion</h3>
            <p className="mt-1 text-gray-600">
              Are you sure you want to delete this help article? This action cannot be undone.
            </p>
          </div>
        </div>

        <div className="flex justify-end space-x-3 mt-6">
          <Link href="/admin/help">
            <Button variant="outline">Cancel</Button>
          </Link>
          <Button variant="destructive" onClick={handleDelete} disabled={isDeleting}>
            <Trash2 className="h-4 w-4 mr-2" />
            {isDeleting ? "Deleting..." : "Delete Article"}
          </Button>
        </div>
      </div>
    </div>
  )
}