/* eslint-disable no-unused-vars */
/* eslint-disable no-undef */
import React, { useState, useEffect } from 'react';
import '../styles/ViewPatient.css';
import { useNavigate } from 'react-router-dom';
import NavBar from '../components/NavBar';
import PaymentSection from '../components/PaymentSection';
import { getTreatments } from '../utils/treatmentsService';
import { getAllPatients, calculateAge, getPatientRadiografias, createPatientRadiografia, deletePatientRadiografia } from '../services/patientService';
import { appointmentService } from '../services/appointmentService';
import { Eye, ClipboardList, Calendar, DollarSign, User, Search, Plus, CheckCircle, ImagePlus } from 'lucide-react';

const MAX_RADIOGRAFIA_SIZE_BYTES = 5 * 1024 * 1024;

const ViewPatient = ({ user }) => {
    const [patients, setPatients] = useState([]);
    // eslint-disable-next-line no-unused-vars
    const [loading, setLoading] = useState(true);
    const [searchTerm, setSearchTerm] = useState('');
    const [searchInput, setSearchInput] = useState('');
    const [currentPage, setCurrentPage] = useState(1);
    const [totalPages, setTotalPages] = useState(1);
    const [totalPatients, setTotalPatients] = useState(0);
    const [patientsPerPage] = useState(10);
    const navigate = useNavigate();

    const [showPatientDetails, setShowPatientDetails] = useState(false);
    const [showAppointmentModal, setShowAppointmentModal] = useState(false);
    const [showPaymentModal, setShowPaymentModal] = useState(false);
    const [selectedPatient, setSelectedPatient] = useState(null);
    const [showSuccessModal, setShowSuccessModal] = useState(false);
    const [successMessage, setSuccessMessage] = useState('');
    const [appointmentLoading, setAppointmentLoading] = useState(false);
    const [appointmentError, setAppointmentError] = useState('');
    const [showRadiografiasModal, setShowRadiografiasModal] = useState(false);
    const [radiografias, setRadiografias] = useState([]);
    const [radiografiaLoading, setRadiografiaLoading] = useState(false);
    const [radiografiaError, setRadiografiaError] = useState('');
    const [savingRadiografia, setSavingRadiografia] = useState(false);
    const [showRadiografiaForm, setShowRadiografiaForm] = useState(false);
    const [selectedRadiografiaPreview, setSelectedRadiografiaPreview] = useState(null);
    const [radiografiaFormData, setRadiografiaFormData] = useState({
        file: null,
        descripcion: '',
        date: new Date().toISOString().split('T')[0]
    });

    const [appointmentFormData, setAppointmentFormData] = useState({
        name: '', date: '', time: '', type: '', dni: '', other_treatment: ''
    });

    useEffect(() => {
            const controller = new AbortController();
            const signal = controller.signal;
            const load = async () => {
                if (!user?.id) return;
                try {
                    setLoading(true);
                    // clear current list while loading to avoid accidental accumulation
                    setPatients([]);
                    console.log('ViewPatient: requesting patients', { page: currentPage, pageSize: patientsPerPage, search: searchTerm });
                    const result = await getAllPatients(currentPage, patientsPerPage, searchTerm.trim(), signal);
                    if (result && result.success) {
                        setPatients(result.data || []);
                        setTotalPages(result.pagination?.totalPages || 1);
                        setTotalPatients(result.pagination?.totalPatients || 0);
                        console.log('ViewPatient: loaded', { received: (result.data || []).length, pagination: result.pagination });
                    } else {
                        // if server returned unexpected shape, fallback to empty
                        setPatients([]);
                        setTotalPages(1);
                        setTotalPatients(0);
                    }
                } catch (error) {
                    if (error.name === 'AbortError') { console.log('ViewPatient: request aborted'); return; }
                    console.error(error);
                } finally { setLoading(false); }
            };
            load();
            return () => controller.abort();
    }, [user, currentPage, searchTerm]);

    // Trigger search only on Enter or button click
    const triggerSearch = () => {
        const trimmed = searchInput.trim();
        if (trimmed !== searchTerm) {
            setCurrentPage(1);
            setSearchTerm(trimmed);
        }
    };

    const formatDate = (dateString) => {
        if (!dateString) return 'N/A';
        return dateString.split('T')[0].split('-').reverse().join('/');
    };

    const getRadiografiaUrl = (storedUrl) => {
        if (!storedUrl) return '#';
        if (storedUrl.startsWith('http://') || storedUrl.startsWith('https://')) return storedUrl;
        const apiBase = import.meta.env.VITE_API_BASE_URL || '';
        const apiOrigin = apiBase.replace(/\/api\/?$/, '');
        return `${apiOrigin}${storedUrl}`;
    };

    const handleAppointmentFormChange = (e) => {
        setAppointmentFormData({ ...appointmentFormData, [e.target.name]: e.target.value });
    };

    const loadPatientRadiografias = async (patientId) => {
        setRadiografiaLoading(true);
        setRadiografiaError('');
        try {
            const result = await getPatientRadiografias(patientId);
            if (result.success) {
                setRadiografias(result.data || []);
            } else {
                setRadiografiaError(result.error || 'No se pudieron cargar las radiografías');
            }
        } catch (error) {
            console.error('Error cargando radiografías:', error);
            setRadiografiaError('No se pudieron cargar las radiografías');
        } finally {
            setRadiografiaLoading(false);
        }
    };

    const openRadiografiasModal = async (p) => {
        setSelectedPatient(p);
        setRadiografias([]);
        setRadiografiaError('');
        setRadiografiaFormData({
            file: null,
            descripcion: '',
            date: new Date().toISOString().split('T')[0]
        });
        setShowRadiografiaForm(false);
        setSelectedRadiografiaPreview(null);
        setShowRadiografiasModal(true);
        await loadPatientRadiografias(p.id);
    };

    const handleRadiografiaFormChange = (e) => {
        const { name, value, files } = e.target;
        if (name === 'file') {
            const nextFile = files?.[0] || null;
            if (nextFile && nextFile.size > MAX_RADIOGRAFIA_SIZE_BYTES) {
                setRadiografiaError('La imagen no puede superar 5MB');
                setRadiografiaFormData({ ...radiografiaFormData, file: null });
                return;
            }
            setRadiografiaError('');
            setRadiografiaFormData({ ...radiografiaFormData, file: nextFile });
            return;
        }
        setRadiografiaFormData({ ...radiografiaFormData, [name]: value });
    };

    const handleSubmitRadiografia = async (e) => {
        e.preventDefault();
        if (!selectedPatient) return;
        if (!radiografiaFormData.file) {
            setRadiografiaError('Selecciona una imagen para subir');
            return;
        }
        if (radiografiaFormData.file.size > MAX_RADIOGRAFIA_SIZE_BYTES) {
            setRadiografiaError('La imagen no puede superar 5MB');
            return;
        }
        setSavingRadiografia(true);
        setRadiografiaError('');
        try {
            const imageData = await new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.onload = () => resolve(reader.result);
                reader.onerror = () => reject(new Error('No se pudo leer la imagen'));
                reader.readAsDataURL(radiografiaFormData.file);
            });

            const result = await createPatientRadiografia(selectedPatient.id, {
                imageData,
                descripcion: radiografiaFormData.descripcion,
                date: radiografiaFormData.date
            });
            if (result.success) {
                setRadiografiaFormData({
                    file: null,
                    descripcion: '',
                    date: new Date().toISOString().split('T')[0]
                });
                setShowRadiografiaForm(false);
                await loadPatientRadiografias(selectedPatient.id);
                setSuccessMessage('Radiografía agregada correctamente');
                setShowSuccessModal(true);
                setTimeout(() => setShowSuccessModal(false), 2500);
            } else {
                setRadiografiaError(result.error || 'No se pudo guardar la radiografía');
            }
        } catch (error) {
            console.error('Error guardando radiografía:', error);
            setRadiografiaError('No se pudo guardar la radiografía');
        } finally {
            setSavingRadiografia(false);
        }
    };

    const handleDownloadRadiografia = async (item) => {
        try {
            const fileUrl = getRadiografiaUrl(item.url);
            const response = await fetch(fileUrl);
            const blob = await response.blob();
            const objectUrl = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = objectUrl;
            link.download = `radiografia-${item.id}-${item.date || 'sin-fecha'}.jpg`;
            document.body.appendChild(link);
            link.click();
            link.remove();
            window.URL.revokeObjectURL(objectUrl);
        } catch (error) {
            console.error('Error descargando radiografia:', error);
            setRadiografiaError('No se pudo descargar la radiografia');
        }
    };

    const handleDeleteRadiografia = async (item) => {
        if (!selectedPatient) return;
        const confirmDelete = window.confirm('¿Eliminar esta radiografia?');
        if (!confirmDelete) return;

        try {
            const result = await deletePatientRadiografia(selectedPatient.id, item.id);
            if (result.success) {
                setSelectedRadiografiaPreview(null);
                await loadPatientRadiografias(selectedPatient.id);
                setSuccessMessage('Radiografia eliminada correctamente');
                setShowSuccessModal(true);
                setTimeout(() => setShowSuccessModal(false), 2500);
            } else {
                setRadiografiaError(result.error || 'No se pudo eliminar la radiografia');
            }
        } catch (error) {
            console.error('Error eliminando radiografia:', error);
            setRadiografiaError('No se pudo eliminar la radiografia');
        }
    };

    const openAppointmentModal = (p) => {
        setSelectedPatient(p);
        setAppointmentError('');
        setAppointmentFormData({
            name: `${p.name} ${p.lastname}`,
            dni: p.dni,
            date: new Date().toISOString().split('T')[0],
            time: '', 
            type: '', 
            other_treatment: ''
        });
        setShowAppointmentModal(true);
    };

    const handleSubmitAppointment = async (e) => {
        e.preventDefault();
        setAppointmentError('');
        setAppointmentLoading(true);
        try {
            const result = await appointmentService.createAppointment({ 
                ...appointmentFormData, 
                patient_id: selectedPatient.id 
            });
            if (result && result.success !== false) {
                setShowAppointmentModal(false);
                setSuccessMessage(`Turno agendado para ${appointmentFormData.date} a las ${appointmentFormData.time}`);
                setShowSuccessModal(true);
                setTimeout(() => setShowSuccessModal(false), 2500);
                // Limpiar el formulario
                setAppointmentFormData({
                    name: '', date: '', time: '', type: '', dni: '', other_treatment: ''
                });
            } else {
                setAppointmentError(result?.error || 'Error al agendar turno');
            }
        } catch (error) {
            console.error('Error agendando turno:', error);
            setAppointmentError(error.message || 'Error al agendar turno');
        } finally {
            setAppointmentLoading(false);
        }
    };

    return (
        <div className="app">
            <NavBar user={user} activeNav="patients" />
            <main className="main-content">
                <div className="view-patient-container">
                    <div className="header-section">
                        <h1 className="page-title">Gestión de Pacientes</h1>
                        <p className="page-subtitle">Control clínico y de pagos</p>
                    </div>

                    <div className="search-section">
                        <div className="search-container">
                                <div className="search-input-wrapper">
                                <Search size={18} className="search-icon" />
                                <input 
                                    type="text" 
                                    placeholder="Buscar por nombre o DNI..." 
                                    value={searchInput} 
                                    onChange={(e) => { setSearchInput(e.target.value); }} 
                                    onKeyDown={(e) => { if (e.key === 'Enter') { triggerSearch(); } }}
                                    className="search-input" 
                                />
                            </div>
                            <button className="new-patient-btn" onClick={() => navigate('/patients/new')}>
                                <Plus size={18} /> <span>Nuevo Paciente</span>
                            </button>
                        </div>
                    </div>

                    <div className="patients-table-container">
                        <table className="patients-table">
                            <thead>
                                <tr>
                                    <th>PACIENTE</th>
                                    <th>DNI</th>
                                    <th>EDAD</th>
                                    <th>ACCIONES</th>
                                </tr>
                            </thead>
                            <tbody>
                                {patients.map(p => (
                                    <tr key={p.id}>
                                        <td>
                                            <div className="patient-info">
                                                <div className="patient-avatar"><User size={20} /></div>
                                                <span className="patient-name">{p.name} {p.lastname}</span>
                                            </div>
                                        </td>
                                        <td className="dni-text">{p.dni}</td>
                                        <td>{calculateAge(p.birthdate)} años</td>
                                        <td className="actions-cell">
                                            <div className="action-buttons">
                                                <button className="action-btn details-btn" title="Detalles" onClick={() => { setSelectedPatient(p); setShowPatientDetails(true); }}><Eye size={18} /></button>
                                                <button className="action-btn history-btn" title="Historia Clínica" onClick={() => navigate(`/patients/${p.id}/history`)}><ClipboardList size={18} /></button>
                                                <button className="action-btn appointment-btn" title="Agendar Turno" onClick={() => openAppointmentModal(p)}><Calendar size={18} /></button>
                                                <button className="action-btn radiografia-btn" title="Radiografías" onClick={() => openRadiografiasModal(p)}><ImagePlus size={18} /></button>
                                                <button className="action-btn payment-btn" title="Pagos y Cobros" onClick={() => { setSelectedPatient(p); setShowPaymentModal(true); }}><DollarSign size={18} /></button>
                                            </div>
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>

                    <div className="pagination-info-container">
                        <p className="pagination-text">
                            Mostrando {(currentPage - 1) * patientsPerPage + 1} a {Math.min(currentPage * patientsPerPage, totalPatients)} de {totalPatients} pacientes
                        </p>
                        <div className="pagination-btns">
                            <button className="page-num" onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))} disabled={currentPage === 1}>‹</button>
                            {[...Array(totalPages)].map((_, i) => (
                                <button key={i} className={`page-num ${currentPage === i + 1 ? 'active' : ''}`} onClick={() => setCurrentPage(i + 1)}>{i + 1}</button>
                            ))}
                            <button className="page-num" onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))} disabled={currentPage === totalPages}>›</button>
                        </div>
                    </div>

                    {/* MODAL DETALLES */}
                    {showPatientDetails && selectedPatient && (
                        <div className="modal-overlay" onClick={() => setShowPatientDetails(false)}>
                            <div className="modal modal-wide" onClick={e => e.stopPropagation()}>
                                <div className="modal-header">
                                    <h3 className="modal-title">Datos del Paciente - {selectedPatient.name}</h3>
                                    <button onClick={() => setShowPatientDetails(false)} className="close-btn">✕</button>
                                </div>
                                <div className="modal-content">
                                    <div className="patient-details-grid">
                                        <div className="info-item"><span className="info-label">DNI</span><span className="info-value">{selectedPatient.dni}</span></div>
                                        <div className="info-item"><span className="info-label">Fecha de Nacimiento</span><span className="info-value">{formatDate(selectedPatient.birthdate)}</span></div>
                                        <div className="info-item"><span className="info-label">Edad</span><span className="info-value">{calculateAge(selectedPatient.birthdate)} años</span></div>
                                        <div className="info-item"><span className="info-label">Profesión</span><span className="info-value">{selectedPatient.occupation || 'No registrado'}</span></div>
                                        <div className="info-item"><span className="info-label">Teléfono</span><span className="info-value">{selectedPatient.phone || 'No registrado'}</span></div>
                                        <div className="info-item"><span className="info-label">Email</span><span className="info-value">{selectedPatient.email || 'No registrado'}</span></div>
                                        <div className="info-item"><span className="info-label">Dirección</span><span className="info-value">{selectedPatient.address || 'No registrado'}</span></div>
                                        <div className="info-item"><span className="info-label">Titular</span><span className="info-value">{selectedPatient.is_holder ? 'Sí' : 'No'}</span></div>
                                        <div className="info-item full-width"><span className="info-label">Observaciones</span><span className="info-value">{selectedPatient.notes || '—'}</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    )}

                    {/* MODAL AGENDAR TURNO (image_772db7.png Design) */}
                    {showAppointmentModal && (
                        <div className="modal-overlay" onClick={() => !appointmentLoading && setShowAppointmentModal(false)}>
                            <div className="modal agenda-modal" onClick={e => e.stopPropagation()}>
                                <div className="modal-header">
                                    <h3 className="modal-title agenda-title">Agendar Nuevo Turno</h3>
                                    <button onClick={() => !appointmentLoading && setShowAppointmentModal(false)} className="close-btn" disabled={appointmentLoading}>✕</button>
                                </div>
                                <form onSubmit={handleSubmitAppointment} className="modal-content">
                                    {appointmentError && (
                                        <div className="error-message" style={{color: '#d32f2f', padding: '10px', backgroundColor: '#ffebee', borderRadius: '4px', marginBottom: '10px', fontSize: '14px'}}>
                                            {appointmentError}
                                        </div>
                                    )}
                                    <div className="form-group">
                                        <label>Nombre completo</label>
                                        <input type="text" value={appointmentFormData.name} readOnly className="form-input" />
                                    </div>

                                    <div className="form-row">
                                        <div className="form-group">
                                            <label>Fecha *</label>
                                            <input type="date" name="date" value={appointmentFormData.date} onChange={handleAppointmentFormChange} required className="form-input" disabled={appointmentLoading} />
                                        </div>
                                        <div className="form-group">
                                            <label>Hora *</label>
                                            <select name="time" value={appointmentFormData.time} onChange={handleAppointmentFormChange} required className="form-input" disabled={appointmentLoading}>
                                                <option value="">Seleccionar...</option>
                                                {Array.from({ length: 27 }).map((_, i) => {
                                                    const hour = Math.floor(i / 2) + 8;
                                                    const minutes = i % 2 === 0 ? '00' : '30';
                                                    const timeStr = `${hour.toString().padStart(2, '0')}:${minutes}`;
                                                    return <option key={timeStr} value={timeStr}>{timeStr}</option>;
                                                })}
                                            </select>
                                        </div>
                                    </div>

                                    <div className="form-group">
                                        <label>Tipo de Tratamiento *</label>
                                        <select name="type" value={appointmentFormData.type} onChange={handleAppointmentFormChange} required className="form-input" disabled={appointmentLoading}>
                                            <option value="">Seleccionar...</option>
                                            {getTreatments().map(t => <option key={t} value={t}>{t}</option>)}
                                        </select>
                                    </div>

                                    <div className="form-group">
                                        <label>DNI</label>
                                        <input type="text" value={appointmentFormData.dni} readOnly className="form-input" />
                                    </div>

                                    <div className="modal-footer-agenda">
                                        <button type="button" onClick={() => setShowAppointmentModal(false)} className="cancel-link" disabled={appointmentLoading}>Cancelar</button>
                                        <button type="submit" className="confirm-agenda-btn" disabled={appointmentLoading}>
                                            {appointmentLoading ? 'Agendando...' : 'Agendar Turno'}
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    )}

                    {/* MODAL COBROS */}
                    {showPaymentModal && selectedPatient && (
                        <div className="modal-overlay" onClick={() => setShowPaymentModal(false)}>
                            <div className="modal modal-wide" onClick={e => e.stopPropagation()}>
                                <div className="modal-header">
                                    <h3 className="modal-title">Cobros - {selectedPatient.name}</h3>
                                    <button onClick={() => setShowPaymentModal(false)} className="close-btn">✕</button>
                                </div>
                                <div className="modal-content">
                                    <PaymentSection patientId={selectedPatient.id} />
                                </div>
                            </div>
                        </div>
                    )}

                                        {/* MODAL RADIOGRAFIAS */}
                    {showRadiografiasModal && selectedPatient && (
                        <div className="modal-overlay" onClick={() => !savingRadiografia && setShowRadiografiasModal(false)}>
                            <div className="modal modal-wide radiografia-modal" onClick={e => e.stopPropagation()}>
                                <div className="modal-header">
                                    <h3 className="modal-title">Radiografias - {selectedPatient.name} {selectedPatient.lastname}</h3>
                                    <button onClick={() => !savingRadiografia && setShowRadiografiasModal(false)} className="close-btn">X</button>
                                </div>
                                <div className="modal-content">
                                    {radiografiaError && (
                                        <div className="error-message" style={{color: '#d32f2f', padding: '10px', backgroundColor: '#ffebee', borderRadius: '4px', marginBottom: '12px', fontSize: '14px'}}>
                                            {radiografiaError}
                                        </div>
                                    )}

                                    <div className="radiografia-toolbar">
                                        <button
                                            type="button"
                                            className="new-patient-btn"
                                            onClick={() => setShowRadiografiaForm(prev => !prev)}
                                            disabled={savingRadiografia}
                                        >
                                            <ImagePlus size={16} />
                                            <span>{showRadiografiaForm ? 'Cancelar' : 'Agregar Radiografia'}</span>
                                        </button>
                                    </div>

                                    {showRadiografiaForm && (
                                        <form onSubmit={handleSubmitRadiografia} className="radiografia-form">
                                            <div className="form-group">
                                                <label>Imagen *</label>
                                                <input type="file" name="file" accept="image/*" onChange={handleRadiografiaFormChange} required className="form-input" disabled={savingRadiografia} />
                                            </div>
                                            <div className="form-group">
                                                <label>Descripcion</label>
                                                <input type="text" name="descripcion" value={radiografiaFormData.descripcion} onChange={handleRadiografiaFormChange} className="form-input" placeholder="Ej: Panoramica inicial" disabled={savingRadiografia} />
                                            </div>
                                            <div className="form-group">
                                                <label>Fecha *</label>
                                                <input type="date" name="date" value={radiografiaFormData.date} onChange={handleRadiografiaFormChange} required className="form-input" disabled={savingRadiografia} />
                                            </div>
                                            <div className="modal-footer-agenda">
                                                <button type="submit" className="confirm-agenda-btn" disabled={savingRadiografia}>
                                                    {savingRadiografia ? 'Guardando...' : 'Guardar Radiografia'}
                                                </button>
                                            </div>
                                        </form>
                                    )}

                                    <div className="radiografia-list">
                                        <h4>Radiografias cargadas</h4>
                                        {radiografiaLoading ? (
                                            <p>Cargando radiografias...</p>
                                        ) : radiografias.length === 0 ? (
                                            <p>No hay radiografias registradas.</p>
                                        ) : (
                                            <div className="radiografia-grid">
                                                {radiografias.map((item) => (
                                                    <button
                                                        key={item.id}
                                                        type="button"
                                                        className="radiografia-card"
                                                        onClick={() => setSelectedRadiografiaPreview(item)}
                                                    >
                                                        <div className="radiografia-card-date">{formatDate(item.date)}</div>
                                                        <img src={getRadiografiaUrl(item.url)} alt="Radiografia" className="radiografia-thumb" />
                                                    </button>
                                                ))}
                                            </div>
                                        )}
                                    </div>
                                </div>
                            </div>
                        </div>
                    )}

                    {selectedRadiografiaPreview && (
                        <div className="modal-overlay" onClick={() => setSelectedRadiografiaPreview(null)}>
                            <div className="modal radiografia-preview-modal" onClick={e => e.stopPropagation()}>
                                <div className="modal-header">
                                    <h3 className="modal-title">{formatDate(selectedRadiografiaPreview.date)}</h3>
                                    <button onClick={() => setSelectedRadiografiaPreview(null)} className="close-btn">X</button>
                                </div>
                                <div className="modal-content">
                                    <div className="radiografia-preview-actions">
                                        <button
                                            type="button"
                                            className="confirm-agenda-btn"
                                            onClick={() => handleDownloadRadiografia(selectedRadiografiaPreview)}
                                        >
                                            Descargar
                                        </button>
                                        <button
                                            type="button"
                                            className="radiografia-delete-btn"
                                            onClick={() => handleDeleteRadiografia(selectedRadiografiaPreview)}
                                        >
                                            Eliminar
                                        </button>
                                    </div>
                                    <img
                                        src={getRadiografiaUrl(selectedRadiografiaPreview.url)}
                                        alt="Radiografia ampliada"
                                        className="radiografia-preview-image"
                                    />
                                    <p className="radiografia-preview-description">
                                        {selectedRadiografiaPreview.descripcion || 'Sin descripcion'}
                                    </p>
                                </div>
                            </div>
                        </div>
                    )}

                    {showSuccessModal && (
                        <div className="success-overlay">
                            <div className="success-card">
                                <CheckCircle size={40} color="#22c55e" />
                                <h3>Operación Exitosa</h3>
                                <p>{successMessage}</p>
                            </div>
                        </div>
                    )}
                </div>
            </main>
        </div>
    );
};

export default ViewPatient;