"use client"
import { icons } from "#/assets/icons"
import Image from "next/image"
import axios from "axios";
import { useSession } from "next-auth/react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Company, CompanyById } from "#/types";
import FloatingLabelInput from "#/components/floatingLabelInput";
import { usePathname } from "next/navigation";
import Link from "next/link";
import Form from "#/components/form/form";
import { adminSchema } from "#/schema/loginSchema";

export default function Update() {

  const pathname = usePathname();

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


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

  const { data: companyInfos, refetch, 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/users/${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 { mutate, isPending } = useMutation({
    mutationFn: async (id: string) => {
      try {
        const response = await axios.delete(
          `https://private-docs-api.intside.co/companies/${id}/`, {
          headers: {
            'Authorization': `Bearer ${session?.user.access_token}`
          }
        }
        )

        if (response.status === 200 || response.status === 201) {
          console.log('Suppresion réussie !')
        }
      } catch (error) {
        console.error(error)
      }
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["companies"] })

      refetch()
    }
  })


  return (
    <>
      {/* { company.map() } */}


      {/* <Form
        title="Connexion"
        className="grid grid-cols-2"
        fields={[
          {
            label: "Nom de l’organisation",
            name: "company",
            type: "text",
            placeholder: "Nom de l'organisation",
            defaultValue: companyInfos?.name
          },
          {
            label: "Nom de l’admin",
            name: "last_name",
            type: "text",
            placeholder: "Nom de l'admin",
            defaultValue: companyInfos?.owner.last_name
          },
          {
            label: "Prénom de l’admin",
            name: "first_name",
            type: "text",
            placeholder: "Prénom de l'admin",
            defaultValue: companyInfos?.owner.first_name
          }
        ]}
        submit={mutate}
        schema={adminSchema}
        child={<button type="submit" className="btn-auth">Connexion</button>}
      /> */}


      <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}/`} type="Link" className="cta cancel">
              Annuler
            </Link>
          </div>
          <div className="r-flex-column p-[32px] r-gap-24">
            <div className="labels-container ">
              <div className="label-container">
                <FloatingLabelInput label="Nom de l’organisation" name="org-name" type="text" placeholder="Intside" defaultValue={companyInfos?.name} />
              </div>
              <div className="label-container">
                <FloatingLabelInput label="Adresse e-mail de l’admin" name="email" type="text" placeholder="contact@intside.com" defaultValue={companyInfos?.owner.email} />
              </div>
              <div className="label-container">
                <FloatingLabelInput label="Nom de l’admin" name="admin-name" type="text" placeholder="Company" defaultValue={companyInfos?.owner.last_name} />
              </div>
              <div className="label-container">
                <FloatingLabelInput label="Prénom de l’admin" name="admin-surname" type="text" placeholder="Intside" defaultValue={companyInfos?.owner.last_name} />
              </div>
            </div>
            <div className="ctas flex gap-12 ">
              <button type="button" className="cta">Modifier</button>
              <button type="button" className="cta info">Mot de passe</button>
              <button type="button" className="cta danger">Bloquer</button>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}