import React, { useState } from 'react'
import '../PagesMedico/styleMedico/FormNovoRelatorio.css'
import { useNavigate } from 'react-router-dom'
import { useAuth } from '../components/utils/AuthProvider'
import { GetPatientByCPF } from '../components/utils/Functions-Endpoints/Patient'
import { FormatCPF } from '../components/utils/Formatar/Format'
import html2pdf from 'html2pdf.js'

const FormRelatorio = ({ onSave, DictInfo, setDictInfo }) => {
    const { getAuthorizationHeader } = useAuth()
    let authHeader = getAuthorizationHeader()
    const navigate = useNavigate()

    const [showModal, setShowModal] = useState(false)
    
    // --- NOVO: Estado para controlar o loading da transcrição ---
    const [isTranscribing, setIsTranscribing] = useState(false);

    // --- NOVA FUNÇÃO: Envia o áudio e preenche o formulário ---
    const handleAudioUpload = async (e) => {
        const file = e.target.files[0];
        if (!file) return;

        setIsTranscribing(true); // Ativa o spinner

        const formData = new FormData();
        formData.append('audio', file); // 'audio' deve ser o nome esperado no backend

        try {
            // ⚠️ ATENÇÃO: Substitua essa URL pela rota do seu backend que criamos
            const response = await fetch('http://localhost:3001/api/transcrever-relatorio', {
                method: 'POST',
                body: formData,
                // headers: { 'Authorization': authHeader } // Descomente se seu backend precisar de token
            });

            if (!response.ok) throw new Error("Falha na transcrição");

            const data = await response.json();

            // Atualiza o DictInfo com os dados vindos da IA
            setDictInfo((prev) => ({
                ...prev,
                exam: data.exam || prev.exam,              // Preenche se a IA achou, senão mantém o antigo
                diagnostico: data.diagnostico || prev.diagnostico,
                conclusao: data.conclusao || prev.conclusao
            }));

        } catch (error) {
            console.error("Erro no upload de áudio:", error);
            alert("Não foi possível gerar o relatório por áudio. Verifique o backend.");
        } finally {
            setIsTranscribing(false); // Desativa o spinner
            e.target.value = null; // Limpa o input para permitir enviar o mesmo arquivo novamente se quiser
        }
    };
    // -----------------------------------------------------------

    const BaixarPDFdoRelatorio = () => {
        const elemento = document.getElementById("folhaA4"); // tua div do relatório
        const opt = {
            margin: 0,
            filename: `relatorio_${DictInfo?.paciente_nome || "paciente"}.pdf`,
            html2canvas: { scale: 2 },
            jsPDF: { unit: "mm", format: "a4", orientation: "portrait" },
        };

        html2pdf().set(opt).from(elemento).save();
    }

    const handleChange = (e) => {
        const { name, value } = e.target;
        console.log(name, value)
        if (name === 'paciente_cpf') {
            const formattedCPF = FormatCPF(value);
            setDictInfo((prev) => ({ ...prev, [name]: formattedCPF }));

            const fetchPatient = async () => {
                const patientData = await GetPatientByCPF(formattedCPF, authHeader);
                if (patientData) {
                    setDictInfo((prev) => ({
                        ...prev,
                        paciente_cpf: value,
                        paciente_nome: patientData.full_name,
                        paciente_id: patientData.id
                    }));
                }

            };
            if (formattedCPF.length === 14) {
                fetchPatient();
            }
        } else {
            setDictInfo((prev) => ({ ...prev, [name]: value }));
        }
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(DictInfo)
        setShowModal(true)

        onSave({
            "patient_id": DictInfo.paciente_id,
            "exam": DictInfo.exam,
            "diagnosis": DictInfo.diagnostico, // Garanta que o backend espera 'diagnosis' mas seu state usa 'diagnostico'
            "conclusion": DictInfo.conclusao,
            "status": "draft",
            "requested_by": DictInfo.requested_by,
            "hide_date": false,
            "hide_signature": false,
        });
    }

    return (
        <div>
            {showModal && (
                <div className="modal" style={{ display: 'block', backgroundColor: 'rgba(0,0,0,0.5)' }}>
                    <div className="modal-dialog">
                        <div className="modal-content">
                            <div className="modal-header bg-success text-white">
                                <h5 className="modal-title ">Relatório criado com sucesso</h5>
                                <button
                                    type="button"
                                    className="btn-close"
                                    onClick={() => setShowModal(false)}
                                ></button>
                            </div>
                            <div className="modal-body">
                                <p>Você também pode baixa-lo agora em pdf</p>
                            </div>
                            <div className="modal-footer">
                                <button className="btn btn-primary" onClick={BaixarPDFdoRelatorio}><i className='bi bi-file-pdf-fill'></i> baixar em pdf</button>

                                <button
                                    type="button"
                                    className="btn btn-primary"
                                    onClick={() => { setShowModal(false); navigate(('/medico/relatorios')) }}
                                >
                                    Fechar
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            )}


            <div className='card'>
                
                {/* --- ÁREA DE UPLOAD DE ÁUDIO (INSERIDA AQUI) --- */}
                <div className="p-3 mb-3 border-bottom bg-light">
                    <label className="form-label fw-bold">🎙️ Preenchimento Automático via Áudio</label>
                    <div className="d-flex align-items-center gap-3">
                        {isTranscribing ? (
                            <div className="d-flex align-items-center text-primary">
                                <div className="spinner-border spinner-border-sm me-2" role="status"></div>
                                <span>A IA está gerando o relatório... aguarde.</span>
                            </div>
                        ) : (
                            <input 
                                type="file" 
                                className="form-control" 
                                accept="audio/*" 
                                onChange={handleAudioUpload} 
                            />
                        )}
                    </div>
                    <small className="text-muted">Envie um áudio ditando o exame, diagnóstico e conclusão.</small>
                </div>
                {/* ----------------------------------------------- */}

                <form action="" onSubmit={handleSubmit}>
                    <div id='primeiraLinha'>

                        <div className="col-md-2 mb-3">
                            <label >Nome do paciente:</label>
                            <input type="text" step="0.1" className="form-control" name="paciente_nome" onChange={handleChange} value={DictInfo.paciente_nome || ''} required />
                        </div>

                        <div className="col-md-2 mb-3">
                            <label >CPF do paciente:</label>
                            <input type="text" step="0.1" className="form-control" name="paciente_cpf" onChange={handleChange} value={DictInfo.paciente_cpf || ''} required />
                        </div>


                        <div className="col-md-2 mb-3">
                            <label >Nome do médico:</label>
                            <input type="text" step="0.1" className="form-control" name="requested_by" onChange={handleChange} value={DictInfo.requested_by || ''} required />
                        </div>

                        <div className="col-md-2 mb-3">
                            <label >Exame:</label>
                            <input type="text" className="form-control" name="exam" onChange={handleChange} value={DictInfo.exam || ''} />
                        </div>


                        <div className="col-md-2 mb-3">
                            <label >Data do exame:</label>
                            <input type="date" className="form-control" name="data_exame" onChange={handleChange} value={DictInfo.data_exame || ''} />
                        </div>

                    </div>

                    <div className='row'>
                        <div className="col-md-2 mb-3">
                            <label htmlFor='diagnostico'>Diagnostico:</label>
                            <textarea name="diagnostico" id="diagnostico" onChange={handleChange} cols="30" rows="5" value={DictInfo.diagnostico || ''}></textarea>
                        </div>

                        <div className="col-md-2 mb-3">
                            <label htmlFor='conclusao'>Conclusão:</label>
                            <textarea name="conclusao" id="conclusao" onChange={handleChange} cols="30" rows="5" value={DictInfo.conclusao || ''}></textarea>
                        </div>
                    </div>

                    <button
                        className="btn btn-success  submitButton"
                        type='submit'
                    >
                        Salvar
                    </button>

                </form>
            </div>

            <h3>Modelo do relatório</h3>
            <div id="folhaA4">

                <div id='header-relatorio'>
                    <p>Clinica Rise up</p>
                    <p>Dr {DictInfo.requested_by} - CRM/SP 123456</p>
                    <p>Avenida - (79) 9 4444-4444</p>
                </div>

                <div id='infoPaciente'>
                    <p>Paciente: {DictInfo?.paciente_nome}</p>
                    <p>Data de nascimento: </p>

                    {/* Corrigi de data_exam para data_exame para bater com o state */}
                    <p>Data do exame: {DictInfo.data_exame}</p> 

                    <p>Exame: {DictInfo.exam}</p>

                    <p>Diagnostico: {DictInfo.diagnostico}</p>

                    <p>Conclusão: {DictInfo.conclusao}</p>

                </div>

                <div>
                    <p>Dr {DictInfo.requested_by}</p>
                    <p>Emitido em: {new Date().toLocaleDateString()}</p>
                </div>

            </div>

        </div>
    )
}

export default FormRelatorio