import React from 'react';
import { Outlet, useLocation } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { PageHeader } from '../../../components/layout/PageHeader/PageHeader';
import { Database, Package, ShoppingCart, Truck, Settings, Users, MessageSquare } from 'lucide-react';

const DatabasePage: React.FC = () => {
  const { t } = useTranslation();
  const location = useLocation();
  const isParentRoute = location.pathname === '/app/database';

  if (!isParentRoute) {
    return <Outlet />;
  }

  return (
    <div className="p-6 space-y-6">
      <PageHeader
        title={t('database:title', 'Mi Panadería')}
        description={t('database:subtitle', 'Consulta y gestiona toda la información de tu panadería')}
      />

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div className="bg-white rounded-lg border border-gray-200 p-6 hover:shadow-md transition-shadow cursor-pointer">
          <div className="flex items-center space-x-3 mb-4">
            <div className="p-2 bg-blue-100 rounded-lg">
              <Package className="w-6 h-6 text-blue-600" />
            </div>
            <h3 className="text-lg font-semibold text-gray-900">{t('database:sections.recipes.title', 'Recetas')}</h3>
          </div>
          <p className="text-gray-600">{t('database:sections.recipes.description', 'Gestiona las recetas de tus productos')}</p>
        </div>

        <div className="bg-white rounded-lg border border-gray-200 p-6 hover:shadow-md transition-shadow cursor-pointer">
          <div className="flex items-center space-x-3 mb-4">
            <div className="p-2 bg-green-100 rounded-lg">
              <ShoppingCart className="w-6 h-6 text-green-600" />
            </div>
            <h3 className="text-lg font-semibold text-gray-900">{t('database:sections.orders.title', 'Pedidos')}</h3>
          </div>
          <p className="text-gray-600">{t('database:sections.orders.description', 'Consulta el estado de todos los pedidos')}</p>
        </div>


        <div className="bg-white rounded-lg border border-gray-200 p-6 hover:shadow-md transition-shadow cursor-pointer">
          <div className="flex items-center space-x-3 mb-4">
            <div className="p-2 bg-yellow-100 rounded-lg">
              <Truck className="w-6 h-6 text-yellow-600" />
            </div>
            <h3 className="text-lg font-semibold text-gray-900">{t('database:sections.suppliers.title', 'Proveedores')}</h3>
          </div>
          <p className="text-gray-600">{t('database:sections.suppliers.description', 'Gestiona tus proveedores')}</p>
        </div>

        <div className="bg-white rounded-lg border border-gray-200 p-6 hover:shadow-md transition-shadow cursor-pointer">
          <div className="flex items-center space-x-3 mb-4">
            <div className="p-2 bg-red-100 rounded-lg">
              <Database className="w-6 h-6 text-red-600" />
            </div>
            <h3 className="text-lg font-semibold text-gray-900">{t('database:sections.inventory.title', 'Inventario')}</h3>
          </div>
          <p className="text-gray-600">{t('database:sections.inventory.description', 'Estado actual del inventario')}</p>
        </div>

        <div className="bg-white rounded-lg border border-gray-200 p-6 hover:shadow-md transition-shadow cursor-pointer">
          <div className="flex items-center space-x-3 mb-4">
            <div className="p-2 bg-indigo-100 rounded-lg">
              <Settings className="w-6 h-6 text-indigo-600" />
            </div>
            <h3 className="text-lg font-semibold text-gray-900">{t('database:sections.bakery_config.title', 'Configuración de Panadería')}</h3>
          </div>
          <p className="text-gray-600">{t('database:sections.bakery_config.description', 'Configuración general de tu panadería')}</p>
        </div>

        <div className="bg-white rounded-lg border border-gray-200 p-6 hover:shadow-md transition-shadow cursor-pointer">
          <div className="flex items-center space-x-3 mb-4">
            <div className="p-2 bg-orange-100 rounded-lg">
              <Users className="w-6 h-6 text-orange-600" />
            </div>
            <h3 className="text-lg font-semibold text-gray-900">{t('database:sections.team_management.title', 'Gestión de Equipo')}</h3>
          </div>
          <p className="text-gray-600">{t('database:sections.team_management.description', 'Administra tu equipo de trabajo')}</p>
        </div>

        <div className="bg-white rounded-lg border border-gray-200 p-6 hover:shadow-md transition-shadow cursor-pointer">
          <div className="flex items-center space-x-3 mb-4">
            <div className="p-2 bg-teal-100 rounded-lg">
              <MessageSquare className="w-6 h-6 text-teal-600" />
            </div>
            <h3 className="text-lg font-semibold text-gray-900">{t('database:sections.communication_preferences.title', 'Preferencias de Comunicación')}</h3>
          </div>
          <p className="text-gray-600">{t('database:sections.communication_preferences.description', 'Configura notificaciones y comunicaciones')}</p>
        </div>
      </div>
    </div>
  );
};

export default DatabasePage;