# Sistema de Gestión de Skins - CD-System

## Descripción General

El sistema de gestión de skins permite manejar dinámicamente los estilos CSS del template Porto según la configuración del proyecto. Incluye mapeo automático entre demos y skins, validación de compatibilidad y comandos para gestión.

## Características Principales

### 🎨 Mapeo Automático Demo-Skin
- **Mapeo inteligente**: Cada demo se mapea automáticamente a su skin correspondiente
- **Configuración flexible**: Permite override manual del skin
- **Fallbacks seguros**: Sistema de respaldo si el skin no existe

### 🔧 Comandos Disponibles

#### 1. Gestión de Assets (Mejorado)
```bash
php artisan project:update-assets public/cd-project/assets
```
- Procesa automáticamente archivos `skin-*.css`
- Valida compatibilidad demo-skin
- Proporciona recomendaciones

#### 2. Gestión de Skins
```bash
# Listar skins disponibles
php artisan project:manage-skins list

# Configurar un skin específico
php artisan project:manage-skins set --skin=skin-digital-agency-2

# Validar compatibilidad
php artisan project:manage-skins validate --skin=skin-construction --demo=demo-construction

# Sincronizar desde directorio fuente
php artisan project:manage-skins sync --source=/ruta/a/skins
```

#### 3. Gestión de Skins Internos
```bash
# Ver información de skins disponibles
php artisan project:copy-porto-skins

# Listar todos los skins con detalles
php artisan project:copy-porto-skins --list

# Copiar todos los skins (desde interno)
php artisan project:copy-porto-skins --all

# Copiar skins específicos
php artisan project:copy-porto-skins --skins=skin-construction --skins=skin-digital-agency-2
```

## Configuración

### Archivo de Configuración (`config/cd-system.php`)

```php
'theme' => [
    'demo' => 'demo-construction',
    'skin' => 'auto', // 'auto' para mapeo automático, o nombre específico
    // ...
],
```

### Opciones de Skin:
- `'auto'`: Mapeo automático basado en el demo
- `'skin-nombre'`: Skin específico (ej: `'skin-construction'`)
- `null`: Usa el fallback por defecto

## Funciones Helper Disponibles

### Funciones Principales
```php
// Obtener skin actual (con mapeo automático)
get_theme_skin()

// Obtener demo actual
get_theme_demo()

// Verificar si un skin existe
skin_exists('skin-construction')

// Obtener lista de skins disponibles
get_available_skins()

// Validar compatibilidad demo-skin
validate_skin_demo_compatibility('demo-construction', 'skin-construction')
```

### Funciones de Mapeo
```php
// Obtener mapeo completo demo-skin
get_demo_skin_mapping()

// Ejemplo de mapeo:
// 'demo-construction' => 'skin-construction'
// 'demo-digital-agency-2' => 'skin-digital-agency-2'
```

## Flujo de Trabajo Recomendado

### 1. Configuración Inicial
```bash
# 1. Ver información de skins internos
php artisan project:copy-porto-skins

# 2. Listar skins disponibles
php artisan project:manage-skins list

# 3. Configurar skin específico si es necesario
php artisan project:manage-skins set --skin=skin-construction
```

### 2. Actualización de Assets
```bash
# Cuando el usuario droppea assets en public/cd-project/assets
php artisan project:update-assets public/cd-project/assets
```

### 3. Validación
```bash
# Verificar compatibilidad
php artisan project:manage-skins validate
```

## Mapeo Demo-Skin

| Demo | Skin Recomendado |
|------|------------------|
| `demo-construction` | `skin-construction` |
| `demo-digital-agency-2` | `skin-digital-agency-2` |
| `demo-business-consulting` | `skin-business-consulting` |
| `demo-medical` | `skin-medical` |
| `demo-education` | `skin-education` |
| `demo-restaurant` | `skin-restaurant` |
| `demo-photography` | `skin-photography` |
| `demo-real-estate` | `skin-real-estate` |

## Casos de Uso

### Caso 1: Proyecto Nuevo
1. Usuario configura `demo: 'demo-construction'` y `skin: 'auto'`
2. Sistema mapea automáticamente a `skin-construction`
3. Si el skin no existe, usa fallback

### Caso 2: Cambio de Skin Manual
1. Usuario ejecuta `php artisan project:manage-skins set --skin=skin-digital-agency-2`
2. Sistema actualiza configuración
3. Usuario ejecuta `php artisan config:clear`

### Caso 3: Validación de Compatibilidad
1. Sistema valida que `demo-construction` es compatible con `skin-construction`
2. Si no es compatible, sugiere skin correcto
3. Usuario puede confirmar o cambiar

## Troubleshooting

### Skin No Encontrado
```bash
# Verificar skins disponibles
php artisan project:manage-skins list

# Copiar desde Porto si es necesario
php artisan project:copy-porto-skins
```

### Compatibilidad
```bash
# Validar compatibilidad
php artisan project:manage-skins validate

# Ver recomendaciones
php artisan project:manage-skins list
```

### Configuración
```bash
# Limpiar cache de configuración
php artisan config:clear

# Verificar configuración actual
php artisan tinker
>>> config('cd-system.theme')
```

## Estructura de Archivos

```
public/
├── template/
│   └── css/
│       ├── skins/           # Skins internos del template
│       │   ├── skin-construction.css
│       │   ├── skin-digital-agency-2.css
│       │   └── ... (80+ skins disponibles)
│       └── demos/          # Demos internos del template
│           ├── demo-construction.css
│           ├── demo-digital-agency-2.css
│           └── ... (50+ demos disponibles)
└── cd-project/
    └── assets/              # Assets del usuario
        ├── logo.png
        ├── favicon.ico
        └── skin-*.css       # Skins personalizados del usuario
```

## Notas Importantes

1. **Orden de Prioridad**: Skin configurado > Mapeo automático > Fallback
2. **Validación**: Siempre se valida la existencia del archivo skin
3. **Compatibilidad**: Se sugiere pero no se fuerza la compatibilidad demo-skin
4. **Performance**: Los skins se cargan dinámicamente según la configuración
5. **Backup**: Usar `--backup` en comandos para crear respaldos

## Ejemplos Prácticos

### Ejemplo 1: Configuración Automática
```php
// config/cd-system.php
'theme' => [
    'demo' => 'demo-construction',
    'skin' => 'auto', // Se mapea a 'skin-construction'
],
```

### Ejemplo 2: Configuración Manual
```php
// config/cd-system.php
'theme' => [
    'demo' => 'demo-construction',
    'skin' => 'skin-digital-agency-2', // Override manual
],
```

### Ejemplo 3: Uso en Blade
```blade
<!-- En _styles.blade.php -->
<link id="skinCSS" rel="stylesheet" href="{{ asset('template/css/skins/' . get_theme_skin() . '.css') }}">
```

Este sistema proporciona una gestión robusta y flexible de los skins, manteniendo la compatibilidad con el flujo de trabajo existente mientras añade funcionalidades avanzadas de gestión.