import Image from "next/image"
import { useQuery } from "@tanstack/react-query";
import axios from "axios";
import { useSession } from "next-auth/react";
import { icons } from "#/assets/icons";
import { Stats, StatsType, } from "#/types";

export default function Statistics() {

  const { data: session, status } = useSession();

  const { data: stats, isLoading } = useQuery({
    enabled: status === 'authenticated',
    queryKey: ["stats", session?.user.access_token],
    queryFn: async () => {
      try {
        const response = await axios.get(
          'https://private-docs-api.intside.co/statistics', {
          headers: {
            'Authorization': `Bearer ${session?.user.access_token}`
          }
        }
        )

        if (response.data) {
          return response.data as Stats
        }
      } catch (error) {
        console.error(error)
      }
    }
  })

  const statsData: StatsType[] = [
    { id: 1, title: 'Organisations', value: stats?.companies, icon: icons.companiesIconBlue, color: 'blue' },
    { id: 2, title: 'Utilisateurs', value: stats?.users, icon: icons.peopleIcon, color: 'blue' },
    { id: 3, title: 'Documents', value: stats?.documents, icon: icons.docsArchive, color: 'blue' },
    { id: 4, title: 'Stockage', value: (stats?.documents_size + " GB"), icon: icons.maximizeIcon, color: 'blue' }
  ];




  return (
    <div className="stats-container r-flex-between r-gap-24 flex-wrap overflow-hidden ">
      {statsData.map(({ id, title, value, icon }) => (
        <div key={id} className="stats flex items-center rounded-xl r-gap-12">
          {/* <div className=""> */}
            <div
              className="sqarre-bg d-flex items-center justify-center rounded-lg bg-[#E9F0FF] bg-opacity-25 p-2"
              style={{ width: '54px', height: '54px' }}
            >
              <Image
                alt={title}
                src={icon}
                width={32}
                height={32}
                className="text-blue-500"
              />
            </div>
            <div className="ml-3">
              <p className="text-sm fw-semibold text-secondary mb-0">{title}</p>
              <p className="fw-bold fs-5 mb-0">{status === "loading" && isLoading ? "Chargement..." : value}</p>
            </div>
          {/* </div> */}
        </div>
      ))}
    </div>
  )
}