import React, { useEffect } from 'react';

import { formatPrice } from '@/utils/functions';
import PlanHeaderImage from '../PlanHeaderImage';
import { useCheckoutContext } from '@/hooks/UseCheckout';
import { useSearchParams } from 'next/navigation';
import { ICobertura } from '@/utils/Interfaces/interfaces';
import Image from 'next/image';

import checkDisable from '../../../../../../public/assets/Images/Icons/icon-check-disabled.png';
import arrow from '../../../../../../public/assets/Images/Icons/arrowBlueButton.svg';
import check from '../../../../../../public/assets/Images/Icons/icon-check.png';
import { API_URL, TOKEN } from '@/utils/constants/selectConstants';

interface PlanCardProps {
    title: string;
    selected?: boolean;
    coberturasId: string | null;
    tipoCoberturasId: string;
    selectPlan(coberturasId: string | null, tipoCoberturasId: string | null, title: string | null): void
    dados: ICobertura;
    openDropdownIndex: any;
    setOpenDropdownIndex: (index: any) => void;
}

interface ProcedimentosSiteValoreEstaticos {
    Nome: string;
    Procedimentos: string[];
    NaoIncluso: string[];
}

const dadosCobertura: any = {
    "17": {
        "ProcedimentosSite":
            [
                {
                    "Nome": "Consulta Emergencial",
                    "Procedimentos": [],
                    "NaoIncluso": []
                },
                {
                    "Nome": "Vacinas",
                    "Procedimentos": [
                            'Raiva',
                            'Laptospirose',
                            'Déctupla (v-10)',
                            'Quádrupla felina (V-4)',
                            'Giárgia',
                            'Gripe'
                        ],
                    "NaoIncluso": []
                },
                {
                    "Nome": "Exames Laboratoriais",
                    "Procedimentos": [
                        "AST (TGO);",
                        "Contagem de plaquetas;",
                        "Creatinina;",
                        "Eritrograma;",
                        "Fosfatase alcalina;",
                        "Gama GT;",
                        "Hemograma completo (contagem de plaquetas + pesquisa hematozoários);",
                        "Leucograma;",
                        "Uréia."
                    ],
                    "NaoIncluso": []
                },
                {
                    "Nome": "Consulta",
                    "Procedimentos": [],
                    "NaoIncluso": []
                },
                {
                    "Nome": "Consulta 24h",
                    "Procedimentos": [],
                    "NaoIncluso": ['SLIM ESSENCIAL']
                },
                {
                    "Nome": "Diagnóstico por imagem",
                    "Procedimentos": [
                        'Eletrocardiograma',
                        'Raio-X simples (área de estudo)',
                        'Ultrassonografia abdominal'
                    ],
                    "NaoIncluso": ['SLIM ESSENCIAL']
                },
                {
                    "Nome": "Procedimentos Cirúrgicos",
                    "Procedimentos": [],
                    "NaoIncluso": ['SLIM ESSENCIAL']
                },
                {
                    "Nome": "Redução de Carência",
                    "Procedimentos": [],
                    "NaoIncluso": ['SLIM ESSENCIAL']
                },
                {
                    "Nome": "Consulta Especializada",
                    "Procedimentos": [],
                    "NaoIncluso": ['SLIM ESSENCIAL', 'ADVANCE']
                },
                {
                    "Nome": "Sorologia",
                    "Procedimentos": [],
                    "NaoIncluso": ['SLIM ESSENCIAL', 'ADVANCE']
                },
                {
                    "Nome": "Especialidades",
                    "Procedimentos": [],
                    "NaoIncluso": ['SLIM ESSENCIAL', 'ADVANCE']
                }
            ]
    },
    "4": {
        "ProcedimentosSite":
            [
                {
                    "Nome": "Consulta Emergencial",
                    "Procedimentos": [],
                    "NaoIncluso": []
                },
                {
                    "Nome": "Vacinas",
                    "Procedimentos": [
                        'Raiva',
                        'Laptospirose',
                        'Déctupla (v-10)',
                        'Quádrupla felina (v-4)' ,
                    ],
                    "NaoIncluso": []
                },
                {
                    "Nome": "Exames Laboratoriais",
                    "Procedimentos": [
                        "AST (TGO);",
                        "Contagem de plaquetas;",
                        "Creatinina;",
                        "Eritrograma;",
                        "Fosfatase alcalina;",
                        "Gama GT;",
                        "Hemograma completo (contagem de plaquetas + pesquisa hematozoários);",
                        "Leucograma;",
                        "Uréia."
                    ],
                    "NaoIncluso": []
                },
                {
                    "Nome": "Consulta",
                    "Procedimentos": [],
                    "NaoIncluso": ['SLIM ESSENCIAL']
                },
                {
                    "Nome": "Consulta 24h",
                    "Procedimentos": [],
                    "NaoIncluso": ['SLIM ESSENCIAL']
                },
                {
                    "Nome": "Diagnóstico por imagem",
                    "Procedimentos": [
                        'Eletrocardiograma',
                        'Raio-X simples (área de estudo)',
                        'Ultrassonografia abdominal'
                    ],
                    "NaoIncluso": ['SLIM ESSENCIAL']
                },
                {
                    "Nome": "Procedimentos Cirúrgicos",
                    "Procedimentos": [
                        'Ablação do conduto auditivo (unilateral)',
                        'Ablação escrotal',
                        'Aeração do conduto auditivo (unilateral)',
                        'Amputação de dedo',
                        'Amputação de dedo suplementar',
                        'Internação período diurno (sem medicação)',
                        'Amputação de membro torácico',
                        'Amputação de reto',
                        'Blefarorrafia (unilateral)',
                        'Caudectomia patológica',
                        'Ceratotomia em grade (unilateral)',
                        'Cesariana',
                        'Cílio ectópico',
                        'Cistotomia',
                        'Conchectomia patológica (unilateral)',
                        'Corpo estranho esofágico cervical',
                        'Corpo estranho intestinal',
                        'Dilatação vólvulo-gástrica (torção gástrica)',
                        'Distiquíase',
                        'Ectrópio palpebral (unilateral)',
                        'Entrópio palpebral (unilateral)',
                        'Enucleação do globo ocular (unilateral)',
                        'Episiotomia',
                        'Esofagotomia cervical',
                        'Esplenectomia',
                        'Exérese neoplasia palpebral',
                        'Extração de canino definitivo',
                        'Extração de incisivo',
                        'Extração de molar',
                        'Extração de papilomas',
                        'Fístula oronasal adquirida',
                        'Fístula oronasal congênita (fenda palatina)',
                        'Flape terceira pálpebra (unilateral)',
                        'Gastrectomia parcial',
                        'Glossectomia',
                        'Hepatectomia',
                        'Hérnia inguinal',
                        'Hérnia perineal',
                        'Hérnia umbilical',
                        'Higroma de cotovelo',
                        'Laparotomia exploratória',
                        'Mandibulectomia total',
                        'Mastectomia (unilateral)',
                        'Megacólon',
                        'Nefrectomia parcial',
                        'Nefrotomia',
                        'Otohematoma (unilateral)',
                        'Penectomia',
                        'Piometra',
                        'Prolapso retal',
                        'Prolapso uretral',
                        'Prolapso uterino',
                        'Prolapso vaginal',
                        'Redução de prolapso do globo ocular',
                        'Rescisão palpebral',
                        'Ressecção e anastomose intestinal',
                        'Traqueostomia cervical',
                        'Uretrostomia'
                    ],
                    "NaoIncluso": ['SLIM ESSENCIAL']
                },
                {
                    "Nome": "Redução de Carência",
                    "Procedimentos": [
                        'Torção Gástrica (Dilatação e Torção do Estômago)',
                        'Reações alérgicas com comprometimento respiratório',
                        'Perfuração do trato gastrointestinal / Peritonite aguda',
                        'Hematêmese (vômito com sangue)',
                        'Hemorragias graves e generalizadas',
                        'Eclâmpsia (hipocalcemia puerperal)',
                        'Dificuldade respiratória (dispneia)',
                        'Presença de corpos estranhos no sistema gastrointestinal',
                        'Convulsões e crises neurológicas',
                        'Choques de diferentes naturezas:',
                        'Anafilático (alergia grave)',
                        'Neurogênico (traumas na medula ou sistema nervoso)',
                        'Cardiogênico (falência cardíaca)',
                    ],
                    "NaoIncluso": ['SLIM ESSENCIAL']
                },
                {
                    "Nome": "Consulta Especializada",
                    "Procedimentos": [],
                    "NaoIncluso": ['SLIM ESSENCIAL', 'ADVANCE']
                },
                {
                    "Nome": "Sorologia",
                    "Procedimentos": [],
                    "NaoIncluso": ['SLIM ESSENCIAL', 'ADVANCE']
                },
                {
                    "Nome": "Especialidades",
                    "Procedimentos": [],
                    "NaoIncluso": ['SLIM ESSENCIAL', 'ADVANCE']
                }
            ]
    },
    "5": {
        "ProcedimentosSite":
            [
                {
                    "Nome": "Consulta Emergencial",
                    "Procedimentos": [],
                    "NaoIncluso": []
                },
                {
                    "Nome": "Vacinas",
                    "Procedimentos": [
                        'Raiva',
                        'Laptospirose',
                        'Déctupla (v-10)',
                        'Quádrupla felina (v-4)' ,
                        'Giárgia',
                        'Gripe'
                    ],
                    "NaoIncluso": []
                },
                {
                    "Nome": "Exames Laboratoriais",
                    "Procedimentos": [
                        "AST (TGO);",
                        "Contagem de plaquetas;",
                        "Creatinina;",
                        "Eritrograma;",
                        "Fosfatase alcalina;",
                        "Gama GT;",
                        "Hemograma completo (contagem de plaquetas + pesquisa hematozoários);",
                        "Leucograma;",
                        "Uréia."
                    ],
                    "NaoIncluso": []
                },
                {
                    "Nome": "Consulta",
                    "Procedimentos": [],
                    "NaoIncluso": ['SLIM ESSENCIAL']
                },
                {
                    "Nome": "Consulta 24h",
                    "Procedimentos": [],
                    "NaoIncluso": ['SLIM ESSENCIAL']
                },
                {
                    "Nome": "Diagnóstico por imagem",
                    "Procedimentos": [
                        'Eletrocardiograma',
                        'Raio-X simples (área de estudo)',
                        'Ultrassonografia abdominal'
                    ],
                    "NaoIncluso": ['SLIM ESSENCIAL']
                },
                {
                    "Nome": "Procedimentos Cirúrgicos",
                    "Procedimentos": [
                        'Ablação do conduto auditivo (unilateral)',
                        'Ablação escrotal',
                        'Aeração do conduto auditivo (unilateral)',
                        'Amputação de dedo',
                        'Amputação de dedo suplementar',
                        'Internação período diurno (sem medicação)',
                        'Amputação de membro torácico',
                        'Amputação de reto',
                        'Blefarorrafia (unilateral)',
                        'Caudectomia patológica',
                        'Ceratotomia em grade (unilateral)',
                        'Cesariana',
                        'Cílio ectópico',
                        'Cistotomia',
                        'Conchectomia patológica (unilateral)',
                        'Corpo estranho esofágico cervical',
                        'Corpo estranho intestinal',
                        'Dilatação vólvulo-gástrica (torção gástrica)',
                        'Distiquíase',
                        'Ectrópio palpebral (unilateral)',
                        'Entrópio palpebral (unilateral)',
                        'Enucleação do globo ocular (unilateral)',
                        'Episiotomia',
                        'Esofagotomia cervical',
                        'Esplenectomia',
                        'Exérese neoplasia palpebral',
                        'Extração de canino definitivo',
                        'Extração de incisivo',
                        'Extração de molar',
                        'Extração de papilomas',
                        'Fístula oronasal adquirida',
                        'Fístula oronasal congênita (fenda palatina)',
                        'Flape terceira pálpebra (unilateral)',
                        'Gastrectomia parcial',
                        'Glossectomia',
                        'Hepatectomia',
                        'Hérnia inguinal',
                        'Hérnia perineal',
                        'Hérnia umbilical',
                        'Higroma de cotovelo',
                        'Laparotomia exploratória',
                        'Mandibulectomia total',
                        'Mastectomia (unilateral)',
                        'Megacólon',
                        'Nefrectomia parcial',
                        'Nefrotomia',
                        'Otohematoma (unilateral)',
                        'Penectomia',
                        'Piometra',
                        'Prolapso retal',
                        'Prolapso uretral',
                        'Prolapso uterino',
                        'Prolapso vaginal',
                        'Redução de prolapso do globo ocular',
                        'Rescisão palpebral',
                        'Ressecção e anastomose intestinal',
                        'Traqueostomia cervical',
                        'Uretrostomia'
                    ],
                    "NaoIncluso": ['SLIM ESSENCIAL']
                },
                {
                    "Nome": "Redução de Carência",
                    "Procedimentos": [
                        'Torção Gástrica (Dilatação e Torção do Estômago)',
                        'Reações alérgicas com comprometimento respiratório',
                        'Perfuração do trato gastrointestinal / Peritonite aguda',
                        'Hematêmese (vômito com sangue)',
                        'Hemorragias graves e generalizadas',
                        'Eclâmpsia (hipocalcemia puerperal)',
                        'Dificuldade respiratória (dispneia)',
                        'Presença de corpos estranhos no sistema gastrointestinal',
                        'Convulsões e crises neurológicas',
                        'Choques de diferentes naturezas:',
                        'Anafilático (alergia grave)',
                        'Neurogênico (traumas na medula ou sistema nervoso)',
                        'Cardiogênico (falência cardíaca)',
                    ],
                    "NaoIncluso": ['SLIM ESSENCIAL']
                },
                {
                    "Nome": "Consulta Especializada",
                    "Procedimentos": [],
                    "NaoIncluso": ['SLIM ESSENCIAL', 'ADVANCE']
                },
                {
                    "Nome": "Sorologia",
                    "Procedimentos": [],
                    "NaoIncluso": ['SLIM ESSENCIAL', 'ADVANCE']
                },
                {
                    "Nome": "Especialidades",
                    "Procedimentos": [
                        'Acupuntura (sessão)',
                        'Fisioterapia (sessão)',
                        'Ozonioterapia (sessão)',
                    ],
                    "NaoIncluso": ['SLIM ESSENCIAL', 'ADVANCE']
                }
            ]
    }
};

const descriptions: Record<string, string> = {
    '17': "Cobertura incrível pelo melhor custo-benefício",
    '4': "Cobertura incrível pelo melhor custo-benefício",
    '5': "Cobertura completa para quem você ama"
};

function Descrition(id: string): string {
    return descriptions[id] || "Descrição não disponível";
}

export default function PlanCardNewTable({ title, selected, selectPlan, coberturasId, tipoCoberturasId, dados, openDropdownIndex, setOpenDropdownIndex }: PlanCardProps) {
    const { setPlanId, setPlanTypeId, setPlanName } = useCheckoutContext();
    const searchParams = useSearchParams();
    const origem = searchParams.get("origem")

    useEffect(() => {
        if (selected && coberturasId) {
            setPlanId(coberturasId)
            setPlanTypeId(tipoCoberturasId);
            setPlanName(title);
        }
    }, [selected, coberturasId, tipoCoberturasId, title, setPlanId, setPlanTypeId, setPlanName]);

    const handleDropdownToggle = (index: any) => {
        if (openDropdownIndex === index) {
            setOpenDropdownIndex(null);
        } else {
            setOpenDropdownIndex(index);
        }
    };

    const openPdf = (link: string) => {
        fetch(`${API_URL}CoberturasPDF/ObterPdfsUrl/${link}/?Autorizacao=${TOKEN}`)
            .then(res => res.json())
            .then(body => {
                window.open(`${API_URL}bancoImagens/${body.Arquivo}`);
            })
            .catch(error => {
                console.error(error, 'Ocorreu um erro ao buscar os items BannersSite');
            });
    }


    return (
        <div className={`rounded-[20px] relative text-center ${selected ? 'mb-3' : 'mb-10'} md:mb-10 lg:w-[317px] md:w-[317px] `}>

            <div className={`p-4 border rounded-[20px] ${selected ? 'bg-[#E8F6F9]' : 'bg-[#FFFDFA]'}  border-plamev-yellow-100`}>
                <div className="flex justify-center">
                    <PlanHeaderImage title={title}  tipoCobertura={dados?.TiposCoberturasId}/>
                </div>

                <h2 className="text-sm md:text-[16px] font-normal mt-3 min-h-12">{Descrition(tipoCoberturasId)}</h2>

                <div>
                    <ul className="mt-4 text-left border-solid border-[1.5px] rounded-lg border-plamev-yellow-100">
                        {!!dados && dadosCobertura[dados.TiposCoberturasId].ProcedimentosSite.map((feature: ProcedimentosSiteValoreEstaticos, idx: number) => {
                            const procedimentosVisiveis = feature.Procedimentos.filter(i => i !== "-");

                            return (
                                <li key={idx} className="border-b border-plamev-yellow-100 p-2">
                                    <div className="flex items-center justify-between">
                                        <div className='flex justify-start gap-[10px]'>
                                            <Image
                                                src={feature.NaoIncluso.includes(dados.TiposCoberturasNome.toUpperCase()) ? checkDisable : check}
                                                alt=''
                                            />

                                            <span
                                                className={`text-sm md:text-[16px] 
                                                ${feature.NaoIncluso.includes(dados.TiposCoberturasNome.toUpperCase()) ? 'text-zinc-400 disabled' : ''}`}
                                            >
                                                {feature.Nome}
                                            </span>
                                        </div>

                                        {procedimentosVisiveis.length > 0 && !feature.NaoIncluso.includes(dados.TiposCoberturasNome.toUpperCase()) && (
                                            <button
                                                onClick={() => handleDropdownToggle(`${dados.TiposCoberturasId}-${idx}`)}
                                                className="focus:outline-none">
                                                <Image
                                                    src={arrow}
                                                    alt="Toggle"
                                                    className={`transform transition-transform duration-300 ${openDropdownIndex === `${dados.TiposCoberturasId}-${idx}` ? 'rotate-180' : ''}`}
                                                />
                                            </button>
                                        )}
                                    </div>

                                    {procedimentosVisiveis.length > 0 && !feature.NaoIncluso.includes(dados.TiposCoberturasNome.toUpperCase()) && (
                                        <div
                                            className={`overflow-hidden transition-all duration-300 ${openDropdownIndex === `${dados.TiposCoberturasId}-${idx}` ? 'max-h-100' : 'max-h-0'}`}>
                                            <div
                                                className="text-sm text-gray-600 border-t border-plamev-yellow-100 border-dashed p-2">
                                                {procedimentosVisiveis.map((i: any, v: any) => (
                                                    <span key={v}
                                                        className={`before:content-['•'] before:mr-2 block`}>{i}</span>
                                                ))}
                                            </div>
                                        </div>
                                    )}
                                </li>
                            );
                        })}
                    </ul>
                </div>

                <div className="relative w-full flex justify-center mt-[13.19px]">
                    {/* Valores antigos */}
                    {origem === 'caixa' && Number(tipoCoberturasId) === 17 && (
                        <div className="absolute  text-[#1DA1C2] text-[1.2rem]">
                            de R$ 59,99
                        </div>
                    )}
                    {origem === 'caixa' && Number(tipoCoberturasId) === 4 && (
                        <div className="absolute text-[#1DA1C2] text-[1.2rem]">
                            de R$ 139,99
                        </div>
                    )}
                    {origem === 'caixa' && Number(tipoCoberturasId) === 5 && (
                        <div className="absolute text-[#1DA1C2] text-[1.2rem]">
                            de R$ 229,99
                        </div>
                    )}

                    {/* Valor com desconto */}
                    <div className="text-[3rem] font-bold text-plamev-yellow-500 tracking-tight flex justify-center font-grandstander">
                        <div>
                            <span className="text-[24px]" style={{ textShadow: '2px 2px 0px#000', WebkitTextStroke: '1px #000' }}>R$</span>
                        </div>

                        <div className="relative flex items-center mr-20">
                            <div className="text-[4.8rem]" style={{ textShadow: '2px 2px 0px#000', WebkitTextStroke: '1px #000' }}>
                                {formatPrice(dados.Cartao.Composicao.ValorComDesconto).integerPart}
                            </div>

                            <div className="absolute top-[-0.6rem] left-[79%] transform translate-x-1/2 text-[4.1rem]" style={{ textShadow: '2px 2px 0px#000', WebkitTextStroke: '1px #000' }}>
                                <span>,</span>
                            </div>

                            <div className="absolute left-[70%] translate-x-[1rem] flex flex-col items-center">
                                <span className="text-[3rem] leading-none" style={{ textShadow: '2px 2px 0px#000', WebkitTextStroke: '1px #000' }}>
                                    {formatPrice(dados.Cartao.Composicao.ValorComDesconto).decimalPart}
                                </span>
                                <span className="text-[1.2rem] w-[100px] mt-[-0.2rem]" style={{ textShadow: '2px 2px 0px#000', WebkitTextStroke: '1px #000' }}>
                                    AO MÊS
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                {!selected &&
                    <button
                        className={`w-full py-2 flex items-center justify-center text-[20px] rounded-lg ${selected ? 'bg-white text-[--text-color]' : 'bg-plamev-yellow-500 text-white'}`}
                        onClick={() => selectPlan(coberturasId, tipoCoberturasId, title)}
                        type='button'
                    >
                        Selecionar
                    </button>
                }

                {selected &&
                    <button
                        className={`w-full py-2 flex items-center justify-center text-[20px] rounded-lg ${selected ? 'bg-white text-[--text-color]' : 'bg-plamev-yellow-500 text-white'}`}
                        type='button'
                        disabled
                    >
                        Selecionado
                    </button>
                }

                <button
                    onClick={() => openPdf(dados.TiposCoberturasNome.toLowerCase().replace(' ', '-'))}
                    className='text-plamev-blue-500 text-xs'
                >
                    Ver detalhes do plano
                </button>
            </div>
        </div>
    );
};