"use client"

import { useState, useEffect } from "react"
import { useTranslation } from "react-i18next"
import { Search, ChevronDown, ChevronUp } from "lucide-react"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { useHelpCategories, useHelpQuestionAnswers, type HelpQuestionAnswer } from "@/services/help_categories/query"

export default function StudentHelpPage() {
  const { t } = useTranslation()
  const [searchQuery, setSearchQuery] = useState("")
  const [expandedQuestions, setExpandedQuestions] = useState<number[]>([])
  const [activeTab, setActiveTab] = useState<string>("all")

  const { categories, loading: categoriesLoading } = useHelpCategories()
  const { questionAnswers, loading: qaLoading } = useHelpQuestionAnswers()

  const [filteredQA, setFilteredQA] = useState<HelpQuestionAnswer[]>([])

  useEffect(() => {
    if (!qaLoading && questionAnswers) {
      let filtered = questionAnswers

      // Filter by search query
      if (searchQuery) {
        const query = searchQuery.toLowerCase()
        filtered = filtered.filter(
          (qa) => qa.question.toLowerCase().includes(query) || qa.answer.toLowerCase().includes(query),
        )
      }

      // Filter by category
      if (activeTab !== "all") {
        const categoryId = Number.parseInt(activeTab)
        filtered = filtered.filter((qa) => qa.category_id === categoryId)
      }

      setFilteredQA(filtered)
    }
  }, [searchQuery, activeTab, qaLoading, questionAnswers])

  const toggleQuestion = (id: number) => {
    setExpandedQuestions((prev) => (prev.includes(id) ? prev.filter((qId) => qId !== id) : [...prev, id]))
  }

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

  // Group QAs by category
  const groupedQA: Record<number, HelpQuestionAnswer[]> = {}

  if (!qaLoading && filteredQA.length > 0) {
    filteredQA.forEach((qa) => {
      if (!groupedQA[qa.category_id]) {
        groupedQA[qa.category_id] = []
      }
      groupedQA[qa.category_id].push(qa)
    })
  }

  const isLoading = categoriesLoading || qaLoading

  if (isLoading) {
    return <div className="animate-pulse">Loading help resources...</div>
  }

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold mb-2">{t("student.help.title", "Help Center")}</h1>
        <p className="text-muted-foreground">
          {t(
            "student.help.description",
            "Find answers to common questions and learn how to get the most out of your courses.",
          )}
        </p>
      </div>

      <div className="relative">
        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
        <Input
          placeholder={t("student.help.search_placeholder", "Search for help...")}
          className="pl-10"
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
        />
      </div>

      <Tabs defaultValue="all" value={activeTab} onValueChange={setActiveTab}>
        <TabsList className="mb-4 flex flex-wrap">
          <TabsTrigger value="all">{t("student.help.all_categories", "All Categories")}</TabsTrigger>
          {categories.map((category) => (
            <TabsTrigger key={category.id} value={category.id.toString()}>
              {category.name}
            </TabsTrigger>
          ))}
        </TabsList>

        <TabsContent value={activeTab} className="mt-0">
          {Object.keys(groupedQA).length > 0 ? (
            <div className="grid gap-6">
              {Object.entries(groupedQA).map(([categoryId, questions]) => (
                <div key={categoryId} className="space-y-4">
                  <h2 className="text-xl font-semibold">{getCategoryName(Number.parseInt(categoryId))}</h2>

                  {questions.map((qa) => (
                    <Card key={qa.id} className="overflow-hidden">
                      <CardContent className="p-0">
                        <Button
                          variant="ghost"
                          className="w-full justify-between p-4 rounded-none text-left font-medium"
                          onClick={() => toggleQuestion(qa.id)}
                        >
                          <span>{qa.question}</span>
                          {expandedQuestions.includes(qa.id) ? (
                            <ChevronUp className="h-5 w-5" />
                          ) : (
                            <ChevronDown className="h-5 w-5" />
                          )}
                        </Button>

                        {expandedQuestions.includes(qa.id) && (
                          <div className="p-4 pt-0 border-t">
                            <p className="whitespace-pre-line">{qa.answer}</p>
                          </div>
                        )}
                      </CardContent>
                    </Card>
                  ))}
                </div>
              ))}
            </div>
          ) : (
            <div className="text-center py-10">
              <p className="text-muted-foreground">
                {searchQuery
                  ? t("student.help.no_results", "No results found for your search. Try different keywords.")
                  : t("student.help.no_questions", "No questions available in this category.")}
              </p>
            </div>
          )}
        </TabsContent>
      </Tabs>

      <div className="mt-8 border-t pt-6">
        <h2 className="text-xl font-semibold mb-4">{t("student.help.need_more_help", "Need More Help?")}</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <Card>
            <CardContent className="p-6">
              <h3 className="text-lg font-medium mb-2">{t("student.help.contact_support", "Contact Support")}</h3>
              <p className="text-muted-foreground mb-4">
                {t(
                  "student.help.support_description",
                  "Our support team is available to help with any questions or issues.",
                )}
              </p>
              <Button className="w-full">{t("student.help.contact_button", "Contact Support")}</Button>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="p-6">
              <h3 className="text-lg font-medium mb-2">{t("student.help.schedule_call", "Schedule a Call")}</h3>
              <p className="text-muted-foreground mb-4">
                {t("student.help.call_description", "Book a call with our support team for personalized assistance.")}
              </p>
              <Button variant="outline" className="w-full">
                {t("student.help.schedule_button", "Book a Call")}
              </Button>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}