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

@customElement('kpi-grade-visualization')
export class KpiGradeVisualization extends LitElement {
  static styles = css`
    .grade-container {
      background: #fff;
      border-radius: 16px;
      padding: 32px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      margin-bottom: 16px;
    }
    .grade-title {
      font-size: 1.5rem;
      font-weight: bold;
      margin-bottom: 16px;
    }
    .grade-cards {
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
    }
    .grade-card {
      background: #f0f7fa;
      border-radius: 12px;
      padding: 20px 28px;
      min-width: 180px;
      flex: 1;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .grade-label {
      font-size: 1.1rem;
      font-weight: 500;
      margin-bottom: 8px;
    }
    .grade-value {
      font-size: 2rem;
      font-weight: bold;
      margin-bottom: 4px;
    }
    .grade-desc {
      font-size: 1rem;
      color: #888;
    }
  `

  @state() grades = [
    { kpi: '불량률', grade: 'A', color: '#4caf50', desc: '우수', value: 0.8 },
    { kpi: '불량률', grade: 'B', color: '#ff9800', desc: '양호', value: 1.5 },
    { kpi: '불량률', grade: 'C', color: '#f44336', desc: '주의', value: 2.7 }
  ]

  render() {
    return html`
      <div class="grade-container">
        <div class="grade-title">KPI 등급/구간 시각화</div>
        <div class="grade-cards">
          ${this.grades.map(
            g => html`
              <div class="grade-card" style="border-left: 8px solid ${g.color}">
                <div class="grade-label">${g.kpi} - ${g.grade}등급</div>
                <div class="grade-value" style="color:${g.color}">${g.value}</div>
                <div class="grade-desc">${g.desc}</div>
              </div>
            `
          )}
        </div>
      </div>
    `
  }
}