import { useState } from «react»; import { Card, CardContent } from «@/components/ui/card»; import { Button } from «@/components/ui/button»; import { Input } from «@/components/ui/input»; import { Select, SelectTrigger, SelectContent, SelectItem } from «@/components/ui/select»; import { Calendar } from «@/components/ui/calendar»; import { format } from «date-fns»; import DOMPurify from «dompurify»; // Protección contra XSS export default function CitaTaller() { const [nombre, setNombre] = useState(«»); const [documento, setDocumento] = useState(«»); const [tipoDocumento, setTipoDocumento] = useState(«DNI»); const [modelo, setModelo] = useState(«»); const [kilometraje, setKilometraje] = useState(«»); const [placa, setPlaca] = useState(«»); const [fecha, setFecha] = useState(new Date()); const [servicio, setServicio] = useState(«»); const validarFormulario = () => { const regexDNI = /^[0-9]{8}$/; const regexCarnet = /^[A-Za-z0-9]{9,12}$/; const regexPlaca = /^[A-Za-z0-9-]{6,8}$/; const regexKilometraje = /^[0-9]+$/; if (!nombre.trim()) return «El nombre es obligatorio.»; if (tipoDocumento === «DNI» && !regexDNI.test(documento)) return «DNI inválido.»; if (tipoDocumento === «Carnet de Extranjería» && !regexCarnet.test(documento)) return «Carnet inválido.»; if (!regexPlaca.test(placa)) return «Placa inválida.»; if (!regexKilometraje.test(kilometraje)) return «Kilometraje inválido.»; if (!servicio) return «Debe seleccionar un servicio.»; return null; }; const handleSubmit = async (e) => { e.preventDefault(); const error = validarFormulario(); if (error) return alert(error); const mensaje = `Cita agendada para ${nombre}, Documento: ${documento}, Modelo: ${modelo}, Kilometraje: ${kilometraje}, Placa: ${placa}, el ${format(fecha, «dd/MM/yyyy»)} para ${servicio}`; // Sanitizar el mensaje para evitar XSS const mensajeSeguro = DOMPurify.sanitize(mensaje); await fetch(«/api/enviarCorreo», { method: «POST», headers: { «Content-Type»: «application/json» }, body: JSON.stringify({ to: «servicio@ciareyes.com», cc: «fanny.taller@ciareyes.com», subject: «Nueva cita agendada», text: mensajeSeguro, }), }); // Envío de WhatsApp (puedes agregar validaciones en backend para evitar abuso) await fetch(«https://api.whatsapp.com/send?phone=51965687507&text=» + encodeURIComponent(mensajeSeguro)); alert(«Cita enviada con éxito.»); }; return ( <div className=»flex flex-col items-center justify-center min-h-screen bg-gradient-to-r from-gray-200 to-gray-100 p-4″> <Card className=»w-full max-w-md p-6 bg-white shadow-2xl rounded-2xl border border-gray-300″> <CardContent> <h2 className=»text-2xl font-bold text-center text-gray-800 mb-6″>Agenda tu cita</h2> <form onSubmit={handleSubmit} className=»space-y-4″> <Input placeholder=»Nombres completos» value={nombre} onChange={(e) => setNombre(e.target.value)} required /> <Select value={tipoDocumento} onValueChange={setTipoDocumento} required> <SelectTrigger>Tipo de documento</SelectTrigger> <SelectContent> <SelectItem value=»DNI»>DNI</SelectItem> <SelectItem value=»Carnet de Extranjería»>Carnet de Extranjería</SelectItem> </SelectContent> </Select> <Input placeholder=»Número de documento» value={documento} onChange={(e) => setDocumento(e.target.value)} required /> <Input placeholder=»Modelo del vehículo» value={modelo} onChange={(e) => setModelo(e.target.value)} required /> <Input placeholder=»Kilometraje actual» type=»number» value={kilometraje} onChange={(e) => setKilometraje(e.target.value)} required /> <Input placeholder=»Placa» value={placa} onChange={(e) => setPlaca(e.target.value)} required /> <Select value={servicio} onValueChange={setServicio} required> <SelectTrigger>Selecciona un servicio</SelectTrigger> <SelectContent> <SelectItem value=»500 km»>500 km</SelectItem> <SelectItem value=»2000 km»>2000 km</SelectItem> <SelectItem value=»4000 km»>4000 km</SelectItem> <SelectItem value=»6000 km»>6000 km</SelectItem> <SelectItem value=»8000 km»>8000 km</SelectItem> <SelectItem value=»10000 km»>10000 km</SelectItem> <SelectItem value=»12000 km a más»>12000 km a más</SelectItem> <SelectItem value=»Mantenimiento preventivo»>Mantenimiento preventivo</SelectItem> <SelectItem value=»Mantenimiento correctivo»>Mantenimiento correctivo</SelectItem> <SelectItem value=»Mantenimiento general»>Mantenimiento general</SelectItem> </SelectContent> </Select> <Calendar selected={fecha} onSelect={setFecha} inline /> <Button type=»submit» className=»w-full bg-blue-600 text-white hover:bg-blue-700 transition rounded-lg py-2″>Agendar Cita</Button> </form> </CardContent> </Card> </div> ); }