@extends('layouts.app')

@section('title', '#' . $issue['id'] . ' ' . $issue['subject'])

@section('content')
<div class="container py-4" style="max-width: 900px;">

  {{-- 頁首導覽 --}}
  <div class="d-flex align-items-center gap-2 mb-4 flex-wrap">
    <a href="{{ route('projects.list') }}"
       class="d-inline-flex align-items-center gap-1 px-3 py-1 rounded-pill text-decoration-none fw-semibold"
       style="background:#eff6ff; color:#2563eb; font-size:.82rem; transition:background .15s;"
       onmouseenter="this.style.background='#dbeafe'" onmouseleave="this.style.background='#eff6ff'">
      <i class="bi bi-grid-3x3-gap-fill"></i> 專案管理
    </a>
    <i class="bi bi-chevron-right" style="color:#93c5fd; font-size:.8rem;"></i>
    <a href="{{ route('my-redmine.project', $issue['project']['id']) }}"
       class="d-inline-flex align-items-center gap-1 px-3 py-1 rounded-pill text-decoration-none fw-semibold"
       style="background:#f0fdf4; color:#16a34a; font-size:.82rem; transition:background .15s;"
       onmouseenter="this.style.background='#dcfce7'" onmouseleave="this.style.background='#f0fdf4'">
      <i class="bi bi-folder-fill"></i> {{ $issue['project']['name'] }}
    </a>
    <i class="bi bi-chevron-right" style="color:#93c5fd; font-size:.8rem;"></i>
    <span class="d-inline-flex align-items-center gap-1 px-3 py-1 rounded-pill fw-bold"
       style="background:#fef3c7; color:#d97706; font-size:.82rem;">
      <i class="bi bi-hash"></i>{{ $issue['id'] }}
    </span>
  </div>

  {{-- 標題區 --}}
  <div class="card border-0 shadow-sm mb-4">
    <div class="card-body">
      <div class="d-flex justify-content-between align-items-start flex-wrap gap-2 mb-3">
        <h4 class="fw-bold mb-0">
          <span class="text-muted me-2 fs-6">#{{ $issue['id'] }}</span>
          {{ $issue['subject'] }}
        </h4>
        <div class="d-flex align-items-center gap-2">
          @php
            $priColor = match($issue['priority']['name'] ?? '') {
              'Urgent', '緊急'     => 'danger',
              'Immediate', '立即'  => 'dark',
              'High', '高'         => 'warning',
              'Low', '低'          => 'secondary',
              default              => 'info',
            };
          @endphp
          <span class="badge bg-{{ $priColor }} fs-6">{{ $issue['priority']['name'] ?? '-' }}</span>
          <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editIssueModal">
            <i class="bi bi-pencil-square me-1"></i>編輯
          </button>
        </div>
      </div>

      {{-- 屬性列 --}}
      <div class="row g-3">
        <div class="col-6 col-md-3">
          <div class="small text-muted">專案</div>
          <div class="fw-semibold">{{ $issue['project']['name'] ?? '-' }}</div>
        </div>
        <div class="col-6 col-md-3">
          <div class="small text-muted">追蹤標籤</div>
          <div class="fw-semibold">{{ $issue['tracker']['name'] ?? '-' }}</div>
        </div>
        <div class="col-6 col-md-3">
          <div class="small text-muted">狀態</div>
          <div><span class="badge bg-success">{{ $issue['status']['name'] ?? '-' }}</span></div>
        </div>
        <div class="col-6 col-md-3">
          <div class="small text-muted">指派給</div>
          <div class="fw-semibold">{{ $issue['assigned_to']['name'] ?? '未指派' }}</div>
        </div>
        <div class="col-6 col-md-3">
          <div class="small text-muted">建立者</div>
          <div class="fw-semibold">{{ $issue['author']['name'] ?? '-' }}</div>
        </div>
        <div class="col-6 col-md-3">
          <div class="small text-muted">建立日期</div>
          <div>{{ \Carbon\Carbon::parse($issue['created_on'])->format('Y-m-d') }}</div>
        </div>
        <div class="col-6 col-md-3">
          <div class="small text-muted">更新日期</div>
          <div>{{ \Carbon\Carbon::parse($issue['updated_on'])->format('Y-m-d') }}</div>
        </div>
        @if (!empty($issue['due_date']))
        <div class="col-6 col-md-3">
          <div class="small text-muted">到期日</div>
          <div class="{{ \Carbon\Carbon::parse($issue['due_date'])->isPast() ? 'text-danger fw-bold' : '' }}">
            {{ $issue['due_date'] }}
          </div>
        </div>
        @endif
        @if (isset($issue['estimated_hours']) && $issue['estimated_hours'] !== null)
        <div class="col-6 col-md-3">
          <div class="small text-muted">預估工時</div>
          <div class="fw-semibold"><i class="bi bi-clock me-1 text-warning"></i>{{ $issue['estimated_hours'] }}小時</div>
        </div>
        @endif
      </div>

      {{-- 完成度 --}}
      @php $done = $issue['done_ratio'] ?? 0; @endphp
      <div class="mt-3">
        <div class="d-flex justify-content-between small text-muted mb-1">
          <span>完成度</span><span>{{ $done }}%</span>
        </div>
        <div class="progress" style="height:8px;">
          <div class="progress-bar bg-success" style="width:{{ $done }}%"></div>
        </div>
      </div>
    </div>
  </div>

  {{-- 描述 --}}
  @if (!empty($issue['description']))
  <div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-white fw-semibold border-bottom">
      <i class="bi bi-file-text me-1"></i> 描述
    </div>
    <div class="card-body">
      <div class="redmine-description" style="white-space: pre-wrap; word-break: break-word;">{{ $issue['description'] }}</div>
    </div>
  </div>
  @endif

  {{-- 附件 --}}
  @if (!empty($issue['attachments']))
  <div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-white fw-semibold border-bottom">
      <i class="bi bi-paperclip me-1"></i> 附件
      <span class="badge bg-secondary bg-opacity-25 text-secondary ms-1">{{ count($issue['attachments']) }}</span>
    </div>
    <div class="card-body p-2">
      <div class="row g-2">
        @foreach ($issue['attachments'] as $att)
          @php
            $ext  = strtolower(pathinfo($att['filename'], PATHINFO_EXTENSION));
            $icon = match(true) {
              in_array($ext, ['jpg','jpeg','png','gif','webp','svg']) => 'bi-file-image-fill text-success',
              in_array($ext, ['pdf'])                                 => 'bi-file-pdf-fill text-danger',
              in_array($ext, ['doc','docx'])                         => 'bi-file-word-fill text-primary',
              in_array($ext, ['xls','xlsx','csv'])                   => 'bi-file-excel-fill text-success',
              in_array($ext, ['ppt','pptx'])                         => 'bi-file-ppt-fill text-warning',
              in_array($ext, ['zip','rar','7z','tar','gz'])           => 'bi-file-zip-fill text-secondary',
              in_array($ext, ['mp4','mov','avi','mkv'])               => 'bi-file-play-fill text-purple',
              default                                                  => 'bi-file-earmark-fill text-secondary',
            };
            $kb = round($att['filesize'] / 1024, 1);
            $size = $kb >= 1024 ? round($kb / 1024, 1) . ' MB' : $kb . ' KB';
          @endphp
          <div class="col-12 col-sm-6 col-md-4">
            <a href="{{ $att['content_url'] }}" target="_blank" rel="noopener"
               class="d-flex align-items-center gap-2 p-2 rounded text-decoration-none border"
               style="background:#fafafa; transition:background .15s;"
               onmouseenter="this.style.background='#f0f4ff'; this.style.borderColor='#93c5fd';"
               onmouseleave="this.style.background='#fafafa'; this.style.borderColor='';">
              <i class="bi {{ $icon }}" style="font-size:1.6rem; flex-shrink:0;"></i>
              <div style="overflow:hidden;">
                <div class="fw-semibold text-dark text-truncate" style="font-size:.82rem;">{{ $att['filename'] }}</div>
                <div class="text-muted" style="font-size:.72rem;">{{ $size }} · {{ \Carbon\Carbon::parse($att['created_on'])->format('Y-m-d') }}</div>
              </div>
              <i class="bi bi-download ms-auto text-muted flex-shrink-0" style="font-size:.85rem;"></i>
            </a>
          </div>
        @endforeach
      </div>
    </div>
  </div>
  @endif

  {{-- 相關議題 --}}
  @if (!empty($issue['relations']))
  <div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-white fw-semibold border-bottom">
      <i class="bi bi-link-45deg me-1"></i> 相關議題
    </div>
    <div class="card-body p-0">
      <ul class="list-group list-group-flush">
        @foreach ($issue['relations'] as $rel)
          <li class="list-group-item d-flex justify-content-between align-items-center">
            <a href="{{ route('my-redmine.issue', $rel['issue_id'] === $issue['id'] ? $rel['issue_to_id'] : $rel['issue_id']) }}"
              class="text-decoration-none">
              #{{ $rel['issue_id'] === $issue['id'] ? $rel['issue_to_id'] : $rel['issue_id'] }}
            </a>
            <span class="badge bg-light text-secondary">{{ $rel['relation_type'] }}</span>
          </li>
        @endforeach
      </ul>
    </div>
  </div>
  @endif

  {{-- 留言記錄 --}}
  @php
    $fieldLabels = [
      'status_id'       => '狀態',
      'assigned_to_id'  => '指派給',
      'done_ratio'      => '完成度',
      'priority_id'     => '優先權',
      'tracker_id'      => '追蹤標籤',
      'subject'         => '主旨',
      'description'     => '描述',
      'due_date'        => '到期日',
      'start_date'      => '開始日期',
      'estimated_hours' => '預估工時',
      'parent_id'       => '父議題',
      'is_private'      => '私密',
      'project_id'      => '專案',
      'fixed_version_id'=> '目標版本',
      'category_id'     => '分類',
    ];

    // 解析 detail value 為人看得懂的文字
    $resolveVal = function($name, $val) use ($statusMap, $priorityMap, $trackerMap, $userMap) {
      if ($val === null || $val === '') return '（已清除）';
      return match($name) {
        'status_id'      => $statusMap[(int)$val]  ?? "狀態 #{$val}",
        'priority_id'    => $priorityMap[(int)$val] ?? "優先權 #{$val}",
        'tracker_id'     => $trackerMap[(int)$val]  ?? "追蹤標籤 #{$val}",
        'assigned_to_id' => $userMap[(int)$val]     ?? "用戶 #{$val}",
        'done_ratio'     => $val . '%',
        'is_private'     => $val ? '是' : '否',
        default          => $val,
      };
    };

    $journals = collect($issue['journals'] ?? [])->filter(fn($j) => !empty($j['notes']) || !empty($j['details']));
  @endphp
  @if ($journals->isNotEmpty())
  <div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-white fw-semibold border-bottom">
      <i class="bi bi-chat-left-text me-1"></i> 歷程記錄（{{ $journals->count() }} 筆）
    </div>
    <div class="card-body p-0">
      @foreach ($journals as $journal)
        <div class="p-3 border-bottom">
          <div class="d-flex justify-content-between align-items-center mb-2">
            <span class="fw-semibold small">
              <i class="bi bi-person-circle me-1 text-muted"></i>
              {{ $journal['user']['name'] ?? '系統' }}
            </span>
            <span class="text-muted small">
              {{ \Carbon\Carbon::parse($journal['created_on'])->format('Y-m-d H:i') }}
            </span>
          </div>

          {{-- 欄位變更記錄 --}}
          @if (!empty($journal['details']))
            <ul class="list-unstyled mb-2 small text-muted">
              @foreach ($journal['details'] as $detail)
                @php
                  $fname    = $detail['name'];
                  $label    = $fieldLabels[$fname] ?? $fname;
                  $oldVal   = $detail['old_value'] ?? null;
                  $newVal   = $detail['new_value'] ?? null;
                  $oldText  = $oldVal !== null ? $resolveVal($fname, $oldVal) : null;
                  $newText  = $resolveVal($fname, $newVal);
                @endphp
                <li>
                  <i class="bi bi-arrow-right-short"></i>
                  <strong>{{ $label }}</strong>：
                  @if ($oldText !== null)
                    <span class="text-decoration-line-through text-secondary">{{ $oldText }}</span>
                    <i class="bi bi-arrow-right mx-1"></i>
                  @endif
                  <span class="text-dark">{{ $newText }}</span>
                </li>
              @endforeach
            </ul>
          @endif

          {{-- 留言內容 --}}
          @if (!empty($journal['notes']))
            <div class="bg-light rounded p-2 small" style="white-space: pre-wrap; word-break: break-word;">{{ $journal['notes'] }}</div>
          @endif
        </div>
      @endforeach
    </div>
  </div>
  @endif

  {{-- 編輯議題 Modal --}}
  <div class="modal fade" id="editIssueModal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title"><i class="bi bi-pencil-square me-1"></i>編輯議題 <span class="text-muted fs-6">#{{ $issue['id'] }}</span></h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label fw-semibold">主旨</label>
            <input type="text" class="form-control" id="edit-subject" value="{{ $issue['subject'] }}" maxlength="255">
          </div>
          <div class="row g-3 mb-3">
            <div class="col-6">
              <label class="form-label fw-semibold">狀態</label>
              <select class="form-select" id="edit-status">
                @foreach ($statuses as $s)
                  <option value="{{ $s['id'] }}" {{ ($issue['status']['id'] ?? '') == $s['id'] ? 'selected' : '' }}>
                    {{ $s['name'] }}
                  </option>
                @endforeach
              </select>
            </div>
            <div class="col-6">
              <label class="form-label fw-semibold">優先權</label>
              <select class="form-select" id="edit-priority">
                @foreach ($priorities as $p)
                  <option value="{{ $p['id'] }}" {{ ($issue['priority']['id'] ?? '') == $p['id'] ? 'selected' : '' }}>
                    {{ $p['name'] }}
                  </option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">指派給</label>
            <select class="form-select" id="edit-assignee">
              <option value="">── 未指派 ──</option>
              @foreach ($members as $m)
                <option value="{{ $m['id'] }}" {{ ($issue['assigned_to']['id'] ?? '') == $m['id'] ? 'selected' : '' }}>
                  {{ $m['name'] }}
                </option>
              @endforeach
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">完成度：<span id="edit-ratio-label">{{ $issue['done_ratio'] ?? 0 }}</span>%</label>
            <input type="range" class="form-range" id="edit-ratio"
              min="0" max="100" step="10" value="{{ $issue['done_ratio'] ?? 0 }}"
              oninput="document.getElementById('edit-ratio-label').textContent = this.value">
          </div>
          <div class="row g-3 mb-3">
            <div class="col-6">
              <label class="form-label fw-semibold">到期日</label>
              <input type="date" class="form-control" id="edit-due-date" value="{{ $issue['due_date'] ?? '' }}">
            </div>
            <div class="col-6">
              <label class="form-label fw-semibold">預估工時（小時）</label>
              <input type="number" class="form-control" id="edit-estimated-hours"
                min="0" step="0.5" placeholder="0"
                value="{{ $issue['estimated_hours'] ?? '' }}">
            </div>
          </div>
          <div class="mb-1">
            <label class="form-label fw-semibold">筆記</label>
            <textarea class="form-control" id="edit-notes" rows="3" placeholder="新增留言或說明（儲存後將顯示於記錄中）…"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button class="btn btn-primary" id="save-issue-btn">
            <i class="bi bi-check-lg me-1"></i>儲存
          </button>
        </div>
      </div>
    </div>
  </div>

</div>
@endsection

@push('scripts')
<script>
const csrfToken = '{{ csrf_token() }}';

document.getElementById('save-issue-btn').addEventListener('click', function () {
  const btn = this;
  const payload = {
    subject:        document.getElementById('edit-subject').value,
    status_id:      parseInt(document.getElementById('edit-status').value),
    priority_id:    parseInt(document.getElementById('edit-priority').value),
    assigned_to_id: document.getElementById('edit-assignee').value || null,
    done_ratio:       parseInt(document.getElementById('edit-ratio').value),
    due_date:         document.getElementById('edit-due-date').value || null,
    estimated_hours:  document.getElementById('edit-estimated-hours').value || null,
    notes:            document.getElementById('edit-notes').value || null,
  };

  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>儲存中…';

  fetch('/my-redmine/issues/{{ $issue["id"] }}', {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
    body: JSON.stringify(payload),
  })
  .then(r => r.json())
  .then(data => {
    if (data.success) {
      location.reload();
    } else {
      btn.disabled = false;
      btn.innerHTML = '<i class="bi bi-check-lg me-1"></i>儲存';
      alert('儲存失敗，請稍後再試');
    }
  })
  .catch(() => {
    btn.disabled = false;
    btn.innerHTML = '<i class="bi bi-check-lg me-1"></i>儲存';
    alert('連線錯誤，請稍後再試');
  });
});
</script>
@endpush