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

@customElement('kpi-value-entry')
export class KpiValueEntry extends LitElement {
  static styles = css`
    .entry-container {
      background: #fff;
      border-radius: 16px;
      padding: 32px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      margin-bottom: 16px;
    }
    .entry-title {
      font-size: 1.5rem;
      font-weight: bold;
      margin-bottom: 16px;
    }
    .entry-form {
      display: flex;
      gap: 12px;
      align-items: center;
    }
    .entry-input {
      padding: 8px 12px;
      border-radius: 8px;
      border: 1px solid #ccc;
      font-size: 1rem;
      width: 120px;
    }
    .entry-btn {
      padding: 8px 20px;
      border-radius: 8px;
      background: #3a3ad6;
      color: #fff;
      border: none;
      font-size: 1rem;
      cursor: pointer;
      transition: background 0.2s;
    }
    .entry-btn:hover {
      background: #2222aa;
    }
    .entry-note {
      font-size: 0.95rem;
      color: #888;
      margin-top: 8px;
    }
  `

  @state() value = ''

  render() {
    return html`
      <div class="entry-container">
        <div class="entry-title">KPI 실적 수동입력/자동집계</div>
        <form class="entry-form" @submit=${this.onSubmit}>
          <input
            class="entry-input"
            type="text"
            .value=${this.value}
            @input=${e => (this.value = e.target.value)}
            placeholder="실적값 입력"
          />
          <button class="entry-btn" type="submit">저장</button>
        </form>
        <div class="entry-note">자동집계는 스케줄에 따라 별도 처리됩니다.</div>
      </div>
    `
  }

  onSubmit(e: Event) {
    e.preventDefault()
    // TODO: 저장 로직 구현
    alert(`입력값: ${this.value}`)
    this.value = ''
  }
}