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

@customElement('kpi-level1-card')
export class KpiLevel1Card extends LitElement {
  static styles = css`
    :host {
      display: block;
    }
    .score-card {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 16px;
      padding: 32px;
      color: white;
      box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .score-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 16px;
    }
    .score-content {
      position: relative;
      z-index: 1;
    }
    .score-title {
      font-size: 1.2rem;
      font-weight: 600;
      margin-bottom: 16px;
      opacity: 0.9;
    }
    .score-value {
      font-size: 4rem;
      font-weight: bold;
      margin-bottom: 8px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    .score-grade {
      font-size: 1.5rem;
      font-weight: 600;
      margin-bottom: 16px;
      opacity: 0.9;
    }
    .score-period {
      font-size: 0.9rem;
      opacity: 0.7;
      margin-bottom: 16px;
    }
    .score-details {
      display: flex;
      justify-content: space-around;
      margin-top: 24px;
      padding-top: 16px;
      border-top: 1px solid rgba(255, 255, 255, 0.2);
    }
    .detail-item {
      text-align: center;
    }
    .detail-value {
      font-size: 1.4rem;
      font-weight: bold;
      margin-bottom: 4px;
    }
    .detail-label {
      font-size: 0.8rem;
      opacity: 0.8;
    }
    .loading {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 200px;
      color: #666;
      font-size: 1.1rem;
    }
    .error {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 200px;
      color: #d32f2f;
      font-size: 1.1rem;
    }
  `

  @state() loading = true
  @state() error = ''
  @state() totalScore = 0
  @state() grade = ''
  @state() totalKpis = 0
  @state() totalCategories = 0
  @state() averageScore = 0
  @state() currentMonth = ''

  connectedCallback() {
    super.connectedCallback()
    this.currentMonth = this.getCurrentMonth()
    this.fetchTotalScore()
  }

  private getCurrentMonth(): string {
    const now = new Date()
    const year = now.getFullYear()
    const month = String(now.getMonth() + 1).padStart(2, '0')
    return `${year}-${month}`
  }

  private calculateGrade(score: number): string {
    if (score >= 90) return 'A+'
    if (score >= 85) return 'A'
    if (score >= 80) return 'A-'
    if (score >= 75) return 'B+'
    if (score >= 70) return 'B'
    if (score >= 65) return 'B-'
    if (score >= 60) return 'C+'
    if (score >= 55) return 'C'
    if (score >= 50) return 'C-'
    return 'D'
  }

  async fetchTotalScore() {
    this.loading = true
    this.error = ''

    try {
      const response = await client.query({
        query: gql`
          query {
            kpiStatistics {
              items {
                id
                valueDate
                periodType
                mean
                median
                kpi {
                  id
                  name
                  targetValue
                  unit
                  category: parent {
                    id
                    name
                  }
                }
              }
            }
          }
        `
      })

      const statistics = response.data.kpiStatistics.items || []

      // MONTH 타입의 현재 월 데이터만 필터링
      const currentMonthStats = statistics.filter(
        stat => stat.periodType === 'MONTH' && stat.valueDate === this.currentMonth
      )

      if (currentMonthStats.length === 0) {
        this.error = '현재 월의 데이터가 없습니다.'
        return
      }

      // 총점 계산 (평균값 기준)
      const scores = currentMonthStats.map(stat => {
        const mean = stat.mean || 0
        const targetValue = stat.kpi?.targetValue || 100

        if (targetValue === 0) return 0

        // 목표 대비 달성률 계산 (최대 100점)
        const achievement = Math.min((mean / targetValue) * 100, 100)
        return Math.max(achievement, 0) // 음수 방지
      })

      this.totalScore = Math.round(scores.reduce((sum, score) => sum + score, 0) / scores.length)
      this.grade = this.calculateGrade(this.totalScore)
      this.totalKpis = currentMonthStats.length

      // 카테고리 수 계산
      const categories = new Set(currentMonthStats.map(stat => stat.kpi?.category?.name).filter(Boolean))
      this.totalCategories = categories.size

      // 평균 점수 계산
      this.averageScore = Math.round(scores.reduce((sum, score) => sum + score, 0) / scores.length)
    } catch (e) {
      console.error('총점 데이터를 불러오지 못했습니다:', e)
      this.error = '총점 데이터를 불러오지 못했습니다.'
    } finally {
      this.loading = false
    }
  }

  render() {
    if (this.loading) {
      return html`
        <div class="score-card">
          <div class="loading">총점 계산 중...</div>
        </div>
      `
    }

    if (this.error) {
      return html`
        <div class="score-card">
          <div class="error">${this.error}</div>
        </div>
      `
    }

    return html`
      <div class="score-card">
        <div class="score-content">
          <div class="score-title">그룹 총점</div>
          <div class="score-value">${this.totalScore}</div>
          <div class="score-grade">${this.grade}</div>
          <div class="score-period">${this.currentMonth} 기준</div>

          <div class="score-details">
            <div class="detail-item">
              <div class="detail-value">${this.totalKpis}</div>
              <div class="detail-label">KPI</div>
            </div>
            <div class="detail-item">
              <div class="detail-value">${this.totalCategories}</div>
              <div class="detail-label">카테고리</div>
            </div>
            <div class="detail-item">
              <div class="detail-value">${this.averageScore}</div>
              <div class="detail-label">평균</div>
            </div>
          </div>
        </div>
      </div>
    `
  }
}