@extends('layouts.app')

@section('title', '工時統計圖表')

@section('content')
<div class="container-fluid py-4">

  {{-- 頁首 --}}
  <div class="d-flex align-items-center justify-content-between mb-4">
    <h1 class="h4 mb-0"><i class="bi bi-bar-chart-fill me-2 text-primary"></i>工時統計圖表</h1>
  </div>

  {{-- 篩選區 --}}
  <div class="card shadow-sm border-0 rounded-3 mb-4">
    <div class="card-body pb-2">

      {{-- 年份多選 --}}
      <div class="mb-3">
        <label class="form-label fw-semibold small text-muted mb-1">年份</label>
        <div id="yearTagBox" class="border rounded px-2 py-1 d-flex flex-wrap gap-1 align-items-center"
             style="min-height:42px;cursor:text;" onclick="document.getElementById('yearInput').focus()">
          {{-- tags rendered by JS --}}
          <input id="yearInput" type="number" min="2000" max="2100" placeholder="輸入年份後按 Enter"
                 class="border-0 outline-0 flex-grow-1" style="min-width:160px;outline:none;background:transparent;">
        </div>
        <div id="yearQuickBtns" class="mt-1 d-flex flex-wrap gap-1">
          {{-- rendered by JS --}}
        </div>
      </div>

      {{-- 其他篩選 --}}
      <div class="row g-2 align-items-end mb-2">
        <div class="col-sm-3 col-6">
          <label class="form-label fw-semibold small text-muted mb-1">顯示方式</label>
          <select id="filterGranularity" class="form-select form-select-sm">
            <option value="year">整年</option>
            <option value="quarter">季度</option>
            <option value="month" selected>月份</option>
            <option value="week">週</option>
          </select>
        </div>
        <div class="col-sm-3 col-6">
          <label class="form-label fw-semibold small text-muted mb-1">單位</label>
          <select id="filterUnit" class="form-select form-select-sm">
            <option value="man_days">人天</option>
            <option value="hours">小時</option>
          </select>
        </div>
        <div class="col-sm-3 col-6">
          <label class="form-label fw-semibold small text-muted mb-1">部門</label>
          <select id="filterDept" class="form-select form-select-sm">
            <option value="">全部</option>
            @foreach($options['departments'] as $dept)
              <option value="{{ $dept }}">{{ $dept }}</option>
            @endforeach
          </select>
        </div>
        <div class="col-sm-3 col-6">
          <label class="form-label fw-semibold small text-muted mb-1">專案類型</label>
          <select id="filterWorkType" class="form-select form-select-sm">
            <option value="">全部</option>
            @foreach($options['workTypes'] as $wt)
              <option value="{{ $wt }}">{{ $wt }}</option>
            @endforeach
          </select>
        </div>
        <div class="col-sm-12 d-flex gap-2">
          <button id="btnApply" class="btn btn-sm btn-primary px-3">
            <i class="bi bi-search me-1"></i>查詢
          </button>
          <button id="btnReset" class="btn btn-sm btn-outline-secondary px-3">
            <i class="bi bi-arrow-clockwise me-1"></i>重置篩選
          </button>
        </div>
      </div>

    </div>
  </div>

  {{-- 麵包屑導覽 --}}
  <nav id="breadcrumbNav" aria-label="breadcrumb" class="mb-3" style="display:none">
    <ol class="breadcrumb mb-0">
      <li class="breadcrumb-item"><a href="#" id="bcRoot">全部部門</a></li>
      <li class="breadcrumb-item active" id="bcDept" style="display:none"></li>
      <li class="breadcrumb-item active" id="bcUser" style="display:none"></li>
      <li class="breadcrumb-item active" id="bcProjects" style="display:none"></li>
    </ol>
  </nav>

  {{-- 圖表卡片 --}}
  <div class="card shadow-sm border-0 rounded-3 mb-4">
    <div class="card-header bg-white border-bottom d-flex align-items-center justify-content-between py-3">
      <span class="fw-semibold"><i class="bi bi-bar-chart me-2 text-muted"></i><span id="chartTitle">年度工時統計</span></span>
      <span id="chartSubtitle" class="text-muted small"></span>
    </div>
    <div class="card-body">
      <div id="chartSpinner" class="text-center py-5" style="display:none">
        <div class="spinner-border text-primary" role="status"></div>
      </div>
      <div id="chartEmpty" class="text-center py-5 text-muted" style="display:none">
        <i class="bi bi-bar-chart fs-1 d-block mb-2 opacity-25"></i>
        無符合條件的工時資料
      </div>
      <div id="chartWrap" style="position:relative;height:340px;">
        <canvas id="workHoursChart"></canvas>
      </div>
      <p id="chartHint" class="text-muted small mt-2 mb-0 text-center" style="display:none">
        點擊長條可向下鑽取查看詳細資料
      </p>
    </div>
  </div>

  {{-- 數據明細表 --}}
  <div class="card shadow-sm border-0 rounded-3 mb-4" id="dataTableCard" style="display:none">
    <div class="card-header bg-white border-bottom py-3">
      <span class="fw-semibold"><i class="bi bi-table me-2 text-muted"></i>數據明細</span>
    </div>
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-sm table-hover mb-0" id="dataTable">
          <thead class="table-light">
            <tr id="dataTableHead"></tr>
          </thead>
          <tbody id="dataTableBody"></tbody>
        </table>
      </div>
    </div>
  </div>

</div>
@endsection

@push('scripts')
<script src="/vendor/chartjs/chart.umd.min.js"></script>
<script>
(function () {
  // ── State ────────────────────────────────────────────────────────────────
  const OPTIONS    = @json($options);
  let   chart      = null;
  let   lastData   = null;
  let   drillState = { level: 'root', department: null, user: null };

  const state = {
    years    : [{{ now()->year }}],
    gran     : 'month',
    unit     : 'man_days',
    dept     : '',
    workType : '',
  };

  // ── Year tag input ───────────────────────────────────────────────────────
  const yearTagBox = document.getElementById('yearTagBox');
  const yearInput  = document.getElementById('yearInput');
  const quickBtns  = document.getElementById('yearQuickBtns');

  function renderYearTags() {
    document.querySelectorAll('.year-tag').forEach(el => el.remove());
    state.years.forEach(y => {
      const tag = document.createElement('span');
      tag.className = 'year-tag badge bg-primary bg-opacity-10 text-primary fw-normal d-flex align-items-center gap-1 px-2 py-1';
      tag.style.fontSize = '0.85rem';
      tag.innerHTML = `${y}年 <button type="button" class="btn-close btn-close p-0" style="font-size:0.6rem" data-year="${y}" aria-label="移除"></button>`;
      tag.querySelector('button').addEventListener('click', e => {
        e.stopPropagation();
        state.years = state.years.filter(x => x !== y);
        renderYearTags();
      });
      yearTagBox.insertBefore(tag, yearInput);
    });
  }

  function renderQuickBtns() {
    quickBtns.innerHTML = '';
    OPTIONS.years.forEach(y => {
      const btn = document.createElement('button');
      btn.type = 'button';
      btn.className = 'btn btn-xs btn-outline-secondary py-0 px-2';
      btn.style.fontSize = '0.78rem';
      btn.textContent = `${y}年`;
      btn.addEventListener('click', () => {
        if (!state.years.includes(y)) {
          state.years.push(y);
          state.years.sort((a, b) => b - a);
          renderYearTags();
        }
      });
      quickBtns.appendChild(btn);
    });
  }

  yearInput.addEventListener('keydown', e => {
    if (e.key === 'Enter') {
      e.preventDefault();
      const y = parseInt(yearInput.value);
      if (y >= 2000 && y <= 2100 && !state.years.includes(y)) {
        state.years.push(y);
        state.years.sort((a, b) => b - a);
        renderYearTags();
      }
      yearInput.value = '';
    }
  });

  // ── Breadcrumb helpers ───────────────────────────────────────────────────
  function updateBreadcrumb() {
    const nav      = document.getElementById('breadcrumbNav');
    const bcDept   = document.getElementById('bcDept');
    const bcUser   = document.getElementById('bcUser');
    const bcProj   = document.getElementById('bcProjects');

    if (drillState.level === 'root') {
      nav.style.display = 'none';
      return;
    }
    nav.style.display = '';
    bcDept.style.display = drillState.department ? '' : 'none';
    bcDept.textContent   = drillState.department ?? '';
    bcUser.style.display = drillState.user ? '' : 'none';
    bcUser.textContent   = drillState.user?.name ?? '';
    bcProj.style.display = drillState.level === 'user_projects' ? '' : 'none';
    bcProj.textContent   = drillState.level === 'user_projects' ? '專案分布' : '';

    if (drillState.level !== 'root') {
      const deptIsDrillable = drillState.level !== 'department';
      bcDept.className = 'breadcrumb-item' + (deptIsDrillable ? '' : ' active');
    }
  }

  document.getElementById('bcRoot').addEventListener('click', e => {
    e.preventDefault();
    drillState = { level: 'root', department: null, user: null };
    loadChart();
  });
  document.getElementById('bcDept').addEventListener('click', () => {
    if (drillState.user) {
      drillState = { level: 'department', department: drillState.department, user: null };
      loadChart();
    }
  });
  document.getElementById('bcUser').addEventListener('click', () => {
    if (drillState.level === 'user_projects') {
      drillState.level = 'user';
      loadChart();
    }
  });

  // ── Chart ────────────────────────────────────────────────────────────────
  function buildParams() {
    const params = new URLSearchParams();
    state.years.forEach(y => params.append('years[]', y));
    params.set('granularity', state.gran);
    params.set('unit', state.unit);
    if (state.workType) params.set('work_type', state.workType);

    if (drillState.level === 'root') {
      if (state.dept) params.set('department', state.dept);
    } else if (drillState.level === 'department') {
      params.set('department', drillState.department);
    } else if (drillState.level === 'user') {
      params.set('user_id', drillState.user.id);
    } else if (drillState.level === 'user_projects') {
      params.set('user_id', drillState.user.id);
      params.set('view', 'projects');
    }
    return params.toString();
  }

  async function loadChart() {
    if (state.years.length === 0) return;

    document.getElementById('chartSpinner').style.display = '';
    document.getElementById('chartWrap').style.display    = 'none';
    document.getElementById('chartEmpty').style.display   = 'none';
    document.getElementById('dataTableCard').style.display = 'none';

    updateBreadcrumb();

    try {
      const res  = await fetch(`{{ route('time-charts.data') }}?` + buildParams());
      const data = await res.json();
      lastData   = data;

      document.getElementById('chartSpinner').style.display = 'none';

      if (!data.datasets || data.datasets.length === 0) {
        document.getElementById('chartEmpty').style.display = '';
        return;
      }

      document.getElementById('chartWrap').style.display = '';
      renderChart(data);
      renderTable(data);

      const unitLabel = state.unit === 'man_days' ? '人天' : '小時';
      document.getElementById('chartSubtitle').textContent = `（${data.time_range}，單位：${unitLabel}）`;

      const titles = {
        root         : '各部門工時統計 - 按專案類型',
        department   : `${data.department} — 人員工時`,
        user         : `${data.user?.name} — 工時趨勢`,
        user_projects: `${data.user?.name} — 專案分布`,
      };
      document.getElementById('chartTitle').textContent = titles[data.level] ?? '工時統計';

      const hint = document.getElementById('chartHint');
      hint.style.display = data.drillable ? '' : 'none';
    } catch (err) {
      document.getElementById('chartSpinner').style.display = 'none';
      document.getElementById('chartEmpty').style.display   = '';
      console.error(err);
    }
  }

  function renderChart(data) {
    const ctx = document.getElementById('workHoursChart').getContext('2d');
    if (chart) chart.destroy();

    chart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels  : data.labels,
        datasets: data.datasets,
      },
      options: {
        responsive        : true,
        maintainAspectRatio: false,
        plugins: {
          legend: { position: 'top' },
          tooltip: {
            callbacks: {
              label: ctx => {
                const val = ctx.parsed.y;
                return ` ${ctx.dataset.label}: ${val.toFixed(2)}`;
              },
            },
          },
        },
        scales: {
          x: { stacked: !!data.stacked },
          y: {
            stacked: !!data.stacked,
            beginAtZero: true,
            ticks: {
              callback: v => v.toFixed(1),
            },
          },
        },
        onClick(event, elements) {
          if (!data.drillable || elements.length === 0) return;
          const idx = elements[0].index;
          handleDrillDown(data, idx);
        },
        onHover(event, elements) {
          event.native.target.style.cursor =
            data.drillable && elements.length > 0 ? 'pointer' : 'default';
        },
      },
    });
  }

  function handleDrillDown(data, idx) {
    if (data.level === 'root') {
      const meta = data.label_meta?.[idx];
      if (!meta) return;
      drillState = { level: 'department', department: meta.dept, user: null };
      loadChart();
    } else if (data.level === 'department') {
      const userId   = data.user_ids?.[idx];
      const userName = data.labels?.[idx];
      if (!userId) return;
      drillState = { level: 'user', department: drillState.department, user: { id: userId, name: userName } };
      loadChart();
    } else if (data.level === 'user') {
      drillState.level = 'user_projects';
      loadChart();
    }
  }

  // ── Data table ───────────────────────────────────────────────────────────
  function renderTable(data) {
    const card  = document.getElementById('dataTableCard');
    const head  = document.getElementById('dataTableHead');
    const tbody = document.getElementById('dataTableBody');

    if (!data.datasets || data.datasets.length === 0) {
      card.style.display = 'none';
      return;
    }

    const typeNames = data.datasets.map(d => d.label);
    head.innerHTML  = '<th class="ps-3">項目</th>'
      + typeNames.map(n => `<th class="text-end">${n}</th>`).join('')
      + '<th class="text-end pe-3">合計</th>';

    // Build rows: each label is one row
    tbody.innerHTML = '';
    data.labels.forEach((label, i) => {
      const rowTotals = data.datasets.map(d => (d.data[i] ?? 0));
      const rowSum    = rowTotals.reduce((a, b) => a + b, 0);
      const tr        = document.createElement('tr');
      tr.innerHTML    = `<td class="ps-3">${label}</td>`
        + rowTotals.map(v => {
            const pct = rowSum > 0 ? (v / rowSum * 100).toFixed(1) : '0.0';
            return `<td class="text-end">${v > 0 ? `${v.toFixed(2)} (${pct}%)` : '-'}</td>`;
          }).join('')
        + `<td class="text-end pe-3 fw-semibold">${rowSum.toFixed(2)}</td>`;
      tbody.appendChild(tr);
    });

    card.style.display = '';
  }

  // ── Controls ─────────────────────────────────────────────────────────────
  document.getElementById('filterGranularity').addEventListener('change', e => state.gran = e.target.value);
  document.getElementById('filterUnit').addEventListener('change', e => state.unit = e.target.value);
  document.getElementById('filterDept').addEventListener('change', e => {
    state.dept = e.target.value;
    if (e.target.value) {
      drillState = { level: 'department', department: e.target.value, user: null };
    } else {
      drillState = { level: 'root', department: null, user: null };
    }
  });
  document.getElementById('filterWorkType').addEventListener('change', e => state.workType = e.target.value);

  document.getElementById('btnApply').addEventListener('click', () => {
    if (state.years.length === 0) {
      alert('請至少選擇一個年份');
      return;
    }
    loadChart();
  });

  document.getElementById('btnReset').addEventListener('click', () => {
    state.years    = [{{ now()->year }}];
    state.gran     = 'month';
    state.unit     = 'man_days';
    state.dept     = '';
    state.workType = '';
    drillState = { level: 'root', department: null, user: null };

    document.getElementById('filterGranularity').value = 'month';
    document.getElementById('filterUnit').value        = 'man_days';
    document.getElementById('filterDept').value        = '';
    document.getElementById('filterWorkType').value    = '';
    renderYearTags();
    loadChart();
  });

  // ── Init ─────────────────────────────────────────────────────────────────
  renderYearTags();
  renderQuickBtns();
  loadChart();
})();
</script>
@endpush