import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import type { RouteParams } from './router';

import '@components/General/Button';
import '@components/General/Card';
import '@components/General/Fieldset';

@customElement('arx-404-page')
export class FourOhFourPage extends LitElement {
  @property({ type: Object })
  params: RouteParams = {};

  @property({ type: String })
  path = '';

  @property({ type: Boolean })
  canGoBack = false;

  static override styles = [
    css`
      :host {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: system-ui, -apple-system, sans-serif;
        padding: 2rem 1rem;
        min-height: 80vh;
        background-color: var(--color-base-100);
      }

      .error-container h1 {
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .spinning-gear {
        animation: spin 8s linear infinite;
        font-size: 7rem;
        margin: 0 -10px;
      }

      @keyframes spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      arx-fieldset {
        margin-top: 1rem;
        text-align: center;
      }

      .path {
        font-family: monospace;
        color: var(--color-accent);
        word-break: break-all;
        font-size: 1rem;
        padding: 0.75rem;
        background: oklch(from var(--color-base-content) l c h / 0.1);
        border-radius: var(--radius-field);
        display: inline-block;
        max-width: 100%;
        text-align: left;
      }

      h1 {
        font-size: 7rem;
        font-weight: 800;
        color: var(--color-base-content);
        line-height: 1;
        margin-bottom: 1rem;
      }

      .four {
        padding: 0 0.25rem;
      }

      .message-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
      }

      .status {
        font-size: 1.5rem;
        color: var(--color-base-content);
        margin: 0.5rem 0;
        font-weight: 600;
      }

      .sub-text {
        color: var(--color-secondary);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        margin-bottom: 2.5rem;
        font-size: 1.1rem;
      }

      .actions {
        display: flex;
        gap: 1.25rem;
        justify-content: center;
        flex-wrap: wrap;
      }

      @media (max-width: 640px) {
        h1 {
          font-size: 5rem;
        }

        .spinning-gear {
          font-size: 5rem;
        }

        .status {
          font-size: 1.25rem;
        }

        .sub-text {
          font-size: 1rem;
        }

        .actions {
          flex-direction: column;
          align-items: center;
        }
      }
    `,
  ];

  override render() {
    return html`
      <arx-card>
        <div class="error-container">
          <h1>
            <span class="four">4</span>
            <iconify-icon
              icon="fluent-emoji:gear"
              class="spinning-gear"
            ></iconify-icon>
            <span class="four">4</span>
          </h1>
        </div>
        <arx-fieldset legend="Path">
          <div class="path">${this.path}</div>
        </arx-fieldset>
        <div class="message-text">
          <div class="status">Page not found</div>
          <div class="sub-text">
            The page you are looking for does not exist
          </div>
        </div>
        <div class="actions">
          <arx-button
            @click="${() =>
              this.dispatchEvent(
                new CustomEvent('go-back', {
                  bubbles: true,
                  composed: true,
                }),
              )}"
            variant="primary"
            label="Go Back"
          >
            <iconify-icon
              slot="prefix"
              icon="material-symbols:arrow-back"
            ></iconify-icon>
          </arx-button>
          <arx-button href="home" label="Home" variant="secondary">
            <iconify-icon icon="material-symbols:home"></iconify-icon>
            Home
          </arx-button>
        </div>
      </arx-card>
    `;
  }
}
