import React, { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Badge } from '@/components/ui/badge';
import { 
  QrCode, 
  Scan, 
  UserCheck, 
  Calendar,
  Clock,
  MapPin,
  CreditCard,
  CheckCircle,
  Download,
  Mail
} from 'lucide-react';
import { useToast } from '@/hooks/use-toast';

interface CheckInData {
  reservationId: string;
  guestName: string;
  roomNumber: string;
  checkIn: string;
  checkOut: string;
  adults: number;
  children: number;
}

const CheckInSystem = () => {
  const { toast } = useToast();
  const [scanMode, setScanMode] = useState(false);
  const [reservationCode, setReservationCode] = useState('');
  const [checkInData, setCheckInData] = useState<CheckInData | null>(null);
  const [isProcessing, setIsProcessing] = useState(false);

  const handleSearchReservation = () => {
    setIsProcessing(true);
    
    // Simular búsqueda
    setTimeout(() => {
      setCheckInData({
        reservationId: reservationCode || 'RES-2025-001',
        guestName: 'Juan Pérez García',
        roomNumber: '305',
        checkIn: '2025-01-15',
        checkOut: '2025-01-20',
        adults: 2,
        children: 1
      });
      setIsProcessing(false);
      toast({
        title: "Reserva Encontrada",
        description: "La información de la reserva ha sido cargada.",
      });
    }, 1500);
  };

  const handleCheckIn = () => {
    if (!checkInData) return;
    
    setIsProcessing(true);
    
    setTimeout(() => {
      toast({
        title: "Check-in Exitoso",
        description: `Habitación ${checkInData.roomNumber} asignada a ${checkInData.guestName}`,
      });
      setIsProcessing(false);
      
      // Reset
      setCheckInData(null);
      setReservationCode('');
    }, 2000);
  };

  const generateQRCode = () => {
    toast({
      title: "Código QR Generado",
      description: "El código QR ha sido enviado al huésped por email.",
    });
  };

  return (
    <div className="space-y-6">
      {/* Search Reservation */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Scan className="w-5 h-5" />
            Buscar Reserva
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="md:col-span-2">
              <Label htmlFor="reservation">Código de Reserva o Email</Label>
              <Input
                id="reservation"
                placeholder="RES-2025-001 o email@ejemplo.com"
                value={reservationCode}
                onChange={(e) => setReservationCode(e.target.value)}
                onKeyPress={(e) => e.key === 'Enter' && handleSearchReservation()}
              />
            </div>
            <div className="flex items-end gap-2">
              <Button 
                onClick={handleSearchReservation}
                disabled={isProcessing}
                className="flex-1"
              >
                <UserCheck className="w-4 h-4 mr-2" />
                Buscar
              </Button>
              <Button 
                variant="outline"
                onClick={() => setScanMode(!scanMode)}
              >
                <QrCode className="w-4 h-4" />
              </Button>
            </div>
          </div>

          {scanMode && (
            <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
              <QrCode className="w-16 h-16 mx-auto mb-4 text-gray-400" />
              <p className="text-gray-600 mb-2">Escanea el código QR de la reserva</p>
              <p className="text-sm text-gray-500">El huésped puede mostrar el QR desde su email de confirmación</p>
            </div>
          )}
        </CardContent>
      </Card>

      {/* Reservation Details */}
      {checkInData && (
        <>
          <Card className="border-l-4 border-l-green-500">
            <CardHeader>
              <div className="flex items-center justify-between">
                <CardTitle>Detalles de la Reserva</CardTitle>
                <Badge variant="outline" className="text-green-600 border-green-600">
                  Confirmada
                </Badge>
              </div>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-3">
                  <div>
                    <Label className="text-gray-600">Huésped Principal</Label>
                    <p className="text-lg font-semibold">{checkInData.guestName}</p>
                  </div>
                  <div>
                    <Label className="text-gray-600">ID de Reserva</Label>
                    <p className="font-mono">{checkInData.reservationId}</p>
                  </div>
                  <div>
                    <Label className="text-gray-600">Habitación Asignada</Label>
                    <p className="text-2xl font-bold text-blue-600">#{checkInData.roomNumber}</p>
                  </div>
                </div>

                <div className="space-y-3">
                  <div className="flex items-center gap-2">
                    <Calendar className="w-5 h-5 text-gray-500" />
                    <div>
                      <Label className="text-gray-600">Check-in</Label>
                      <p className="font-semibold">{checkInData.checkIn}</p>
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <Calendar className="w-5 h-5 text-gray-500" />
                    <div>
                      <Label className="text-gray-600">Check-out</Label>
                      <p className="font-semibold">{checkInData.checkOut}</p>
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <Clock className="w-5 h-5 text-gray-500" />
                    <div>
                      <Label className="text-gray-600">Hora de entrada</Label>
                      <p className="font-semibold">15:00</p>
                    </div>
                  </div>
                </div>
              </div>

              <div className="flex items-center gap-4 pt-4 border-t">
                <Badge variant="secondary">
                  {checkInData.adults} Adulto(s)
                </Badge>
                {checkInData.children > 0 && (
                  <Badge variant="secondary">
                    {checkInData.children} Niño(s)
                  </Badge>
                )}
              </div>
            </CardContent>
          </Card>

          {/* Actions */}
          <Card>
            <CardHeader>
              <CardTitle>Acciones de Check-in</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <Button 
                  onClick={handleCheckIn}
                  disabled={isProcessing}
                  size="lg"
                  className="h-20 flex-col gap-2"
                >
                  <CheckCircle className="w-6 h-6" />
                  <span>Completar Check-in</span>
                </Button>
                <Button 
                  onClick={generateQRCode}
                  variant="outline"
                  size="lg"
                  className="h-20 flex-col gap-2"
                >
                  <QrCode className="w-6 h-6" />
                  <span>Generar Código QR</span>
                </Button>
                <Button 
                  variant="outline"
                  size="lg"
                  className="h-20 flex-col gap-2"
                >
                  <Mail className="w-6 h-6" />
                  <span>Enviar Confirmación</span>
                </Button>
                <Button 
                  variant="outline"
                  size="lg"
                  className="h-20 flex-col gap-2"
                >
                  <Download className="w-6 h-6" />
                  <span>Imprimir Voucher</span>
                </Button>
              </div>

              <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mt-4">
                <h4 className="font-semibold text-blue-900 mb-2 flex items-center gap-2">
                  <CreditCard className="w-5 h-5" />
                  Información de Pago
                </h4>
                <div className="space-y-2 text-sm">
                  <div className="flex justify-between">
                    <span>Tarifa por noche:</span>
                    <span className="font-semibold">$150.00</span>
                  </div>
                  <div className="flex justify-between">
                    <span>Noches:</span>
                    <span className="font-semibold">5</span>
                  </div>
                  <div className="flex justify-between">
                    <span>Impuestos (18%):</span>
                    <span className="font-semibold">$135.00</span>
                  </div>
                  <div className="flex justify-between border-t pt-2 text-base">
                    <span className="font-bold">Total:</span>
                    <span className="font-bold text-green-600">$885.00</span>
                  </div>
                  <div className="pt-2">
                    <Badge className="bg-green-100 text-green-800">
                      ✓ Pago Confirmado
                    </Badge>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </>
      )}

      {/* Quick Stats */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-600">Check-ins Hoy</p>
                <p className="text-2xl font-bold">15</p>
              </div>
              <CheckCircle className="w-8 h-8 text-green-500" />
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-600">Pendientes</p>
                <p className="text-2xl font-bold">8</p>
              </div>
              <Clock className="w-8 h-8 text-orange-500" />
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-600">Check-outs Hoy</p>
                <p className="text-2xl font-bold">12</p>
              </div>
              <MapPin className="w-8 h-8 text-blue-500" />
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
};

export default CheckInSystem;
