// src/components/user-avatar.js
import { LitElement, html, css } from 'lit';

class UserAvatar extends LitElement {
  // Module 3: simple reactive property.
  static properties = {
    nombre: { type: String },
  };

  // Module 4 (04-03): theming CSS variable with a default value on :host.
  // Module 4 (04-04): styling distributed content with ::slotted().
  static styles = css`
    :host {
      display: inline-block;
      --tamano-avatar: 2rem;
    }

    .avatar {
      width: var(--tamano-avatar);
      height: var(--tamano-avatar);
      border-radius: 50%;
      background-color: #cbd5e1;
      color: #1f2933;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      font-weight: bold;
      overflow: hidden;
    }

    ::slotted(img) {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  `;

  constructor() {
    super();
    this.nombre = '';
  }

  // Module 4 (04-04): slot with fallback content computed from
  // a reactive property, shown only if nobody distributes anything.
  render() {
    return html`
      <div class="avatar" title="${this.nombre}">
        <slot>${this.iniciales()}</slot>
      </div>
    `;
  }

  iniciales() {
    if (!this.nombre) {
      return '?';
    }
    return this.nombre
      .split(' ')
      .map((palabra) => palabra.charAt(0).toUpperCase())
      .slice(0, 2)
      .join('');
  }
}

customElements.define('user-avatar', UserAvatar);

// src/components/task-card.js
import { LitElement, html, css } from 'lit';
import { classMap } from 'lit/directives/class-map.js';
import { ContadorTiempoRestanteController } from '../controllers/contador-tiempo-restante-controller.js';
import { resaltarSiUrgente } from '../directives/resaltar-si-urgente.js';
import { estilosCompartidos } from '../styles/shared-styles.js';
import './user-avatar.js';

// Module 3 (03-03): custom converter for a type that does not fit
// into the five types supported by Lit out of the box.
const conversorDeFecha = {
  fromAttribute(valorDelAtributo) {
    if (!valorDelAtributo) {
      return null;
    }
    const fecha = new Date(valorDelAtributo);
    return Number.isNaN(fecha.getTime()) ? null : fecha;
  },
  toAttribute(valorDeLaPropiedad) {
    if (!valorDeLaPropiedad) {
      return null;
    }
    return valorDeLaPropiedad.toISOString().split('T')[0];
  },
};

class TaskCard extends LitElement {
  // Module 3 (03-01, 03-02, 03-03): public properties, internal state,
  // and custom converter, all declared in a single place.
  static properties = {
    titulo: { type: String },
    estado: { type: String },
    prioridad: { type: Number },
    urgente: { type: Boolean },
    asignadoA: { type: String, attribute: 'asignado-a' },
    asignadoImagen: { type: String, attribute: 'asignado-imagen' },
    expandida: { state: true },
    fechaLimite: { converter: conversorDeFecha, attribute: 'fecha-limite' },
  };

  constructor() {
    super();
    this.titulo = 'Tarea sin título';
    this.estado = 'pendiente';
    this.prioridad = 3;
    this.urgente = false;
    this.asignadoA = '';
    this.asignadoImagen = '';
    this.expandida = false;
    this.fechaLimite = null;

    // Module 6 (06-03): reactive controller with its own lifecycle,
    // registered on this host from its own constructor.
    this._contadorTiempo = new ContadorTiempoRestanteController(this);
  }

  // ...continues in the next section with interaction and accessibility...
}

  // Module 3 (03-02): toggling an internal state with a click.
  alternarExpandida() {
    this.expandida = !this.expandida;
  }

  // Module 9 (09-02): Enter and Space must trigger the same action as the click.
  _gestionarTeclaExpandir(event) {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      this.alternarExpandida();
    }
  }

  // Module 5 (05-02, 05-03): status selector that emits a custom event
  // upward, without directly touching any data that is not its own.
  gestionarCambioDeSelector(event) {
    event.stopPropagation();
    const nuevoEstado = event.target.value;
    this.estado = nuevoEstado;
    this.notificarCambioDeEstado(nuevoEstado);
  }

  notificarCambioDeEstado(nuevoEstado) {
    this.dispatchEvent(
      new CustomEvent('tarea-cambiada', {
        detail: { nuevoEstado },
        bubbles: true,
        composed: true,
      })
    );
  }

  // Module 4 (04-04): decides whether to distribute a real image or let
  // <user-avatar> compute its own fallback initials.
  renderAvatar() {
    if (this.asignadoImagen) {
      return html`
        <user-avatar nombre="${this.asignadoA}">
          <img src="${this.asignadoImagen}" alt="${this.asignadoA}" />
        </user-avatar>
      `;
    }
    return html`<user-avatar nombre="${this.asignadoA}"></user-avatar>`;
  }

  // Module 7 (07-01): classMap replaces the if branches that used to decide
  // the badge's class; a separate object decides the text.
  renderInsigniaEstado() {
    const clases = {
      insignia: true,
      'insignia--pendiente': this.estado === 'pendiente',
      'insignia--en-progreso': this.estado === 'en-progreso',
      'insignia--hecha': this.estado === 'hecha',
    };
    const texto = {
      pendiente: '○ Pendiente',
      'en-progreso': '◐ En progreso',
      hecha: '✓ Hecha',
    }[this.estado];
    return html`<span class="${classMap(clases)}">${texto}</span>`;
  }

  renderSelectorEstado() {
    return html`
      <select @change="${this.gestionarCambioDeSelector}" .value="${this.estado}">
        <option value="pendiente">Pendiente</option>
        <option value="en-progreso">En progreso</option>
        <option value="hecha">Hecha</option>
      </select>
    `;
  }

  renderFechaLimite() {
    if (!this.fechaLimite) {
      return '';
    }
    return html`<p>Fecha límite: ${this.fechaLimite.toLocaleDateString('es-ES')}</p>`;
  }

  render() {
    return html`
      <article
        role="button"
        tabindex="0"
        aria-expanded="${this.expandida}"
        @click="${this.alternarExpandida}"
        @keydown="${this._gestionarTeclaExpandir}"
        ${resaltarSiUrgente(this._contadorTiempo.cercaDeVencer)}
      >
        <div class="cabecera">
          ${this.renderAvatar()}
          <h3>${this.titulo}</h3>
        </div>
        ${this.renderInsigniaEstado()}
        ${this.renderSelectorEstado()}
        <p>Prioridad: ${this.prioridad}</p>
        ${this.renderFechaLimite()}
        ${this.urgente && html`<p class="aviso">⚠ Urgente</p>`}
        <p aria-live="polite">
          ${this._contadorTiempo.cercaDeVencer ? '⏰ Está a punto de vencer' : ''}
        </p>
        ${this.expandida
          ? html`<div class="detalle" tabindex="-1"><p>Estado interno: la tarjeta está expandida.</p></div>`
          : ''}
      </article>
    `;
  }

  // Module 4 (04-02, 04-03): shared styles plus theming CSS variables.
  // Module 7 (07-02): the resaltarSiUrgente directive adds and removes the
  // "resaltada" class on the <article>, but its animation was never actually
  // defined in the lesson that introduced it; that pending piece is closed now.
  static styles = [
    estilosCompartidos,
    css`
      :host {
        --color-pendiente: #94a3b8;
        --color-en-progreso: #f59e0b;
        --color-hecha: #22c55e;
        --color-urgente: #dc2626;
      }

      article {
        border: 1px solid #d0d5dd;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 0.75rem;
        background-color: #ffffff;
      }

      .cabecera {
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .insignia {
        display: inline-block;
        padding: 0.15rem 0.5rem;
        border-radius: 999px;
        font-size: 0.8rem;
        margin-bottom: 0.5rem;
        color: #ffffff;
      }

      .insignia--pendiente {
        background-color: var(--color-pendiente);
      }

      .insignia--en-progreso {
        background-color: var(--color-en-progreso);
      }

      .insignia--hecha {
        background-color: var(--color-hecha);
      }

      .aviso {
        color: var(--color-urgente);
        font-weight: bold;
      }

      article.resaltada {
        animation: destello 1.5s ease-out;
      }

      @keyframes destello {
        0% {
          box-shadow: 0 0 0 3px var(--color-urgente);
        }
        100% {
          box-shadow: 0 0 0 0 transparent;
        }
      }
    `,
  ];
}

customElements.define('task-card', TaskCard);

// src/components/task-filter.js
import { LitElement, html, css } from 'lit';
import { classMap } from 'lit/directives/class-map.js';
import { ContextConsumer } from '@lit/context';
import { filtroContext } from '../context/filtro-context.js';

class TaskFilter extends LitElement {
  constructor() {
    super();
    // Module 7 (07-04): filter context consumer, subscribed to
    // any future change published by <task-board>.
    this._filtro = new ContextConsumer(this, { context: filtroContext, subscribe: true });
  }

  get valorActual() {
    return this._filtro.value ?? { texto: '', estado: 'todas', actualizar: () => {} };
  }

  manejarTexto(evento) {
    this.valorActual.actualizar({ texto: evento.target.value });
  }

  manejarEstado(estado) {
    this.valorActual.actualizar({ estado });
  }

  // Module 9 (09-02): accessible labels and state communicated with ARIA,
  // always derived from the same condition that already decides the visual class.
  render() {
    const { texto, estado } = this.valorActual;
    return html`
      <div class="filtro" role="search">
        <input
          type="text"
          aria-label="Buscar tarea por título"
          placeholder="Buscar tarea…"
          .value="${texto}"
          @input="${this.manejarTexto}"
        />
        <div class="filtro__botones" role="group" aria-label="Filtrar por estado">
          ${['todas', 'pendiente', 'hecha'].map(
            (opcion) => html`
              <button
                class="${classMap({ activo: estado === opcion })}"
                aria-pressed="${estado === opcion}"
                @click="${() => this.manejarEstado(opcion)}"
              >
                ${{ todas: 'Todas', pendiente: 'Pendientes', hecha: 'Hechas' }[opcion]}
              </button>
            `
          )}
        </div>
      </div>
    `;
  }

  static styles = css`
    .filtro {
      display: flex;
      gap: 0.75rem;
      align-items: center;
      margin-bottom: 1rem;
    }

    .filtro__botones {
      display: flex;
      gap: 0.5rem;
    }

    .filtro__botones button.activo {
      font-weight: bold;
      border-bottom: 2px solid currentColor;
    }
  `;
}

customElements.define('task-filter', TaskFilter);

static styles = [
  estilosCompartidos,
  css`
    :host {
      --color-pendiente: #94a3b8;
      --color-en-progreso: #f59e0b;
      --color-hecha: #22c55e;
      --color-urgente: #dc2626;
      --color-borde-tarjeta: #d0d5dd;
    }

    article {
      border: 1px solid var(--color-borde-tarjeta);
      /* ...rest unchanged... */
    }
  `,
];