import { ComboBoxField, TextInputField } from '@/components/form'; import ImageCarousel from '@/components/image-carousel'; import RegisterBannerCard from '@/components/register-banner-card'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from '@/components/ui/card'; import { Flash, showFlash, useFlashToasts, } from '@/components/use-flash-toasts'; import AppLayout from '@/layouts/app-layout'; import { useNfcScanner } from '@/hooks/useNfcScanner'; import { index as nfcIndex, store } from '@/routes/nfc'; import { type BreadcrumbItem, Animal, Auth } from '@/types'; import { Head, useForm, usePage } from '@inertiajs/react'; import { AlertCircle, ArrowRight, BadgeCheck, CheckCircle2, ScanLine, Smartphone, } from 'lucide-react'; import { useState } from 'react'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'NFC', href: nfcIndex().url, }, ]; interface Props { animals: Animal[]; auth: Auth; [key: string]: unknown; } export default function NFCAdmin() { const { animals, auth, flash } = usePage().props; const user = auth.user; // Estados del procedimiento const [step, setStep] = useState(1); const [error, setError] = useState(''); const [success, setSuccess] = useState(''); // useForm para el formulario principal const { data, setData, post, processing, errors, reset } = useForm({ animal_id: '', uuid: '', user_id: auth.user.id, }); useFlashToasts({ errors }); // Estados para animal seleccionado const [selectedAnimal, setSelectedAnimal] = useState(null); // Hook de NFC Scanner con timeout de 10 segundos const { isScanning, error: nfcError, nfcSupported, scannedCode, timeLeft, startScan, stopScan, clearError: clearNfcError, } = useNfcScanner({ onSuccess: (serialNumber) => { setData('uuid', serialNumber); setError(''); }, onError: (errorMsg) => { console.error('NFC Error:', errorMsg); setError(errorMsg); }, timeout: 10000, // 10 segundos }); // Actualiza el código NFC en el form const setNfcCodeAndForm = (code: string) => { setData('uuid', code); }; // Actualiza el animal seleccionado en el form const setSelectedAnimalAndForm = (animal: Animal | null) => { setSelectedAnimal(animal); setData('animal_id', animal?.id || ''); }; const handleNextStep = () => { if (step === 1 && data.uuid.trim()) { setStep(2); setError(''); clearNfcError(); } else if (step === 2 && selectedAnimal) { setStep(3); setError(''); } }; const handleConfirm = (e?: React.FormEvent) => { if (e) e.preventDefault(); if (processing) return; post(store().url, { preserveScroll: true, onSuccess: (page) => { const flashMsg = page.props.flash as Flash; showFlash(flashMsg); setSuccess( `✓ NFC ${data.uuid} vinculado exitosamente al animal: ${selectedAnimal?.name}`, ); setTimeout(() => { handleReset(); }, 3000); }, onError: () => { setError( 'No se pudo vincular el NFC. Revisa los datos e intenta de nuevo.', ); }, }); }; const handleReset = () => { setStep(1); setSelectedAnimal(null); setError(''); setSuccess(''); clearNfcError(); stopScan(); reset(); }; console.log('ANimals:', animals); const displayError = nfcError || error; return (
{/* Indicador de pasos - Responsive */}
{/* Paso 1 */}
= 1 ? 'text-primary' : 'text-muted-foreground'}`} >
= 1 ? 'border-primary bg-primary text-primary-foreground' : 'border-muted-foreground'}`} > {step > 1 ? ( ) : ( )}
Código NFC
{/* Paso 2 */}
= 2 ? 'text-primary' : 'text-muted-foreground'}`} >
= 2 ? 'border-primary bg-primary text-primary-foreground' : 'border-muted-foreground'}`} > {step > 2 ? ( ) : ( '2' )}
Seleccionar Animal
{/* Paso 3 */}
= 3 ? 'text-primary' : 'text-muted-foreground'}`} >
= 3 ? 'border-primary bg-primary text-primary-foreground' : 'border-muted-foreground'}`} >
Confirmar
{/* Paso 1: Obtener código NFC */} {step === 1 && ( Paso 1: Obtener Código NFC Escanea el chip NFC o ingresa el código manualmente {/* Botón de escaneo usando el hook */}
{isScanning && (

🔍 Acerca el chip NFC...

{/* Barra de progreso */}
)} {scannedCode && !isScanning && (

Código escaneado: {scannedCode}

)}
{/* Separador */}
O ingresa manualmente
{/* Input manual */} setNfcCodeAndForm(v)} error={errors.uuid} placeholder="Ejemplo: 04:A1:B2:C3:D4:E5:F6" className="font-mono text-sm md:text-base" disabled={isScanning} /> {data.uuid && !isScanning && (

Código detectado: {data.uuid}

)} )} {/* Paso 2: Seleccionar animal */} {step === 2 && ( Paso 2: Seleccionar Animal Elige el animal que deseas vincular con el código NFC:{' '} {data.uuid} {/* ComboBoxField para animal */} { const animal = animals.find( (a) => a.id === Number(v), ); setSelectedAnimalAndForm(animal || null); }} options={animals.map((animal) => ({ value: animal.id, label: `${animal.name} - ${animal.breed?.name || 'Raza desconocida'}`, }))} error={errors.animal_id} placeholder="Selecciona un animal" /> {selectedAnimal && (

Animal seleccionado:{' '} {selectedAnimal.name}

)}
)} {/* Paso 3: Confirmar */} {step === 3 && ( Paso 3: Confirmar Vinculación Revisa y confirma la vinculación del chip NFC con el animal seleccionado.
{/* Columna 1: Carrusel de imágenes (30%) */}
0 ? selectedAnimal.gallery : selectedAnimal?.main_photo ? [ selectedAnimal.main_photo, ] : ['/placeholder.svg'] } name={ selectedAnimal?.name || '' } />
{/* Columna 2: Info (70%) */}
Nombre: {selectedAnimal?.name}
Código NFC: {data.uuid}
Sexo: {selectedAnimal?.sex === 'F' ? 'Hembra' : selectedAnimal?.sex === 'M' ? 'Macho' : '-'}
Edad: {selectedAnimal?.birth_date ? `${Math.floor((new Date().getTime() - new Date(selectedAnimal.birth_date).getTime()) / (365.25 * 24 * 60 * 60 * 1000))} años` : '-'}
{/*
Registrado por: {user.name}
*/}
Raza: {selectedAnimal?.breed ? selectedAnimal.breed .name : 'Desconocida'}
Propietario: { selectedAnimal?.owner ?.name }
)} {/* Mensajes de error y éxito */} {displayError && (

{displayError}

)} {success && (

{success}

)} {/* Información sobre NFC */} {!nfcSupported && ( Información sobre NFC Web
  • • Web NFC API solo funciona en dispositivos Android con Chrome/Edge
  • • Requiere HTTPS (conexión segura)
  • • El usuario debe dar permisos de NFC
  • • iOS no soporta Web NFC API actualmente
)}
); }