"use client"
import React, {useState} from 'react'
import {Card, CardContent, CardDescription, CardTitle} from "@/shared/ui/card";
import {Separator} from "@/shared/ui/separator";
import {Badge} from "@/shared/ui/badge";
import {Accordion, AccordionContent, AccordionItem, AccordionTrigger} from "@/shared/ui/accordion";
import {useQuery} from "@tanstack/react-query";
import {getUserRequests, getUserRequestsById} from "@/shared/api/userRequestsSvc";
import Loader from "@/shared/ui/loader";
import { useTranslations } from 'next-intl';

const ApplicationsSections = () => {
  const t = useTranslations("")
  const [selectedRequest, setSelectedRequest] = useState<number>(0)
  const {data: requests, isLoading: requestsIsLoading} = useQuery({
    queryKey: ["getUserRequests"],
    queryFn: getUserRequests,
  })

  const {data: requestDetails} = useQuery({
    queryKey: ["getUserRequestsById", selectedRequest],
    queryFn: () => getUserRequestsById(selectedRequest),
    enabled: !!selectedRequest,
  })
  return (
      <div className={"profile-section-wrapper"}>
        <h1 className={"profile-section-title"}>{t("Mening arizalarim")}</h1>
        <span className={"profile-section-subtitle"}>
          {t("Sizning arizalaringiz va ularning holati haqida ma'lumotlar")}
        </span>
        <div className={"mt-4 space-y-4"}>
          {
            requestsIsLoading ? <Loader height={"h-[30vh]"}/> :requests?.data?.map(request => (
                <Accordion onClick={
                  () => setSelectedRequest(request.id)
                } type="single" className={"border px-5 rounded-xl"} collapsible>
                  <AccordionItem value="item-1">
                    <AccordionTrigger className={" cursor-pointer"}>
                      <div className={"w-full"}>
                        <div className={"flex justify-between items-center"}>
                          <div>
                            <CardTitle className={"text-lg"}>{t("Ariza")} #{request.id}</CardTitle>
                            <CardDescription>{t("Yaratilish vaqti")}: {request.created_at}</CardDescription>
                          </div>
                          <Badge style={{ backgroundColor: request.status.bg_color, color: request.status.font_color }}>
                            {request.status.translation}
                          </Badge>
                        </div>
                      </div>
                    </AccordionTrigger>
                    <AccordionContent>
                      <Card key={request.id} className={"shadow-none border-none p-0 mt-5 rounded-none"}>
                        <CardContent className={"p-0"}>
                          <CardTitle>{t("Ariza tafsilotlari")}</CardTitle>
                          <div className={"mt-5 space-y-3"}>
                            <div className={"flex justify-between items-center"}>
                              <CardDescription>{t("Ariza turi")}</CardDescription>
                              <CardDescription>{requestDetails?.data.service.name}</CardDescription>
                            </div>
                            <div className={"flex justify-between items-center"}>
                              <CardDescription>{t("Ariza raqami")}</CardDescription>
                              <CardDescription>#{requestDetails?.data.id}</CardDescription>
                            </div>
                            <div className={"flex justify-between items-center"}>
                              <CardDescription>{t("Ariza holati")}</CardDescription>
                              <Badge style={{ backgroundColor: request.status.bg_color, color: request.status.font_color }}>
                                {request.status.translation}
                              </Badge>
                            </div>
                            <div className={"flex justify-between items-center"}>
                              <CardDescription>{t("Yaratilish vaqti")}</CardDescription>
                              <CardDescription>{
                                request.created_at
                              }</CardDescription>
                            </div>
                          </div>
                        </CardContent>
                        <Separator/>
                        <CardContent className={"p-0"}>
                          <CardTitle>{t("Xizmat tafsilotlari")}</CardTitle>
                          <div className={"mt-5 space-y-3"}>
                            <div className={"flex justify-between items-center"}>
                              <CardDescription>{t("Quvvat")}</CardDescription>
                              <CardDescription>
                                {requestDetails?.data.power.name}
                              </CardDescription>
                            </div>
                            <div className={"flex justify-between items-center"}>
                              <CardDescription>{t("Manzil")}</CardDescription>
                              <CardDescription>
                                {requestDetails?.data.city.name}, {" "}
                                {requestDetails?.data.city.region.name}
                              </CardDescription>
                            </div>
                            <div className={"flex justify-between items-center"}>
                              <CardDescription>{t("full_name")}</CardDescription>
                              <CardDescription>{
                                requestDetails?.data.full_name
                              }</CardDescription>
                            </div>
                            <div className={"flex justify-between items-center"}>
                              <CardDescription>{t("Telefon raqami")}</CardDescription>
                              <CardDescription>{
                                requestDetails?.data.phone
                              }</CardDescription>
                            </div>
                            <div className={"flex justify-between items-center"}>
                              <CardDescription>{t("Izoh")}</CardDescription>
                              <CardDescription>
                                {requestDetails?.data.comment}
                              </CardDescription>
                            </div>
                          </div>
                        </CardContent>
                      </Card>
                    </AccordionContent>
                  </AccordionItem>
                </Accordion>
            ))
          }
        </div>
      </div>
  )
}
export default ApplicationsSections
