@extends('layouts.app')
@section('title', '圖像編輯')

@push('styles')
<style>
.iex-wrap { max-width:1320px; margin:0 auto; padding:28px 24px 80px; }
.iex-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.iex-title { font-size:1.5rem; font-weight:800; color:#0f172a; letter-spacing:-.02em; margin:0; }
.iex-card { background:#fff; border:1px solid #e2e8f0; border-radius:16px; box-shadow:0 2px 10px rgba(0,0,0,.05); }
.iex-card-head { padding:14px 18px; border-bottom:1px solid #f1f5f9; font-weight:700; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.iex-card-body { padding:16px 18px; }
.iex-start { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; align-items:start; }
.iex-start-btn { border:1px solid #e2e8f0; border-radius:14px; padding:16px; background:#fff; text-align:left; cursor:pointer; transition:.12s; display:flex; gap:12px; align-items:flex-start; width:100%; }
.iex-start-btn:hover, .iex-start-btn.active { border-color:#93c5fd; background:#f0f7ff; }
.iex-start-btn i { font-size:1.6rem; line-height:1; }
.iex-start-btn .t { font-weight:700; color:#1e293b; }
.iex-start-btn .d { font-size:.75rem; color:#64748b; margin-top:2px; }
.iex-drop { border:2px dashed #cbd5e1; border-radius:14px; padding:22px 16px; text-align:center; color:#64748b; cursor:pointer; transition:.15s; background:#f8fafc; }
.iex-drop:hover, .iex-drop.over { border-color:#2563eb; background:#eff6ff; color:#1d4ed8; }
.iex-drop i { font-size:1.8rem; display:block; margin-bottom:4px; }
.iex-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
.iex-item { border:1px solid #e2e8f0; border-radius:14px; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.iex-thumb { aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; text-decoration:none;
  background-color:#fff; background-image:linear-gradient(45deg,#f1f5f9 25%,transparent 25%,transparent 75%,#f1f5f9 75%),linear-gradient(45deg,#f1f5f9 25%,transparent 25%,transparent 75%,#f1f5f9 75%);
  background-size:16px 16px; background-position:0 0,8px 8px; border-bottom:1px solid #f1f5f9; }
.iex-thumb img { max-width:100%; max-height:100%; object-fit:contain; }
.iex-thumb .ph { font-size:2.2rem; color:#cbd5e1; }
.iex-info { padding:10px 12px; flex:1; }
.iex-info .n { font-weight:700; font-size:.88rem; color:#1e293b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; text-decoration:none; }
.iex-info .m { font-size:.72rem; color:#94a3b8; }
.iex-kind { font-size:.65rem; font-weight:700; border-radius:999px; padding:1px 7px; }
.iex-kind.vector { background:#ede9fe; color:#6d28d9; }
.iex-kind.raster { background:#dbeafe; color:#1d4ed8; }
.iex-actions { display:flex; gap:4px; padding:0 8px 8px; }
.iex-actions .btn { padding:.15rem .45rem; font-size:.75rem; }
@media (prefers-color-scheme: dark) {
  .iex-title { color:#f1f5f9; }
  .iex-card, .iex-item, .iex-start-btn { background:#1e2330; border-color:#2e3340; }
  .iex-card-head { border-bottom-color:#2e3340; }
  .iex-start-btn .t, .iex-info .n { color:#e2e8f0; }
  .iex-drop { background:#252b3b; border-color:#3b4252; color:#94a3b8; }
}
</style>
@endpush

@section('content')
<div class="iex-wrap">

  <div class="iex-head">
    <h1 class="iex-title"><i class="bi bi-palette me-2" style="color:#7c3aed;"></i>圖像編輯</h1>
    <form method="GET" class="d-flex gap-2 flex-wrap align-items-center">
      <div class="btn-group btn-group-sm">
        <a href="{{ request()->fullUrlWithQuery(['kind' => null, 'page' => null]) }}" class="btn {{ !$kind ? 'btn-dark' : 'btn-outline-dark' }}">全部</a>
        <a href="{{ request()->fullUrlWithQuery(['kind' => 'vector', 'page' => null]) }}" class="btn {{ $kind === 'vector' ? 'btn-dark' : 'btn-outline-dark' }}">向量圖</a>
        <a href="{{ request()->fullUrlWithQuery(['kind' => 'raster', 'page' => null]) }}" class="btn {{ $kind === 'raster' ? 'btn-dark' : 'btn-outline-dark' }}">點陣圖</a>
      </div>
      @if ($kind)<input type="hidden" name="kind" value="{{ $kind }}">@endif
      @if ($all)<input type="hidden" name="all" value="1">@endif
      <input type="search" name="q" value="{{ $search }}" class="form-control form-control-sm" placeholder="搜尋檔名…" style="width:180px;">
      @if ($isAdmin)
        <a href="{{ request()->fullUrlWithQuery(['all' => $all ? null : 1, 'page' => null]) }}" class="btn btn-sm {{ $all ? 'btn-warning' : 'btn-outline-secondary' }}">
          <i class="bi bi-people me-1"></i>{{ $all ? '目前：全部人員的檔案（點此只看我的）' : '查看全部人員的檔案' }}
        </a>
      @endif
    </form>
  </div>

  {{-- 開始：新增空白 / 上傳 --}}
  <div class="iex-card mb-4">
    <div class="iex-card-body">
      <div class="iex-start mb-3">
        <button type="button" class="iex-start-btn" data-new="vector">
          <i class="bi bi-vector-pen" style="color:#7c3aed;"></i>
          <div><div class="t">新增向量圖</div><div class="d">類似 Illustrator：路徑、形狀、文字、圖層，存成 SVG</div></div>
        </button>
        <button type="button" class="iex-start-btn" data-new="raster">
          <i class="bi bi-brush" style="color:#2563eb;"></i>
          <div><div class="t">新增點陣圖</div><div class="d">類似 Photoshop：筆刷、選取、濾鏡、調色、圖層</div></div>
        </button>
        <label class="iex-drop mb-0" id="iexDrop">
          <i class="bi bi-cloud-arrow-up"></i>
          <div class="fw-semibold">上傳檔案開始編輯</div>
          <div class="small">SVG、AI、PDF → 向量編輯；PNG、JPG、WebP、GIF、BMP → 點陣編輯（每檔 60MB 內）</div>
          <form method="POST" action="{{ route('image-editor.upload') }}" enctype="multipart/form-data" id="iexUploadForm" class="d-none">
            @csrf
            <input type="file" name="files[]" id="iexFiles" multiple accept=".svg,.ai,.pdf,.png,.jpg,.jpeg,.webp,.gif,.bmp,image/*,application/pdf">
          </form>
        </label>
      </div>

      {{-- 新增空白檔的設定（行內面板，不用 modal） --}}
      <form method="POST" action="{{ route('image-editor.create') }}" id="iexNewPanel" class="border rounded-3 p-3" style="display:none;">
        @csrf
        <input type="hidden" name="kind" id="iexNewKind" value="vector">
        <div class="fw-bold mb-2" id="iexNewTitle">新增向量圖</div>
        <div class="row g-2 align-items-end">
          <div class="col-md-3">
            <label class="form-label small mb-1">名稱</label>
            <input type="text" name="title" class="form-control form-control-sm" maxlength="120" placeholder="未命名圖檔">
          </div>
          <div class="col-md-3">
            <label class="form-label small mb-1">常用尺寸</label>
            <select class="form-select form-select-sm" id="iexPreset">
              <option value="1920x1080">1920 × 1080（簡報／影片）</option>
              <option value="1080x1080">1080 × 1080（社群方圖）</option>
              <option value="1200x630">1200 × 630（分享縮圖）</option>
              <option value="794x1123">A4 直式（794 × 1123）</option>
              <option value="1123x794">A4 橫式（1123 × 794）</option>
              <option value="512x512">512 × 512（圖示）</option>
              <option value="800x600" selected>800 × 600</option>
              <option value="">自訂</option>
            </select>
          </div>
          <div class="col-6 col-md-2">
            <label class="form-label small mb-1">寬（px）</label>
            <input type="number" name="width" id="iexW" class="form-control form-control-sm" value="800" min="16" max="8000" required>
          </div>
          <div class="col-6 col-md-2">
            <label class="form-label small mb-1">高（px）</label>
            <input type="number" name="height" id="iexH" class="form-control form-control-sm" value="600" min="16" max="8000" required>
          </div>
          <div class="col-md-2" id="iexBgWrap" style="display:none;">
            <label class="form-label small mb-1">背景</label>
            <select name="background" class="form-select form-select-sm">
              <option value="white">白色</option>
              <option value="transparent">透明</option>
            </select>
          </div>
          @if ($projects->isNotEmpty())
          <div class="col-md-3">
            <label class="form-label small mb-1">歸屬專案（選填）</label>
            <select name="project_id" class="form-select form-select-sm">
              <option value="">—</option>
              @foreach ($projects as $p)<option value="{{ $p->id }}">{{ $p->name }}</option>@endforeach
            </select>
          </div>
          @endif
          <div class="col-auto">
            <button type="submit" class="btn btn-sm btn-primary"><i class="bi bi-plus-lg me-1"></i>建立並開始編輯</button>
            <button type="button" class="btn btn-sm btn-outline-secondary" id="iexNewCancel">取消</button>
          </div>
        </div>
      </form>
    </div>
  </div>

  {{-- 檔案清單 --}}
  @if ($docs->isEmpty())
    <div class="text-center text-muted py-5">
      <i class="bi bi-images fs-1 d-block mb-2"></i>
      {{ $search || $kind ? '沒有符合條件的檔案' : '還沒有任何圖檔，從上面新增或上傳一個開始吧' }}
    </div>
  @else
    <div class="iex-grid">
      @foreach ($docs as $d)
        <div class="iex-item">
          <a href="{{ route('image-editor.show', $d) }}" class="iex-thumb" title="開啟編輯">
            @if ($d->preview_path || $d->source_type === 'image')
              <img src="{{ route('image-editor.preview', $d) }}?v={{ $d->updated_at?->timestamp }}" alt="" loading="lazy">
            @else
              <i class="bi {{ $d->kind === 'vector' ? 'bi-vector-pen' : 'bi-image' }} ph"></i>
            @endif
          </a>
          <div class="iex-info">
            <a href="{{ route('image-editor.show', $d) }}" class="n" title="{{ $d->title }}">{{ $d->title }}</a>
            <div class="m d-flex align-items-center gap-1 flex-wrap">
              <span class="iex-kind {{ $d->kind }}">{{ $d->kindLabel() }}</span>
              @if ($d->width && $d->height)<span>{{ $d->width }}×{{ $d->height }}</span>@endif
              @if ($d->size)<span>· {{ $d->sizeLabel() }}</span>@endif
            </div>
            <div class="m">
              {{ $d->updated_at?->format('Y-m-d H:i') }}
              @if ($all && $d->owner) · {{ $d->owner->name }}@endif
              @if ($d->project) · <i class="bi bi-folder2"></i> {{ $d->project->name }}@endif
            </div>
          </div>
          <div class="iex-actions">
            <a href="{{ route('image-editor.show', $d) }}" class="btn btn-primary"><i class="bi bi-pencil"></i> 編輯</a>
            @if ($d->source_path)
              <a href="{{ route('image-editor.download', $d) }}" class="btn btn-outline-secondary" title="下載可再編輯的原始檔（SVG／圖層 JSON）"><i class="bi bi-download"></i></a>
            @endif
            <form method="POST" action="{{ route('image-editor.duplicate', $d) }}" class="d-inline">@csrf
              <button class="btn btn-outline-secondary" title="建立副本"><i class="bi bi-copy"></i></button>
            </form>
            <form method="POST" action="{{ route('image-editor.destroy', $d) }}" class="d-inline ms-auto" onsubmit="return confirm('確定刪除「' + this.dataset.title + '」？刪除後無法復原。')" data-title="{{ $d->title }}">
              @csrf @method('DELETE')
              <button class="btn btn-outline-danger" title="刪除"><i class="bi bi-trash"></i></button>
            </form>
          </div>
        </div>
      @endforeach
    </div>
    <div class="mt-3">{{ $docs->links() }}</div>
  @endif
</div>
@endsection

@push('scripts')
<script>
(function () {
  // 新增空白檔
  const panel = document.getElementById('iexNewPanel');
  document.querySelectorAll('[data-new]').forEach(btn => btn.addEventListener('click', () => {
    const kind = btn.dataset.new;
    document.querySelectorAll('[data-new]').forEach(b => b.classList.toggle('active', b === btn));
    document.getElementById('iexNewKind').value = kind;
    document.getElementById('iexNewTitle').textContent = kind === 'vector' ? '新增向量圖' : '新增點陣圖';
    document.getElementById('iexBgWrap').style.display = kind === 'raster' ? '' : 'none';
    panel.style.display = '';
    panel.querySelector('input[name=title]').focus();
  }));
  document.getElementById('iexNewCancel').addEventListener('click', () => {
    panel.style.display = 'none';
    document.querySelectorAll('[data-new]').forEach(b => b.classList.remove('active'));
  });
  document.getElementById('iexPreset').addEventListener('change', function () {
    if (!this.value) return;
    const [w, h] = this.value.split('x');
    document.getElementById('iexW').value = w;
    document.getElementById('iexH').value = h;
  });
  ['iexW', 'iexH'].forEach(id => document.getElementById(id).addEventListener('input', () => { document.getElementById('iexPreset').value = ''; }));

  // 上傳（點選或拖放）
  const drop = document.getElementById('iexDrop'), input = document.getElementById('iexFiles'), form = document.getElementById('iexUploadForm');
  input.addEventListener('change', () => { if (input.files.length) { drop.querySelector('.fw-semibold').textContent = '上傳中，AI／PDF 需要轉檔請稍候…'; form.submit(); } });
  ['dragenter', 'dragover'].forEach(ev => drop.addEventListener(ev, e => { e.preventDefault(); drop.classList.add('over'); }));
  ['dragleave', 'drop'].forEach(ev => drop.addEventListener(ev, e => { e.preventDefault(); drop.classList.remove('over'); }));
  drop.addEventListener('drop', e => {
    if (!e.dataTransfer.files.length) return;
    input.files = e.dataTransfer.files;
    input.dispatchEvent(new Event('change'));
  });
})();
</script>
@endpush