import { Link } from 'react-router-dom';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { 
  Hotel, 
  DoorOpen, 
  BellRing, 
  QrCode, 
  Users, 
  Bed,
  Sparkles,
  ArrowRight,
  Key
} from 'lucide-react';

const HotelManagement = () => {
  const stats = {
    totalRooms: 120,
    occupied: 85,
    available: 25,
    maintenance: 10,
    checkInsToday: 15,
    checkOutsToday: 12,
    roomServiceOrders: 8,
    revenue: 45600
  };

  const occupancyRate = ((stats.occupied / stats.totalRooms) * 100).toFixed(1);

  const sections = [
    {
      title: 'Gestión de Habitaciones',
      description: 'Administra el estado y disponibilidad de habitaciones',
      icon: Bed,
      path: '/dashboard/hotel/rooms',
      color: 'blue'
    },
    {
      title: 'Check-in Digital',
      description: 'Sistema de check-in automático sin contacto',
      icon: DoorOpen,
      path: '/dashboard/hotel/checkin',
      color: 'green'
    },
    {
      title: 'Room Service',
      description: 'Gestión de pedidos de servicio a habitación',
      icon: BellRing,
      path: '/dashboard/hotel/room-service',
      color: 'purple'
    },
    {
      title: 'Acceso sin Llave',
      description: 'Códigos QR y PINs para acceso a habitaciones',
      icon: Key,
      path: '/dashboard/hotel/keyless',
      color: 'orange'
    },
    {
      title: 'Gestión de Personal',
      description: 'Administra el equipo del hotel por departamentos',
      icon: Users,
      path: '/dashboard/hotel/staff',
      color: 'indigo'
    }
  ];

  return (
    <div className="container mx-auto p-6 space-y-6">
      {/* Header */}
      <div className="mb-8">
        <div className="flex items-center gap-3 mb-2">
          <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center">
            <Hotel className="w-6 h-6 text-white" />
          </div>
          <div>
            <h1 className="text-3xl font-bold">Hotel Management</h1>
            <p className="text-muted-foreground">Sistema integral de gestión hotelera</p>
          </div>
        </div>
      </div>

      {/* Overview Stats */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <Card className="border-l-4 border-l-blue-500">
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground mb-1">Ocupación</p>
                <p className="text-2xl font-bold">{occupancyRate}%</p>
                <p className="text-xs text-muted-foreground">{stats.occupied}/{stats.totalRooms} habitaciones</p>
              </div>
              <div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
                <Bed className="w-6 h-6 text-blue-600" />
              </div>
            </div>
          </CardContent>
        </Card>

        <Card className="border-l-4 border-l-green-500">
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground mb-1">Check-ins Hoy</p>
                <p className="text-2xl font-bold">{stats.checkInsToday}</p>
                <p className="text-xs text-muted-foreground">{stats.checkOutsToday} check-outs</p>
              </div>
              <div className="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
                <DoorOpen className="w-6 h-6 text-green-600" />
              </div>
            </div>
          </CardContent>
        </Card>

        <Card className="border-l-4 border-l-purple-500">
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground mb-1">Room Service</p>
                <p className="text-2xl font-bold">{stats.roomServiceOrders}</p>
                <p className="text-xs text-muted-foreground">Pedidos activos</p>
              </div>
              <div className="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center">
                <BellRing className="w-6 h-6 text-purple-600" />
              </div>
            </div>
          </CardContent>
        </Card>

        <Card className="border-l-4 border-l-orange-500">
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground mb-1">Ingresos Hoy</p>
                <p className="text-2xl font-bold">${stats.revenue.toLocaleString()}</p>
                <p className="text-xs text-green-600">+12% vs ayer</p>
              </div>
              <div className="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center">
                <Sparkles className="w-6 h-6 text-orange-600" />
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Sections Grid */}
      <div>
        <h2 className="text-xl font-semibold mb-4">Módulos del Sistema</h2>
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {sections.map((section) => {
            const Icon = section.icon;
            return (
              <Link key={section.path} to={section.path}>
                <Card className="hover:shadow-lg transition-shadow cursor-pointer h-full">
                  <CardContent className="p-6">
                    <div className="flex items-start justify-between mb-4">
                      <div className={`w-12 h-12 rounded-lg bg-${section.color}-100 flex items-center justify-center`}>
                        <Icon className={`w-6 h-6 text-${section.color}-600`} />
                      </div>
                      <ArrowRight className="w-5 h-5 text-muted-foreground" />
                    </div>
                    <h3 className="font-semibold text-lg mb-2">{section.title}</h3>
                    <p className="text-sm text-muted-foreground">{section.description}</p>
                  </CardContent>
                </Card>
              </Link>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default HotelManagement;
