import { Skeleton } from "@/components/ui/skeleton";
import { obterContratoById } from "@/requests/CRM/Contrato/obterContratoById";
import { obterOrdemServicoById } from "@/requests/CRM/PosvOrdensServico/obterOrdemServicoById";
import { listarClientes } from "@/requests/CRUD/ClienteLinksun/listarClientes";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";

const VisualizarOrdemServico = () => {
  const router = useRouter();
  const { query } = router;

  const [ordemServico, setOrdemServico] = useState<any>();
  const [isLoading, setIsLoading] = useState(true);
  const [mensagemStatus, setMensagemStatus] = useState<any>();
  const [dadosClinteLK, setDadosClinteLK] = useState<any>();

  useEffect(() => {
    if (query.id) {
      obterOrdemServicoById(query.id, query.sigla).then((res) => {
        setIsLoading(false);
        setOrdemServico(res);
      });
    }
  }, [query.id]);

  return (
    <div className="flex flex-col items-center p-8 bg-gray-100 min-h-screen">
      {isLoading ? (
        <div className="flex flex-col justify-center items-center bg-white rounded-2xl w-fit p-10">
          <div className="w-[400px] h-[150px]">
            <Skeleton className="flex flex-row text-black-2 w-full h-20" />
            <div className="flex flex-row justify-center gap-6 mb-5 mt-4">
              <Skeleton className="w-20 rounded-md h-10" />
              <Skeleton className="w-20 rounded-md h-10" />
              <Skeleton className="w-20 rounded-md h-10" />
            </div>
          </div>
          <div className="flex justify-center">
            <Skeleton className="w-[700px] h-[700px]" />
          </div>
        </div>
      ) : (
        <div className="relative flex flex-col justify-center items-center bg-white rounded-2xl w-fit p-10">
          {/* <div className="absolute top-0 left-0 p-4">
            <img
              src={dadosClinteLK?.logo_cliente_linksun}
              alt="logo"
              height={80}
              width={80}
            />
          </div> */}

          <div className="w-[400px]">
            <div className="flex flex-col items-center justify-center text-black-2 w-full">
              <h1 className="text-3xl text-center">Ordem de Serviço</h1>
            </div>
            {/* Adiciona margem superior para compensar a posição absoluta */}
            {/* <div className="flex flex-col items-center justify-center text-black-2 w-full">
              <h1 className="text-3xl text-center">
                {dadosClinteLK?.nome_cliente_linksun}
              </h1>
              <div>
                Telefone:{" "}
                <strong>{dadosClinteLK?.telefone_cliente_linksun}</strong>
              </div>
              <div>
                Cidade/Estado:{" "}
                <strong>
                  {dadosClinteLK?.cidade_cliente_linksun} /{" "}
                  {dadosClinteLK?.estado_cliente_linksun}
                </strong>
              </div>
            </div>
            <h1 className="text-lg text-center text-black-2 mb-5 mt-3">
              Olá{" "}
              <strong className="font-medium">{contrato?.nome_cliente}</strong>{" "}
              seu contrato está pronto.
            </h1> */}
          </div>

          <div className="flex justify-center">
            <iframe
              src={ordemServico?.link_pvos}
              width="700px"
              height="700px"
            />
          </div>
        </div>
      )}
    </div>
  );
};

export default VisualizarOrdemServico;