# Broadcast Panel - AvanzaCast 🎥

Panel de administración de transmisiones en vivo con diseño moderno y profesional basado en la plantilla Techwind Dashboard.

## ✨ Características Implementadas

### 🎨 UI/UX Moderno
- ✅ Diseño limpio y profesional basado en Techwind v2.2.0
- ✅ **React Icons** (Material Design Icons) para iconografía consistente
- ✅ CSS Modules con variables CSS para tematización
- ✅ Diseño responsive con breakpoints móvil/tablet/desktop
- ✅ Animaciones fluidas y transiciones suaves

### 🌓 Tema Oscuro Funcional
- ✅ **ThemeProvider** con Context API de React
- ✅ Persistencia en localStorage
- ✅ Toggle inmediato sin recarga
- ✅ Variables CSS dinámicas para colores
- ✅ Transiciones suaves entre temas (0.3s ease)

### 🎯 Componentes Interactivos
- ✅ **Tooltips**: Información contextual en hover con animaciones
- ✅ **Dropdown Menu**: Menú de usuario con opciones (Perfil, Ayuda, Cerrar sesión)
- ✅ **Loading Skeletons**: Estados de carga con animación shimmer
- ✅ **Modal**: Creación de transmisiones con animaciones (fadeIn + slideUp)

### 🗓️ Filtrado Inteligente
- ✅ Tabs "Próximamente" / "Anteriores"
- ✅ **Filtrado real por fechas** usando Date comparison
- ✅ Manejo de transmisiones sin fecha programada
- ✅ Mensajes contextuales cuando no hay datos

### 📱 Iconos de Plataforma
- 🎥 **YouTube** - Rojo (#FF0000)
- 📘 **Facebook** - Azul (#1877F2)
- 🎮 **Twitch** - Morado (#9146FF)
- 💼 **LinkedIn** - Azul profesional (#0A66C2)

## 🎨 Sistema de Diseño

### Paleta de Colores

#### Modo Claro 🌞
```css
--primary-blue: #4f46e5          /* Indigo-600 */
--primary-blue-hover: #4338ca    /* Indigo-700 */
--background-color: #f7f8fa      /* Gray-50 */
--surface-color: #ffffff         /* White */
--text-primary: #1f2937          /* Gray-800 */
--text-secondary: #6b7280        /* Gray-500 */
--border-light: #e5e7eb          /* Gray-200 */
--active-bg-light: #eef2ff       /* Indigo-50 */
```

#### Modo Oscuro 🌙
```css
--primary-blue: #6366f1          /* Indigo-500 */
--primary-blue-hover: #4f46e5    /* Indigo-600 */
--background-color: #0f172a      /* Slate-900 */
--surface-color: #1e293b         /* Slate-800 */
--text-primary: #f1f5f9          /* Slate-100 */
--text-secondary: #cbd5e1        /* Slate-300 */
--border-light: #334155          /* Slate-700 */
--active-bg-light: #312e81       /* Indigo-950 */
```

### Tipografía
- **Familia**: Inter, -apple-system, BlinkMacSystemFont, Segoe UI
- **Tamaños**: 
  - Caption: 12px
  - Body: 14px
  - Subtitle: 16px
  - Heading: 22px
- **Pesos**: 
  - Normal: 400
  - Medium: 500
  - Semibold: 600

### Espaciado
- **Gaps**: 8px, 12px, 16px, 20px
- **Padding**: 12px, 16px, 20px, 24px, 32px
- **Bordes redondeados**: 4px, 6px, 8px, 12px

### Sombras
```css
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05)
--shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.1)
--shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.1)
```

## 📦 Componentes Reutilizables

### ThemeProvider
Proveedor de tema con persistencia en localStorage.

```tsx
import { ThemeProvider } from './components/ThemeProvider'

<ThemeProvider>
  <App />
</ThemeProvider>
```

**Hook de uso:**
```tsx
import { useTheme } from './components/ThemeProvider'

const { theme, toggleTheme } = useTheme()
// theme: 'light' | 'dark'
```

### Tooltip
Tooltip contextual con 4 posiciones posibles.

```tsx
import { Tooltip } from './components/Tooltip'

<Tooltip content="Texto del tooltip" position="bottom">
  <button>Hover aquí</button>
</Tooltip>
```

**Props:**
- `content`: string - Texto a mostrar
- `position`: 'top' | 'bottom' | 'left' | 'right' - Posición del tooltip
- `children`: ReactNode - Elemento que activa el tooltip

### Dropdown
Menú desplegable con click outside detection.

```tsx
import { Dropdown } from './components/Dropdown'

<Dropdown
  trigger={<button>Abrir menú</button>}
  items={[
    { 
      label: 'Mi perfil', 
      icon: <MdPerson />, 
      onClick: () => console.log('Perfil') 
    },
    { 
      label: 'Cerrar sesión', 
      icon: <MdLogout />, 
      onClick: handleLogout,
      divider: true  // Separador antes del item
    }
  ]}
/>
```

**Props:**
- `trigger`: ReactNode - Elemento que abre el dropdown
- `items`: DropdownItem[] - Array de opciones del menú

### Skeleton
Componentes de carga con animación shimmer.

```tsx
import { Skeleton, SkeletonCard, SkeletonTable } from './components/Skeleton'

// Skeleton simple
<Skeleton width="200px" height="20px" borderRadius="6px" />

// Card completa con skeleton
<SkeletonCard />

// Tabla con múltiples filas
<SkeletonTable rows={5} />
```

## 🏗️ Estructura de Componentes

```
src/components/
├── ThemeProvider.tsx             # Context de tema dark/light
├── Tooltip.tsx                   # Tooltip reutilizable
├── Tooltip.module.css
├── Dropdown.tsx                  # Menú desplegable
├── Dropdown.module.css
├── Skeleton.tsx                  # Estados de carga
├── Skeleton.module.css
├── PageContainer.tsx             # Layout principal
├── PageContainer.module.css
├── Sidebar.tsx                   # Navegación lateral
├── Sidebar.module.css
├── Header.tsx                    # Barra superior
├── Header.module.css
├── TransmissionsTable.tsx        # Tabla con filtrado
├── TransmissionsTable.module.css
└── (Ahora usa `shared/components/NewTransmissionModal.tsx` y su CSS compartida)
```

## 🚀 Scripts

```bash
# Desarrollo (hot reload)
npm run dev

# Build de producción
npm run build

# Preview del build
npm run preview

# Linting
npm run lint
```

El servidor de desarrollo estará disponible en: **http://localhost:5173/**

## 📱 Breakpoints Responsivos

```css
/* Mobile - Sidebar oculto, layout vertical */
@media (max-width: 768px)

/* Tablet - Sidebar colapsable */
@media (max-width: 1024px)

/* Desktop - Sidebar fijo, layout completo */
@media (min-width: 1025px)
```

### Comportamiento Responsive

- **Desktop (>1024px)**: Sidebar fijo de 260px, header completo
- **Tablet (768-1024px)**: Sidebar colapsable, header adaptado
- **Mobile (<768px)**: Sidebar con toggle, header compacto, botones simplificados

## 🎯 Funcionalidades Implementadas

### 1. React Icons ✅
- Reemplazo completo de emojis con Material Design Icons
- Iconos de plataforma con colores branded (YouTube, Facebook, Twitch, LinkedIn)
- Consistencia visual en toda la aplicación

### 2. Tema Oscuro ✅
- Sistema de temas con Context API
- Persistencia automática en localStorage
- Toggle funcional sin recarga de página
- Variables CSS reactivas para transiciones suaves

### 3. Loading Skeletons ✅
- Estados de carga con animación shimmer
- Componentes específicos: Skeleton, SkeletonCard, SkeletonTable
- Simulación de carga de 800ms en PageContainer
- Mejora significativa en UX percibido

### 4. Dropdown de Usuario ✅
- Menú desplegable con 3 opciones (Perfil, Ayuda, Cerrar sesión)
- Click outside detection para cerrar
- Animación slideDown (0.2s ease-out)
- Separadores entre secciones del menú

### 5. Tooltips Informativos ✅
- Tooltips en todos los botones interactivos
- 4 posiciones: top, bottom, left, right
- Animación fadeIn (0.2s ease-in-out)
- Diseño con flecha direccional

### 6. Filtrado por Fechas ✅
- Tabs "Próximamente" / "Anteriores"
- Comparación real de fechas con `new Date()`
- Manejo de transmisiones sin fecha (upcoming por defecto)
- Mensajes contextuales en estado vacío

## 📄 Licencia de Assets

### Plantilla Techwind
- **Autor**: ShreeThemes
- **Versión**: 2.2.0
- **Licencia**: Uso comercial permitido con atribución

### Iconos
- **react-icons/md**: Material Design Icons (Apache 2.0 License)
- **react-icons/fa**: Font Awesome Free (CC BY 4.0 License)

### Assets Copiados
```
public/assets/
├── logo-dark.png         # Logo modo claro
├── logo-light.png        # Logo modo oscuro
├── logo-icon.png         # Icono app (64x64)
├── logo-icon-32.png      # Icono pequeño (32x32)
└── logo-icon-64.png      # Icono mediano (64x64)

public/
└── favicon.ico           # Favicon del sitio
```

## 🚧 Próximas Mejoras

### Fase 2 - Backend Integration
1. **API REST**
   - Endpoints de transmisiones (CRUD)
   - Autenticación con JWT
   - Manejo de errores HTTP

2. **Estado Global**
   - Migrar a Zustand o Redux
   - Sincronización con backend
   - Optimistic updates

### Fase 3 - Features Avanzadas
1. **Notificaciones en Tiempo Real**
   - WebSocket para notificaciones
   - Panel de notificaciones
   - Badge con contador dinámico

2. **Búsqueda y Filtros**
   - Búsqueda por título
   - Filtros combinados (plataforma + fecha + estado)
   - Ordenamiento de columnas

3. **Analytics Dashboard**
   - Gráficos con ApexCharts
   - Estadísticas de transmisiones
   - Métricas de audiencia

## 🐛 Debugging

Para ver el estado del tema:
```javascript
// En la consola del navegador
localStorage.getItem('avanzacast-theme')
```

Para resetear el tema:
```javascript
localStorage.removeItem('avanzacast-theme')
window.location.reload()
```

## 📞 Soporte

Para bugs o sugerencias, abrir issue en el repositorio.

---

**Desarrollado con ❤️ para AvanzaCast**  
*Versión 2.0 - Última actualización: 2024*