import {
  ChangeDetectionStrategy,
  Component,
  computed,
  inject,
} from '@angular/core';
import { PiSkeletonComponent, PiStatCardComponent } from '@pi/ui';
import { ProjectFacade } from '@task-stream/web/tracker/application';
import {
  BOARD_COLUMNS,
  IssueStatus,
  IssueType,
} from '@task-stream/web/tracker/domain';
import { initials, STATUS, TYPE } from '../ui/copy';

/** "Seguimiento": the state of the whole project at a glance (live). */
@Component({
  selector: 'ts-dashboard-page',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [PiSkeletonComponent, PiStatCardComponent],
  template: `
    @if (facade.stats(); as stats) {
      <section class="ts-kpis" aria-label="Resumen">
        @for (kpi of kpis(); track kpi.label) {
          <pi-stat-card
            [icon]="kpi.icon"
            [label]="kpi.label"
            [value]="'' + kpi.value"
            [color]="kpi.color"
          />
        }
      </section>

      <section class="ts-panel ts-flow" aria-labelledby="flow-title">
        <header class="ts-panel__head">
          <h2 id="flow-title">Flujo</h2>
          <span class="ts-muted">Dónde está cada ticket del proyecto</span>
        </header>
        @if (stats.total) {
          <div class="ts-flow__bar" role="img" [attr.aria-label]="flowLabel()">
            @for (segment of flow(); track segment.status) {
              @if (segment.count) {
                <span
                  class="ts-flow__segment"
                  [style.--tone]="segment.tone"
                  [style.flex-grow]="segment.count"
                  [attr.title]="segment.label + ': ' + segment.count"
                ></span>
              }
            }
          </div>
          <ul class="ts-flow__legend">
            @for (segment of flow(); track segment.status) {
              <li
                [style.--tone]="segment.tone"
                [class.is-empty]="!segment.count"
              >
                <span class="ts-flow__count">{{ segment.count }}</span>
                <span>{{ segment.label }}</span>
              </li>
            }
          </ul>
        } @else {
          <p class="ts-muted">Todavía no hay tickets.</p>
        }
      </section>

      <div class="ts-dashboard">
        <section class="ts-panel" aria-labelledby="load-title">
          <header class="ts-panel__head">
            <h2 id="load-title">¿Quién está con qué?</h2>
            <span class="ts-muted">Tickets abiertos</span>
          </header>
          <ul class="ts-rows">
            @for (row of stats.byAssignee; track row.user?.id ?? 'none') {
              <li>
                @if (row.user; as user) {
                  <span class="ts-who">{{ initialsOf(user.name) }}</span>
                  <span class="ts-rows__name">{{ user.name }}</span>
                } @else {
                  <span class="ts-who ts-who--none">—</span>
                  <span class="ts-rows__name ts-muted">Sin asignar</span>
                }
                <span class="ts-bar"
                  ><span [style.width.%]="(row.count / maxLoad()) * 100"></span
                ></span>
                <span class="ts-rows__count">{{ row.count }}</span>
              </li>
            } @empty {
              <li class="ts-muted">Nada abierto.</li>
            }
          </ul>
        </section>

        <section class="ts-panel" aria-labelledby="type-title">
          <header class="ts-panel__head">
            <h2 id="type-title">Por tipo</h2>
            <span class="ts-muted">Todos los tickets</span>
          </header>
          <ul class="ts-rows ts-rows--types">
            @for (row of stats.byType; track row.key) {
              <li [style.--tone]="typeOf(row.key).tone">
                <span class="ts-rows__name">{{ typeOf(row.key).label }}</span>
                <span class="ts-bar ts-bar--tone"
                  ><span
                    [style.width.%]="(row.count / stats.total) * 100"
                  ></span
                ></span>
                <span class="ts-rows__count">{{ row.count }}</span>
              </li>
            }
          </ul>
        </section>
      </div>
    } @else {
      <pi-skeleton shape="block" height="12rem" />
    }
  `,
  styles: `
    /* Same stat row as pireon.dev's hero. */
    .ts-kpis {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
      gap: 1.25rem;
      margin-bottom: 2rem;
    }
    .ts-panel {
      padding: 1.5rem;
    }
    .ts-panel__head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
      margin-bottom: 1.125rem;
      h2 {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 700;
      }
      .ts-muted {
        font-size: 0.8125rem;
      }
    }
    .ts-flow {
      margin-bottom: 1.25rem;
    }
    .ts-flow__bar {
      display: flex;
      gap: 3px;
      height: 2.25rem;
    }
    .ts-flow__segment {
      flex-basis: 0;
      min-width: 0.5rem;
      border-radius: 0.375rem;
      background: var(--tone);
    }
    .ts-flow__legend {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 1.5rem;
      margin: 1rem 0 0;
      padding: 0;
      list-style: none;
      li {
        display: flex;
        align-items: baseline;
        gap: 0.4375rem;
        margin: 0;
        font-size: 0.8125rem;
        color: var(--ts-ink-soft);
        &::before {
          content: '';
          align-self: center;
          width: 0.5rem;
          height: 0.5rem;
          border-radius: 2px;
          background: var(--tone);
        }
      }
      li.is-empty {
        opacity: 0.45;
      }
    }
    .ts-flow__count {
      font-family: var(--ts-font-mono);
      font-weight: 600;
      color: var(--ts-ink);
    }
    .ts-dashboard {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
      gap: 1.25rem;
    }
    .ts-rows {
      display: grid;
      gap: 0.75rem;
      margin: 0;
      padding: 0;
      list-style: none;
      li {
        display: grid;
        grid-template-columns: 1.75rem minmax(6rem, 9rem) 1fr 2rem;
        align-items: center;
        gap: 0.625rem;
        margin: 0;
        font-size: 0.875rem;
      }
    }
    .ts-rows--types li {
      grid-template-columns: minmax(6rem, 9rem) 1fr 2rem;
    }
    .ts-rows__name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .ts-rows__count {
      font-family: var(--ts-font-mono);
      font-weight: 600;
      text-align: right;
    }
    .ts-who {
      display: inline-grid;
      place-items: center;
      width: 1.75rem;
      height: 1.75rem;
      border-radius: 50%;
      background: color-mix(in srgb, var(--ts-brand) 16%, var(--ts-surface));
      color: color-mix(in srgb, var(--ts-brand) 70%, var(--ts-ink));
      font-family: var(--ts-font-mono);
      font-size: 0.625rem;
      font-weight: 600;
    }
    .ts-who--none {
      background: transparent;
      border: 1px dashed var(--ts-line-strong);
      color: var(--ts-muted);
    }
    .ts-bar {
      height: 0.625rem;
      border-radius: 0.25rem;
      background: var(--ts-sunken);
      overflow: hidden;
      span {
        display: block;
        height: 100%;
        border-radius: 0.25rem;
        background: var(--ts-brand);
      }
    }
    .ts-bar--tone span {
      background: var(--tone);
    }
  `,
})
export class DashboardPage {
  protected readonly facade = inject(ProjectFacade);
  protected readonly initialsOf = initials;

  private count(status: IssueStatus): number {
    return (
      this.facade.stats()?.byStatus.find((s) => s.key === status)?.count ?? 0
    );
  }

  protected readonly kpis = computed<
    {
      label: string;
      value: number;
      icon: string;
      color: 'primary' | 'accent' | 'warn' | 'highlighted' | 'success';
    }[]
  >(() => {
    const stats = this.facade.stats();
    if (!stats) return [];
    const bugs = stats.byType.find((t) => t.key === IssueType.BUG)?.count ?? 0;
    return [
      { label: 'Tickets', value: stats.total, icon: 'list', color: 'primary' },
      {
        label: 'Abiertos',
        value: stats.open,
        icon: 'time-detail',
        color: 'accent',
      },
      { label: 'Bugs (total)', value: bugs, icon: 'bug', color: 'warn' },
      {
        label: 'Pendientes de QA',
        value:
          this.count(IssueStatus.READY_FOR_QA) + this.count(IssueStatus.IN_QA),
        icon: 'qa',
        color: 'highlighted',
      },
      {
        label: 'QA fallidos',
        value: this.count(IssueStatus.QA_FAILED),
        icon: 'exclamation',
        color: 'warn',
      },
      {
        label: 'Hechos',
        value: this.count(IssueStatus.DONE),
        icon: 'check-rounded',
        color: 'success',
      },
    ];
  });

  /** Statuses in workflow order (cancelled at the end). */
  protected readonly flow = computed(() =>
    [...BOARD_COLUMNS, IssueStatus.CANCELLED].map((status) => ({
      status,
      label: STATUS[status].label,
      tone: STATUS[status].tone,
      count: this.count(status),
    })),
  );
  protected readonly flowLabel = computed(() =>
    this.flow()
      .filter((s) => s.count)
      .map((s) => `${s.label}: ${s.count}`)
      .join(', '),
  );

  protected readonly maxLoad = computed(() =>
    Math.max(
      1,
      ...(this.facade.stats()?.byAssignee.map((r) => r.count) ?? [1]),
    ),
  );
  protected readonly typeOf = (key: string) =>
    TYPE[key as IssueType] ?? { label: key, tone: 'var(--ts-muted)' };
}