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

import '../../../google-map/common-google-map.js'

declare global {
  interface Window {
    google: any
  }
}

@customElement('kpi-map-panel')
export class KpiMapPanel extends LitElement {
  static styles = css`
    :host {
      display: flex;
      background: #f8f9fa;
      overflow: hidden;
      position: relative;
      min-height: 500px;
    }
    .map-overlay {
      position: absolute;
      top: 16px;
      left: 16px;
      z-index: 10;
      background: rgba(255, 255, 255, 0.95);
      border-radius: 8px;
      padding: 12px 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(4px);
    }
    .category-buttons {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .category-button {
      padding: 6px 12px;
      border: 1px solid #ced4da;
      background: #fff;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.85rem;
      transition: all 0.2s;
      white-space: nowrap;
    }
    .category-button.active {
      background: #667eea;
      color: white;
      border-color: #667eea;
    }
    .category-button:hover {
      background: #f8f9fa;
    }
    .category-button.active:hover {
      background: #5a6fd8;
    }
    .period-form {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid #e9ecef;
    }
    .period-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }
    .period-label {
      font-size: 0.85rem;
      font-weight: 600;
      color: #495057;
      min-width: 40px;
    }
    .period-select {
      padding: 4px 8px;
      border: 1px solid #ced4da;
      border-radius: 4px;
      background: white;
      font-size: 0.8rem;
      cursor: pointer;
    }
    .period-select:focus {
      outline: none;
      border-color: #667eea;
    }
    .period-separator {
      font-size: 0.85rem;
      color: #6c757d;
      margin: 0 4px;
    }
    .map-container {
      flex: 1;
      position: relative;
      overflow: hidden;
    }
    .map-controls {
      position: absolute;
      top: 16px;
      right: 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      z-index: 10;
    }
    .map-control-button {
      width: 40px;
      height: 40px;
      background: white;
      border: 1px solid #ced4da;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    .map-control-button:hover {
      background: #f8f9fa;
    }
    .map-scale-direction {
      position: absolute;
      bottom: 16px;
      right: 16px;
      background: white;
      padding: 8px 12px;
      border-radius: 6px;
      border: 1px solid #ced4da;
      font-size: 0.8rem;
      color: #666;
      z-index: 10;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      text-align: center;
    }
    .north-arrow {
      font-size: 1rem;
      margin-bottom: 4px;
    }
    .scale-info {
      font-size: 0.7rem;
    }
    common-google-map {
      width: 100%;
      height: 100%;
    }
  `

  @property({ type: String }) selectedCategory = '전체 KPI'
  @property({ type: Array }) mapData: any[] = []

  @state() private map: any = null
  @state() private startYear = '전체'
  @state() private startMonth = '전체'
  @state() private endYear = '전체'
  @state() private endMonth = '전체'

  // mapData를 지도 마커 형식으로 변환
  get mapLocations() {
    return (
      this.mapData?.map(item => ({
        lat: item.lat,
        lng: item.lng,
        title: item.region,
        region: item.region, // 지역명 추가
        // 커스텀 마커 콘텐츠 생성
        markerContent: `
          <div style="
            background: white;
            border-radius: 8px;
            padding: 8px 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            border: 1px solid #e9ecef;
            min-width: 80px;
            text-align: center;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            cursor: pointer;
          ">
            <div style="
              font-size: 11px;
              font-weight: 600;
              color: #495057;
              margin-bottom: 2px;
              white-space: nowrap;
            ">${item.region}</div>
            <div style="
              font-size: 13px;
              font-weight: 700;
              color: #212529;
              margin-bottom: 2px;
            ">${item.kpi}</div>
            <div style="
              font-size: 10px;
              color: ${item.change > 0 ? '#dc3545' : '#198754'};
              font-weight: 500;
            ">${item.change > 0 ? '▲' : '▼'} ${Math.abs(item.change)}%</div>
          </div>
        `,
        content: `
          <div style="padding: 12px; min-width: 200px;">
            <h3 style="margin: 0 0 8px 0; font-size: 16px; color: #212529;">${item.region}</h3>
            <div style="margin-bottom: 8px;">
              <span style="font-size: 14px; color: #6c757d;">KPI: </span>
              <span style="font-size: 16px; font-weight: 600; color: #212529;">${item.kpi}</span>
            </div>
            <div style="
              font-size: 14px;
              color: ${item.change > 0 ? '#dc3545' : '#198754'};
              font-weight: 500;
            ">
              ${item.change > 0 ? '▲' : '▼'} ${Math.abs(item.change)}% 변화
            </div>
          </div>
        `
      })) || []
    )
  }

  private onCategoryButtonClick(category: string) {
    this.dispatchEvent(
      new CustomEvent('category-change', {
        detail: { category },
        bubbles: true,
        composed: true
      })
    )
  }

  private onMapChange(event: CustomEvent) {
    this.map = event.detail
  }

  private onRegionClick(event: CustomEvent) {
    this.dispatchEvent(
      new CustomEvent('region-click', {
        detail: event.detail,
        bubbles: true,
        composed: true
      })
    )
  }

  private zoomIn() {
    if (this.map) {
      this.map.setZoom(this.map.getZoom() + 1)
    }
  }

  private zoomOut() {
    if (this.map) {
      this.map.setZoom(this.map.getZoom() - 1)
    }
  }

  private resetView() {
    if (this.map) {
      this.map.setCenter({ lat: 36.5, lng: 127.5 })
      this.map.setZoom(7)
    }
  }

  private onPeriodChange() {
    this.dispatchEvent(
      new CustomEvent('period-change', {
        detail: {
          startYear: this.startYear,
          startMonth: this.startMonth,
          endYear: this.endYear,
          endMonth: this.endMonth
        },
        bubbles: true,
        composed: true
      })
    )
  }

  render() {
    return html`
      <div class="map-overlay">
        <div class="category-buttons">
          <button
            class="category-button ${this.selectedCategory === '전체 KPI' ? 'active' : ''}"
            @click=${() => this.onCategoryButtonClick('전체 KPI')}
          >
            전체 KPI
          </button>
          <button
            class="category-button ${this.selectedCategory === '일정 성과' ? 'active' : ''}"
            @click=${() => this.onCategoryButtonClick('일정 성과')}
          >
            일정 성과
          </button>
          <button
            class="category-button ${this.selectedCategory === '비용 성과' ? 'active' : ''}"
            @click=${() => this.onCategoryButtonClick('비용 성과')}
          >
            비용 성과
          </button>
          <button
            class="category-button ${this.selectedCategory === '품질 성과' ? 'active' : ''}"
            @click=${() => this.onCategoryButtonClick('품질 성과')}
          >
            품질 성과
          </button>
          <button
            class="category-button ${this.selectedCategory === '안전 성과' ? 'active' : ''}"
            @click=${() => this.onCategoryButtonClick('안전 성과')}
          >
            안전 성과
          </button>
          <button
            class="category-button ${this.selectedCategory === '환경 성과' ? 'active' : ''}"
            @click=${() => this.onCategoryButtonClick('환경 성과')}
          >
            환경 성과
          </button>
        </div>

        <!-- 기간 선택 폼 -->
        <div class="period-form">
          <div class="period-row">
            <span class="period-label">기간:</span>
            <select
              class="period-select"
              .value=${this.startYear}
              @change=${(e: Event) => {
                this.startYear = (e.target as HTMLSelectElement).value
                this.onPeriodChange()
              }}
            >
              <option value="2026">2026년</option>
              <option value="2025">2025년</option>
              <option value="2024">2024년</option>
              <option value="2023">2023년</option>
              <option value="2022">2022년</option>
            </select>
            <select
              class="period-select"
              .value=${this.startMonth}
              @change=${(e: Event) => {
                this.startMonth = (e.target as HTMLSelectElement).value
                this.onPeriodChange()
              }}
            >
              <option value="전체">전체</option>
              <option value="1">1월</option>
              <option value="2">2월</option>
              <option value="3">3월</option>
              <option value="4">4월</option>
              <option value="5">5월</option>
              <option value="6">6월</option>
              <option value="7">7월</option>
              <option value="8">8월</option>
              <option value="9">9월</option>
              <option value="10">10월</option>
              <option value="11">11월</option>
              <option value="12">12월</option>
            </select>
            <span class="period-separator">~</span>
            <select
              class="period-select"
              .value=${this.endYear}
              @change=${(e: Event) => {
                this.endYear = (e.target as HTMLSelectElement).value
                this.onPeriodChange()
              }}
            >
              <option value="2026">2026년</option>
              <option value="2025">2025년</option>
              <option value="2024">2024년</option>
              <option value="2023">2023년</option>
              <option value="2022">2022년</option>
            </select>
            <select
              class="period-select"
              .value=${this.endMonth}
              @change=${(e: Event) => {
                this.endMonth = (e.target as HTMLSelectElement).value
                this.onPeriodChange()
              }}
            >
              <option value="전체">전체</option>
              <option value="1">1월</option>
              <option value="2">2월</option>
              <option value="3">3월</option>
              <option value="4">4월</option>
              <option value="5">5월</option>
              <option value="6">6월</option>
              <option value="7">7월</option>
              <option value="8">8월</option>
              <option value="9">9월</option>
              <option value="10">10월</option>
              <option value="11">11월</option>
              <option value="12">12월</option>
            </select>
          </div>
        </div>
      </div>

      <div class="map-container">
        <!-- 지도 컨트롤 (오른쪽 상단) -->
        <div class="map-controls">
          <button class="map-control-button" title="확대" @click=${() => this.zoomIn()}>+</button>
          <button class="map-control-button" title="축소" @click=${() => this.zoomOut()}>-</button>
          <button class="map-control-button" title="뷰 초기화" @click=${() => this.resetView()}>⌖</button>
        </div>

        <!-- 스케일 및 방향 정보 (오른쪽 하단) -->
        <div class="map-scale-direction">
          <div class="north-arrow">↑ N</div>
          <div class="scale-info">25km</div>
        </div>

        <!-- 공통 Google Maps 컴포넌트 사용 -->
        <common-google-map
          .center=${{ lat: 36.5, lng: 127.5 }}
          .zoom=${7}
          .locations=${this.mapLocations}
          .clusterZoom=${10}
          .controls=${{
            zoomControl: false,
            mapTypeControl: false,
            scaleControl: false,
            streetViewControl: false,
            rotateControl: false,
            fullscreenControl: false
          }}
          @map-change=${this.onMapChange}
          @region-click=${this.onRegionClick}
        ></common-google-map>
      </div>
    `
  }
}