'use client';
import { useEffect, useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
export type Active = { id: string; label: string; status: string; progress: number; progressMsg: string | null };
export const STAGES = ['Ödeme', 'Sıra', 'Veri', 'Ses', 'Kareler', 'Kurgu', 'Teslim'];
export function stageOf(s: { status: string; progress: number; progressMsg: string | null }) {
  if (s.status === 'PENDING_PAYMENT') return -1;
  if (s.status === 'DELIVERED') return 6;
  if (s.status === 'PAID') return 0;
  if (s.status === 'QUEUED') return 1;
  const m = s.progressMsg || '';
  if (/Ses miksajı|Kodlama/i.test(m) || s.progress >= 84) return 5;
  if (/Kare/i.test(m) || s.progress >= 12) return 4;
  if (/Seslendirme/i.test(m) || s.progress >= 10) return 3;
  return 2;
}
/** Üretimdeki ilk videonun canlı durumu: aşamalar + son kare. Birden fazlaysa diğerleri sayıyla belirtilir. */
export function RenderStrip({ items, left }: { items: Active[]; left: number }) {
  const [s, setS] = useState(items[0]); const [frame, setFrame] = useState<string | null>(null);
  const router = useRouter();
  useEffect(() => { setS(items[0]); }, [items]);
  useEffect(() => {
    let stop = false;
    const tick = async () => {
      const r = await fetch(`/api/orders/${s.id}`, { cache: 'no-store' }); if (!r.ok || stop) return;
      const j = await r.json(); setS((o) => ({ ...o, ...j }));
      if (j.status === 'RENDERING') { const f = await fetch(`/api/orders/${s.id}/live`, { cache: 'no-store' }); if (f.status === 200) { const b = await f.blob(); setFrame((old) => { if (old) URL.revokeObjectURL(old); return URL.createObjectURL(b); }); } }
      if (['DELIVERED', 'FAILED'].includes(j.status)) router.refresh();
    };
    tick(); const t = setInterval(tick, 4000);
    return () => { stop = true; clearInterval(t); };
  }, [s.id, router]);
  const at = stageOf(s);
  return (
    <div data-strip className="sticky bottom-0 z-20 bg-ink text-white md:absolute md:bottom-4 md:right-4">
      <style>{`@media (min-width:768px){[data-strip]{left:${left}px}}`}</style>
      <div className="grid grid-cols-[1fr_auto] items-center gap-4 p-3 md:grid-cols-[230px_1fr_96px] md:px-4">
        <Link href={`/panel/siparisler/${s.id}`} className="min-w-0">
          <div className="truncate text-[15px] font-bold">{s.label} hazırlanıyor</div>
          <div className="truncate text-[12.5px] text-white/65">{s.progressMsg || 'Sırada'} · %{s.progress}{items.length > 1 ? ` · ${items.length - 1} video daha sırada` : ''}</div>
        </Link>
        <ol className="col-span-2 row-start-2 grid grid-cols-7 gap-1 md:col-span-1 md:row-start-auto">
          {STAGES.map((l, i) => <li key={l} className={`border-t-[3px] pt-1 font-narrow text-[11px] font-semibold uppercase tracking-[0.05em] ${i < at ? 'border-signal text-white' : i === at ? 'border-white text-white' : 'border-white/20 text-white/40'}`}>{l}</li>)}
        </ol>
        <div className="row-start-1 h-[54px] w-[96px] bg-black md:row-start-auto">{frame ? <img src={frame} alt="Üretilen son kare" className="h-full w-full object-cover" /> : <span className="grid h-full place-items-center text-[10.5px] text-white/50">kare bekleniyor</span>}</div>
      </div>
    </div>
  );
}