import React, { useState } from ‘react’;

// Main App component for the daily report form
const App = () => {
// State for basic report information
const [reportData, setReportData] = useState({
assistantName: ”,
reportDate: ”,
startTime: ”,
endTime: ”,
totalReviewed: ”,
});

// State for dynamic sections
const [movements, setMovements] = useState([{
expedientClient: ”,
movementIdentified: ”,
actionTaken: ”
}]);
const [completedHearings, setCompletedHearings] = useState([{
expedientClient: ”,
hearingType: ”,
resultObservations: ”
}]);
const [newHearings, setNewHearings] = useState([{
expedientClient: ”,
dateTime: ”,
hearingType: ”,
roomDependency: ”,
actionPerformed: ”
}]);
const [impulses, setImpulses] = useState([{
dependencyVisited: ”,
expedientsClients: ”,
actionPerformed: ”,
resultStatus: ”,
nextAction: ”
}]);
const [generalTasks, setGeneralTasks] = useState([{
taskDescription: ”,
relatedExpedientsClients: ”,
observations: ”
}]);
const [pendings, setPendings] = useState([”]); // Array of strings for pending tasks
const [additionalObservations, setAdditionalObservations] = useState(”);

// Handle changes for basic input fields
const handleChange = (e) => {
const { name, value } = e.target;
setReportData(prevData => ({ …prevData, [name]: value }));
};

// Generic handler for dynamic section changes
const handleDynamicChange = (index, e, section, setter) => {
const { name, value } = e.target;
const list = […section];
list[index] = { …list[index], [name]: value };
setter(list);
};

// Generic handler to add a new item to a dynamic section
const handleAddItem = (setter, newItem) => {
setter(prevList => […prevList, newItem]);
};

// Generic handler to remove an item from a dynamic section
const handleRemoveItem = (index, setter, section) => {
const list = […section];
list.splice(index, 1);
setter(list);
};

// Special handler for adding a new pending task (string array)
const handleAddPending = () => {
setPendings(prevPendings => […prevPendings, ”]);
};

// Special handler for changing a pending task (string array)
const handlePendingChange = (index, e) => {
const newPendings = […pendings];
newPendings[index] = e.target.value;
setPendings(newPendings);
};

// Special handler for removing a pending task (string array)
const handleRemovePending = (index) => {
const newPendings = […pendings];
newPendings.splice(index, 1);
setPendings(newPendings);
};

// Function to escape string for CSV (handle commas, quotes, newlines)
const escapeCsv = (str) => {
if (!str) return ”;
// Replace double quotes with two double quotes, then wrap in double quotes if contains comma or newline
str = String(str); // Ensure it’s a string
const needsQuotes = str.includes(‘,’) || str.includes(‘\n’) || str.includes(‘”‘);
if (needsQuotes) {
return `”${str.replace(/”/g, ‘””‘)}”`;
}
return str;
};

// Function to generate CSV content
const generateCsvContent = () => {
let csv = ”;

// Helper to add a row to CSV
const addRow = (data) => {
csv += data.map(escapeCsv).join(‘,’) + ‘\n’;
};

// Header and Basic Information
csv += “Informe Diario de Actividades\n\n”;
addRow([“Nombre del Asistente”, reportData.assistantName]);
addRow([“Fecha del Informe”, reportData.reportDate]);
addRow([“Hora de Inicio”, reportData.startTime]);
addRow([“Hora de Finalización”, reportData.endTime]);
addRow([“Total de expedientes revisados”, reportData.totalReviewed]);
csv += “\n”;

// 1. Revisión Diaria de Expedientes (Sistema Web Función Judicial)
csv += “1. Revisión Diaria de Expedientes (Sistema Web Función Judicial)\n”;
addRow([“Expediente No. / Cliente”, “Movimiento Procesal Identificado”, “Acción Tomada/Observaciones”]);
movements.forEach(m => {
addRow([m.expedientClient, m.movementIdentified, m.actionTaken]);
});
csv += “\n”;

// 2. Agendamiento y Seguimiento de Audiencias – Completadas
csv += “2. Agendamiento y Seguimiento de Audiencias – Completadas\n”;
addRow([“Expediente No. / Cliente”, “Tipo de Audiencia”, “Resultado/Observaciones Clave”]);
completedHearings.forEach(h => {
addRow([h.expedientClient, h.hearingType, h.resultObservations]);
});
csv += “\n”;

// 2. Agendamiento y Seguimiento de Audiencias – Nuevas Señaladas
csv += “2. Agendamiento y Seguimiento de Audiencias – Nuevas Señaladas\n”;
addRow([“Expediente No. / Cliente”, “Fecha y Hora”, “Tipo de Audiencia”, “Sala/Dependencia”, “Acción Realizada”]);
newHearings.forEach(nh => {
addRow([nh.expedientClient, nh.dateTime, nh.hearingType, nh.roomDependency, nh.actionPerformed]);
});
csv += “\n”;

// 3. Impulso de Causas / Trámites en Dependencias Judiciales/Administrativas
csv += “3. Impulso de Causas / Trámites en Dependencias Judiciales/Administrativas\n”;
addRow([“Dependencia Visitada/Gestionada”, “Expediente(s) / Cliente(s)”, “Trámite Realizado”, “Resultado/Estado”, “Próxima Acción”]);
impulses.forEach(i => {
addRow([i.dependencyVisited, i.expedientsClients, i.actionPerformed, i.resultStatus, i.nextAction]);
});
csv += “\n”;

// 4. Tareas Generales y Administrativas
csv += “4. Tareas Generales y Administrativas\n”;
addRow([“Descripción de la Tarea”, “Expediente(s) / Cliente(s) Relacionados”, “Observaciones”]);
generalTasks.forEach(g => {
addRow([g.taskDescription, g.relatedExpedientsClients, g.observations]);
});
csv += “\n”;

// 5. Pendientes y Prioridades para el Próximo Día
csv += “5. Pendientes y Prioridades para el Próximo Día\n”;
pendings.forEach(p => {
addRow([p]); // Each pending is a single cell row
});
csv += “\n”;

// 6. Observaciones Adicionales / Novedades del Día
csv += “6. Observaciones Adicionales / Novedades del Día\n”;
addRow([additionalObservations]);
csv += “\n”;

return csv;
};

// Handle form submission (generates and downloads CSV)
const handleSubmit = (e) => {
e.preventDefault();
const csvContent = generateCsvContent();

// Create a Blob from the CSV content
const blob = new Blob([csvContent], { type: ‘text/csv;charset=utf-8;’ });

// Create a link element
const link = document.createElement(‘a’);
if (link.download !== undefined) { // Feature detection for download attribute
const url = URL.createObjectURL(blob);
link.setAttribute(‘href’, url);
link.setAttribute(‘download’, `informe_diario_${reportData.reportDate || ‘sin_fecha’}.csv`);
link.style.visibility = ‘hidden’;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url); // Clean up the URL object
alert(‘¡Informe CSV descargado exitosamente!’);
} else {
// Fallback for browsers that don’t support download attribute (should be rare)
alert(‘Su navegador no soporta la descarga directa de archivos. Por favor, copie el contenido del formulario manualmente.’);
}
};

return (

);
};

// Reusable Section component for consistent styling
const Section = ({ title, children }) => {
return (

);
};

export default App;