"use client"
import { icons } from "#/assets/icons"
import Image from "next/image"
import axios from "axios";
import { useSession } from "next-auth/react";
import { useQuery } from "@tanstack/react-query";
import { Company, CompanyById, Owner } from "#/types";
import Link from "next/link";
import { usePathname } from "next/navigation";


export default function Profile() {

  const pathname = usePathname();

  const segments = pathname.split("/");
  const uid = segments[segments.length - 1];


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

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

        if (response.data) {
          return response.data as CompanyById;
        }
      } catch (error: any) {
        console.error(error);
      }
    }
  });

  /*
  const adminId = companyInfos?.owner;
  console.log('will run the admin request');

  const { data: adminInfos } = useQuery({
    enabled: !!adminId && status === 'authenticated',  // Only run when adminId is available
    queryKey: ["admin", adminId],  // Ensure adminId is used in the query key
    queryFn: async () => {
      console.log('running the admin request');
      //console.log('url :', `https://private-docs-api.intside.co/users/${adminId}`);

      try {
        const response = await axios.get(
          `https://private-docs-api.intside.co/users/${adminId}`, {   // Use adminId instead of companyInfos
          headers: {
            'Authorization': `Bearer ${session?.user.access_token}`
          }
        }
        );

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

  });
*/

  return (
    <>
      {/* {companyInfos[0]?.id} */}
      <div className="p-container ">
        <div className="r-flex-column">
          <div className="r-flex-between  items-center bg-bluegray p-[24px] m-0 ">
            <div className=""></div>
            <h2 className="admin-name text-[20px]" >{companyInfos?.name || "Pentatonic"}</h2>
            <Link href={`http://localhost:3000/admin/organizations/${uid}/update`} type="Link" className="update-profile-name cta">
              Modifier
            </Link>
          </div>
          <div className="r-flex-column p-[32px] r-gap-24 items-center lg:items-start ">
            <h3 className="font-semibold">Détails de l'admin</h3>
            <div className="r-flex flex-wrap r-r-gap-12 gap-[12px]">
              <div className="r-flex-between items-center w-max">
                <div className="icon-rounded">
                  <Image src={icons.mailIcon} alt="E-mail" />
                </div>
                <div className="r-flex-column p-[14px] admin-card r-gap-2">
                  <h4 className="email-label font-semibold">Adresse e-mail</h4>
                  <p className="email">{companyInfos?.owner?.email || "email"}</p>
                </div>
              </div>
              <div className="r-flex-between items-center w-max">
                <div className="icon-rounded">
                  <Image src={icons.personalCard} alt="E-mail" />
                </div>
                <div className="r-flex gap-[12px] admin-card">
                  <div className="r-flex-column p-[14px] r-gap-2">
                    <h4 className="surname-label font-semibold">Prénom</h4>
                    <p className="surname">{companyInfos?.owner?.first_name || "nom"}</p>
                  </div>
                  <div className="r-flex-column p-[14px] r-gap-2">
                    <h4 className="name-label font-semibold">Nom</h4>
                    <p className="name">{companyInfos?.owner?.last_name || "nom"}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <hr />
          <div className="r-flex p-[32px] r-gap-24">
            <div className="admin-infos r-flex flex-wrap justifyc-center lg:justifyc-start ">
              <div className="r-flex-between items-center w-max">
                <div className="icon-rounded">
                  <Image src={icons.userGroupBlue} alt="Documents" />
                </div>
                <div className="r-flex-column p-[14px] admin-card r-gap-2">
                  <h4 className="users-label font-semibold">Documents</h4>
                  <p className="r-secondary users">{companyInfos?.total_documents || "0"}</p>
                </div>
              </div>
              <div className="r-flex-between items-center w-max">
                <div className="icon-rounded">
                  <Image src={icons.userGroupBlue} alt="Documents" />
                </div>
                <div className="r-flex-column p-[14px] admin-card r-gap-2">
                  <h4 className="users-label font-semibold">Utilisateurs</h4>
                  <p className="r-secondary users">{companyInfos?.total_users || "0"}</p>
                </div>
              </div>
              <div className="r-flex-between items-center w-max">
                <div className="icon-rounded">
                  <Image src={icons.maximizeIcon} alt="Fichiers" />
                </div>
                <div className="r-flex-column p-[14px] admin-card r-gap-2">
                  <h4 className="files-size-label font-semibold">Taille des fichiers</h4>
                  <p className="r-secondary files-size">{companyInfos?.total_documents_sizes + " "}GB</p>
                </div>
              </div>
              <div className="r-flex-between items-center w-max">
                <div className="icon-rounded">
                  <Image src={icons.timerIcon} alt="Horlorge" />
                </div>
                <div className="r-flex-column p-[14px] admin-card r-gap-2">
                  <h4 className="last-connexion-label font-semibold">Dernière utilisation</h4>
                  <p className="r-secondary last-connexion">{companyInfos?.last_use || "-"}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}