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-performance-summary')
export class KpiPerformanceSummary extends LitElement {
  static styles = css`
    .summary-container {
      background: #fff;
      border-radius: 16px;
      padding: 32px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      margin-bottom: 16px;
    }
    .summary-title {
      font-size: 1.5rem;
      font-weight: bold;
      margin-bottom: 16px;
    }
    .kpi-cards {
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
    }
    .kpi-card {
      background: #f7f7fa;
      border-radius: 12px;
      padding: 24px 32px;
      min-width: 220px;
      flex: 1;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .kpi-name {
      font-size: 1.1rem;
      font-weight: 500;
      margin-bottom: 8px;
    }
    .kpi-value {
      font-size: 2.2rem;
      font-weight: bold;
      color: #3a3ad6;
      margin-bottom: 4px;
    }
    .kpi-target {
      font-size: 1rem;
      color: #888;
    }
  `

  @state() kpis: Array<{ name: string; value: string | number; target: string | number; unit: 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
                value
                targetValue
                unit
              }
              total
            }
          }
        `
      })
      this.kpis = (response.data.kpis.items || []).map(kpi => {
        // value가 JSON 형태로 반환되므로 적절히 처리
        let value = '-'
        if (kpi.value && typeof kpi.value === 'object') {
          value = kpi.value.value ?? kpi.value.latestValue ?? '-'
        } else if (kpi.value) {
          value = kpi.value
        }

        return {
          name: kpi.name,
          value: value,
          target: kpi.targetValue ?? '-',
          unit: kpi.unit ?? ''
        }
      })
    } catch (e) {
      this.error = 'KPI 데이터를 불러오지 못했습니다.'
    } finally {
      this.loading = false
    }
  }

  render() {
    if (this.loading) {
      return html`<div class="summary-container">로딩 중...</div>`
    }
    if (this.error) {
      return html`<div class="summary-container">${this.error}</div>`
    }
    return html`
      <div class="summary-container">
        <div class="summary-title">KPI 실적 현황</div>
        <div class="kpi-cards">
          ${this.kpis.map(
            kpi => html`
              <div class="kpi-card">
                <div class="kpi-name">${kpi.name}</div>
                <div class="kpi-value">${kpi.value}${kpi.unit}</div>
                <div class="kpi-target">목표: ${kpi.target}${kpi.unit}</div>
              </div>
            `
          )}
        </div>
      </div>
    `
  }
}