import React, {useState} from 'react'
import {Card, CardContent, CardDescription, CardFooter, CardTitle} from "@/shared/ui/card";
import {Separator} from "@/shared/ui/separator";
import {Badge} from "@/shared/ui/badge";
import {Button} from "@/shared/ui/button";
import {Accordion, AccordionContent, AccordionItem, AccordionTrigger} from "@/shared/ui/accordion";
import {useQuery} from "@tanstack/react-query";
import {getUserOrders, getUserOrdersById} from "@/shared/api/userOrdersSvc";
import formatNumberWithSpaces from "@/shared/lib/formatNumberWithSpace";
import Link from "next/link";
import Loader from "@/shared/ui/loader";
import { useTranslations } from 'next-intl';

const OrdersSection = () => {
  const t = useTranslations("")
  const [selectedOrder, setSelectedOrder] = useState<number>(0)
  const {data: orders, isLoading: ordersIsLoading} = useQuery({
    queryKey: ["getUserOrders"],
    queryFn: getUserOrders,
  })

  const {data: orderDetails} = useQuery({
    queryKey: ["getUserOrdersById", selectedOrder],
    queryFn: () => getUserOrdersById(selectedOrder),
    enabled: !!selectedOrder,
  })

  return (
      <div className={"profile-section-wrapper"}>
        <h1 className={"profile-section-title"}>{t("Mening buyurtmalarim")}</h1>
        <span className={"profile-section-subtitle"}>
          {t("Sizning buyurtmalaringiz va ularning holati haqida ma'lumotlar")}
        </span>
        <div className={"mt-4 space-y-4"}>
          {ordersIsLoading ? <Loader height={"h-[30vh]"}/>: 
            orders?.data?.map(order => (
                <Accordion key={order.id} onClick={()=>setSelectedOrder(order.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 mb-5"}>
                          <div>
                            <CardTitle className={"text-lg"}>{t("Buyurtma")} #{order.id}</CardTitle>
                            <CardDescription>{t("Yaratilish vaqti")}: {order.created_at}</CardDescription>
                          </div>
                          <div className={"text-end"}>
                            <CardDescription className={"text-lg"}>{formatNumberWithSpaces(order.total_amount!)} so'm</CardDescription>
                            <Badge style={{ backgroundColor: order.status.bg_color, color: order.status.font_color }}>
                              {order.status.translation}
                            </Badge>
                          </div>
                        </div>
                      </div>
                    </AccordionTrigger>
                    <AccordionContent>
                      <Card key={order.id} className={"shadow-none border-none p-0 mt-5 rounded-none"}>
                        <CardContent className={"p-0"}>
                          <CardTitle>{t("Buyurtma tafsilotlari")}</CardTitle>
                          <div className={"mt-5 space-y-3"}>
                            <div className={"flex justify-between items-center"}>
                              <CardDescription>{t("Buyurtma raqami")}</CardDescription>
                              <CardDescription>#{orderDetails?.data.id}</CardDescription>
                            </div>
                            <div className={"flex justify-between items-center"}>
                              <CardDescription>{t("Buyurtma holati")}</CardDescription>
                              <Badge
                                  style={{ backgroundColor: orderDetails?.data.status.bg_color, color: orderDetails?.data.status.font_color }}
                              >{orderDetails?.data.status.translation}</Badge>
                            </div>
                            <div className={"flex justify-between items-center"}>
                              <CardDescription>{t("To'lov holati")}</CardDescription>
                              <Badge
                                style={{ backgroundColor: orderDetails?.data.payment_status.bg_color, color: orderDetails?.data.payment_status.font_color }}
                              >{orderDetails?.data.payment_status.translation}</Badge>
                            </div>
                            <div className={"flex justify-between items-center"}>
                              <CardDescription>{t("Yaratilish vaqti")}</CardDescription>
                              <CardDescription>
                                {orderDetails?.data.created_at}
                              </CardDescription>
                            </div>
                          </div>
                        </CardContent>
                        <Separator/>
                        <CardContent className={"p-0"}>
                          <CardTitle>{t("Xaridlar ro'yxati")}</CardTitle>
                          <div className={"mt-5 space-y-3"}>
                              {
                                orderDetails?.data.products.map(product => (
                                    <div key={product.id} className={"flex justify-between w-full items-center"}>
                                      <CardDescription>{product.name}</CardDescription>
                                      <CardDescription>{product.count} x {formatNumberWithSpaces(product.price || product.total_price)} {t("so'm")}</CardDescription>
                                    </div>
                                ))
                              }
                          </div>
                        </CardContent>
                        <Separator/>
                        <CardContent className={"p-0"}>
                          <CardTitle>{t("Mijoz ma'lumotlari")}</CardTitle>
                          <div className={"mt-5 space-y-3"}>
                            <div className={"flex justify-between items-center"}>
                              <CardDescription>{t("Mijoz turi")}</CardDescription>
                              <CardDescription>{orderDetails?.data.client_type}</CardDescription>
                            </div>
                            <div className={"flex justify-between items-center"}>
                              <CardDescription>{t("Mijoz turi")}</CardDescription>
                              <CardDescription>{orderDetails?.data.client_information.full_name}</CardDescription>
                            </div>
                            <div className={"flex justify-between items-center"}>
                              <CardDescription>{t("Mijoz telefon")}</CardDescription>
                              <CardDescription>{orderDetails?.data.client_information.phone}</CardDescription>
                            </div>
                          </div>
                        </CardContent>
                        <Separator/>
                        <CardContent className={"p-0"}>
                          <CardTitle>{t("Yetkazib berish")}</CardTitle>
                          <div className={"mt-5 space-y-3"}>
                            <div className={"flex justify-between items-center"}>
                              <CardDescription>{t("Yetkazib berish turi")}</CardDescription>
                              <CardDescription>{orderDetails?.data.delivery_type}</CardDescription>
                            </div>
                            <div className={"flex justify-between items-center"}>
                              <CardDescription>{t("Yetkazib berish manzili")}</CardDescription>
                              <CardDescription>{orderDetails?.data.address.city.region.name}, {orderDetails?.data.address.city.name}</CardDescription>
                            </div>
                            <div className={"flex justify-between items-center"}>
                              <CardDescription>{t("Yetkazib berish narxi")}</CardDescription>
                              <CardDescription>{formatNumberWithSpaces(orderDetails?.data.price_delivery!)} so'm</CardDescription>
                            </div>
                          </div>
                        </CardContent>
                        <Separator/>
                        <CardFooter className={"flex justify-between p-0 pb-2"}>
                          <span/>
                          <Button size={"lg"} asChild>
                            <Link href={orderDetails?.data.pay_url! || ""} target={"_blank"}>
                              {t("To'lash")}
                            </Link>
                          </Button>
                        </CardFooter>
                      </Card>
                    </AccordionContent>
                  </AccordionItem>
                </Accordion>

            ))
          }
        </div>
      </div>
  )
}
export default OrdersSection
