@extends('layouts.app')
@section('title', '活動')

@section('content')
@php
    $allTrackers = \App\Models\IssueTracker::asOptions();
    $allStatuses = \App\Models\IssueStatus::asOptions();
    $trackerColor = [
        'bug'     => '#c0392b',
        'feature' => '#2980b9',
        'task'    => '#27ae60',
        'support' => '#8e44ad',
        'doc'     => '#e67e22',
    ];
    // Bootstrap color name → dark text required
    $lightBs = ['warning', 'info', 'light'];
    $today = now()->format('Y-m-d');
@endphp

<style>
body{background:#f5f5f5;}
/* ── 頂部 ── */
.rm5-topbar{background:#48536b;color:#fff;padding:0 20px;display:flex;align-items:center;min-height:48px;}
.rm5-topbar-brand{font-size:18px;font-weight:bold;color:#fff;text-decoration:none;}
/* ── Tab 列 ── */
.rm5-tabs{background:#5d6880;display:flex;align-items:flex-end;padding:0 12px;gap:2px;min-height:36px;flex-wrap:wrap;}
.rm5-tabs a{display:block;padding:7px 13px 5px;color:#ccd6ee;font-size:13px;text-decoration:none;border:1px solid transparent;border-bottom:none;border-radius:3px 3px 0 0;white-space:nowrap;}
.rm5-tabs a:hover{background:#697598;color:#fff;}
.rm5-tabs a.active{background:#fff;color:#333;border-color:#aaa;border-bottom-color:#fff;font-weight:bold;}
.rm5-tabs-spacer{flex:1;}
.rm5-tabs-right{display:flex;align-items:center;padding-bottom:4px;gap:6px;}
.rm5-btn-sm{display:inline-block;padding:2px 9px;background:#e8e8e8;border:1px solid #aaa;border-radius:2px;font-size:12px;color:#333;text-decoration:none;cursor:pointer;white-space:nowrap;}
.rm5-btn-sm:hover{background:#d0d0d0;color:#222;text-decoration:none;}
.rm5-btn-toggle{background:#e8eef7;border-color:#aabcd8;color:#2c5f9a;font-size:11px;}
.rm5-btn-toggle:hover{background:#d5e3f5;}

/* ── 內容區 ── */
.rm5-content{max-width:1100px;margin:0 auto;padding:14px 20px 40px;}
.rm5-page-title{font-size:20px;font-weight:bold;color:#333;margin:0 0 4px;}
.rm5-date-range{color:#888;font-size:12px;margin-bottom:18px;}
/* 日期組 */
.rm5-day-header{background:#e8eaf0;border:1px solid #d0d2da;padding:6px 14px;font-size:14px;font-weight:bold;color:#444;margin-top:18px;margin-bottom:0;border-radius:2px 2px 0 0;}
.rm5-day-list{border:1px solid #d0d2da;border-top:none;background:#fff;padding:2px 0 6px;}
/* 活動 item */
.rm5-act-item{padding:6px 14px 4px;border-bottom:1px solid #f0f0f0;display:flex;gap:10px;align-items:flex-start;}
.rm5-act-item:last-child{border-bottom:none;}
.rm5-act-item.rm5-comment{padding-left:46px;background:#fafafa;}
.rm5-act-icon{flex-shrink:0;width:18px;height:18px;margin-top:1px;display:flex;align-items:center;justify-content:center;}
.rm5-act-icon svg{width:16px;height:16px;}
.rm5-act-body{flex:1;min-width:0;}
.rm5-act-meta{font-size:12px;color:#555;margin-bottom:2px;}
.rm5-act-time{color:#888;font-size:11px;margin-right:6px;}
.rm5-act-proj{color:#333;font-weight:600;font-size:13px;}
.rm5-act-link{font-size:13px;}
.rm5-act-link a{color:#1a6aae;text-decoration:none;}
.rm5-act-link a:hover{text-decoration:underline;}
.rm5-tracker{font-weight:bold;}
.rm5-act-desc{font-size:12px;color:#555;font-style:italic;margin:2px 0;max-height:3em;overflow:hidden;line-height:1.5;}
.rm5-act-author{font-size:11px;color:#888;}
/* filter bar */
.rm5-filter-bar{background:#fff;border:1px solid #d8dae0;padding:8px 14px;border-radius:2px;margin-bottom:14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;}
.rm5-filter-bar label{color:#555;font-size:12px;}
.rm5-filter-bar select,.rm5-filter-bar input[type=number]{border:1px solid #ccc;border-radius:2px;padding:2px 6px;font-size:12px;}
.rm5-filter-bar button{padding:2px 10px;background:#e4e4e4;border:1px solid #bbb;border-radius:2px;font-size:12px;cursor:pointer;}
.rm5-empty{color:#888;font-size:13px;text-align:center;padding:40px 0;}
</style>

{{-- 頂部品牌列 --}}
<div class="rm5-topbar">
  <a href="{{ route('projects.list') }}" class="rm5-topbar-brand">{{ config('app.company_name') }} 專案管理平台</a>
</div>

{{-- Tab 導覽 --}}
<div class="rm5-tabs">
  <a href="{{ route('projects.list') }}">專案清單</a>
  <a href="{{ route('projects.activity') }}" class="active">活動</a>
  <a href="{{ route('projects.globalIssues') }}">議題清單</a>
  <div class="rm5-tabs-spacer"></div>
  <div class="rm5-tabs-right">
    <a href="{{ route('projects.list') }}" class="rm5-btn-sm rm5-btn-toggle">&#8592; 返回專案清單</a>
  </div>
</div>

{{-- 內容 --}}
<div class="rm5-content">
  <p class="rm5-page-title">活動</p>
  <p class="rm5-date-range">
    起 {{ $from->format('Y-m-d') }} 迄 {{ now()->format('Y-m-d') }}
  </p>

  {{-- 篩選列 --}}
  <form method="GET" action="{{ route('projects.activity') }}" style="margin-bottom:14px">
    <div class="rm5-filter-bar">
      <label for="act-days">顯示最近</label>
      <input type="number" id="act-days" name="days" value="{{ $days }}" min="7" max="180" style="width:60px">
      <label for="act-days">天</label>
      <button type="submit">套用</button>
    </div>
  </form>

  @if($grouped->isEmpty())
    <div class="rm5-empty">此時段內沒有活動記錄。</div>
  @else
    @foreach($grouped as $date => $items)
      @php
        $carbon = \Carbon\Carbon::parse($date);
        $label  = $date === $today
            ? '今天'
            : ($date === now()->subDay()->format('Y-m-d') ? '昨天' : $date);
      @endphp
      <div class="rm5-day-header">{{ $label }}</div>
      <div class="rm5-day-list">
        @foreach($items as $issue)
          @php
            $tLabel  = $allTrackers[$issue->tracker]['label'] ?? $issue->tracker;
            $tColor  = $trackerColor[$issue->tracker] ?? '#555';
            $sBs     = $allStatuses[$issue->status]['color'] ?? 'secondary';
            $sLabel  = $allStatuses[$issue->status]['label'] ?? $issue->status;
            $isNew   = $issue->created_at->format('Y-m-d') === $date
                       && abs($issue->updated_at->timestamp - $issue->created_at->timestamp) < 60;
            $projName = $issue->project->name ?? '—';
            $clientName = $issue->project->client->name ?? null;
            $displayProj = $clientName ? $clientName . ' - ' . $projName : $projName;
            $assigneeName = $issue->assignee->name ?? ($issue->user->name ?? null);
            $timeStr = $issue->updated_at->format('H:i');
          @endphp
          <div class="rm5-act-item">
            {{-- 圖示 --}}
            <div class="rm5-act-icon">
              @if($isNew)
                {{-- 新建立：深色圖示 --}}
                <svg viewBox="0 0 16 16" fill="{{ $tColor }}" xmlns="http://www.w3.org/2000/svg">
                  <rect x="1" y="2" width="14" height="12" rx="1.5" fill="{{ $tColor }}" opacity="0.85"/>
                  <rect x="3" y="5" width="10" height="1.5" rx="0.5" fill="#fff"/>
                  <rect x="3" y="8" width="7" height="1.5" rx="0.5" fill="#fff"/>
                </svg>
              @else
                {{-- 更新：淡色圖示 --}}
                <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="1" y="2" width="14" height="12" rx="1.5" stroke="{{ $tColor }}" stroke-width="1.5" fill="#fff8e8"/>
                  <rect x="3" y="5" width="10" height="1.2" rx="0.5" fill="{{ $tColor }}" opacity="0.5"/>
                  <rect x="3" y="8" width="6" height="1.2" rx="0.5" fill="{{ $tColor }}" opacity="0.5"/>
                </svg>
              @endif
            </div>
            {{-- 內容 --}}
            <div class="rm5-act-body">
              <div class="rm5-act-link">
                <span class="rm5-act-time">{{ $timeStr }}</span>
                <span class="rm5-act-proj">{{ $displayProj }}</span>
                <span style="color:#888"> - </span>
                <span class="rm5-tracker" style="color:{{ $tColor }}">{{ $tLabel }}</span>
                @if($issue->redmine_id && $issue->project_id)
                  <a href="{{ route('projects.issues.show', [$issue->project_id, $issue]) }}"
                     style="color:#1a6aae;text-decoration:none"> #{{ $issue->redmine_id }}</a>
                @elseif($issue->redmine_id)
                  <span style="color:#888"> #{{ $issue->redmine_id }}</span>
                @endif
                <span class="badge text-bg-{{ $sBs }}" style="font-size:11px;font-weight:normal;"> {{ $sLabel }}</span>
                <span style="color:#888">: </span>
                @if($issue->project_id)
                  <a href="{{ route('projects.issues.show', [$issue->project_id, $issue]) }}"
                     style="color:#1a6aae;text-decoration:none">{{ $issue->title }}</a>
                @else
                  <span>{{ $issue->title }}</span>
                @endif
              </div>
              @if($isNew && $issue->description)
                <div class="rm5-act-desc">{{ Str::limit(strip_tags($issue->description), 120) }}</div>
              @endif
              @if($assigneeName)
                <div class="rm5-act-author">{{ $assigneeName }}</div>
              @endif
            </div>
          </div>
        @endforeach
      </div>
    @endforeach
  @endif
</div>
@endsection