import { Component, inject, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ContentService, Article } from '../../core/services/content.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-workflows',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <div class="wf-shell">
      

      <!-- ═══════════════════════════════ CONTENIDO PRINCIPAL ═══════════════════════════════ -->
      <main class="wf-content">
        
        <!-- Barra superior oscura -->
        <header class="wf-topbar">
          <h1 class="wf-topbar__title">Workflow & colescior</h1>
          
          <div class="wf-topbar__controls">
            <div class="wf-search">
              <input type="text" placeholder="Search..." class="wf-search__field" />
              <button class="wf-search__btn">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <circle cx="11" cy="11" r="8"></circle>
                  <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                </svg>
              </button>
            </div>
            
            <button class="wf-btn-filter">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
              </svg>
              Filter
            </button>
          </div>
        </header>

        <!-- Contenedor del Título de Sección -->
        <div class="wf-section-title-wrap">
          <h2 class="wf-section-title">Workflow de Aprobación de Publicaciones</h2>
        </div>

        <!-- Grid de Editor y Cola de Aprobaciones -->
        <div class="wf-grid">
          
          <!-- Columna Izquierda: Editor de Publicación -->
          <div class="wf-card wf-card--editor">
            <h3 class="wf-card__title">Editor de Publicación</h3>
            
            <div class="wf-form">
              <div class="wf-form__group">
                <label class="wf-form__label">Título</label>
                <input type="text" [(ngModel)]="newTitle" placeholder="Título" class="wf-form__input" />
              </div>
              
              <div class="wf-form__group">
                <label class="wf-form__label">Contenido</label>
                <div class="wf-editor">
                  <!-- Barra de herramientas del Editor -->
                  <div class="wf-editor__toolbar">
                    <button class="wf-editor__tool wf-editor__tool--bold">B</button>
                    <button class="wf-editor__tool wf-editor__tool--italic">I</button>
                    <button class="wf-editor__tool wf-editor__tool--underline">U</button>
                    <span class="wf-editor__tool-sep">|</span>
                    <button class="wf-editor__tool">🔗</button>
                    <button class="wf-editor__tool">≡</button>
                    <button class="wf-editor__tool">≣</button>
                    <button class="wf-editor__tool">📑</button>
                    <button class="wf-editor__tool">...</button>
                  </div>
                  <!-- Textarea del Editor -->
                  <textarea [(ngModel)]="newBody" rows="7" placeholder="Contenido" class="wf-editor__textarea"></textarea>
                </div>
              </div>

              <!-- Adjuntar archivo -->
              <button class="wf-btn-attach">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>
                </svg>
                Adjuntar Archivo
              </button>

              <!-- Botón Publicar -->
              <button (click)="submitProposal()" class="wf-btn-submit">
                PUBLICAR PARA APROBACIÓN
              </button>

              @if (formError()) {
                <div class="wf-alert wf-alert--error">{{ formError() }}</div>
              }
              @if (formSuccess()) {
                <div class="wf-alert wf-alert--success">Publicado con éxito para aprobación.</div>
              }
            </div>
          </div>

          <!-- Columna Derecha: Publicaciones en Cola (Aprobación) -->
          <div class="wf-card wf-card--queue">
            <div class="wf-card__header">
              <h3 class="wf-card__title">Publicaciones en Cola (Aprobación)</h3>
              <span class="wf-card__info-icon">i</span>
            </div>

            <div class="wf-queue-list">
              @for (art of contentService.pending(); track art.id) {
                <div class="wf-queue-item">
                  
                  <div class="wf-queue-item__left">
                    <h4 class="wf-queue-item__title">{{ art.title }}</h4>
                    <span class="wf-queue-item__status">
                      Estado: <strong class="wf-queue-item__status-val">{{ art.approvalLevel === 1 ? 'Anuvos' : 'Statuca' }}</strong>
                    </span>

                    <!-- Timeline Horizontal de Aprobación -->
                    <div class="wf-timeline">
                      <!-- Nodo 1 -->
                      <div class="wf-node">
                        @if (art.approvalLevel >= 1) {
                          <div class="wf-node__stage-tag">Stage</div>
                        }
                        <div class="wf-node__circle" [ngClass]="{'wf-node__circle--active': art.approvalLevel >= 1}">
                          @if (art.approvalLevel >= 1) { ✓ } @else { 1 }
                        </div>
                        <span class="wf-node__label">Aprobador 1</span>
                      </div>
                      
                      <div class="wf-timeline__arrow">→</div>

                      <!-- Nodo 2 -->
                      <div class="wf-node">
                        @if (art.approvalLevel >= 2) {
                          <div class="wf-node__stage-tag">Stage</div>
                        }
                        <div class="wf-node__circle" [ngClass]="{'wf-node__circle--active': art.approvalLevel >= 2}">
                          @if (art.approvalLevel >= 2) { ✓ } @else { 2 }
                        </div>
                        <span class="wf-node__label">Aprobador 2</span>
                      </div>
                      
                      <div class="wf-timeline__arrow">→</div>

                      <!-- Nodo 3 -->
                      <div class="wf-node">
                        <div class="wf-node__circle wf-node__circle--dots">...</div>
                        <span class="wf-node__label">Aprobador...</span>
                      </div>
                      
                      <div class="wf-timeline__arrow">→</div>

                      <!-- Nodo 4 -->
                      <div class="wf-node">
                        <div class="wf-node__circle">3</div>
                        <span class="wf-node__label font-bold text-slate-400">Aprobador 3</span>
                      </div>
                    </div>
                  </div>

                  <!-- Secciones de acción: Aprobar / Rechazar -->
                  <div class="wf-queue-item__right">
                    <span class="wf-queue-item__action-label">Aprobar / Rechazar</span>
                    
                    <div class="wf-actions-row">
                      <!-- Botón Avanzar a Nivel 2 (gris/activo si nivel 1) -->
                      <button (click)="approveItem(art.id)" 
                        [disabled]="art.approvalLevel !== 1"
                        [ngClass]="{'wf-btn-action--disabled': art.approvalLevel !== 1}"
                        class="wf-btn-action wf-btn-action--gray">
                        Aprobar
                      </button>
                      
                      <!-- Botón Aprobar Final (verde si nivel 2) -->
                      <button (click)="approveItem(art.id)" 
                        [disabled]="art.approvalLevel !== 2"
                        [ngClass]="{'wf-btn-action--disabled': art.approvalLevel !== 2}"
                        class="wf-btn-action wf-btn-action--green">
                        Aprobar
                      </button>
                      
                      <!-- Botón Rechazar (rojo) -->
                      <button (click)="contentService.rejectArticle(art.id)" class="wf-btn-action wf-btn-action--red">
                        Rechazar
                      </button>
                    </div>

                    <textarea placeholder="Comentarios..." class="wf-queue-item__comments" rows="2"></textarea>
                  </div>

                </div>
              }

              @if (contentService.pending().length === 0) {
                <div class="wf-empty">
                  <span class="wf-empty__emoji">🎉</span>
                  <p class="wf-empty__title">Cola de Aprobaciones Limpia</p>
                  <p class="wf-empty__desc">No hay ninguna publicación en espera de validación.</p>
                </div>
              }
            </div>
          </div>

        </div>

        <!-- ═══════════════════════════════ WIDGET COMPARTIR REDES SOCIALES ═══════════════════════════════ -->
        <div class="wf-share-widget">
          <h3 class="wf-share-widget__title">Compartir en Redes Sociales</h3>
          
          <div class="wf-share-widget__row">
            <div class="wf-share-icon-btn">
              <div class="wf-share-icon wf-share-icon--linkedin">in</div>
              <span class="wf-share-icon-label">COMPARTIR EN<br>LINKEDIN</span>
            </div>
            
            <div class="wf-share-icon-btn">
              <div class="wf-share-icon wf-share-icon--twitter">X</div>
              <span class="wf-share-icon-label">COMPARTIR EN<br>TWITTER</span>
            </div>
            
            <div class="wf-share-icon-btn">
              <div class="wf-share-icon wf-share-icon--facebook">f</div>
              <span class="wf-share-icon-label">COMPARTIR EN<br>FACEBOOK</span>
            </div>
            
            <div class="wf-share-icon-btn">
              <div class="wf-share-icon wf-share-icon--link">🔗</div>
              <span class="wf-share-icon-label">COMPARTIR EN<br>LINK</span>
            </div>
          </div>
        </div>

      </main>

    </div>
  `,
  styles: [`
    :host {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      height: 100%;
    }

    /* ── LAYOUT PRINCIPAL ── */
    .wf-shell {
      display: flex;
      background: #f4f3ef; /* Light beige/grey background */
      height: 100%;
      border-radius: 24px;
      overflow: hidden;
      border: 1px solid rgba(15, 13, 10, 0.08);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
      font-family: 'Outfit', 'Inter', system-ui, sans-serif;
      flex: 1;
      min-height: 0;
    }

    /* Content Area */
    .wf-content {
      flex-grow: 1;
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: 0;
      position: relative;
      height: 100%;
      overflow: hidden;
    }

    /* Topbar */
    .wf-topbar {
      background: #111625; /* Dark background topbar */
      border-radius: 16px;
      padding: 14px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
    }

    .wf-topbar__title {
      font-size: 18px;
      font-weight: 700;
      color: #ffffff;
      margin: 0;
    }

    .wf-topbar__controls {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .wf-search {
      position: relative;
      width: 180px;
    }

    .wf-search__field {
      width: 100%;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      padding: 6px 12px 6px 32px;
      font-size: 11px;
      color: #ffffff;
      outline: none;
      transition: background 0.15s ease;
    }

    .wf-search__field::placeholder {
      color: rgba(255, 255, 255, 0.4);
    }

    .wf-search__field:focus {
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 255, 255, 0.2);
    }

    .wf-search__btn {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      background: transparent;
      border: none;
      color: rgba(255, 255, 255, 0.4);
      cursor: pointer;
      display: flex;
      align-items: center;
    }

    .wf-btn-filter {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      color: #ffffff;
      font-size: 11px;
      font-weight: 600;
      padding: 6px 14px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.15s;
    }

    .wf-btn-filter:hover {
      background: rgba(255, 255, 255, 0.12);
    }

    /* Section Title */
    .wf-section-title-wrap {
      margin-top: 4px;
    }

    .wf-section-title {
      font-size: 20px;
      font-weight: 800;
      color: #000000;
      margin: 0;
      letter-spacing: -0.01em;
    }

    /* Grid */
    .wf-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      flex: 1;
      overflow-y: auto;
      min-height: 0;
      padding: 4px; /* avoid box-shadow clipping */
    }

    @media (min-width: 1024px) {
      .wf-grid {
        grid-template-columns: 4fr 7fr;
      }
    }

    /* Cards */
    .wf-card {
      background: #ffffff;
      border-radius: 20px;
      padding: 24px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01);
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .wf-card--queue {
      background: #f8fafc;
    }

    .wf-card__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .wf-card__title {
      font-size: 15px;
      font-weight: 800;
      color: #000000;
      margin: 0;
      letter-spacing: -0.01em;
    }

    .wf-card__info-icon {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #e2e8f0;
      color: #64748b;
      font-size: 11px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    /* Form editor */
    .wf-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .wf-form__group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .wf-form__label {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
    }

    .wf-form__input {
      width: 100%;
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      padding: 8px 12px;
      font-size: 12px;
      outline: none;
      color: #000;
    }

    .wf-form__input::placeholder {
      color: #94a3b8;
    }

    .wf-form__input:focus {
      border-color: #64748b;
    }

    /* Faux editor styles */
    .wf-editor {
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .wf-editor__toolbar {
      background: #f8fafc;
      border-bottom: 1px solid #cbd5e1;
      padding: 6px 12px;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .wf-editor__tool {
      background: transparent;
      border: none;
      font-size: 11px;
      font-weight: 500;
      color: #475569;
      cursor: pointer;
      padding: 2px 4px;
      border-radius: 4px;
    }

    .wf-editor__tool:hover {
      background: #e2e8f0;
      color: #0f172a;
    }

    .wf-editor__tool--bold { font-weight: 800; }
    .wf-editor__tool--italic { font-style: italic; }
    .wf-editor__tool--underline { text-decoration: underline; }
    .wf-editor__tool-sep { color: #cbd5e1; font-size: 10px; }

    .wf-editor__textarea {
      width: 100%;
      border: none;
      outline: none;
      padding: 10px 12px;
      font-size: 12px;
      resize: none;
      color: #000;
    }

    .wf-editor__textarea::placeholder {
      color: #94a3b8;
    }

    .wf-btn-attach {
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      color: #334155;
      font-size: 11px;
      font-weight: 700;
      padding: 8px 16px;
      border-radius: 10px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      align-self: flex-start;
      transition: background 0.15s;
    }

    .wf-btn-attach:hover {
      background: #e2e8f0;
    }

    .wf-btn-attach svg {
      color: #64748b;
    }

    .wf-btn-submit {
      width: 100%;
      background: #084d47; /* Teal-dark green */
      border: none;
      color: #ffffff;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.04em;
      padding: 12px 0;
      border-radius: 10px;
      cursor: pointer;
      transition: background 0.15s;
    }

    .wf-btn-submit:hover {
      background: #053b36;
    }

    .wf-alert {
      font-size: 10.5px;
      font-weight: 700;
      text-align: center;
      padding: 8px;
      border-radius: 8px;
    }

    .wf-alert--error {
      background: #fde8e8;
      color: #9b1c1c;
    }

    .wf-alert--success {
      background: #def7ec;
      color: #03543f;
    }

    /* Queue list */
    .wf-queue-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .wf-queue-item {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 20px;
      display: flex;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap;
    }

    .wf-queue-item__left {
      flex: 1;
      min-width: 240px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .wf-queue-item__title {
      font-size: 14px;
      font-weight: 800;
      color: #000000;
      margin: 0;
      letter-spacing: -0.01em;
    }

    .wf-queue-item__status {
      font-size: 11px;
      color: #64748b;
    }

    .wf-queue-item__status-val {
      background: #fef3c7;
      color: #d97706;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 10px;
      margin-left: 2px;
    }

    .wf-queue-item__right {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 200px;
      flex-shrink: 0;
    }

    .wf-queue-item__action-label {
      font-size: 11px;
      font-weight: 700;
      color: #000000;
    }

    .wf-actions-row {
      display: flex;
      gap: 6px;
    }

    .wf-btn-action {
      flex: 1;
      border: none;
      color: #ffffff;
      font-size: 10px;
      font-weight: 700;
      padding: 6px 0;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: background 0.15s;
    }

    .wf-btn-action--gray {
      background: #64748b;
    }
    .wf-btn-action--gray:hover:not(:disabled) {
      background: #475569;
    }

    .wf-btn-action--green {
      background: #10b981;
    }
    .wf-btn-action--green:hover:not(:disabled) {
      background: #059669;
    }

    .wf-btn-action--red {
      background: #ef4444;
    }
    .wf-btn-action--red:hover {
      background: #dc2626;
    }

    .wf-btn-action--disabled {
      background: #cbd5e1 !important;
      color: #94a3b8 !important;
      cursor: not-allowed;
    }

    .wf-queue-item__comments {
      width: 100%;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 11px;
      outline: none;
      resize: none;
      color: #000;
    }

    .wf-queue-item__comments::placeholder {
      color: #94a3b8;
    }

    /* Timeline horizontal */
    .wf-timeline {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 14px;
    }

    .wf-node {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    .wf-node__stage-tag {
      position: absolute;
      top: -16px;
      background: #1e293b;
      color: #ffffff;
      font-size: 8px;
      font-weight: 800;
      text-transform: uppercase;
      padding: 1px 4px;
      border-radius: 3px;
    }

    .wf-node__circle {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 2px solid #cbd5e1;
      background: #ffffff;
      color: #94a3b8;
      font-size: 10px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 8px;
    }

    .wf-node__circle--active {
      border-color: #f59e0b; /* Yellow warning border */
      background: #fffbeb;
      color: #d97706;
    }

    .wf-node__circle--dots {
      font-size: 9px;
      border-style: solid;
      background: #ffffff;
    }

    .wf-node__label {
      font-size: 9px;
      font-weight: 600;
      color: #64748b;
      margin-top: 4px;
    }

    .wf-timeline__arrow {
      font-size: 11px;
      color: #94a3b8;
      margin-top: 14px;
    }

    /* Empty state */
    .wf-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 40px 20px;
      text-align: center;
      color: #64748b;
    }

    .wf-empty__emoji {
      font-size: 24px;
    }

    .wf-empty__title {
      font-size: 14px;
      font-weight: 800;
      color: #000000;
      margin: 0;
    }

    .wf-empty__desc {
      font-size: 11px;
      margin: 0;
    }

    /* ── WIDGET COMPARTIR REDES SOCIALES ── */
    .wf-share-widget {
      background: #ffffff;
      border-radius: 20px;
      padding: 16px 20px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 340px;
      align-self: flex-end;
      margin-top: 10px;
      z-index: 10;
    }

    @media (min-width: 1024px) {
      .wf-share-widget {
        position: absolute;
        bottom: 24px;
        right: 24px;
        margin-top: 0;
      }
    }

    .wf-share-widget__title {
      font-size: 12px;
      font-weight: 800;
      color: #000000;
      margin: 0;
      letter-spacing: -0.01em;
    }

    .wf-share-widget__row {
      display: flex;
      justify-content: space-between;
      gap: 8px;
    }

    .wf-share-icon-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      flex: 1;
    }

    .wf-share-icon {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 18px;
      font-weight: 800;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
      transition: transform 0.15s ease;
    }

    .wf-share-icon-btn:hover .wf-share-icon {
      transform: scale(1.05);
    }

    .wf-share-icon--linkedin { background: #0077b5; }
    .wf-share-icon--twitter { background: #000000; }
    .wf-share-icon--facebook { background: #1877f2; }
    .wf-share-icon--link { background: #10b981; font-size: 16px; }

    .wf-share-icon-label {
      font-size: 7.5px;
      font-weight: 800;
      color: #64748b;
      text-align: center;
      letter-spacing: 0.02em;
      line-height: 1.3;
    }
  `]
})
export class WorkflowsComponent {
  contentService = inject(ContentService);
  router = inject(Router);

  // Form states
  newTitle = '';
  newCategory = 'Tecnología';
  newBody = '';

  formError = signal<string>('');
  formSuccess = signal<boolean>(false);

  submitProposal(): void {
    const t = this.newTitle.trim();
    const b = this.newBody.trim();
    if (!t || !b) {
      this.formError.set('Por favor, completa el título y el cuerpo del comunicado.');
      setTimeout(() => this.formError.set(''), 3000);
      return;
    }

    // Default target: Intranet/LinkedIn/X since targets are now managed in social widget/default
    const targets = ['Intranet'];

    this.contentService.addPending(t, this.newCategory, b, 'Jess Miller', targets);
    
    // Clear form
    this.newTitle = '';
    this.newBody = '';
    
    this.formSuccess.set(true);
    setTimeout(() => this.formSuccess.set(false), 3000);
  }

  approveItem(id: number): void {
    this.contentService.advanceApproval(id);
  }
}
