// components/page-home.js
import { LitElement, html, css } from 'lit'
import { store } from '../store/index.js'
import { StoreController } from '../controllers/store.js'

class PageHome extends LitElement {
  #user  = new StoreController(this, store, s => s.user)
  #items = new StoreController(this, store, s => s.items)

  static styles = css`
    :host { display: block; padding: 2rem 1.5rem; }
    h1 { font-size: 1.5rem; margin: 0 0 0.5rem; }
    p  { color: #64748b; margin: 0 0 2rem; }
    .summary {
      display: flex;
      gap: 1rem;
    }
    .stat {
      padding: 1rem 1.5rem;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
    }
    .stat-value { font-size: 2rem; font-weight: 700; }
    .stat-label { font-size: 0.8rem; color: #94a3b8; margin-top: 0.25rem; }
  `

  render() {
    const name = this.#user.value?.name ?? 'there'
    const count = this.#items.value.length

    return html`
      <h1>Hey, ${name}</h1>
      <p>Here's what's going on.</p>
      <div class="summary">
        <div class="stat">
          <div class="stat-value">${count}</div>
          <div class="stat-label">Items</div>
        </div>
      </div>
    `
  }
}

customElements.define('page-home', PageHome)