import { Link } from 'react-router-dom';
import { Card, CardContent } from '@/components/ui/card';
import { UtensilsCrossed, QrCode, ChefHat, Receipt, CreditCard, Package, Users as UsersIcon, ArrowRight } from 'lucide-react';

const RestaurantPOS = () => {
  const activeOrders = 12;
  const pendingKitchen = 8;
  const dailyRevenue = 4280;

  const sections = [
    {
      title: 'Terminal POS',
      description: 'Sistema de punto de venta completo',
      icon: CreditCard,
      path: '/dashboard/restaurant/pos',
      color: 'green'
    },
    {
      title: 'Pedidos en Mesa',
      description: 'Gestiona pedidos de todas las mesas',
      icon: Receipt,
      path: '/dashboard/restaurant/orders',
      color: 'blue'
    },
    {
      title: 'Display de Cocina',
      description: 'Vista de pedidos para el equipo de cocina',
      icon: ChefHat,
      path: '/dashboard/restaurant/kitchen',
      color: 'orange'
    },
    {
      title: 'Gestión de Cuentas',
      description: 'Split bill, propinas y cierre de cuentas',
      icon: Receipt,
      path: '/dashboard/restaurant/bills',
      color: 'purple'
    },
    {
      title: 'Configuración de Mesas',
      description: 'Gestiona el layout y estado de las mesas',
      icon: QrCode,
      path: '/dashboard/restaurant/tables',
      color: 'indigo'
    },
    {
      title: 'Menú Digital',
      description: 'Gestiona platos y genera códigos QR',
      icon: UtensilsCrossed,
      path: '/dashboard/restaurant/menu',
      color: 'red'
    },
    {
      title: 'Inventario',
      description: 'Control de stock y reposición de productos',
      icon: Package,
      path: '/dashboard/restaurant/inventory',
      color: 'yellow'
    },
    {
      title: 'Personal del Restaurante',
      description: 'Administra tu equipo de trabajo',
      icon: UsersIcon,
      path: '/dashboard/restaurant/staff',
      color: 'teal'
    }
  ];

  return (
    <div className="container mx-auto p-6 space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold flex items-center gap-2">
            <UtensilsCrossed className="h-8 w-8 text-primary" />
            Restaurant POS
          </h1>
          <p className="text-muted-foreground mt-1">
            Sistema completo de gestión de restaurante
          </p>
        </div>
      </div>

      {/* Stats Overview */}
      <div className="grid gap-4 md:grid-cols-3">
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground mb-1">Pedidos Activos</p>
                <p className="text-2xl font-bold">{activeOrders}</p>
                <p className="text-xs text-muted-foreground">En proceso ahora</p>
              </div>
              <div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
                <Receipt className="w-6 h-6 text-blue-600" />
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground mb-1">En Cocina</p>
                <p className="text-2xl font-bold">{pendingKitchen}</p>
                <p className="text-xs text-muted-foreground">Preparando</p>
              </div>
              <div className="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center">
                <ChefHat className="w-6 h-6 text-orange-600" />
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground mb-1">Ventas del Día</p>
                <p className="text-2xl font-bold">${dailyRevenue.toLocaleString()}</p>
                <p className="text-xs text-green-600">+12% vs ayer</p>
              </div>
              <div className="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
                <QrCode className="w-6 h-6 text-green-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-4">
          {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 mb-2">{section.title}</h3>
                    <p className="text-sm text-muted-foreground">{section.description}</p>
                  </CardContent>
                </Card>
              </Link>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default RestaurantPOS;
