'use client';
import { useRef, useState } from 'react';
import { TOUR_EDGE } from '@/lib/photos';

async function shrink(file: File): Promise<Blob> {
  const bmp = await createImageBitmap(file, { imageOrientation: 'from-image' });
  const k = Math.min(1, TOUR_EDGE / Math.max(bmp.width, bmp.height));
  const c = document.createElement('canvas'); c.width = Math.round(bmp.width * k); c.height = Math.round(bmp.height * k);
  c.getContext('2d')!.drawImage(bmp, 0, 0, c.width, c.height); bmp.close();
  return new Promise((res, rej) => c.toBlob((b) => (b ? res(b) : rej(new Error('İşlenemedi'))), 'image/jpeg', 0.85));
}

/** 360° (equirectangular) tek fotoğraf yükleme. onKey(null) = kaldır. */
export function TourUpload({ onKey }: { onKey: (key: string | null, busy: boolean) => void }) {
  const input = useRef<HTMLInputElement>(null);
  const [url, setUrl] = useState<string | null>(null);
  const [state, setState] = useState<'' | 'up' | 'ok' | 'err'>('');
  const [msg, setMsg] = useState('');

  async function add(file: File) {
    if (url) URL.revokeObjectURL(url);
    setUrl(URL.createObjectURL(file)); setState('up'); setMsg(''); onKey(null, true);
    try {
      const fd = new FormData(); fd.append('tour', await shrink(file), 'tour.jpg');
      const r = await fetch('/api/orders/tour', { method: 'POST', body: fd });
      const j = await r.json().catch(() => ({}));
      if (!r.ok || !j.key) throw new Error(j.error || 'Yüklenemedi');
      setState('ok'); onKey(j.key, false);
    } catch (e) { setState('err'); setMsg((e as Error).message); onKey(null, false); }
  }
  function clear() { if (url) URL.revokeObjectURL(url); setUrl(null); setState(''); onKey(null, false); }

  return (
    <div>
      {url ? (
        <div className="flex items-center gap-3">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src={url} alt="360° önizleme" className="h-16 w-28 shrink-0 object-cover" />
          <div className="min-w-0 flex-1 text-[12.5px]">{state === 'up' ? 'Yükleniyor…' : state === 'ok' ? <span className="font-semibold text-signal-dark">Yüklendi ✓</span> : <span className="text-survey-dark">{msg}</span>}</div>
          <button type="button" onClick={clear} className="btn-line btn-sm shrink-0">Kaldır</button>
        </div>
      ) : (
        <button type="button" onClick={() => input.current?.click()} className="w-full border-2 border-dashed border-ink/25 px-4 py-4 text-center text-[13px] font-semibold text-ink-soft hover:border-ink/50">
          + 360° fotoğraf ekle
        </button>
      )}
      <input ref={input} type="file" accept="image/*" hidden onChange={(e) => { const f = e.target.files?.[0]; if (f) add(f); e.target.value = ''; }} />
    </div>
  );
}