@extends('layouts.app')

@section('content')
<div class="max-w-3xl mx-auto">
    <div class="p-6 rounded-2xl bg-slate-950/55 text-white border border-white/10 shadow-xl">
        <h1 class="text-xl font-extrabold tracking-wide">UPLOAD PUBLIK</h1>

	        @if(session('uploaded_url'))
	            <div class="mt-4 p-4 rounded-2xl border border-white/10 bg-white/5">
	                <div class="text-sm font-semibold">Upload berhasil</div>

	                @if(session('uploaded_thumb'))
	                    <div class="mt-3 mx-auto w-[400px] max-w-full h-[400px] rounded-2xl overflow-hidden bg-black/20 border border-white/10">
	                        <img src="{{ session('uploaded_thumb') }}" alt="Uploaded thumbnail" class="w-full h-full object-contain" />
	                    </div>
	                @endif

	                <div class="mt-3 grid sm:grid-cols-[1fr,auto] gap-2">
	                    <input id="uploadedLink" type="text" readonly value="{{ session('uploaded_url') }}"
	                           class="w-full rounded-xl bg-black/30 border border-white/10 px-3 py-2 text-sm text-white" />
	                    <button type="button" id="btnCopyUploaded"
	                            class="px-4 py-2 rounded-xl bg-cyan-400 hover:bg-cyan-300 text-slate-950 font-extrabold">Copy Link</button>
	                </div>
	            </div>
	        @endif

	        <form id="publicUploadForm" method="POST" action="{{ route('public.upload.store') }}" enctype="multipart/form-data" class="mt-6 space-y-4">
            @csrf

	            <div id="publicDropzone" class="border-2 border-dashed border-cyan-300/60 rounded-2xl p-6 bg-white/5 hover:bg-white/10 transition cursor-pointer">
	                <input id="publicFileInput" name="image" type="file" required accept="image/*" class="hidden" />
	                <div class="flex flex-col items-center justify-center gap-2 text-center">
	                    <div class="font-semibold tracking-wide">UPLOAD FILE / DRAG / CTRL + V</div>
	                    <div id="publicFileHint" class="text-xs text-white/60">Pilih 1 file • Max {{ config('photohost.upload_max_mb') }}MB • jpg/png/webp/gif</div>
	                </div>
	            </div>


            <div id="publicThumbWrap" class="hidden mt-4 mx-auto w-[400px] max-w-full h-[400px] rounded-2xl overflow-hidden bg-black/20 border border-white/10">
                <img id="publicThumb" alt="Thumbnail" class="w-full h-full object-contain" />
            </div>

            <label class="mt-4 flex items-center gap-2 text-sm text-white/80 select-none">
                <input id="publicCompress" type="checkbox" class="rounded border-white/20 bg-white/10" checked>
                <span>Auto compress &amp; resize</span>
            </label>

            <div class="grid sm:grid-cols-2 gap-3">
                <div>
	                    <label class="text-sm text-white/80">Nama File</label>
                    <input name="display_name" type="text" placeholder="contoh: Banner Promo"
                           class="mt-1 w-full rounded-xl bg-white/5 border border-white/10 px-3 py-2 text-sm text-white placeholder:text-white/50" />
                </div>
                <div>
	                    <label class="text-sm text-white/80">Slug URL</label>
                    <input name="public_name" type="text" placeholder="contoh: banner-promo"
                           class="mt-1 w-full rounded-xl bg-white/5 border border-white/10 px-3 py-2 text-sm text-white placeholder:text-white/50" />
                </div>
            </div>

            <button id="publicUploadBtn" class="w-full py-2.5 rounded-xl bg-cyan-400 hover:bg-cyan-300 text-slate-950 font-extrabold">
                Upload
            </button>

	            <div class="text-xs text-white/60">Max {{ config('photohost.upload_max_mb') }}MB • jpg/png/webp/gif</div>
        </form>

        <div class="mt-5 flex items-center justify-between gap-3">
            <a href="{{ route('login') }}" class="text-sm px-3 py-2 rounded-xl bg-white/10 hover:bg-white/20 border border-white/10">Ke Login</a>
        </div>
    </div>
</div>

<script>
(() => {
  const dz = document.getElementById('publicDropzone');
  const input = document.getElementById('publicFileInput');
  const hint = document.getElementById('publicFileHint');
  const uploadedLink = document.getElementById('uploadedLink');
  const btnCopyUploaded = document.getElementById('btnCopyUploaded');
  const form = document.getElementById('publicUploadForm');
  const thumbWrap = document.getElementById('publicThumbWrap');
  const thumb = document.getElementById('publicThumb');
  const toggleCompress = document.getElementById('publicCompress');
  const uploadBtn = document.getElementById('publicUploadBtn');

  let thumbUrl = null;

  const setThumb = (file) => {
    if (!thumbWrap || !thumb) return;
    if (thumbUrl) {
      try { URL.revokeObjectURL(thumbUrl); } catch (e) {}
      thumbUrl = null;
    }
    if (!file) {
      thumbWrap.classList.add('hidden');
      thumb.removeAttribute('src');
      return;
    }
    thumbUrl = URL.createObjectURL(file);
    thumb.src = thumbUrl;
    thumbWrap.classList.remove('hidden');
  };


  const setHint = (file) => {
    if (!hint) return;
    if (!file) {
      hint.textContent = `Pilih 1 file • Max {{ config('photohost.upload_max_mb') }}MB • jpg/png/webp/gif`;
      return;
    }
    const kb = Math.max(1, Math.round(file.size / 1024));
    hint.textContent = `${file.name} • ${kb} KB`;
  };

  const setFile = (file) => {
    const dt = new DataTransfer();
    dt.items.add(file);
    input.files = dt.files;
    setHint(file);
    setThumb(file);
  };

  dz?.addEventListener('click', () => input?.click());
  input?.addEventListener('change', () => { const f = input.files?.[0] || null; setHint(f); setThumb(f); });

  // Drag & drop
  dz?.addEventListener('dragover', (e) => { e.preventDefault(); dz.classList.add('bg-white/10'); });
  dz?.addEventListener('dragleave', () => dz.classList.remove('bg-white/10'));
  dz?.addEventListener('drop', (e) => {
    e.preventDefault();
    dz.classList.remove('bg-white/10');
    const file = e.dataTransfer?.files?.[0];
    if (file) setFile(file);
  });

  // Ctrl+V paste image
  window.addEventListener('paste', (e) => {
    const items = e.clipboardData?.items || [];
    for (const it of items) {
      if (it.kind === 'file' && it.type.startsWith('image/')) {
        const file = it.getAsFile();
        if (file) {
          setFile(file);
          break;
        }
      }
    }
  });

  const extFromMime = (mime, fallbackExt) => {
    if (!mime) return fallbackExt || 'bin';
    if (mime.includes('jpeg')) return 'jpg';
    if (mime.includes('png')) return 'png';
    if (mime.includes('webp')) return 'webp';
    if (mime.includes('gif')) return 'gif';
    return fallbackExt || 'bin';
  };

  const compressAndResize = async (file) => {
    if (!file || file.type === 'image/gif') return file;
    if (file.size < 350 * 1024) return file;

    const maxW = 1920, maxH = 1920;
    const img = await createImageBitmap(file);
    const ratio = Math.min(1, maxW / img.width, maxH / img.height);
    const targetW = Math.max(1, Math.round(img.width * ratio));
    const targetH = Math.max(1, Math.round(img.height * ratio));

    const shouldResize = ratio < 1;
    const shouldReencode = file.size > 800 * 1024;
    if (!shouldResize && !shouldReencode) return file;

    const canvas = document.createElement('canvas');
    canvas.width = targetW;
    canvas.height = targetH;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, targetW, targetH);

    const outType = file.type === 'image/png' ? 'image/webp' : 'image/jpeg';
    const quality = outType === 'image/webp' ? 0.82 : 0.85;

    const blob = await new Promise((resolve) => canvas.toBlob(resolve, outType, quality));
    if (!blob) return file;

    const base = (file.name || 'image').replace(/\.[^/.]+$/, '');
    const newName = `${base}.${extFromMime(outType, 'jpg')}`;
    return new File([blob], newName, { type: outType, lastModified: Date.now() });
  };

  let isSubmitting = false;
  form?.addEventListener('submit', async (e) => {
    if (isSubmitting) return;
    const file = input?.files?.[0];
    if (!file) return;

    if (toggleCompress?.checked) {
      e.preventDefault();
      isSubmitting = true;
      try {
        if (uploadBtn) {
          uploadBtn.disabled = true;
          uploadBtn.classList.add('opacity-60', 'cursor-not-allowed');
          uploadBtn.textContent = 'Uploading...';
        }
        const out = await compressAndResize(file);
        if (out && out !== file) setFile(out);
      } catch (err) {
        // fallback: upload original
      }
      // submit after prepare
      form.submit();
    }
  });


  // Copy uploaded link
  btnCopyUploaded?.addEventListener('click', async () => {
    const val = uploadedLink?.value;
    if (!val) return;
    try {
      await navigator.clipboard.writeText(val);
      btnCopyUploaded.textContent = 'Copied!';
      setTimeout(() => (btnCopyUploaded.textContent = 'Copy Link'), 900);
    } catch {
      // Fallback
      uploadedLink?.select();
      document.execCommand('copy');
    }
  });
})();
</script>
@endsection