import '@material/web/button/elevated-button.js'
// import '@material/web/select/outlined-select.js'
import '@material/web/textfield/outlined-text-field.js'
import '@material/web/icon/icon.js'

import { PageView } from '@operato/shell'
import { css, html, LitElement } from 'lit'
import { customElement, property } from 'lit/decorators.js'
import { client } from '@operato/graphql'
import { i18next, localize } from '@operato/i18n'
import { notify } from '@operato/layout'
import { OxPopup } from '@operato/popup'
import gql from 'graphql-tag'
import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'

const VIZ_TYPES = [
  { value: 'CARD', label: '카드', icon: 'dashboard' },
  { value: 'GAUGE', label: '게이지', icon: 'speed' },
  { value: 'PROGRESS', label: '진행률', icon: 'linear_scale' },
  { value: 'BAR', label: '막대 차트', icon: 'bar_chart' },
  { value: 'LINE', label: '선 차트', icon: 'show_chart' },
  { value: 'PIE', label: '파이 차트', icon: 'pie_chart' },
  { value: 'DONUT', label: '도넛 차트', icon: 'donut_large' },
  { value: 'RADAR', label: '레이더 차트', icon: 'radar' },
  { value: 'BULLET', label: '불릿 차트', icon: 'track_changes' },
  { value: 'THERMOMETER', label: '온도계', icon: 'thermostat' },
  { value: 'SPEEDOMETER', label: '속도계', icon: 'speed' },
  { value: 'ICON', label: '아이콘', icon: 'emoji_events' },
  { value: 'BADGE', label: '배지', icon: 'badge' },
  { value: 'TEXT', label: '텍스트', icon: 'text_fields' },
  { value: 'TABLE', label: '테이블', icon: 'table_chart' }
]

@customElement('kpi-viz-editor')
export class KpiVizEditor extends localize(i18next)(LitElement) {
  static styles = [
    CommonHeaderStyles,
    ScrollbarStyles,
    css`
      :host {
        display: flex;
        flex-direction: column;
        background-color: var(--md-sys-color-surface, #f4f6fa);
      }

      .viz-editor {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow-y: auto;

        background: white;
        padding: 24px;
      }

      .form-group {
        margin-bottom: 20px;
      }

      .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: #555;
      }

      .form-options {
        flex: 1;
        display: flex;
        flex-direction: row;
      }

      .viz-type-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px;
        margin-bottom: 20px;
      }

      .viz-type-option {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 16px 12px;
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
        text-align: center;
      }

      .viz-type-option:hover {
        border-color: #2196f3;
        background: #f5f9ff;
      }

      .viz-type-option.selected {
        border-color: #2196f3;
        background: #e3f2fd;
      }

      .viz-type-option md-icon {
        font-size: 24px;
        margin-bottom: 8px;
        color: #666;
      }

      .viz-type-option.selected md-icon {
        color: #2196f3;
      }

      .viz-type-option .label {
        font-size: 0.9rem;
        font-weight: 500;
        color: #333;
      }

      .viz-meta-section {
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid #eee;
      }

      .color-picker {
        display: flex;
        gap: 12px;
        align-items: center;
        margin-bottom: 16px;
      }

      .color-input {
        width: 60px;
        height: 40px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
      }

      .buttons {
        display: flex;
        gap: 12px;
        justify-content: flex-end;
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid #eee;
      }

      .preview {
        flex: 1;
        margin: 30px 16px 16px 16px;
        padding: 16px;
        background: #f8f9fa;
        border-radius: 8px;
        border: 1px solid #e9ecef;
      }

      .preview h4 {
        margin: 0 0 12px 0;
        color: #495057;
        font-size: 0.95rem;
      }

      .footer span {
        font-size: 0.8em;
        color: var(--md-sys-color-on-surface);
        line-height: 1.5;
        padding: 10px;
      }
    `
  ]

  @property({ type: Object }) kpi: any = null
  @property({ type: String }) selectedVizType: string = 'CARD'
  @property({ type: Object }) vizMeta: any = {}
  @property({ type: Object }) onSave: Function = () => {}
  @property({ type: Object }) onCancel: Function = () => {}

  connectedCallback() {
    super.connectedCallback()
    if (this.kpi) {
      this.selectedVizType = this.kpi.vizType || 'CARD'
      this.vizMeta = this.kpi.vizMeta || {}
    }
  }

  _selectVizType(type: string) {
    this.selectedVizType = type
    this.requestUpdate()
  }

  _updateVizMeta(key: string, value: any) {
    this.vizMeta = { ...this.vizMeta, [key]: value }
    this.requestUpdate()
  }

  _renderPreview() {
    const kpiValue = this.kpi?.value?.value ?? 75
    const targetValue = this.kpi?.targetValue ?? 100
    const unit = this.kpi?.unit ?? ''
    const color = this.vizMeta.color || '#2196f3'
    const icon = this.vizMeta.icon || 'trending_up'
    const min = this.vizMeta.minValue ?? 0
    const max = this.vizMeta.maxValue ?? 100

    switch (this.selectedVizType) {
      case 'CARD':
        return html`
          <div
            style="display:flex;align-items:center;gap:12px;padding:16px;background:white;border-radius:8px;border:1px solid #e0e0e0;"
          >
            <md-icon style="color:${color};font-size:32px;">${icon}</md-icon>
            <div>
              <div style="font-size:1.5rem;font-weight:bold;color:${color};">${kpiValue}${unit}</div>
              <div style="font-size:0.9rem;color:#666;">목표: ${targetValue}${unit}</div>
            </div>
          </div>
        `
      case 'GAUGE': {
        const value = Math.max(min, Math.min(kpiValue, max))
        const percent = max - min > 0 ? (value - min) / (max - min) : 0
        const r = 60
        const cx = 90
        const cy = 90
        const startX = cx - r
        const startY = cy
        const endX = cx + r * Math.cos(Math.PI * (1 - percent))
        const endY = cy - r * Math.sin(Math.PI * (1 - percent))
        const needleAngle = Math.PI - Math.PI * percent
        const needleX = cx + r * Math.cos(needleAngle)
        const needleY = cy - r * Math.sin(needleAngle)
        return html`
          <div style="text-align:center;padding:16px;">
            <svg width="180" height="110" viewBox="0 0 180 110">
              <!-- 배경 arc -->
              <path
                d="M${startX},${startY} A${r},${r} 0 0,1 ${cx + r},${cy}"
                fill="none"
                stroke="#e0e0e0"
                stroke-width="16"
              />
              <!-- 값 arc -->
              <path
                d="M${startX},${startY} A${r},${r} 0 0,1 ${endX},${endY}"
                fill="none"
                stroke="${color}"
                stroke-width="16"
              />
              <!-- 바늘 -->
              <line x1="${cx}" y1="${cy}" x2="${needleX}" y2="${needleY}" stroke="#333" stroke-width="4" />
              <!-- 중심 원 -->
              <circle cx="${cx}" cy="${cy}" r="7" fill="#333" />
              <!-- 중앙값 -->
              <text x="${cx}" y="${cy - 25}" text-anchor="middle" font-size="22" fill="${color}" font-weight="bold">
                ${value}${unit}
              </text>
              <!-- min/max -->
              <text x="${cx - r}" y="${cy + 20}" text-anchor="middle" font-size="12" fill="#888">${min}</text>
              <text x="${cx + r}" y="${cy + 20}" text-anchor="middle" font-size="12" fill="#888">${max}</text>
            </svg>
          </div>
        `
      }
      case 'SPEEDOMETER': {
        const value = Math.max(min, Math.min(kpiValue, max))
        const percent = max - min > 0 ? (value - min) / (max - min) : 0
        const r = 60
        const cx = 90
        const cy = 90
        const startX = cx - r
        const startY = cy
        const endX = cx + r * Math.cos(Math.PI * (1 - percent))
        const endY = cy - r * Math.sin(Math.PI * (1 - percent))
        const needleAngle = Math.PI - Math.PI * percent
        const needleX = cx + r * Math.cos(needleAngle)
        const needleY = cy - r * Math.sin(needleAngle)
        // 중간 눈금 (5개)
        const ticks = Array.from({ length: 6 }, (_, i) => {
          const tickAngle = Math.PI - (Math.PI * i) / 5
          const tx1 = cx + (r - 8) * Math.cos(tickAngle)
          const ty1 = cy - (r - 8) * Math.sin(tickAngle)
          const tx2 = cx + (r + 8) * Math.cos(tickAngle)
          const ty2 = cy - (r + 8) * Math.sin(tickAngle)
          const label = Math.round(min + (max - min) * (i / 5))
          const lx = cx + (r + 22) * Math.cos(tickAngle)
          const ly = cy - (r + 22) * Math.sin(tickAngle) + 6
          return { tx1, ty1, tx2, ty2, label, lx, ly }
        })
        return html`
          <div style="text-align:center;padding:16px;">
            <svg width="200" height="120" viewBox="0 0 200 120">
              <!-- 배경 arc (더 두껍게) -->
              <path
                d="M${startX + 10},${startY} A${r},${r} 0 0,1 ${cx + r + 10},${cy}"
                fill="none"
                stroke="#e0e0e0"
                stroke-width="28"
              />
              <!-- 값 arc -->
              <path
                d="M${startX + 10},${startY} A${r},${r} 0 0,1 ${endX + 10},${endY}"
                fill="none"
                stroke="${color}"
                stroke-width="28"
              />
              <!-- 눈금 -->
              ${ticks.map(
                t =>
                  html`<line
                    x1="${t.tx1 + 10}"
                    y1="${t.ty1}"
                    x2="${t.tx2 + 10}"
                    y2="${t.ty2}"
                    stroke="#888"
                    stroke-width="2"
                  />`
              )}
              <!-- 눈금 숫자 -->
              ${ticks.map(
                t =>
                  html`<text
                    x="${t.lx + 10}"
                    y="${t.ly}"
                    text-anchor="middle"
                    font-size="14"
                    fill="#333"
                    font-weight="bold"
                    >${t.label}</text
                  >`
              )}
              <!-- 바늘 (빨간색) -->
              <line x1="${cx + 10}" y1="${cy}" x2="${needleX + 10}" y2="${needleY}" stroke="#d32f2f" stroke-width="6" />
              <!-- 중심 원 -->
              <circle cx="${cx + 10}" cy="${cy}" r="13" fill="#333" />
              <!-- 중앙값 -->
              <text
                x="${cx + 10}"
                y="${cy - 32}"
                text-anchor="middle"
                font-size="26"
                fill="${color}"
                font-weight="bold"
              >
                ${value}${unit}
              </text>
              <!-- min/max 포인트 -->
              <circle cx="${startX + 10}" cy="${startY}" r="7" fill="#fff" stroke="#888" stroke-width="2" />
              <circle cx="${cx + r + 10}" cy="${cy}" r="7" fill="#fff" stroke="#888" stroke-width="2" />
              <!-- min/max 숫자 크게 -->
              <text
                x="${startX + 10}"
                y="${startY + 32}"
                text-anchor="middle"
                font-size="16"
                fill="#333"
                font-weight="bold"
              >
                ${min}
              </text>
              <text
                x="${cx + r + 10}"
                y="${cy + 32}"
                text-anchor="middle"
                font-size="16"
                fill="#333"
                font-weight="bold"
              >
                ${max}
              </text>
            </svg>
          </div>
        `
      }
      case 'PROGRESS':
        const progressPercentage = Math.min((kpiValue / targetValue) * 100, 100)
        return html`
          <div style="padding:16px;">
            <div style="background:#e0e0e0;height:20px;border-radius:10px;overflow:hidden;">
              <div style="background:${color};height:100%;width:${progressPercentage}%;transition:width 0.3s;"></div>
            </div>
            <div style="text-align:center;margin-top:8px;font-weight:bold;color:${color};">
              ${kpiValue}${unit} / ${targetValue}${unit}
            </div>
          </div>
        `
      case 'THERMOMETER': {
        const value = Math.max(min, Math.min(kpiValue, max))
        const percent = max - min > 0 ? (value - min) / (max - min) : 0
        const barHeight = 120
        const barWidth = 24
        const x = 100
        const yTop = 30
        const yBottom = yTop + barHeight
        const fillY = yBottom - percent * barHeight
        return html`
          <div style="text-align:center;padding:16px;">
            <svg width="200" height="180" viewBox="0 0 200 180">
              <!-- 바깥 테두리 -->
              <rect
                x="${x - barWidth / 2 - 4}"
                y="${yTop - 4}"
                width="${barWidth + 8}"
                height="${barHeight + 8}"
                rx="16"
                fill="#f5f5f5"
                stroke="#bbb"
                stroke-width="2"
              />
              <!-- 빈 막대 -->
              <rect
                x="${x - barWidth / 2}"
                y="${yTop}"
                width="${barWidth}"
                height="${barHeight}"
                rx="12"
                fill="#e0e0e0"
              />
              <!-- 채워진 부분 -->
              <rect
                x="${x - barWidth / 2}"
                y="${fillY}"
                width="${barWidth}"
                height="${yBottom - fillY}"
                rx="12"
                fill="${color}"
              />
              <!-- 하단 구슬 -->
              <circle cx="${x}" cy="${yBottom + 18}" r="22" fill="#e0e0e0" stroke="#bbb" stroke-width="2" />
              <circle cx="${x}" cy="${yBottom + 18}" r="18" fill="${color}" />
              <!-- 현재값 -->
              <text x="${x}" y="${fillY - 12}" text-anchor="middle" font-size="22" fill="${color}" font-weight="bold">
                ${value}${unit}
              </text>
              <!-- min/max -->
              <text x="${x}" y="${yBottom + 52}" text-anchor="middle" font-size="16" fill="#333" font-weight="bold">
                ${min}
              </text>
              <text x="${x}" y="${yTop - 12}" text-anchor="middle" font-size="16" fill="#333" font-weight="bold">
                ${max}
              </text>
            </svg>
          </div>
        `
      }
      case 'ICON':
        return html`
          <div style="text-align:center;padding:16px;">
            <md-icon style="color:${color};font-size:48px;">${icon}</md-icon>
            <div style="font-size:1.2rem;font-weight:bold;color:${color};margin-top:8px;">${kpiValue}${unit}</div>
          </div>
        `
      default:
        return html` <div style="padding:16px;text-align:center;color:#666;">${this.selectedVizType} 미리보기</div> `
    }
  }

  render() {
    return html`
      <div class="viz-editor">
        <div class="form-group">
          <label>시각화 타입 선택</label>
          <div class="viz-type-grid">
            ${VIZ_TYPES.map(
              type => html`
                <div
                  class="viz-type-option ${this.selectedVizType === type.value ? 'selected' : ''}"
                  @click=${() => this._selectVizType(type.value)}
                >
                  <md-icon>${type.icon}</md-icon>
                  <div class="label">${type.label}</div>
                </div>
              `
            )}
          </div>
        </div>

        <div class="form-options">
          <div class="viz-meta-section">
            <label>시각화 옵션</label>

            <div class="form-group">
              <label>색상</label>
              <div class="color-picker">
                <input
                  type="color"
                  class="color-input"
                  .value=${this.vizMeta.color || '#2196f3'}
                  @change=${(e: any) => this._updateVizMeta('color', e.target.value)}
                />
                <md-outlined-text-field
                  label="색상 코드"
                  .value=${this.vizMeta.color || '#2196f3'}
                  @change=${(e: any) => this._updateVizMeta('color', e.target.value)}
                ></md-outlined-text-field>
              </div>
            </div>

            <div class="form-group">
              <label>아이콘</label>
              <md-outlined-text-field
                label="Material Icons 이름"
                .value=${this.vizMeta.icon || 'trending_up'}
                @change=${(e: any) => this._updateVizMeta('icon', e.target.value)}
              ></md-outlined-text-field>
            </div>

            <div class="form-group">
              <label>최소값</label>
              <md-outlined-text-field
                type="number"
                label="최소값"
                .value=${this.vizMeta.minValue || 0}
                @change=${(e: any) => this._updateVizMeta('minValue', parseFloat(e.target.value))}
              ></md-outlined-text-field>
            </div>

            <div class="form-group">
              <label>최대값</label>
              <md-outlined-text-field
                type="number"
                label="최대값"
                .value=${this.vizMeta.maxValue || 100}
                @change=${(e: any) => this._updateVizMeta('maxValue', parseFloat(e.target.value))}
              ></md-outlined-text-field>
            </div>

            <div class="form-group">
              <label>소수점 자릿수</label>
              <md-outlined-text-field
                type="number"
                label="소수점 자릿수"
                .value=${this.vizMeta.decimalPlaces || 0}
                @change=${(e: any) => this._updateVizMeta('decimalPlaces', parseInt(e.target.value))}
              ></md-outlined-text-field>
            </div>
          </div>

          <div class="preview">
            <h4>미리보기</h4>
            ${this._renderPreview()}
          </div>
        </div>
      </div>

      <div class="footer">
        <div filler></div>
        <button type="button" @click=${this.onCancel}><md-icon>cancel</md-icon>취소</button>
        <button type="button" @click=${() => this.onSave(this.selectedVizType, this.vizMeta)} done>
          <md-icon>save</md-icon>저장
        </button>
      </div>
    `
  }
}