// DemoVendas.jsx — auto-looping demo: pipeline orçamento → encomenda → guia → fatura.
// O mesmo documento avança quatro estados; o cursor clica "converter" em cada passo.

(function () {
  const STR = {
    pt: {
      title: 'Vendas · Obra Quinta dos Álamos',
      phases: [
        { kind: 'Orçamento', num: 'ORC-2026-0231', badge: 'Enviado', cls: 'bg-sky-50 border-sky-200 text-sky-700', btn: 'Converter em encomenda' },
        { kind: 'Encomenda', num: 'ENC-2026-0231', badge: 'Confirmada', cls: 'bg-indigo-50 border-indigo-200 text-indigo-700', btn: 'Criar guia de remessa' },
        { kind: 'Guia de remessa', num: 'GR 2026/0144', badge: 'Em entrega', cls: 'bg-amber-50 border-amber-200 text-amber-700', btn: 'Emitir fatura' },
        { kind: 'Fatura', num: 'FT 2026/0098', badge: 'Emitida · ATCUD', cls: 'bg-emerald-50 border-emerald-200 text-emerald-700', btn: null },
      ],
      steps: [
        { label: 'Orçamento', icon: 'file-text' },
        { label: 'Encomenda', icon: 'shopping-cart' },
        { label: 'Guia', icon: 'truck' },
        { label: 'Fatura', icon: 'receipt' },
      ],
      clientLine: 'Construções Santa Cruz, Lda. · 14 artigos',
      noReentry: 'Sem reintroduzir dados',
      flowDone: 'Fluxo concluído',
      toast: 'FT 2026/0098 emitida · enviada ao cliente',
    },
    en: {
      title: 'Sales · Quinta dos Álamos project',
      phases: [
        { kind: 'Quote', num: 'ORC-2026-0231', badge: 'Sent', cls: 'bg-sky-50 border-sky-200 text-sky-700', btn: 'Convert to order' },
        { kind: 'Order', num: 'ENC-2026-0231', badge: 'Confirmed', cls: 'bg-indigo-50 border-indigo-200 text-indigo-700', btn: 'Create delivery note' },
        { kind: 'Delivery note', num: 'GR 2026/0144', badge: 'In transit', cls: 'bg-amber-50 border-amber-200 text-amber-700', btn: 'Issue invoice' },
        { kind: 'Invoice', num: 'FT 2026/0098', badge: 'Issued · ATCUD', cls: 'bg-emerald-50 border-emerald-200 text-emerald-700', btn: null },
      ],
      steps: [
        { label: 'Quote', icon: 'file-text' },
        { label: 'Order', icon: 'shopping-cart' },
        { label: 'Delivery', icon: 'truck' },
        { label: 'Invoice', icon: 'receipt' },
      ],
      clientLine: 'Construções Santa Cruz, Lda. · 14 items',
      noReentry: 'No data re-entry',
      flowDone: 'Flow complete',
      toast: 'FT 2026/0098 issued · sent to the client',
    },
    es: {
      title: 'Ventas · Obra Quinta dos Álamos',
      phases: [
        { kind: 'Presupuesto', num: 'ORC-2026-0231', badge: 'Enviado', cls: 'bg-sky-50 border-sky-200 text-sky-700', btn: 'Convertir en pedido' },
        { kind: 'Pedido', num: 'ENC-2026-0231', badge: 'Confirmado', cls: 'bg-indigo-50 border-indigo-200 text-indigo-700', btn: 'Crear albarán' },
        { kind: 'Albarán', num: 'GR 2026/0144', badge: 'En reparto', cls: 'bg-amber-50 border-amber-200 text-amber-700', btn: 'Emitir factura' },
        { kind: 'Factura', num: 'FT 2026/0098', badge: 'Emitida · ATCUD', cls: 'bg-emerald-50 border-emerald-200 text-emerald-700', btn: null },
      ],
      steps: [
        { label: 'Presupuesto', icon: 'file-text' },
        { label: 'Pedido', icon: 'shopping-cart' },
        { label: 'Albarán', icon: 'truck' },
        { label: 'Factura', icon: 'receipt' },
      ],
      clientLine: 'Construções Santa Cruz, Lda. · 14 artículos',
      noReentry: 'Sin reintroducir datos',
      flowDone: 'Flujo completado',
      toast: 'FT 2026/0098 emitida · enviada al cliente',
    },
  };

  const VENDAS_CLICKS = [2600, 5000, 7400];

  function VendasStep({ label, icon, state }) {
    const cls = state === 'done'
      ? 'border-transparent text-white'
      : state === 'current'
        ? 'border-[#4F6EF7] text-[#4F6EF7] bg-white'
        : 'border-zinc-200 text-zinc-300 bg-white';
    return (
      <div className="flex items-center gap-1.5 shrink-0">
        <span className={'h-6 w-6 rounded-full border flex items-center justify-center ' + cls}
          style={{ background: state === 'done' ? '#4F6EF7' : undefined, transition: 'all .4s' }}>
          <L name={state === 'done' ? 'check' : icon} className="w-3 h-3" />
        </span>
        <span className={'text-[11px] font-medium ' + (state === 'future' ? 'text-zinc-300' : 'text-zinc-700')}
          style={{ transition: 'color .4s' }}>
          {label}
        </span>
      </div>
    );
  }

  function DemoVendas() {
    const lang = (window.__DEMO_LANG === 'en' || window.__DEMO_LANG === 'es') ? window.__DEMO_LANG : 'pt';
    const s = STR[lang];
    const D = 10500;
    const t = window.useDemoLoop(D, 9800);
    const { dkCursor } = window;
    const { DemoCursor, DemoToast, MiniWindow, DemoStage } = window;

    const phase = VENDAS_CLICKS.filter((c) => t >= c + 150).length;
    const P = s.phases[phase];
    const toast = t >= 7900 && t < 10100;

    const cur = dkCursor(t, [
      { at: 0, x: 545, y: 385, hidden: true },
      { at: 1400, x: 545, y: 385 },
      { at: 1650, x: 419, y: 291 },
      { at: 8300, x: 545, y: 385, hidden: true },
    ], VENDAS_CLICKS);

    return (
      <DemoStage t={t} dur={D}>
        <MiniWindow title={s.title} icon="shopping-cart" width={500}>
          <div className="p-4">
            <div className="flex items-center">
              {s.steps.map((st, i) => (
                <React.Fragment key={st.icon}>
                  {i > 0 && (
                    <div className="flex-1 h-px bg-zinc-200 mx-2 relative overflow-hidden">
                      <span className="absolute inset-y-0 left-0" style={{ background: '#4F6EF7', width: phase >= i ? '100%' : '0%', transition: 'width .5s cubic-bezier(.2,.8,.2,1)' }}></span>
                    </div>
                  )}
                  <VendasStep label={st.label} icon={st.icon} state={phase > i ? 'done' : phase === i ? 'current' : 'future'} />
                </React.Fragment>
              ))}
            </div>

            <div className="mt-3 rounded-lg border border-zinc-200 p-3.5 h-[104px]">
              <div key={phase} className="demo-rise">
                <div className="flex items-start justify-between">
                  <div>
                    <div className="text-[10px] uppercase tracking-widest text-zinc-400 font-medium">{P.kind}</div>
                    <div className="font-mono text-[14.5px] font-semibold text-zinc-900 mt-0.5 whitespace-nowrap">{P.num}</div>
                  </div>
                  <span className={'inline-flex items-center h-5 px-2 rounded-full border text-[10.5px] font-medium ' + P.cls}>
                    {P.badge}
                  </span>
                </div>
                <div className="flex items-end justify-between mt-2">
                  <span className="text-[11.5px] text-zinc-500 truncate">{s.clientLine}</span>
                  <span className="font-mono text-[14px] font-semibold text-zinc-900">€ 4.980,00</span>
                </div>
              </div>
            </div>

            <div className="mt-3.5 flex items-center justify-between h-9">
              <span className="text-[11px] text-zinc-400">{s.noReentry}</span>
              {P.btn ? (
                <button key={phase} className="demo-rise inline-flex items-center gap-2 h-9 px-4 rounded-md text-white text-[12.5px] font-medium whitespace-nowrap" style={{ background: '#18181B' }}>
                  {P.btn}
                  <L name="arrow-right" className="w-3.5 h-3.5" />
                </button>
              ) : (
                <span className="demo-rise inline-flex items-center gap-1.5 h-9 px-3 rounded-md bg-emerald-50 border border-emerald-200 text-emerald-700 text-[12px] font-medium">
                  <L name="check-circle-2" className="w-3.5 h-3.5" />
                  {s.flowDone}
                </span>
              )}
            </div>
          </div>
        </MiniWindow>

        <DemoCursor s={cur} />
        <DemoToast show={toast} text={s.toast} />
      </DemoStage>
    );
  }

  window.DemoVendas = DemoVendas;
})();