import { html, css, LitElement } from 'lit'
import { customElement, state } from 'lit/decorators.js'
import { client } from '@operato/graphql'
import gql from 'graphql-tag'

@customElement('kpi-list-summary')
export class KpiListSummary extends LitElement {
  static styles = css`
    .list-container {
      background: #fff;
      border-radius: 16px;
      padding: 32px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      margin-bottom: 16px;
    }
    .list-title {
      font-size: 1.5rem;
      font-weight: bold;
      margin-bottom: 16px;
    }
    .kpi-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .kpi-item {
      padding: 10px 0;
      border-bottom: 1px solid #eee;
      font-size: 1.1rem;
      cursor: pointer;
      transition: background 0.2s;
    }
    .kpi-item:hover {
      background: #f0f0f0;
    }
  `

  @state() kpis: Array<{ name: string; desc: string }> = []
  @state() loading = true
  @state() error = ''

  connectedCallback() {
    super.connectedCallback()
    this.fetchKpis()
  }

  async fetchKpis() {
    this.loading = true
    this.error = ''
    try {
      const response = await client.query({
        query: gql`
          query {
            kpis {
              items {
                id
                name
                description
                formula
              }
              total
            }
          }
        `
      })
      this.kpis = (response.data.kpis.items || []).map(kpi => ({
        name: kpi.name,
        desc: kpi.formula || kpi.description || ''
      }))
    } catch (e) {
      this.error = 'KPI 목록을 불러오지 못했습니다.'
    } finally {
      this.loading = false
    }
  }

  render() {
    if (this.loading) {
      return html`<div class="list-container">로딩 중...</div>`
    }
    if (this.error) {
      return html`<div class="list-container">${this.error}</div>`
    }
    return html`
      <div class="list-container">
        <div class="list-title">KPI 목록/검색/상세</div>
        <ul class="kpi-list">
          ${this.kpis.map(
            kpi => html`
              <li class="kpi-item">
                <div><b>${kpi.name}</b></div>
                <div style="font-size:0.95rem;color:#888;">${kpi.desc}</div>
              </li>
            `
          )}
        </ul>
      </div>
    `
  }
}