import { Component, Input, computed, inject, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ParentApiService } from '../../core/parent-api.service';
import { I18nService } from '../../core/i18n.service';
import { RoutineView } from '../../core/models';
import { EmojiPickerComponent } from '../../shared/emoji-picker.component';
import { ColorPickerComponent } from '../../shared/color-picker.component';

const DAYS: { key: string; es: string; ca: string }[] = [
  { key: 'MONDAY', es: 'Lunes', ca: 'Dilluns' },
  { key: 'TUESDAY', es: 'Martes', ca: 'Dimarts' },
  { key: 'WEDNESDAY', es: 'Miércoles', ca: 'Dimecres' },
  { key: 'THURSDAY', es: 'Jueves', ca: 'Dijous' },
  { key: 'FRIDAY', es: 'Viernes', ca: 'Divendres' },
];

/** Pestaña Rutinas de tarde por día de la semana, de un niño. */
@Component({
  selector: 'app-routines-tab',
  imports: [FormsModule, EmojiPickerComponent, ColorPickerComponent],
  template: `
    <div class="adm-card">
      <div class="adm-row">
        <span class="adm-label">{{ i18n.t('tabRoutines') }}:</span>
        @for (d of days; track d.key) {
          <button
            class="adm-chip"
            [style.background]="d.key === day() ? 'var(--accent-purple)' : ''"
            [style.color]="d.key === day() ? '#fff' : ''"
            (click)="day.set(d.key)"
          >
            {{ i18n.label(d.es, d.ca) }}
          </button>
        }
      </div>
    </div>

    <div class="adm-card">
      <p class="adm-label">Nueva rutina</p>
      <div class="grid2">
        <div class="field">
          <label class="field__label">Rutina (ES)</label>
          <input class="field__input" [(ngModel)]="labelEs" placeholder="Ej. Hacer los deberes" />
        </div>
        <div class="field">
          <label class="field__label">Rutina (CA)</label>
          <input class="field__input" [(ngModel)]="labelCa" placeholder="Ex. Fer els deures" />
        </div>
      </div>
      <div class="field">
        <label class="field__label">Icono <span class="field__info" title="Toca un emoji para la rutina.">ⓘ</span></label>
        <app-emoji-picker [(value)]="icon" [options]="routineIcons" />
      </div>
      <div class="field">
        <label class="field__label">Color</label>
        <app-color-picker [(value)]="color" />
      </div>
      <button class="adm-btn" [disabled]="!labelEs || !labelCa || !icon" (click)="add()">+ {{ i18n.t('add') }}</button>
    </div>

    <div class="adm-card">
      <div class="adm-list">
        @for (r of routinesForDay(); track r.id; let i = $index; let last = $last) {
          <div class="adm-item">
            <span>{{ r.icon }}</span>
            <span class="adm-item__grow">{{ i18n.label(r.labelEs, r.labelCa) }}</span>
            <button class="adm-del" [disabled]="i === 0" (click)="move(i, -1)" aria-label="Subir">▲</button>
            <button class="adm-del" [disabled]="last" (click)="move(i, 1)" aria-label="Bajar">▼</button>
            <button class="adm-del" (click)="remove(r)">✕</button>
          </div>
        } @empty {
          <p class="adm-empty">{{ i18n.t('none') }}</p>
        }
      </div>
    </div>
  `,
  styles: [
    `
      .field { margin-bottom: var(--space-4); }
      .field__label { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text-1); margin-bottom: 6px; }
      .field__info { cursor: help; color: var(--text-4); font-size: 0.85rem; }
      .field__input {
        font-family: var(--font-body); font-size: 1rem; padding: 12px 14px;
        border: 2px solid var(--border-2); border-radius: var(--radius-sm);
        background: var(--surface); color: var(--text-strong); width: 100%; box-sizing: border-box;
      }
      .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
      @media (max-width: 520px) { .grid2 { grid-template-columns: 1fr; } }
    `,
  ],
})
export class RoutinesTabComponent {
  @Input({ required: true }) set childId(value: number) {
    this._childId = value;
    this.reload();
  }
  private _childId!: number;

  private readonly api = inject(ParentApiService);
  protected readonly i18n = inject(I18nService);

  protected readonly days = DAYS;
  protected readonly day = signal('MONDAY');
  protected readonly routines = signal<RoutineView[]>([]);
  protected readonly routinesForDay = computed(() =>
    this.routines().filter((r) => r.dayOfWeek === this.day()),
  );

  protected readonly routineIcons = ['🎒', '🥪', '📝', '🎹', '🍽️', '🛁', '🦷', '📚', '🧹', '🐕', '🛏️', '🎨', '⚽', '🧺'];
  protected icon = '';
  protected labelEs = '';
  protected labelCa = '';
  protected color = '#A78BD0';

  private reload(): void {
    this.api.listRoutines(this._childId).subscribe((l) => this.routines.set(l));
  }

  add(): void {
    const order = this.routinesForDay().length;
    this.api
      .createRoutine({
        childId: this._childId,
        dayOfWeek: this.day(),
        labelEs: this.labelEs,
        labelCa: this.labelCa,
        icon: this.icon,
        color: this.color,
        orderIndex: order,
      })
      .subscribe(() => {
        this.labelEs = this.labelCa = this.icon = '';
        this.reload();
      });
  }

  /** Mueve una rutina del día arriba (-1) o abajo (+1) y persiste el nuevo orden. */
  move(index: number, delta: number): void {
    const list = [...this.routinesForDay()];
    const target = index + delta;
    if (target < 0 || target >= list.length) {
      return;
    }
    [list[index], list[target]] = [list[target], list[index]];
    this.api.reorderRoutines(list.map((r) => r.id)).subscribe(() => this.reload());
  }

  remove(r: RoutineView): void {
    this.api.deleteRoutine(r.id).subscribe(() => this.reload());
  }
}