import { state } from '../../core/state';
import { HardwareAsset } from '../../core/excelHandler';
import { openHwModal } from '../../components/Modal/HWModal';
import { calculateAssetAge, normalizeDate } from '../../core/utils';

declare var Chart: any;

export function renderHwDashboard(container: HTMLElement) {
  const allHw = state.masterData.hw || [];
  
  // 1. 데이터 가공
  let totalAge = 0;
  let countWithDate = 0;
  let over5YearsCount = 0;
  let latestAsset: HardwareAsset | null = null;
  let latestYear = 0;

  const ageGroups = { stable: 0, warning: 0, critical: 0 };
  const yearlyCount: Record<string, number> = {};

  allHw.forEach(a => {
    const pDate = a.구매일 || (a as any).purchase_date;
    if (!pDate) return;

    const age = calculateAssetAge(pDate);
    totalAge += age;
    countWithDate++;

    // 노후도 분류
    if (age >= 5) {
      over5YearsCount++;
      ageGroups.critical++;
    } else if (age >= 3) {
      ageGroups.warning++;
    } else {
      ageGroups.stable++;
    }

    // 연도별 도입 현황 추출
    const year = normalizeDate(pDate).split('-')[0];
    if (year && year.length === 4) {
      yearlyCount[year] = (yearlyCount[year] || 0) + 1;
      const yNum = parseInt(year);
      if (yNum > latestYear) {
        latestYear = yNum;
        latestAsset = a;
      }
    }
  });

  const avgAge = countWithDate > 0 ? (totalAge / countWithDate).toFixed(1) : '0';
  const over5Rate = allHw.length > 0 ? Math.round((over5YearsCount / allHw.length) * 100) : 0;
  
  // 교체 시급 대상 TOP 10 (오래된 순)
  const criticalList = [...allHw]
    .filter(a => (a.구매일 || (a as any).purchase_date))
    .sort((a, b) => {
      const dateA = new Date(normalizeDate(a.구매일 || (a as any).purchase_date)).getTime();
      const dateB = new Date(normalizeDate(b.구매일 || (b as any).purchase_date)).getTime();
      return dateA - dateB;
    })
    .slice(0, 10);

  // 2. UI 렌더링
  container.innerHTML = `
    <div class="view-container">
      <div class="dashboard-header-stats" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2rem;">
        <div class="dashboard-card stat-card">
          <div class="stat-label">전체 평균 사용 연수</div>
          <div class="stat-value">${avgAge}<span class="unit">년</span></div>
          <div class="stat-footer">권장 교체 주기: 4.5년</div>
        </div>
        <div class="dashboard-card stat-card ${over5Rate >= 20 ? 'critical' : ''}">
          <div class="stat-label">5년 이상 노후 자산 비율</div>
          <div class="stat-value" style="${over5Rate >= 20 ? 'color:var(--danger)' : ''}">${over5Rate}<span class="unit">%</span></div>
          <div class="stat-footer">${over5YearsCount}대의 자산이 교체 대상을 초과함</div>
        </div>
        <div class="dashboard-card stat-card">
          <div class="stat-label">최신 도입 모델 (${latestYear}년)</div>
          <div class="stat-value" style="font-size: 1.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${(latestAsset as any)?.모델명 || '정보 없음'}">
            ${(latestAsset as any)?.모델명 || '정보 없음'}
          </div>
          <div class="stat-footer">가장 최근 자산번호: ${(latestAsset as any)?.자산코드 || '-'}</div>
        </div>
      </div>

      <div class="dashboard-layout-2col" style="margin-bottom: 2rem;">
        <div class="dashboard-card">
          <h4 class="card-title">자산 노후도 분포</h4>
          <div style="height: 250px;"><canvas id="chart-aging-dist"></canvas></div>
        </div>
        <div class="dashboard-card">
          <h4 class="card-title">연도별 자산 도입 추이</h4>
          <div style="height: 250px;"><canvas id="chart-purchase-trend"></canvas></div>
        </div>
      </div>

      <h3 class="dashboard-section-title">⚠️ 교체 검토 대상 (가장 오래된 자산 TOP 10)</h3>
      <div class="table-container" style="background: white; border-radius: 8px; border: 1px solid var(--border-color);">
        <table>
          <thead>
            <tr>
              <th>순위</th>
              <th>자산번호</th>
              <th>유형</th>
              <th>모델명</th>
              <th>사용자/담당자</th>
              <th>구매연월</th>
              <th>연령</th>
            </tr>
          </thead>
          <tbody>
            ${criticalList.map((a, i) => `
              <tr class="clickable-row" data-id="${a.id}">
                <td style="text-align:center; font-weight:600; color:var(--text-muted)">${i + 1}</td>
                <td>${a.자산코드 || '-'}</td>
                <td><span class="badge-type">${a.type}</span></td>
                <td>${a.모델명 || a.명칭 || '-'}</td>
                <td>${a.사용자 || a.담당자_정 || '-'}</td>
                <td style="text-align:center;">${a.구매일 || (a as any).purchase_date || '-'}</td>
                <td style="text-align:center;"><strong style="color:${calculateAssetAge(a.구매일 || (a as any).purchase_date) >= 5 ? 'var(--danger)' : 'inherit'}">${calculateAssetAge(a.구매일 || (a as any).purchase_date)}년</strong></td>
              </tr>
            `).join('')}
          </tbody>
        </table>
      </div>
    </div>
  `;

  // 3. 차트 초기화
  setTimeout(() => {
    initAgingCharts(ageGroups, yearlyCount);
    
    // 행 클릭 이벤트 바인딩
    container.querySelectorAll('.clickable-row').forEach(row => {
      row.addEventListener('click', () => {
        const id = row.getAttribute('data-id');
        const asset = allHw.find(h => h.id === id);
        if (asset) openHwModal(asset, 'view');
      });
    });
  }, 100);
}

function initAgingCharts(ageGroups: any, yearlyCount: Record<string, number>) {
  const agingCtx = document.getElementById('chart-aging-dist') as HTMLCanvasElement;
  if (agingCtx) {
    new Chart(agingCtx, {
      type: 'doughnut',
      data: {
        labels: ['안정 (3년 미만)', '주의 (3~5년)', '위험 (5년 이상)'],
        datasets: [{
          data: [ageGroups.stable, ageGroups.warning, ageGroups.critical],
          backgroundColor: ['#1E5149', '#9CA3AF', '#E11D48'],
          borderWidth: 0
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { position: 'right' } },
        cutout: '70%'
      }
    });
  }

  const trendCtx = document.getElementById('chart-purchase-trend') as HTMLCanvasElement;
  if (trendCtx) {
    const years = Object.keys(yearlyCount).sort();
    new Chart(trendCtx, {
      type: 'bar',
      data: {
        labels: years,
        datasets: [{
          label: '도입 수량',
          data: years.map(y => yearlyCount[y]),
          backgroundColor: '#1E5149',
          borderRadius: 4
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          y: { beginAtZero: true, ticks: { stepSize: 1 } },
          x: { grid: { display: false } }
        }
      }
    });
  }
}