import { useState } from 'react' import { Button } from "/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "/components/ui/card" import { Input } from "/components/ui/input" import { Label } from "/components/ui/label" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "/components/ui/table" import { Calendar, User, Clock, Check, Plus, Edit, Trash } from "lucide-react" type Prospecto = { id: string identificacion: string nombreCompleto: string fechaContactoInicial: string datosContacto: string direccion?: string estado: 'nuevo' | 'contactado' | 'interesado' | 'no-interesado' tipoServicio: string fechaUltimaInteraccion: string notas: string } type ServicioAgendado = { id: string nombreCliente: string servicio: string fechaServicio: string detalles: string estado: 'programado' | 'completado' | 'cancelado' | 'reprogramado' notas: string } type EventoCalendario = { id: string fecha: string cliente: string servicio: string tecnico: string notas: string archivos?: string } export default function GestionClientes() { const [seccionActiva, setSeccionActiva] = useState<'prospectos' | 'agenda' | 'calendario'>('prospectos') // Estado para prospectos const [prospectos, setProspectos] = useState([]) const [formularioProspecto, setFormularioProspecto] = useState>({ identificacion: '', nombreCompleto: '', fechaContactoInicial: new Date().toISOString().split('T')[0], datosContacto: '', direccion: '', estado: 'nuevo', tipoServicio: '', fechaUltimaInteraccion: new Date().toISOString().split('T')[0], notas: '' }) const [editandoProspectoId, setEditandoProspectoId] = useState(null) // Estado para agenda const [servicios, setServicios] = useState([]) const [formularioServicio, setFormularioServicio] = useState>({ nombreCliente: '', servicio: '', fechaServicio: new Date().toISOString().split('T')[0], detalles: '', estado: 'programado', notas: '' }) const [editandoServicioId, setEditandoServicioId] = useState(null) // Estado para calendario const [eventos, setEventos] = useState([]) const [formularioEvento, setFormularioEvento] = useState>({ fecha: new Date().toISOString().split('T')[0], cliente: '', servicio: '', tecnico: '', notas: '', archivos: '' }) const [editandoEventoId, setEditandoEventoId] = useState(null) // Manejadores para prospectos const manejarProspecto = (e: React.FormEvent) => { e.preventDefault() if (editandoProspectoId) { setProspectos(prospectos.map(p => p.id === editandoProspectoId ? { ...formularioProspecto, id: editandoProspectoId } : p )) setEditandoProspectoId(null) } else { setProspectos([...prospectos, { ...formularioProspecto, id: Date.now().toString() }]) } setFormularioProspecto({ identificacion: '', nombreCompleto: '', fechaContactoInicial: new Date().toISOString().split('T')[0], datosContacto: '', direccion: '', estado: 'nuevo', tipoServicio: '', fechaUltimaInteraccion: new Date().toISOString().split('T')[0], notas: '' }) } const editarProspecto = (prospecto: Prospecto) => { setFormularioProspecto({ identificacion: prospecto.identificacion, nombreCompleto: prospecto.nombreCompleto, fechaContactoInicial: prospecto.fechaContactoInicial, datosContacto: prospecto.datosContacto, direccion: prospecto.direccion || '', estado: prospecto.estado, tipoServicio: prospecto.tipoServicio, fechaUltimaInteraccion: prospecto.fechaUltimaInteraccion, notas: prospecto.notas }) setEditandoProspectoId(prospecto.id) } const eliminarProspecto = (id: string) => { setProspectos(prospectos.filter(p => p.id !== id)) } // Manejadores para agenda const manejarServicio = (e: React.FormEvent) => { e.preventDefault() if (editandoServicioId) { setServicios(servicios.map(s => s.id === editandoServicioId ? { ...formularioServicio, id: editandoServicioId } : s )) setEditandoServicioId(null) } else { setServicios([...servicios, { ...formularioServicio, id: Date.now().toString() }]) } setFormularioServicio({ nombreCliente: '', servicio: '', fechaServicio: new Date().toISOString().split('T')[0], detalles: '', estado: 'programado', notas: '' }) } const editarServicio = (servicio: ServicioAgendado) => { setFormularioServicio({ nombreCliente: servicio.nombreCliente, servicio: servicio.servicio, fechaServicio: servicio.fechaServicio, detalles: servicio.detalles, estado: servicio.estado, notas: servicio.notas }) setEditandoServicioId(servicio.id) } const eliminarServicio = (id: string) => { setServicios(servicios.filter(s => s.id !== id)) } // Manejadores para calendario const manejarEvento = (e: React.FormEvent) => { e.preventDefault() if (editandoEventoId) { setEventos(eventos.map(e => e.id === editandoEventoId ? { ...formularioEvento, id: editandoEventoId } : e )) setEditandoEventoId(null) } else { setEventos([...eventos, { ...formularioEvento, id: Date.now().toString() }]) } setFormularioEvento({ fecha: new Date().toISOString().split('T')[0], cliente: '', servicio: '', tecnico: '', notas: '', archivos: '' }) } const editarEvento = (evento: EventoCalendario) => { setFormularioEvento({ fecha: evento.fecha, cliente: evento.cliente, servicio: evento.servicio, tecnico: evento.tecnico, notas: evento.notas, archivos: evento.archivos || '' }) setEditandoEventoId(evento.id) } const eliminarEvento = (id: string) => { setEventos(eventos.filter(e => e.id !== id)) } return (

Gestión de Clientes y Servicios

{/* Sección de Prospectos */} {seccionActiva === 'prospectos' && (

Identificación setFormularioProspecto({...formularioProspecto, identificacion: e.target.value})} required />

Nombre completo setFormularioProspecto({...formularioProspecto, nombreCompleto: e.target.value})} required />

Fecha de contacto inicial setFormularioProspecto({...formularioProspecto, fechaContactoInicial: e.target.value})} required />

Datos de contacto setFormularioProspecto({...formularioProspecto, datosContacto: e.target.value})} required />

Dirección (opcional) setFormularioProspecto({...formularioProspecto, direccion: e.target.value})} />

Estado del prospecto

Tipo de servicio interesado setFormularioProspecto({...formularioProspecto, tipoServicio: e.target.value})} required />

Fecha de la última interacción setFormularioProspecto({...formularioProspecto, fechaUltimaInteraccion: e.target.value})} required />

Notas adicionales

setFormularioProspecto({...formularioProspecto, notas: e.target.value})}
                  />
                </div>
                <div className="md:col-span-2">
                  <Button type="submit">
                    {editandoProspectoId ? 'Actualizar prospecto' : 'Agregar prospecto'}
                  </Button>
                </div>
              </form>

<div className="border rounded-lg">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>ID</TableHead>
                      <TableHead>Nombre</TableHead>
                      <TableHead>Contacto</TableHead>
                      <TableHead>Tipo servicio</TableHead>
                      <TableHead>Estado</TableHead>
                      <TableHead>Última interacción</TableHead>
                      <TableHead>Acciones</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {prospectos.length > 0 ? (
                      prospectos.map((prospecto) => (
                        <TableRow key={prospecto.id}>
                          <TableCell>{prospecto.identificacion}</TableCell>
                          <TableCell>{prospecto.nombreCompleto}</TableCell>
                          <TableCell>{prospecto.datosContacto}</TableCell>
                          <TableCell>{prospecto.tipoServicio}</TableCell>
                          <TableCell>
                            <span className={`px-2 py-1 rounded-full text-xs ${
                              prospecto.estado === 'nuevo' ? 'bg-blue-100 text-blue-800' :
                              prospecto.estado === 'contactado' ? 'bg-yellow-100 text-yellow-800' :
                              prospecto.estado === 'interesado' ? 'bg-green-100 text-green-800' :
                              'bg-red-100 text-red-800'
                            }`}>
                              {prospecto.estado}
                            </span>
                          </TableCell>
                          <TableCell>{new Date(prospecto.fechaUltimaInteraccion).toLocaleDateString('es-MX')}</TableCell>
                          <TableCell className="flex gap-2">
                            <Button variant="outline" size="sm" onClick={() => editarProspecto(prospecto)}>
                              <Edit className="h-4 w-4" />
                            </Button>
                            <Button variant="outline" size="sm" onClick={() => eliminarProspecto(prospecto.id)}>
                              <Trash className="h-4 w-4" />
                            </Button>
                          </TableCell>
                        </TableRow>
                      ))
                    ) : (
                      <TableRow>
                        <TableCell colSpan={7} className="text-center py-4">
                          No hay prospectos registrados
                        </TableCell>
                      </TableRow>
                    )}
                  </TableBody>
                </Table>
              </div>
            </div>
          )}

{/* Sección de Agenda */}
          {seccionActiva === 'agenda' && (
            <div>
              <form onSubmit={manejarServicio} className="mb-6 grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="nombreCliente">Nombre del cliente</Label>
                  <Input
                    id="nombreCliente"
                    value={formularioServicio.nombreCliente}
                    onChange={(e) => setFormularioServicio({...formularioServicio, nombreCliente: e.target.value})}
                    required
                  />
                </div>
                <div>
                  <Label htmlFor="servicio">Servicio contratado o interés</Label>
                  <Input
                    id="servicio"
                    value={formularioServicio.servicio}
                    onChange={(e) => setFormularioServicio({...formularioServicio, servicio: e.target.value})}
                    required
                  />
                </div>
                <div>
                  <Label htmlFor="fechaServicio">Fecha de servicio o próxima cita</Label>
                  <Input
                    id="fechaServicio"
                    type="date"
                    value={formularioServicio.fechaServicio}
                    onChange={(e) => setFormularioServicio({...formularioServicio, fechaServicio: e.target.value})}
                    required
                  />
                </div>
                <div>
                  <Label htmlFor="estado">Estado del servicio</Label>
                  <select
                    id="estado"
                    className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                    value={formularioServicio.estado}
                    onChange={(e) => setFormularioServicio({...formularioServicio, estado: e.target.value as any})}
                    required
                  >
                    <option value="programado">Programado</option>
                    <option value="completado">Completado</option>
                    <option value="cancelado">Cancelado</option>
                    <option value="reprogramado">Reprogramado</option>
                  </select>
                </div>
                <div className="md:col-span-2">
                  <Label htmlFor="detalles">Detalles del servicio</Label>
                  <Input
                    id="detalles"
                    value={formularioServicio.detalles}
                    onChange={(e) => setFormularioServicio({...formularioServicio, detalles: e.target.value})}
                  />
                </div>
                <div className="md:col-span-2">
                  <Label htmlFor="notas">Notas</Label>
                  <textarea
                    id="notas"
                    className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                    value={formularioServicio.notas}
                    onChange={(e) => setFormularioServicio({...formularioServicio, notas: e.target.value})}
                  />
                </div>
                <div className="md:col-span-2">
                  <Button type="submit">
                    {editandoServicioId ? 'Actualizar servicio' : 'Agregar servicio'}
                  </Button>
                </div>
              </form>

<div className="border rounded-lg">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Cliente</TableHead>
                      <TableHead>Servicio</TableHead>
                      <TableHead>Fecha</TableHead>
                      <TableHead>Estado</TableHead>
                      <TableHead>Acciones</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {servicios.length > 0 ? (
                      servicios.map((servicio) => (
                        <TableRow key={servicio.id}>
                          <TableCell>{servicio.nombreCliente}</TableCell>
                          <TableCell>{servicio.servicio}</TableCell>
                          <TableCell>{new Date(servicio.fechaServicio).toLocaleDateString('es-MX')}</TableCell>
                          <TableCell>
                            <span className={`px-2 py-1 rounded-full text-xs ${
                              servicio.estado === 'programado' ? 'bg-blue-100 text-blue-800' :
                              servicio.estado === 'completado' ? 'bg-green-100 text-green-800' :
                              servicio.estado === 'reprogramado' ? 'bg-yellow-100 text-yellow-800' :
                              'bg-red-100 text-red-800'
                            }`}>
                              {servicio.estado}
                            </span>
                          </TableCell>
                          <TableCell className="flex gap-2">
                            <Button variant="outline" size="sm" onClick={() => editarServicio(servicio)}>
                              <Edit className="h-4 w-4" />
                            </Button>
                            <Button variant="outline" size="sm" onClick={() => eliminarServicio(servicio.id)}>
                              <Trash className="h-4 w-4" />
                            </Button>
                          </TableCell>
                        </TableRow>
                      ))
                    ) : (
                      <TableRow>
                        <TableCell colSpan={5} className="text-center py-4">
                          No hay servicios agendados
                        </TableCell>
                      </TableRow>
                    )}
                  </TableBody>
                </Table>
              </div>
            </div>
          )}

{/* Sección de Calendario */}
          {seccionActiva === 'calendario' && (
            <div>
              <form onSubmit={manejarEvento} className="mb-6 grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="fecha">Fecha</Label>
                  <Input
                    id="fecha"
                    type="date"
                    value={formularioEvento.fecha}
                    onChange={(e) => setFormularioEvento({...formularioEvento, fecha: e.target.value})}
                    required
                  />
                </div>
                <div>
                  <Label htmlFor="cliente">Cliente</Label>
                  <Input
                    id="cliente"
                    value={formularioEvento.cliente}
                    onChange={(e) => setFormularioEvento({...formularioEvento, cliente: e.target.value})}
                    required
                  />
                </div>
                <div>
                  <Label htmlFor="servicio">Servicio realizado</Label>
                  <Input
                    id="servicio"
                    value={formularioEvento.servicio}
                    onChange={(e) => setFormularioEvento({...formularioEvento, servicio: e.target.value})}
                    required
                  />
                </div>
                <div>
                  <Label htmlFor="tecnico">Técnico o responsable</Label>
                  <Input
                    id="tecnico"
                    value={formularioEvento.tecnico}
                    onChange={(e) => setFormularioEvento({...formularioEvento, tecnico: e.target.value})}
                  />
                </div>
                <div className="md:col-span-2">
                  <Label htmlFor="archivos">Fotos o documentos adjuntos (opcional)</Label>
                  <Input
                    id="archivos"
                    type="file"
                    onChange={(e) => setFormularioEvento({...formularioEvento, archivos: e.target.files?.[0]?.name || ''})}
                  />
                </div>
                <div className="md:col-span-2">
                  <Label htmlFor="notas">Notas</Label>
                  <textarea
                    id="notas"
                    className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                    value={formularioEvento.notas}
                    onChange={(e) => setFormularioEvento({...formularioEvento, notas: e.target.value})}
                  />
                </div>
                <div className="md:col-span-2">
                  <Button type="submit">
                    {editandoEventoId ? 'Actualizar evento' : 'Agregar evento'}
                  </Button>
                </div>
              </form>

<div className="border rounded-lg">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Fecha</TableHead>
                      <TableHead>Cliente</TableHead>
                      <TableHead>Servicio</TableHead>
                      <TableHead>Técnico</TableHead>
                      <TableHead>Archivos</TableHead>
                      <TableHead>Acciones</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {eventos.length > 0 ? (
                      eventos.map((evento) => (
                        <TableRow key={evento.id}>
                          <TableCell>{new Date(evento.fecha).toLocaleDateString('es-MX')}</TableCell>
                          <TableCell>{evento.cliente}</TableCell>
                          <TableCell>{evento.servicio}</TableCell>
                          <TableCell>{evento.tecnico}</TableCell>
                          <TableCell>{evento.archivos || 'N/A'}</TableCell>
                          <TableCell className="flex gap-2">
                            <Button variant="outline" size="sm" onClick={() => editarEvento(evento)}>
                              <Edit className="h-4 w-4" />
                            </Button>
                            <Button variant="outline" size="sm" onClick={() => eliminarEvento(evento.id)}>
                              <Trash className="h-4 w-4" />
                            </Button>
                          </TableCell>
                        </TableRow>
                      ))
                    ) : (
                      <TableRow>
                        <TableCell colSpan={6} className="text-center py-4">
                          No hay eventos registrados
                        </TableCell>
                      </TableRow>
                    )}
                  </TableBody>
                </Table>
              </div>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}</article></body></html>