import {
  ChangeDetectionStrategy,
  Component,
  computed,
  input,
} from '@angular/core';
import {
  PiActionButtonComponent,
  PiAvatarComponent,
  PiChipComponent,
  PiChipStatusComponent,
  PiTextColorDirective,
  PiTextLargeDirective,
  PiTextWeightBoldDirective,
} from '@pi/ui';

import type { Locale } from '../core/api';
import type { PublicProject } from '../core/api.types';
import type { Copy } from '../core/copy';
import { ApiImage } from './api-image';
import { ContactCta } from './contact-cta';
import { PROJECT_STATUS_TONES } from './project-card';

/**
 * A project on its own address: what it is, why it was built the way it was,
 * what went wrong, who made it, and where the code is.
 *
 * `description`, `decisions` and `postmortem` are HTML from the panel's rich
 * editor and go through Angular's sanitiser, as a page's body does.
 */
@Component({
  selector: 'app-project-detail',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
    ApiImage,
    ContactCta,
    PiActionButtonComponent,
    PiAvatarComponent,
    PiChipComponent,
    PiChipStatusComponent,
    PiTextColorDirective,
    PiTextLargeDirective,
    PiTextWeightBoldDirective,
  ],
  styleUrl: './project-detail.scss',
  template: `
    <header class="content-hero">
      <div class="landing-shell">
        <p class="landing-eyebrow">{{ copy().project.details }}</p>

        <h1 bold class="content-hero__title">{{ project().title }}</h1>

        @if (project().tagline; as tagline) {
          <p l pi-color color="grey" class="content-hero__lead">
            {{ tagline }}
          </p>
        }

        <ul class="content-hero__chips">
          <li>
            <pi-chip-status
              size="small"
              [status]="statusTone()"
              [label]="copy().projectStatus[project().status]"
            />
          </li>
          @if (project().needs_help) {
            <li>
              <pi-chip
                size="small"
                appearance="outline"
                color="accent"
                [label]="copy().labels.needsHelp"
              />
            </li>
          }
          @for (
            technology of project().technologies ?? [];
            track technology.id
          ) {
            <li>
              <pi-chip
                size="small"
                appearance="outline"
                [label]="technology.name"
              />
            </li>
          }
        </ul>

        @if (project().demo_url || repositoryUrl()) {
          <div class="content-hero__actions">
            @if (project().demo_url; as demo) {
              <a [href]="demo" target="_blank" rel="noopener">
                <pi-action-button
                  color="primary"
                  [text]="copy().labels.demo"
                  [hasIcon]="true"
                />
              </a>
            }
            @if (repositoryUrl(); as repository) {
              <a [href]="repository" target="_blank" rel="noopener">
                <pi-action-button
                  appearance="outline"
                  color="grey"
                  [text]="copy().labels.repository"
                  [hasIcon]="true"
                />
              </a>
            }
          </div>
        }
      </div>
    </header>

    <div class="landing-shell content-page__layout">
      <article class="content-page__main">
        @if (project().cover_image; as cover) {
          <figure class="content-page__media">
            <app-api-image
              [image]="cover"
              sizes="(min-width: 1024px) 46rem, 100vw"
              loading="eager"
              imgClass="content-page__image"
            />
          </figure>
        }

        @if (project().description; as description) {
          <div class="content-page__body" [innerHTML]="description"></div>
        }

        @if (project().decisions; as decisions) {
          <section class="content-page__section">
            <h2>{{ copy().project.decisions }}</h2>
            <div class="content-page__body" [innerHTML]="decisions"></div>
          </section>
        }

        @if (project().postmortem; as postmortem) {
          <section class="content-page__section">
            <h2>{{ copy().project.postmortem }}</h2>
            <div class="content-page__body" [innerHTML]="postmortem"></div>
          </section>
        }

        @if ((project().gallery ?? []).length > 0) {
          <section class="content-page__section">
            <h2>{{ copy().project.gallery }}</h2>
            <div class="project-gallery">
              @for (image of project().gallery; track image.url) {
                <figure class="project-gallery__item">
                  <app-api-image
                    [image]="image"
                    sizes="(min-width: 1024px) 23rem, 100vw"
                    imgClass="project-gallery__image"
                  />
                  @if (image.caption) {
                    <figcaption>{{ image.caption }}</figcaption>
                  }
                </figure>
              }
            </div>
          </section>
        }
      </article>

      <aside class="content-page__aside">
        <div class="landing-card content-page__panel">
          <dl class="content-page__facts">
            <div>
              <dt>{{ copy().project.status }}</dt>
              <dd>{{ copy().projectStatus[project().status] }}</dd>
            </div>
            @if (project().client; as client) {
              <div>
                <dt>{{ copy().project.client }}</dt>
                <dd>
                  @if (client.url) {
                    <a [href]="client.url" target="_blank" rel="noopener">{{
                      client.name
                    }}</a>
                  } @else {
                    {{ client.name }}
                  }
                </dd>
              </div>
            }
            @if (period(); as period) {
              <div>
                <dt>{{ copy().project.period }}</dt>
                <dd>{{ period }}</dd>
              </div>
            }
            @if (project().lead; as lead) {
              <div>
                <dt>{{ copy().project.lead }}</dt>
                <dd>
                  <a [href]="lead.path">{{ lead.name }}</a>
                </dd>
              </div>
            }
          </dl>
        </div>

        @if ((project().calls ?? []).length > 0) {
          <nav [attr.aria-label]="copy().project.openCalls">
            <p class="landing-eyebrow">{{ copy().project.openCalls }}</p>
            <ul class="content-page__related">
              @for (call of project().calls; track call.id) {
                <li>
                  <a class="landing-card content-page__card" [href]="call.path">
                    <span class="content-page__card-title">{{
                      call.title
                    }}</span>
                    @if (call.hours_per_week) {
                      <span class="content-page__card-text">
                        {{ call.hours_per_week }}
                        {{ copy().labels.hoursPerWeek }}
                      </span>
                    }
                  </a>
                </li>
              }
            </ul>
          </nav>
        }

        @if ((project().members ?? []).length > 0) {
          <div class="landing-card content-page__panel">
            <h2>{{ copy().project.team }}</h2>
            <ul class="project-team">
              @for (member of project().members; track member.id) {
                <li>
                  <a class="project-team__member" [href]="member.path">
                    <pi-avatar
                      size="small"
                      shape="circle"
                      color="primary"
                      icon="user"
                      [image]="member.avatar?.url"
                      [alt]="member.avatar?.alt"
                      [name]="member.name"
                    />
                    <span>
                      <span class="project-team__name">{{ member.name }}</span>
                      @if (member.role) {
                        <span class="content-page__muted">{{
                          member.role
                        }}</span>
                      }
                    </span>
                  </a>
                </li>
              }
            </ul>
          </div>
        }

        @if ((project().repositories ?? []).length > 0) {
          <div class="landing-card content-page__panel">
            <h2>{{ copy().project.repositories }}</h2>
            <ul class="project-repos">
              @for (repository of project().repositories; track repository.id) {
                <li>
                  @if (repository.url) {
                    <a [href]="repository.url" target="_blank" rel="noopener">{{
                      repository.full_name
                    }}</a>
                  } @else {
                    <span>{{ repository.full_name }}</span>
                  }
                  <span class="content-page__muted project-repos__stats">
                    ★ {{ repository.stars }} · {{ repository.forks }}
                    {{ copy().project.forks }}
                    @if (repository.primary_language) {
                      · {{ repository.primary_language }}
                    }
                  </span>
                  @if (repository.is_archived) {
                    <pi-chip
                      size="small"
                      appearance="outline"
                      [label]="copy().project.archived"
                    />
                  } @else if (repository.is_dormant) {
                    <pi-chip
                      size="small"
                      appearance="outline"
                      [label]="copy().project.dormant"
                    />
                  }
                </li>
              }
            </ul>
          </div>
        }

        <app-contact-cta [copy]="copy()" [locale]="locale()" />
      </aside>
    </div>
  `,
})
export class ProjectDetail {
  readonly project = input.required<PublicProject>();
  readonly copy = input.required<Copy>();
  readonly locale = input.required<Locale>();

  protected readonly statusTone = computed(
    () => PROJECT_STATUS_TONES[this.project().status],
  );

  protected readonly repositoryUrl = computed(
    () =>
      (this.project().repositories ?? []).find((repository) => repository.url)
        ?.url ?? null,
  );

  /** "marzo de 2025 – junio de 2026", or just the start while it runs. */
  protected readonly period = computed(() => {
    const { started_at, ended_at } = this.project();
    const format = (date?: string) =>
      date
        ? new Intl.DateTimeFormat(this.locale(), {
            month: 'long',
            year: 'numeric',
          }).format(new Date(date))
        : null;

    const [start, end] = [format(started_at), format(ended_at)];

    return start && end ? `${start} – ${end}` : (start ?? end);
  });
}