import { useState, useEffect } from 'react' import { format, startOfWeek, addDays, isSameDay, isSameMonth, isSameYear } from 'date-fns' import { es } from 'date-fns/locale' import { Button } from "/components/ui/button" import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "/components/ui/card" import { Input } from "/components/ui/input" import { Textarea } from "/components/ui/textarea" import { Plus, Trash, Edit, Calendar, Clock, ArrowLeft } from 'lucide-react' type Ejercicio = { id: string nombre: string hora: string duracion: number // en minutos descripcion: string fecha: Date } type Vista = 'semana' | 'mes' | 'año' export default function ProgramaEjercicios() { const [ejercicios, setEjercicios] = useState([]) const [fechaActual, setFechaActual] = useState(new Date()) const [vistaActual, setVistaActual] = useState('semana') const [agregandoEjercicio, setAgregandoEjercicio] = useState(false) const [editandoEjercicio, setEditandoEjercicio] = useState(null) const [nuevoEjercicio, setNuevoEjercicio] = useState({ nombre: '', hora: '', duracion: 30, descripcion: '' }) // Generar días de la semana empezando por lunes const inicioSemana = startOfWeek(fechaActual, { weekStartsOn: 1 }) const diasSemana = Array.from({ length: 7 }).map((_, i) => addDays(inicioSemana, i)) // Filtrar ejercicios según la vista actual const ejerciciosFiltrados = ejercicios.filter(ejercicio => { if (vistaActual === 'semana') { return diasSemana.some(dia => isSameDay(dia, ejercicio.fecha)) } else if (vistaActual === 'mes') { return isSameMonth(fechaActual, ejercicio.fecha) && isSameYear(fechaActual, ejercicio.fecha) } else { return isSameYear(fechaActual, ejercicio.fecha) } }) // Calcular totales para vistas de mes y año const duracionTotal = ejerciciosFiltrados.reduce((sum, ex) => sum + ex.duracion, 0) const totalEjercicios = ejerciciosFiltrados.length const agregarEjercicio = (dia: Date) => { setEditandoEjercicio(null) setNuevoEjercicio({ nombre: '', hora: '', duracion: 30, descripcion: '' }) setAgregandoEjercicio(true) setFechaActual(dia) } const editarEjercicio = (ejercicio: Ejercicio) => { setEditandoEjercicio(ejercicio) setNuevoEjercicio({ nombre: ejercicio.nombre, hora: ejercicio.hora, duracion: ejercicio.duracion, descripcion: ejercicio.descripcion }) setAgregandoEjercicio(true) } const eliminarEjercicio = (id: string) => { setEjercicios(ejercicios.filter(ex => ex.id !== id)) } const guardarEjercicio = () => { if (!nuevoEjercicio.nombre || !nuevoEjercicio.hora) return const ejercicioAGuardar = { ...nuevoEjercicio, id: editandoEjercicio?.id || Date.now().toString(), fecha: fechaActual } if (editandoEjercicio) { setEjercicios(ejercicios.map(ex => ex.id === editandoEjercicio.id ? ejercicioAGuardar : ex)) } else { setEjercicios([...ejercicios, ejercicioAGuardar]) } setAgregandoEjercicio(false) setEditandoEjercicio(null) } const navegarSemana = (direccion: 'anterior' | 'siguiente') => { setFechaActual(addDays(fechaActual, direccion === 'anterior' ? -7 : 7)) } return (

Programa de Ejercicios {/* Selector de Vista */}

{vistaActual === 'semana' && (

{format(inicioSemana, 'd MMMM', { locale: es })} - {format(addDays(inicioSemana, 6), 'd MMMM, yyyy', { locale: es })}

)} {vistaActual === 'mes' && (

{format(fechaActual, 'MMMM yyyy', { locale: es })}

)} {vistaActual === 'año' && (

{format(fechaActual, 'yyyy', { locale: es })}

)} {/* Formulario de Ejercicio */} {agregandoEjercicio && ( {editandoEjercicio ? 'Editar Ejercicio' : 'Agregar Ejercicio'}

Nombre del Ejercicio setNuevoEjercicio({...nuevoEjercicio, nombre: e.target.value})} placeholder="Ej: Correr, Pesas, Yoga" className="bg-red-600 border-red-500 text-white placeholder-red-300" />

Hora setNuevoEjercicio({...nuevoEjercicio, hora: e.target.value})} className="bg-red-600 border-red-500 text-white" />

Duración (minutos) setNuevoEjercicio({...nuevoEjercicio, duracion: parseInt(e.target.value) || 0})} className="bg-red-600 border-red-500 text-white" />

Descripción

setNuevoEjercicio({...nuevoEjercicio, descripcion: e.target.value})}
                    placeholder="Notas sobre tu ejercicio..."
                    className="bg-red-600 border-red-500 text-white placeholder-red-300"
                  />
                </div>
              </CardContent>
              <CardFooter className="flex justify-end">
                <Button 
                  onClick={guardarEjercicio}
                  className="bg-red-600 hover:bg-red-500"
                >
                  {editandoEjercicio ? 'Actualizar Ejercicio' : 'Agregar Ejercicio'}
                </Button>
              </CardFooter>
            </Card>
          )}

{/* Visualización de Ejercicios */}
          {vistaActual === 'semana' ? (
            <div className="grid grid-cols-1 md:grid-cols-7 gap-4">
              {diasSemana.map((dia) => {
                const ejerciciosDia = ejercicios.filter(ex => isSameDay(dia, ex.fecha))
                return (
                  <div key={dia.toString()} className="border border-red-700 rounded-lg p-3 bg-red-800">
                    <div className="flex justify-between items-center mb-2">
                      <h4 className="font-medium">
                        {format(dia, 'EEEE', { locale: es }).charAt(0).toUpperCase() + 
                         format(dia, 'EEEE', { locale: es }).slice(1)}
                      </h4>
                      <span className="text-sm text-red-300">{format(dia, 'd MMM', { locale: es })}</span>
                    </div>
                    <Button 
                      variant="ghost" 
                      size="sm" 
                      className="w-full mb-2 bg-red-700 hover:bg-red-600"
                      onClick={() => agregarEjercicio(dia)}
                    >
                      <Plus className="h-4 w-4 mr-2" /> Agregar Ejercicio
                    </Button>
                    {ejerciciosDia.length > 0 ? (
                      <div className="space-y-2">
                        {ejerciciosDia.map((ejercicio) => (
                          <div key={ejercicio.id} className="border border-red-700 rounded p-2 bg-red-750">
                            <div className="flex justify-between items-start">
                              <div>
                                <h5 className="font-medium">{ejercicio.nombre}</h5>
                                <div className="flex items-center text-sm text-red-300 mt-1">
                                  <Clock className="h-3 w-3 mr-1" />
                                  <span>{ejercicio.hora} • {ejercicio.duracion} min</span>
                                </div>
                                {ejercicio.descripcion && (
                                  <p className="text-sm mt-1 text-red-200">{ejercicio.descripcion}</p>
                                )}
                              </div>
                              <div className="flex gap-1">
                                <Button 
                                  variant="ghost" 
                                  size="icon" 
                                  className="h-6 w-6 hover:bg-red-700"
                                  onClick={() => editarEjercicio(ejercicio)}
                                >
                                  <Edit className="h-3 w-3" />
                                </Button>
                                <Button 
                                  variant="ghost" 
                                  size="icon" 
                                  className="h-6 w-6 hover:bg-red-700"
                                  onClick={() => eliminarEjercicio(ejercicio.id)}
                                >
                                  <Trash className="h-3 w-3" />
                                </Button>
                              </div>
                            </div>
                          </div>
                        ))}
                      </div>
                    ) : (
                      <p className="text-sm text-red-300 text-center py-2">No hay ejercicios programados</p>
                    )}
                  </div>
                )
              })}
            </div>
          ) : (
            <div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                <Card className="bg-red-700 border-red-600">
                  <CardHeader>
                    <CardTitle className="text-lg">Total de Ejercicios</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-3xl font-bold">{totalEjercicios}</p>
                  </CardContent>
                </Card>
                <Card className="bg-red-700 border-red-600">
                  <CardHeader>
                    <CardTitle className="text-lg">Duración Total</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-3xl font-bold">{duracionTotal} minutos</p>
                  </CardContent>
                </Card>
              </div>

<h4 className="font-medium mb-2">Historial de Ejercicios</h4>
              {ejerciciosFiltrados.length > 0 ? (
                <div className="space-y-2">
                  {ejerciciosFiltrados.map((ejercicio) => (
                    <div key={ejercicio.id} className="border border-red-700 rounded p-3 bg-red-750">
                      <div className="flex justify-between items-start">
                        <div>
                          <h5 className="font-medium">{ejercicio.nombre}</h5>
                          <div className="flex items-center text-sm text-red-300 mt-1">
                            <Calendar className="h-3 w-3 mr-1" />
                            <span>{format(ejercicio.fecha, 'd MMMM, yyyy', { locale: es })}</span>
                            <span className="mx-2">•</span>
                            <Clock className="h-3 w-3 mr-1" />
                            <span>{ejercicio.hora} • {ejercicio.duracion} min</span>
                          </div>
                          {ejercicio.descripcion && (
                            <p className="text-sm mt-1 text-red-200">{ejercicio.descripcion}</p>
                          )}
                        </div>
                        <div className="flex gap-1">
                          <Button 
                            variant="ghost" 
                            size="icon" 
                            className="h-6 w-6 hover:bg-red-700"
                            onClick={() => editarEjercicio(ejercicio)}
                          >
                            <Edit className="h-3 w-3" />
                          </Button>
                          <Button 
                            variant="ghost" 
                            size="icon" 
                            className="h-6 w-6 hover:bg-red-700"
                            onClick={() => eliminarEjercicio(ejercicio.id)}
                          >
                            <Trash className="h-3 w-3" />
                          </Button>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <p className="text-sm text-red-300 text-center py-4">No hay ejercicios registrados</p>
              )}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}</article></body></html>