"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { useHelpCategories } from "@/services/help_categories/query"
import { createHelpQuestionAnswer } from "@/services/help_question_answers/query"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { ArrowLeft, Save } from "lucide-react"

export default function CreateHelpArticlePage() {
  const router = useRouter()
  const { categories, loading } = useHelpCategories()
  const [formData, setFormData] = useState({
    category_id: "",
    question: "",
    answer: "",
    is_featured: false,
    order: 1,
  })
  const [isSubmitting, setIsSubmitting] = useState(false)

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

  const handleSwitchChange = (checked: boolean) => {
    setFormData((prev) => ({ ...prev, is_featured: checked }))
  }

  const handleSelectChange = (value: string) => {
    setFormData((prev) => ({ ...prev, category_id: value }))
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)

    try {
      await createHelpQuestionAnswer({
        category_id: Number.parseInt(formData.category_id),
        question: formData.question,
        answer: formData.answer,
        is_featured: formData.is_featured,
        order: formData.order,
      })
      router.push("/admin/help")
    } catch (error) {
      console.error("Error creating help article:", error)
      setIsSubmitting(false)
    }
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold">Create 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">
        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="space-y-4">
            <div>
              <Label htmlFor="category_id">Category</Label>
              <Select value={formData.category_id} onValueChange={handleSelectChange}>
                <SelectTrigger className="w-full">
                  <SelectValue placeholder="Select a category" />
                </SelectTrigger>
                <SelectContent>
                  {loading ? (
                    <SelectItem value="loading" disabled>
                      Loading categories...
                    </SelectItem>
                  ) : (
                    categories.map((category) => (
                      <SelectItem key={category.id} value={category.id.toString()}>
                        {category.name}
                      </SelectItem>
                    ))
                  )}
                </SelectContent>
              </Select>
            </div>

            <div>
              <Label htmlFor="question">Question</Label>
              <Input id="question" name="question" value={formData.question} onChange={handleChange} required />
            </div>

            <div>
              <Label htmlFor="answer">Answer</Label>
              <Textarea id="answer" name="answer" value={formData.answer} onChange={handleChange} rows={6} required />
            </div>

            <div>
              <Label htmlFor="order">Display Order</Label>
              <Input
                id="order"
                name="order"
                type="number"
                min="1"
                value={formData.order}
                onChange={handleChange}
                required
              />
            </div>

            <div className="flex items-center space-x-2">
              <Switch id="is_featured" checked={formData.is_featured} onCheckedChange={handleSwitchChange} />
              <Label htmlFor="is_featured">Featured Article</Label>
            </div>
          </div>

          <div className="flex justify-end">
            <Button type="submit" disabled={isSubmitting}>
              <Save className="h-4 w-4 mr-2" />
              {isSubmitting ? "Saving..." : "Save Article"}
            </Button>
          </div>
        </form>
      </div>
    </div>
  )
}