name: Unlighthouse

on: [pull_request]

permissions:
  pull-requests: write

jobs:
  unlighthouse:
    runs-on: ubuntu-latest
    env:
      COMMENT_ID: unlighthouse-node${{matrix.node-version}}
      PORT: 8000
      CLOUDFLARE_PROJECT: hellobart-unlighthouse
      CLOUDFLARE_BRANCH: pull-${{ github.event.pull_request.number }}
    strategy:
      matrix:
        node-version: [18]
    steps:
      - name: Create initial comment
        uses: marocchino/sticky-pull-request-comment@v2.8.0
        with:
          header: ${{ env.COMMENT_ID }}
          message: |
            ⚡️ Lighthouse report

            ![loading](https://github.com/bartvdbraak/hellob.art/assets/3996360/0e00b3fc-d5f9-490b-9aa7-07cb4b59f85f)

      - name: Checkout repository
        uses: actions/checkout@v4.1.0

      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3.8.1
        with:
          node-version: ${{ matrix.node-version }}

      - name: Install dependencies
        run: npm install

      - name: Build production
        run: npm run build

      - name: Start Preview and Get Preview URL
        run: npm run preview -- --port=${{ env.PORT }} & echo $! > preview_pid

      - name: Install Dependencies
        run: npm add -g @unlighthouse/cli puppeteer

      - name: Run Unlighthouse
        run: |
          unlighthouse-ci \
            --site "http://localhost:${{ env.PORT }}" \
            --reporter jsonExpanded \
            --build-static

      - name: Upload report to Cloudflare pages
        uses: cloudflare/wrangler-action@v3.2.0
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          command: pages deploy .unlighthouse --project-name="${{ env.CLOUDFLARE_PROJECT }}" --branch=${{ env.CLOUDFLARE_BRANCH }}

      - name: Create result content
        id: create_result_content
        uses: actions/github-script@v6.4.1
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
          script: |
            const fs = require('fs');

            const result = JSON.parse(fs.readFileSync('.unlighthouse/ci-result.json', 'utf8'));

            const formatScore = score => `${Math.round(score * 100)} (${score})`;
            const getEmoji = score => score >= 0.9 ? '🟢' : score >= 0.5 ? '🟠' : '🔴';

            const score = res => `${getEmoji(res)} ${formatScore(res)}`;

            const reportUrl = `https://${{ env.CLOUDFLARE_BRANCH }}.${{ env.CLOUDFLARE_PROJECT }}.pages.dev`;

            const comment = [
                `⚡️ Lighthouse report for the changes in this PR:`,
                '| Category | Score |',
                '| --- | --- |',
                `| Performance | ${score(result.summary.categories.performance.averageScore)} |`,
                `| Accessibility | ${score(result.summary.categories.accessibility.averageScore)} |`,
                `| Best practices | ${score(result.summary.categories['best-practices'].averageScore)} |`,
                `| SEO | ${score(result.summary.categories.seo.averageScore)} |`,
                `| *Overall* | ${score(result.summary.score)} |`,
                '',
                '*Lighthouse scores for individual routes:*',
                '',
                '| Path | Performance | Accessibility | Best practices | SEO | Overall |',
                '| --- | --- | --- | --- | --- | --- |',
                `${result.routes.map(route => `| ${route.path} | ${score(route.categories.performance.score)} | ${score(route.categories.accessibility.score)} | ${score(route.categories['best-practices'].score)} | ${score(route.categories.seo.score)} | ${score(route.score)} |`).join('\n')}`,
                '',
                '*Lighthouse metrics:*',
                '',
                '| Metric | Average Value |',
                '| --- | --- |',
                `${Object.entries(result.summary.metrics).map(([metric, { averageNumericValue }]) => `| ${metric} | ${averageNumericValue} |`).join('\n')}`,
                '',
                `View the full Lighthouse report [here](${reportUrl}).`,
            ].join('\n');

            core.setOutput("comment", comment);

      - name: Update comment with result
        uses: marocchino/sticky-pull-request-comment@v2.8.0
        with:
          header: ${{ env.COMMENT_ID }}
          message: ${{ steps.create_result_content.outputs.comment }}

      - name: Update comment on failure
        uses: marocchino/sticky-pull-request-comment@v2.8.0
        if: ${{ failure() }}
        with:
          header: ${{ env.COMMENT_ID }}
          message: |
            ⚡️ Lighthouse report failed

            See deployment for any errors

      - name: Update comment on cancel
        uses: marocchino/sticky-pull-request-comment@v2.8.0
        if: ${{ cancelled() }}
        with:
          header: ${{ env.COMMENT_ID }}
          message: |
            ⚡️ Lighthouse report cancelled