import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { useState } from "react";
import { FaTable } from "react-icons/fa";
import { MdCheck } from "react-icons/md";
import { TbCopy } from "react-icons/tb";
import { toast } from "react-toastify";

const RelacionamentosTable = ({ relacionamento, index }: any) => {
  const [copiado, setCopiado] = useState(false);
  const [modalAberto, setModalAberto] = useState(false);
  const handleCopy = async (text: string) => {
    try {
      await navigator.clipboard.writeText(text);
      toast.success("Copiado com sucesso!");
      setCopiado(true);
      setTimeout(() => {
        setCopiado(false);
      }, 2000);
    } catch (error) {
      console.error("Erro ao copiar:", error);
      toast.error("Erro ao copiar!");
    }
  };

  const isTabela =
    relacionamento.grupo_relacionamento_rapido === "12" &&
    relacionamento.colunas_tabela;

  // Garantir que relacionamento.name seja uma string
  const tagName = String(relacionamento.name || "");

  // Parse das colunas da tabela (vem como string JSON do banco)
  const colunasTabela = (() => {
    if (!relacionamento.colunas_tabela) return [];
    if (typeof relacionamento.colunas_tabela === "string") {
      try {
        return JSON.parse(relacionamento.colunas_tabela);
      } catch {
        return [];
      }
    }
    return Array.isArray(relacionamento.colunas_tabela)
      ? relacionamento.colunas_tabela
      : [];
  })();

  return (
    <tr
      className={
        index % 2 === 1
          ? `bg-black-2 bg-opacity-[.1] dark:bg-white dark:bg-opacity-10`
          : ""
      }
    >
      <td className="font-bold dark:hover:text-white hover:text-black-2">
        <div className="flex flex-row justify-between items-center">
          <div>{`{{${tagName}}}`}</div>
          <TbCopy
            className="cursor-pointer"
            onClick={() => handleCopy(`{{${tagName}}}`)}
          />
          {copiado && <MdCheck />}
        </div>
      </td>
      <td>
        <div className="flex items-center justify-between gap-2">
          <div>{relacionamento.text}</div>
          {isTabela && (
            <Dialog open={modalAberto} onOpenChange={setModalAberto}>
              <DialogTrigger asChild>
                <Button
                  variant="outline"
                  size="sm"
                  className="flex items-center gap-1 text-xs"
                  onClick={(e) => e.stopPropagation()}
                >
                  <FaTable className="w-3 h-3" />
                  Ver Estrutura
                </Button>
              </DialogTrigger>
              <DialogContent className="max-w-4xl">
                <DialogHeader>
                  <DialogTitle>
                    Estrutura da Tabela: {relacionamento.name}
                  </DialogTitle>
                </DialogHeader>
                <div className="mt-4">
                  <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
                    {relacionamento.text}
                  </p>
                  <div className="border rounded-lg overflow-hidden">
                    <table className="w-full">
                      <thead className="bg-blue-600 text-white">
                        <tr>
                          {colunasTabela.map((_: any, idx: number) => (
                            <th
                              key={idx}
                              className="px-4 py-3 text-left text-sm font-semibold border-r border-blue-500 last:border-r-0"
                            >
                              Titulo {idx + 1}
                            </th>
                          ))}
                        </tr>
                      </thead>
                      <tbody>
                        <tr className="bg-gray-50 dark:bg-gray-800 font-semibold text-gray-700 dark:text-gray-300">
                          {colunasTabela.map((coluna: string, idx: number) => (
                            <td
                              key={idx}
                              className="px-4 py-3 text-sm border-r border-gray-200 dark:border-gray-700 last:border-r-0"
                            >
                              {coluna}
                            </td>
                          ))}
                        </tr>
                        {/* {[0].map((rowIdx) => (
                          <tr
                            key={rowIdx}
                            className={
                              rowIdx % 2 === 0
                                ? "bg-white dark:bg-gray-900"
                                : "bg-gray-50 dark:bg-gray-800"
                            }
                          >
                            {relacionamento.colunas_tabela.map(
                              (_: string, colIdx: number) => (
                                <td
                                  // key={colIdx}
                                  className="px-4 py-2 text-sm text-gray-400 dark:text-gray-500 border-r border-gray-200 dark:border-gray-700 last:border-r-0"
                                >
                                  ...
                                </td>
                              )
                            )}
                          </tr>
                        ))} */}
                      </tbody>
                    </table>
                  </div>
                  <div className="mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
                    <p className="text-xs text-gray-700 dark:text-gray-300">
                      <span className="font-semibold">💡 Dica:</span> Você pode
                      customizar o header da tabela (Titulo 1, Titulo 2, etc.)
                      com os nomes que desejar no seu documento PDF. A primeira
                      linha acima mostra quais dados serão preenchidos
                      automaticamente.
                    </p>
                  </div>
                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-3 italic">
                    Os dados desta tabela serão preenchidos automaticamente com
                    as informações do sistema ao gerar o documento.
                  </p>
                </div>
              </DialogContent>
            </Dialog>
          )}
        </div>
      </td>
    </tr>
  );
};

export default RelacionamentosTable;