"use client";

import LoaderSun from "@/components/common/Loader/LoaderSun";
import Button from "@/components/Forms/Button";
import { formatarValor } from "@/utils";
import "katex/dist/katex.min.css";
import { Printer } from "lucide-react";
import dynamic from "next/dynamic";
import { useRef } from "react";
import { useReactToPrint } from "react-to-print";

const ReactApexChart = dynamic(() => import("react-apexcharts"), {
  ssr: false,
});
declare global {
  interface Window {
    Apex?: any;
  }
}
// interface ChartState {
//   series: Array<{ name: string; data: number[] }>;
// }

export default function ResumoPropostaCorretiva({
  id_coleta,
  proposta,
  nome_usuario,
  data_geracao_proposta,
  validade_proposta,
  qtd_visualizacoes_proposta,
  valorTotal_proposta,
  valor_desconto,
  valor_total_sem_desconto,
  valor_acrescimo,
  valor_total_sem_acrescimo,
  obs_negocio,
  especificacoes,
  informacoes_adicionais_proposta,
  totalModulos,
  forma_pagamento_proposta,
  obs_proposta,
}: any) {
  const resumoDados: {
    [x: string]: {
      [y: string]: any[][];
    };
  } = {
    "Dados Da Proposta": {
      "Informações Gerais": [
        [
          <div key={1} className="text-2xl">
            Negócio:
          </div>,
          <div key={1} className="text-2xl">
            {id_coleta}
          </div>,
        ],
        [
          "Visualizações Link:",
          qtd_visualizacoes_proposta || "Ainda não há Visualizações",
        ],
        ["Válido até:", validade_proposta],
        ["Data Geração:", data_geracao_proposta],
        ...(proposta?.status_proposta == 1
          ? [
              [
                "Data Aprovação:",
                `${new Date(proposta.data_hora_aprovacao).toLocaleDateString(
                  "pt-BR"
                )} - Aprovado por: ${proposta.nome_usuario_aprovacao}`,
              ],
            ]
          : []),
        ...(proposta?.status_proposta == 3
          ? [
              [
                "Data Cancelamento:",
                `${new Date(proposta.data_hora_reprovacao).toLocaleDateString(
                  "pt-BR"
                )} - Cancelado por: ${proposta.nome_usuario_reprovacao}`,
              ],
            ]
          : []),
        ["Gerado por:", nome_usuario],
        ["Especificações:", especificacoes],
        ["Informações Adicionais:", informacoes_adicionais_proposta],
        ["Total de Módulos:", totalModulos],
        ["Forma de Pagamento:", forma_pagamento_proposta],
        ["Observação da Proposta:", obs_proposta],
      ],
      Valores: [
        [
          <div key={1} className="text-2xl">
            Valor da Proposta:
          </div>,
          <div key={1} className="text-2xl">
            {formatarValor(valorTotal_proposta)}
          </div>,
        ],
        ...(valor_desconto
          ? [
              ["Valor de Desconto:", `-${formatarValor(valor_desconto)}`],
              [
                "Valor Total Sem Desconto:",
                formatarValor(valor_total_sem_desconto),
              ],
            ]
          : []),
        ...(valor_acrescimo
          ? [
              ["Valor de Acréscimo:", `+${formatarValor(valor_acrescimo)}`],
              [
                "Valor Total Sem Acréscimo:",
                formatarValor(valor_total_sem_acrescimo),
              ],
            ]
          : []),

        [<div key="1">&nbsp;</div>],
        ["OBS da Oportunidade:", obs_negocio],
      ],
    },
  };

  const contentRef = useRef<HTMLDivElement>(null);
  const printWrapperRef = useRef<HTMLDivElement>(null);
  //

  // refResultSimulador
  const handlePrint = useReactToPrint({
    content: () => contentRef.current,
    // onBeforePrint: () => {
    //   if (refResultSimulador?.parentNode === contentRef.current) {
    //     contentRef.current!.removeChild(refResultSimulador);
    //   }
    // },
    pageStyle: `
      @media print {
        body {
          zoom: 0.8;
        }
        .print-content {
          transform: scale(0.87);
          transform-origin: top left;
        }
      }
    `,
    // onAfterPrint: () => {
    //   // Remover o refResultSimulador depois da impressão
    //   if (refResultSimulador?.parentNode === contentRef.current) {
    //     contentRef.current!.removeChild(refResultSimulador);
    //   }
    // },
  });

  return (
    <div>
      <div className="w-full flex justify-end">
        <Button
          className={` bg-primary flex flex-row gap-2`}
          onClick={(e: any) => {
            e.stopPropagation();
            // if (refResultSimulador && contentRef) {
            //   contentRef.current!.appendChild(refResultSimulador);
            // }
            handlePrint(e);
          }}
        >
          <Printer />
        </Button>
      </div>

      {true ? (
        <div
          className="flex flex-col gap-5 p-6 bg-white dark:bg-boxdark rounded-lg  max-sm:p-4 print-content"
          ref={contentRef}
        >
          {Object.keys(resumoDados).map((origemDados, keyOrigemDados) => {
            const dadosOrigemDados = resumoDados[origemDados];
            return (
              <div key={keyOrigemDados} className="pb-3">
                <div className="w-full text-center pb-2">
                  <h2 className="text-2xl font-bold  dark:text-white mb-2 max-sm:text-xl">
                    {origemDados}
                  </h2>
                  <div className="h-1 w-20 bg-primary mx-auto rounded-full"></div>
                </div>
                <div className="flex flex-row flex-wrap gap-4">
                  {Object.keys(dadosOrigemDados).map(
                    (conjuntoDados, keyConjuntoDados) => {
                      const infosDados = dadosOrigemDados[conjuntoDados];
                      return (
                        <div
                          key={keyConjuntoDados}
                          className="bg-secondary/10 dark:bg-graydark p-4 rounded-lg  flex-1 min-w-[350px] overflow-auto w-fit"
                        >
                          <table className="w-fit" style={{ margin: "0 auto" }}>
                            <thead>
                              <tr>
                                <th colSpan={2}>
                                  <h4
                                    className="font-semibold text-lg text-center text-primary dark:text-primarylight mb-3 max-w-[240px]"
                                    style={{ margin: "0 auto" }}
                                  >
                                    {conjuntoDados}
                                  </h4>
                                </th>
                              </tr>
                            </thead>
                            <tbody>
                              {infosDados.map((infoDados, keyInfoDados) => {
                                const [headDado, valueDado] = infoDados;
                                return (
                                  <tr key={keyInfoDados}>
                                    {headDado && (
                                      <td
                                        colSpan={
                                          infosDados.every((d) => d.length == 1)
                                            ? 2
                                            : 1
                                        }
                                        className="font-medium text-graydark dark:text-gray-2 px-2 py-1 text-right border-b border-gray-2 dark:border-gray"
                                      >
                                        {headDado}
                                      </td>
                                    )}
                                    {valueDado && (
                                      <td className=" dark:text-stroke p-1 border-b border-gray-2 dark:border-gray">
                                        {valueDado}
                                      </td>
                                    )}
                                  </tr>
                                );
                              })}
                            </tbody>
                          </table>
                        </div>
                      );
                    }
                  )}
                </div>
              </div>
            );
          })}
        </div>
      ) : (
        <div className="flex justify-center w-full mt-19">
          <LoaderSun />
        </div>
      )}
    </div>
  );
}