// DemoKanban.jsx — auto-looping demo: pipeline CRM (kanban).
// O cursor agarra uma oportunidade e arrasta-a de Qualificação para Proposta —
// ghost flutuante, coluna destacada, pulso ao largar, totais a atualizar.

(function () {
  const STR = {
    pt: {
      windowTitle: 'Clientes · Pipeline',
      badge: '4 oportunidades',
      moving: 'A mover…',
      toast: 'Oportunidade movida para Proposta',
      cardSchoolBraga: 'Escola Machico Norte',
      cardSchoolEvora: 'Escola Ponta do Sol',
      cols: [
        { name: 'Contacto', dot: '#60A5FA' },
        { name: 'Proposta', dot: '#A78BFA' },
        { name: 'Negociação', dot: '#F59E0B' },
      ],
    },
    en: {
      windowTitle: 'Clients · Pipeline',
      badge: '4 opportunities',
      moving: 'Moving…',
      toast: 'Opportunity moved to Proposal',
      cardSchoolBraga: 'Machico North School',
      cardSchoolEvora: 'Ponta do Sol School',
      cols: [
        { name: 'Contact', dot: '#60A5FA' },
        { name: 'Proposal', dot: '#A78BFA' },
        { name: 'Negotiation', dot: '#F59E0B' },
      ],
    },
    es: {
      windowTitle: 'Clientes · Pipeline',
      badge: '4 oportunidades',
      moving: 'Moviendo…',
      toast: 'Oportunidad movida a Propuesta',
      cardSchoolBraga: 'Escuela Machico Norte',
      cardSchoolEvora: 'Escuela Ponta do Sol',
      cols: [
        { name: 'Contacto', dot: '#60A5FA' },
        { name: 'Propuesta', dot: '#A78BFA' },
        { name: 'Negociación', dot: '#F59E0B' },
      ],
    },
  };

  function KBCard({ title, company, value, owner, ghost }) {
    return (
      <div className="rounded-md border border-zinc-200 bg-white p-2"
        style={ghost ? { boxShadow: '0 18px 36px -12px rgba(24,24,27,.4)' } : { boxShadow: '0 1px 2px rgba(0,0,0,.04)' }}>
        <div className="text-[11px] font-medium text-zinc-900 leading-tight truncate">{title}</div>
        <div className="text-[9.5px] text-zinc-500 leading-tight truncate">{company}</div>
        <div className="flex items-center justify-between mt-1">
          <span className="font-mono text-[10.5px] font-semibold text-zinc-900">{value}</span>
          <span className="h-[15px] w-[15px] rounded-full bg-zinc-100 border border-zinc-200 text-[7px] font-semibold text-zinc-500 flex items-center justify-center">{owner}</span>
        </div>
      </div>
    );
  }

  function KBColumn({ col, count, total, hot, children }) {
    return (
      <div className={'rounded-lg border bg-zinc-50/70 p-2 transition-all duration-200 ' + (hot ? 'border-zinc-400 bg-zinc-100' : 'border-zinc-200')}>
        <div className="flex items-center gap-1.5 px-0.5">
          <span className="h-2 w-2 rounded-full shrink-0" style={{ background: col.dot, transform: hot ? 'scale(1.5)' : 'scale(1)', transition: 'transform .2s' }}></span>
          <span className="text-[10px] font-medium text-zinc-700 truncate">{col.name}</span>
          <span key={count} className="demo-rise ml-auto text-[10px] text-zinc-400 font-mono">{count}</span>
        </div>
        <div key={total} className="demo-rise px-0.5 font-mono text-[9.5px] text-zinc-400 mt-0.5 mb-1.5">{total}</div>
        <div className="flex flex-col gap-1.5" style={{ minHeight: 130 }}>{children}</div>
      </div>
    );
  }

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

    const dragging = t >= 2400 && t < 3400;
    const dropped = t >= 3400;
    const toast = t >= 4000 && t < 7400;

    // mover card: container-relative absolute position (col 0 slot 2 → col 1 slot 2)
    const pos = (dragging || dropped) ? { x: 191, y: 118 } : { x: 20, y: 118 };

    const cur = dkCursor(t, [
      { at: 0, x: 540, y: 390, hidden: true },
      { at: 1200, x: 540, y: 390 },
      { at: 1400, x: 108, y: 261 },
      { at: 2400, x: 279, y: 261 },
      { at: 5200, x: 540, y: 390, hidden: true },
    ], [2200]);
    cur.down = cur.down || dragging;

    return (
      <DemoStage t={t} dur={D}>
        <MiniWindow title={s.windowTitle} icon="users" width={530} right={
          <span className="inline-flex items-center h-5 px-2 rounded-full bg-zinc-100 border border-zinc-200 text-zinc-500 text-[10.5px] font-medium whitespace-nowrap">{s.badge}</span>
        }>
          <div className="grid grid-cols-3 gap-2 p-3 relative">
            <KBColumn col={s.cols[0]} count={dropped ? 1 : 2} total={dropped ? '€ 50.000' : '€ 130.000'}>
              <KBCard title="Hotel Quinta da Eira" company="Madeira & Irmãos Lda" value="€ 50.000" owner="MS" />
              {/* reserved space where the mover sits before the drag */}
              <div className="rounded-md border border-dashed border-zinc-200 h-[56px]"
                style={{ opacity: dragging || dropped ? 1 : 0, transition: 'opacity .3s' }}>
                {dragging && <div className="h-full flex items-center justify-center text-[9px] text-zinc-400">{s.moving}</div>}
              </div>
            </KBColumn>
            <KBColumn col={s.cols[1]} count={dropped ? 2 : 1} total={dropped ? '€ 530.000' : '€ 450.000'} hot={dragging}>
              <KBCard title={s.cardSchoolBraga} company="Caniço Obras Lda" value="€ 450.000" owner="JC" />
            </KBColumn>
            <KBColumn col={s.cols[2]} count={1} total="€ 380.000">
              <KBCard title="Resort Marina Beach" company="Atlântico Construções SA" value="€ 380.000" owner="PA" />
            </KBColumn>

            {/* the mover card — floats above the columns */}
            <div
              className={dropped ? 'demo-pulse absolute z-20 rounded-md' : 'absolute z-20 rounded-md'}
              style={{
                left: pos.x, top: pos.y, width: 147,
                transform: dragging ? 'rotate(-2deg) scale(1.05)' : 'none',
                transition: 'left .8s cubic-bezier(.3,.7,.2,1), top .8s cubic-bezier(.3,.7,.2,1), transform .25s',
              }}
            >
              <KBCard title={s.cardSchoolEvora} company="Ferreira Construções Lda" value="€ 80.000" owner="MS" ghost={dragging} />
            </div>
          </div>
        </MiniWindow>

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

  window.DemoKanban = DemoKanban;
})();