import { LitElement, html, css } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import './ui-link';

@customElement('nav-bar')
export class NavBar extends LitElement {
  static styles = css`
  nav {
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  background: var(--color-bg-nav);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  height: 3.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background 0.3s ease;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  user-select: none;
  cursor: default;
}

.brand img {
  width: auto;
  height: 1.6rem;
  flex-shrink: 0;
}

.brand span {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  background: linear-gradient(
    135deg,
    var(--color-text) 0%,
    var(--color-accent) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.links {
  display: flex;
  gap: 1.75rem;
  align-items: center;
}

.theme-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  margin-left: 0.5rem;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  color: var(--color-text);
  cursor: pointer;
  transition:
    border-color 0.25s ease,
    color 0.25s ease,
    background 0.25s ease,
    transform 0.2s ease;
  overflow: hidden;
}

.theme-toggle:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  transform: scale(1.05);
}

.theme-toggle:active {
  transform: scale(0.95);
}

.icon {
  position: absolute;
  width: 1.1rem;
  height: 1.1rem;
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
  pointer-events: none;
}

.icon.visible {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
`;

  @state() theme: 'light' | 'dark' =
    (localStorage.getItem('theme') as 'light' | 'dark') ||
    (window.matchMedia('(prefers-color-scheme: dark)').matches
      ? 'dark'
      : 'light');

  firstUpdated() {
    document.documentElement.setAttribute('data-theme', this.theme);
  }

  toggleTheme() {
    this.theme = this.theme === 'light' ? 'dark' : 'light';
    document.documentElement.setAttribute('data-theme', this.theme);
    localStorage.setItem('theme', this.theme);
  }

  render() {
    return html`
      <nav>
        <div class="brand">
          <img src="/logo.svg" alt="Flight Score Logo" />
          <span>FlightScore</span>
        </div>
        <div class="links">
          <ui-link href="/">Home</ui-link>
          <ui-link href="/competitions">Competitions</ui-link>
          <ui-link href="/login">Login</ui-link>
          <button
            class="theme-toggle"
            @click=${this.toggleTheme}
            aria-label="Toggle theme"
          >
            <svg
              class="icon ${this.theme === 'light' ? 'visible' : ''}"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1.8"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path d="M21 12.79A9 9 0 1111.21 3a7 7 0 009.79 9.79z" />
            </svg>
            <svg
              class="icon ${this.theme === 'dark' ? 'visible' : ''}"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1.8"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <circle cx="12" cy="12" r="5" />
              <line x1="12" y1="1" x2="12" y2="3" />
              <line x1="12" y1="21" x2="12" y2="23" />
              <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
              <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
              <line x1="1" y1="12" x2="3" y2="12" />
              <line x1="21" y1="12" x2="23" y2="12" />
              <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
              <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
            </svg>
          </button>
        </div>
      </nav>
    `;
  }
}