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

@customElement('kpi-history-viewer')
export class KpiHistoryViewer extends LitElement {
  static styles = css`
    .history-container {
      background: #fff;
      border-radius: 16px;
      padding: 32px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      margin-bottom: 16px;
    }
    .history-title {
      font-size: 1.5rem;
      font-weight: bold;
      margin-bottom: 16px;
    }
    .history-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .history-item {
      padding: 12px 0;
      border-bottom: 1px solid #eee;
      font-size: 1.1rem;
    }
    .history-meta {
      color: #888;
      font-size: 0.95rem;
    }
  `

  @state() histories = [
    { date: '2024-06-01', action: 'Release', user: '홍길동', desc: '불량률 KPI 산식 변경 및 버전 Release' },
    { date: '2024-05-15', action: 'Revert', user: '김감리', desc: '불량률 KPI 이전 버전 복원' },
    { date: '2024-05-01', action: 'Release', user: '홍길동', desc: '불량률 KPI 신규 등록 및 Release' }
  ]

  render() {
    return html`
      <div class="history-container">
        <div class="history-title">KPI 이력/버전 관리</div>
        <ul class="history-list">
          ${this.histories.map(
            h => html`
              <li class="history-item">
                <div>${h.action} - ${h.desc}</div>
                <div class="history-meta">${h.date} / ${h.user}</div>
              </li>
            `
          )}
        </ul>
      </div>
    `
  }
}