'use client';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { STAGES, stageOf } from './RenderStrip';
/** Sipariş sayfasındaki üretim kutusu: aşamalar + canlı son kare (4 sn'de bir). */
export function OrderProgress({ id, initial }: { id: string; initial: { status: string; progress: number; progressMsg: string | null } }) {
  const [s, setS] = useState(initial); const [frame, setFrame] = useState<string | null>(null);
  const router = useRouter();
  useEffect(() => {
    if (['DELIVERED', 'FAILED', 'CANCELLED'].includes(s.status)) return;
    const tick = async () => {
      const r = await fetch(`/api/orders/${id}`, { cache: 'no-store' }); if (!r.ok) return;
      const j = await r.json(); setS(j);
      if (j.status === 'RENDERING') { const f = await fetch(`/api/orders/${id}/live`, { cache: 'no-store' }); if (f.status === 200) { const b = await f.blob(); setFrame((o) => { if (o) URL.revokeObjectURL(o); return URL.createObjectURL(b); }); } }
      if (j.status === 'DELIVERED' || j.status === 'FAILED') router.refresh();
    };
    tick(); const t = setInterval(tick, 4000); return () => clearInterval(t);
  }, [id, s.status, router]);
  const at = stageOf(s);
  return (
    <div className="grid grid-cols-[1fr_120px] gap-3 border-t border-ink/15 px-4 py-4">
      <div>
        <div className="flex items-baseline justify-between"><b className="text-[15px]">{s.status === 'PENDING_PAYMENT' ? 'Ödeme bekleniyor' : s.progressMsg || 'Hazırlanıyor'}</b>{s.status !== 'PENDING_PAYMENT' && <span className="num text-[13px] font-bold">%{s.progress}</span>}</div>
        <div className="mt-2 h-1 bg-ink/10"><div className="h-full bg-signal transition-all duration-700" style={{ width: `${Math.max(2, s.progress)}%` }} /></div>
        <ol className="mt-3 space-y-0.5">
          {STAGES.map((l, i) => <li key={l} className={`flex items-center gap-2 text-[13px] ${i < at ? 'text-ink' : i === at ? 'font-bold text-ink' : 'text-ink/35'}`}><i className={`h-2 w-2 ${i < at ? 'bg-ink' : i === at ? 'bg-signal' : 'border border-ink/30'}`} />{l}</li>)}
        </ol>
        {['QUEUED', 'RENDERING', 'PAID'].includes(s.status) && <p className="mt-3 text-[12.5px] text-ink-soft">Sayfayı kapatabilirsiniz; video hazır olunca e-postayla haber veririz.</p>}
      </div>
      <div className="aspect-[9/16] bg-ink">{frame ? <img src={frame} alt="Üretilen son kare" className="h-full w-full object-cover" /> : <span className="grid h-full place-items-center p-2 text-center text-[11px] text-white/55">{at >= 4 ? 'Kare geliyor…' : 'Kareler çizilince burada görünür'}</span>}</div>
    </div>
  );
}