@extends('layouts.app')
@section('title', 'Import Kanboard Tasks · QA Dashboard')

@section('content')
<section x-data="kbImport()">
  <h2>Import Kanboard Tasks</h2>
  <p class="muted">Pull cached Kanboard tasks into the <strong>Weekly Tasks</strong> log. Each task is placed under its assignee, in the Fri–Thu week matching its date, in the module mapped from its Kanboard project (falling back to <em>Other Tasks</em>). Preview the per-week counts first, then save. Re-importing refreshes existing rows instead of duplicating.</p>

  @if (session('status'))<div class="alert ok">{{ session('status') }}</div>@endif
  @if ($errors->any())<div class="alert error">{{ $errors->first() }}</div>@endif

  @if (!$configured || $taskCount === 0)
    <div class="alert" style="background:#fdf0dd;color:#b45309;border:1px solid #f4e2ad">
      @if (!$configured)
        Kanboard isn't configured yet. Set <code>KANBOARD_URL</code> and <code>KANBOARD_API_TOKEN</code>, then use <strong>Sync from Kanboard</strong> below.
      @else
        No Kanboard tasks are cached yet. Click <strong>Sync from Kanboard</strong> below to pull them in.
      @endif
    </div>
  @endif

  <div class="account-form" style="margin-top:1rem">
    <div style="display:flex;gap:.9rem;align-items:end;flex-wrap:wrap">
      <div class="dz-field">
        <span class="dz-label">Project</span>
        <select x-model="project" required>
          @forelse ($projects as $p)
            <option value="{{ $p }}">{{ $p }}</option>
          @empty
            <option value="" disabled>No Kanboard projects synced</option>
          @endforelse
        </select>
      </div>

      <div class="dz-field">
        <span class="dz-label">Quarter</span>
        <select x-model="quarter" @change="week='all'">
          @foreach ($quarters as $q)<option value="{{ $q }}" @selected($q === $currentQuarter)>{{ $q }}</option>@endforeach
        </select>
      </div>

      <div class="dz-field">
        <span class="dz-label">Week</span>
        <select x-model="week" style="min-width:220px">
          <option value="all">All weeks</option>
          <template x-for="w in (quarterWeeks[quarter] || [])" :key="w.start">
            <option :value="w.start" x-text="w.label"></option>
          </template>
        </select>
      </div>

      <button type="button" @click="preview()" :disabled="loading || !project">
        <span x-show="!loading">Preview import</span><span x-show="loading" x-cloak>Loading…</span>
      </button>
      <a href="/weekly"><button type="button" class="wk-confirm-cancel">Open Weekly Tasks</button></a>

      {{-- Refresh the cached Kanboard tasks / project list straight from Kanboard. --}}
      <form method="post" action="/import-kanboard/sync" style="margin:0 0 0 auto"
            onsubmit="var b=this.querySelector('button'); b.disabled=true; b.textContent='Syncing from Kanboard…';">
        @csrf
        <button type="submit" class="wk-confirm-cancel" title="Fetch the latest projects and tasks from Kanboard">
          &#8635; Sync from Kanboard
        </button>
      </form>
    </div>
    <p x-show="error" x-cloak class="alert error" x-text="error" style="margin-top:.8rem"></p>
  </div>

  {{-- Preview modal --}}
  <div class="wk-modal" x-show="open" x-cloak @keydown.escape.window="open=false" style="display:flex">
    <div class="wk-modal-card kb-preview-card">
      <div class="wk-modal-head">
        <strong>Import preview — <span x-text="project"></span> · <span x-text="quarter"></span></strong>
        <button type="button" class="wk-modal-close" @click="open=false">✕</button>
      </div>
      <div class="wk-modal-body" style="display:block">
        <p class="muted" x-text="summary"></p>
        <table class="grid compact">
          <thead><tr><th>Week</th><th style="text-align:right">Tasks</th></tr></thead>
          <tbody>
            <template x-for="w in weeks" :key="w.start">
              <tr><td x-text="w.label"></td><td style="text-align:right" x-text="w.count"></td></tr>
            </template>
            <template x-if="!weeks.length">
              <tr><td colspan="2" class="empty">No tasks match this selection.</td></tr>
            </template>
          </tbody>
          <tfoot x-show="weeks.length">
            <tr><td><strong>Total</strong></td><td style="text-align:right"><strong x-text="total"></strong></td></tr>
          </tfoot>
        </table>
      </div>
      <div class="wk-confirm-actions">
        <button type="button" class="wk-confirm-cancel" @click="open=false">Cancel</button>
        <button type="button" @click="save()" :disabled="saving || !total">
          <span x-show="!saving">Save &amp; Import</span><span x-show="saving" x-cloak>Saving…</span>
        </button>
      </div>
    </div>
  </div>

  {{-- Hidden form that actually commits the import --}}
  <form x-ref="saveForm" method="post" action="/import-kanboard" style="display:none">
    @csrf
    <input type="hidden" name="project" :value="project">
    <input type="hidden" name="quarter" :value="quarter">
    <input type="hidden" name="week" :value="week">
  </form>
</section>

@if (!empty($log))
<section style="margin-top:1.6rem">
  <h2>Imported Kanboard tasks <small class="muted">· log by quarter & week — includes previous quarters</small></h2>
  <div class="qt-status-list">
    @foreach ($log as $q => $data)
      <div class="qt-accordion" x-data="{ open: {{ $loop->first ? 'true' : 'false' }} }">
        <button type="button" class="qt-acc-head" @click="open=!open" :class="{ open: open }">
          <span class="qt-acc-caret" x-text="open ? '▾' : '▸'"></span>
          <span class="qt-acc-title"><span class="qt-acc-name">{{ $q }}</span></span>
          <span class="chip">{{ $data['total'] }} tasks</span>
        </button>
        <div class="qt-acc-body" x-show="open" x-cloak>
          <table class="grid compact">
            <thead><tr><th>Week</th><th>Modules</th><th style="text-align:right">Tasks</th><th></th></tr></thead>
            <tbody>
              @foreach ($data['weeks'] as $w)
              <tr>
                <td>{{ $w['label'] }}</td>
                <td class="muted">@foreach ($w['modules'] as $m => $c){{ $m }} ({{ $c }})@if (!$loop->last), @endif @endforeach</td>
                <td style="text-align:right">{{ $w['count'] }}</td>
                <td style="text-align:right">
                  <form method="post" action="/import-kanboard/delete-log" style="display:inline;margin:0"
                        onsubmit="return confirm('Delete {{ $w['count'] }} imported Kanboard task(s) in {{ $q }} · {{ $w['label'] }}? This clears that week from Weekly Tasks.')">
                    @csrf
                    <input type="hidden" name="quarter" value="{{ $q }}">
                    <input type="hidden" name="week" value="{{ $w['start'] }}">
                    <button type="submit" class="wk-del">Delete week</button>
                  </form>
                </td>
              </tr>
              @endforeach
            </tbody>
          </table>
          <div style="margin-top:.7rem;text-align:right">
            <form method="post" action="/import-kanboard/delete-log" style="display:inline;margin:0"
                  onsubmit="return confirm('Delete ALL {{ $data['total'] }} imported Kanboard task(s) in {{ $q }}?')">
              @csrf
              <input type="hidden" name="quarter" value="{{ $q }}">
              <button type="submit" class="wk-del">Delete entire {{ $q }}</button>
            </form>
          </div>
        </div>
      </div>
    @endforeach
  </div>
</section>
@endif
@endsection

@push('scripts')
<script>
  function kbImport() {
    return {
      project: @json($projects[0] ?? ''),
      quarter: @json($currentQuarter),
      week: 'all',
      quarterWeeks: @json($quarterWeeks ?? []),
      weeks: [], total: 0, skipped: 0, scanned: 0,
      open: false, loading: false, saving: false, error: '',
      summary: '',
      async preview() {
        this.error = '';
        this.loading = true;
        try {
          const res = await fetch('/import-kanboard/preview', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
            body: JSON.stringify({ project: this.project, quarter: this.quarter, week: this.week }),
          });
          if (!res.ok) throw new Error('Preview failed (' + res.status + ')');
          const d = await res.json();
          this.weeks = d.weeks || [];
          this.total = d.total || 0;
          this.skipped = d.skipped || 0;
          this.scanned = d.scanned || 0;
          this.summary = this.total + ' task' + (this.total === 1 ? '' : 's') + ' will be imported across '
            + this.weeks.length + ' week' + (this.weeks.length === 1 ? '' : 's')
            + ' — ' + this.scanned + ' scanned, ' + this.skipped + ' skipped (no assignee / outside quarter).';
          this.open = true;
        } catch (e) {
          this.error = e.message || 'Preview failed.';
        } finally {
          this.loading = false;
        }
      },
      save() {
        this.saving = true;
        this.$refs.saveForm.submit();
      },
    };
  }
</script>
@endpush