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

import type { Locale } from '../core/api';
import type { PublicTechnology } from '../core/api.types';
import type { Copy } from '../core/copy';
import { listingPath } from '../core/routes';
import { ApiImage } from './api-image';
import { ContactCta } from './contact-cta';

/**
 * One technology on its own address: what it is, where the collective places
 * it on the radar, and where its own people document it.
 *
 * The logo sits on a light tile in both themes, as it does on the radar. A
 * brand's own mark is not ours to recolour, and some — Rust's, black — would
 * otherwise vanish against a dark page.
 *
 * `website` is the only link the API carries. It is the project's own home
 * page, which is where its documentation lives; there is no separate field for
 * the docs, so the label says what the link actually is.
 */
@Component({
  selector: 'app-technology-detail',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
    ApiImage,
    ContactCta,
    PiActionButtonComponent,
    PiTextColorDirective,
    PiTextLargeDirective,
    PiTextWeightBoldDirective,
  ],
  styleUrl: './technology-detail.scss',
  template: `
    <header class="content-hero">
      <div class="landing-shell technology-hero">
        <span
          class="technology-logo"
          [style.--brand]="technology().color || null"
        >
          @if (technology().logo; as logo) {
            <app-api-image
              [image]="logo"
              sizes="72px"
              loading="eager"
              imgClass="technology-logo__image"
            />
          } @else {
            <span class="technology-logo__initial" aria-hidden="true">{{
              technology().name[0]
            }}</span>
          }
        </span>

        <div>
          <p class="landing-eyebrow">{{ category() }}</p>
          <h1 bold class="content-hero__title">{{ technology().name }}</h1>

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

          @if (technology().website; as website) {
            <p class="content-hero__actions">
              <a [href]="website" target="_blank" rel="noopener noreferrer">
                <pi-action-button
                  size="large"
                  color="primary"
                  [text]="copy().technology.website"
                  [hasIcon]="true"
                />
              </a>
            </p>
          }
        </div>
      </div>
    </header>

    <div class="landing-shell content-page__layout">
      <div>
        @if (ring(); as ring) {
          <section class="content-page__section">
            <h2>{{ copy().technology.ringTitle }}: {{ ring.label }}</h2>
            <p class="technology-text">{{ ring.lead }}</p>

            @if (technology().radar_note; as note) {
              <p class="technology-text technology-note">{{ note }}</p>
            }
          </section>
        }

        <p>
          <a [href]="radarHref()">{{ copy().technology.back }} →</a>
        </p>
      </div>

      <aside class="content-page__aside">
        @if (facts().length > 0) {
          <div class="landing-card content-page__panel">
            <ul class="content-page__facts">
              @for (fact of facts(); track fact) {
                <li>{{ fact }}</li>
              }
            </ul>
          </div>
        }

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

  protected readonly category = computed(
    () => this.copy().radar.categories[this.technology().category],
  );

  protected readonly radarHref = computed(() =>
    listingPath('radar', this.locale()),
  );

  /** Null for a technology the collective uses but has not placed. */
  protected readonly ring = computed(() => {
    const ring = this.technology().ring;

    return ring
      ? { label: this.copy().rings[ring], lead: this.copy().radar.ringLead[ring] }
      : null;
  });

  /** Counts the API reports as zero say nothing, so they are not shown. */
  protected readonly facts = computed(() => {
    const { projects_count: projects, members_count: members } =
      this.technology();
    const copy = this.copy().technology;
    const facts: string[] = [];

    if (projects > 0) {
      facts.push(`${projects} ${copy.usedIn}`);
    }

    if (members > 0) {
      facts.push(`${members} ${copy.membersUsing}`);
    }

    return facts;
  });
}