import { support_api } from "@/features/support/lib/api";
import { columnsSupport } from "@/features/support/lib/column";
import { DataTableSupport } from "@/features/support/lib/data-table";
import SendSupport from "@/features/support/ui/SendSupport";
import AddedButton from "@/shared/ui/added-button";
import { Skeleton } from "@/shared/ui/skeleton";
import { DashboardLayout } from "@/widgets/dashboard-layout/ui";
import { useQuery } from "@tanstack/react-query";
import { useState } from "react";

const SupportList = () => {
  const [showMainModal, setShowMainModal] = useState<boolean>(false);

  const { data, isLoading, isError } = useQuery({
    queryKey: ["support_list"],
    queryFn: () => support_api.list(),
    select(data) {
      return data.data.data;
    },
  });

  const columns = columnsSupport();

  return (
    <DashboardLayout link="/">
      <AddedButton onClick={() => setShowMainModal(true)} />
      <div className="space-y-6">
        <h1 className="text-3xl font-bold">Yordam so'rovlari</h1>

        {isLoading && (
          <div className="flex justify-center items-center h-64">
            <span className="text-gray-500">Yuklanmoqda...</span>
          </div>
        )}

        {isError && (
          <div className="flex justify-center items-center h-64">
            <span className="text-red-500">
              Xatolik yuz berdi. Iltimos, qayta urinib ko‘ring.
            </span>
          </div>
        )}

        {isLoading ? (
          <div className="space-y-3">
            {[1, 2, 3].map((i) => (
              <Skeleton key={i} className="h-12 w-full rounded-md" />
            ))}
          </div>
        ) : isError ? (
          <p className="text-red-500">
            So'rovlar yuklanmadi. Qayta urinib ko‘ring.
          </p>
        ) : data ? (
          <div className="overflow-x-auto">
            <DataTableSupport columns={columns} data={data.results} />
          </div>
        ) : (
          <p className="text-gray-500">Yordam so'rovlari mavjud emas</p>
        )}
      </div>

      <SendSupport
        showMainModal={showMainModal}
        setShowMainModal={setShowMainModal}
      />
    </DashboardLayout>
  );
};

export default SupportList;