import { copy, h, mount } from './ui.js';
import { NET, base, isTest, view } from './api.js';
import { payPage } from './pay.js';
import { appPage } from './merchant.js';
import { formatAmount } from './lib/money.js';

// The hero pay window plays the real payment of invoice 1-3 once: Base is picked, the quote
// shows, the route pulses Base -> NEAR Intents -> dulypay.near while the clock runs to the
// recorded 31.8 s, the stamp lands and the two packets fill. boot.js sets .motion (never under
// reduced motion); the page as served is the finished state, so nothing is lost without it.
const STEPS = [
  ['0', 0],
  ['1', 700],
  ['1b', 1300],
  ['2', 2000],
  ['3', 2950],
  ['4', 3900],
  ['done', 4900],
];
function playHero() {
  const win = document.getElementById('proof-inv');
  if (!win) return;
  const chip = document.getElementById('proof-chip');
  const clock = document.getElementById('proof-clock');
  const finalChip = chip?.textContent || '';
  const finalClock = clock?.textContent || '';
  const secs = parseFloat(finalClock) || 0;
  let timers = [];
  let raf = 0;
  const stop = () => {
    timers.forEach(clearTimeout);
    timers = [];
    cancelAnimationFrame(raf);
  };
  const finish = () => {
    stop();
    win.dataset.step = 'done';
    if (chip) { chip.textContent = finalChip; chip.classList.remove('due'); chip.classList.add('good'); }
    if (clock) clock.textContent = finalClock;
    setAmounts(true);
  };
  // The clock is a true figure: it runs from 0 to the recorded seconds while the pulse travels.
  const runClock = (ms) => {
    const t0 = performance.now();
    const tick = (now) => {
      const k = Math.min(1, (now - t0) / ms);
      clock.textContent = `${(secs * (1 - (1 - k) ** 2)).toFixed(1)} s`;
      if (k < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
  };
  const amounts = [...win.querySelectorAll('.packet b[data-final]')];
  const setAmounts = (paid) => amounts.forEach((b) => { b.textContent = paid ? b.dataset.final : '0.00 USDC'; });
  const play = () => {
    stop();
    setAmounts(false);
    if (chip) { chip.textContent = 'Due'; chip.classList.remove('good'); chip.classList.add('due'); }
    if (clock) clock.textContent = '0.0 s';
    for (const [step, at] of STEPS) {
      timers.push(setTimeout(() => {
        if (step === '1b') { win.dataset.step = '2pre'; return; }
        win.dataset.step = step;
        if (step === '2' && clock) runClock(1900);
        if (step === '4') {
          if (chip) { chip.textContent = finalChip; chip.classList.remove('due'); chip.classList.add('good'); }
          setAmounts(true);
        }
        if (step === 'done') finish();
      }, at));
    }
  };
  document.getElementById('replay')?.addEventListener('click', () => {
    if (!document.documentElement.classList.contains('motion')) return finish();
    play();
  });
  // A reader who interacts with the window (copy, links) gets the finished state at once.
  win.addEventListener('pointerdown', () => win.dataset.step !== 'done' && finish());
  if (!document.documentElement.classList.contains('motion')) return;
  window.__dulyMotion = true;
  // Plays when the window is on screen; a phone shows it on the first screen, so this is at load.
  let started = false;
  const io = new IntersectionObserver((entries) => {
    if (started || !entries.some((e) => e.isIntersecting)) return;
    started = true;
    io.disconnect();
    play();
  }, { threshold: 0.35 });
  io.observe(win);
}

/** The how-it-works stage follows the step being read. Text never hides; only the stage changes. */
function wireHow() {
  const stage = document.querySelector('.how-stage .stage-in');
  const steps = [...document.querySelectorAll('.how-steps li[data-step]')];
  if (!stage || !steps.length) return;
  const set = (n) => {
    stage.dataset.active = n;
    steps.forEach((li) => li.classList.toggle('on', li.dataset.step === n));
  };
  set('1');
  if (!('IntersectionObserver' in window)) return;
  const io = new IntersectionObserver((entries) => {
    for (const e of entries) if (e.isIntersecting) set(e.target.dataset.step);
  }, { rootMargin: matchMedia('(max-width: 1023px)').matches ? '-62% 0px -28% 0px' : '-40% 0px -50% 0px' });
  steps.forEach((li) => io.observe(li));
}

/** Light or dark, remembered on this device when storage allows it. */
function wireTheme() {
  const btn = document.getElementById('theme-toggle');
  if (!btn) return;
  const root = document.documentElement;
  const current = () => root.dataset.theme || (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
  const label = () => btn.setAttribute('aria-label', current() === 'dark' ? 'Switch to light mode' : 'Switch to dark mode');
  label();
  btn.addEventListener('click', () => {
    const next = current() === 'dark' ? 'light' : 'dark';
    const apply = () => {
      root.dataset.theme = next;
      document.querySelectorAll('meta[name="theme-color"]').forEach((m) => m.setAttribute('content', next === 'dark' ? '#0c1322' : '#f2f4f0'));
      label();
    };
    apply();
    try {
      localStorage.setItem('duly-theme', next);
    } catch {
      // Not remembered when storage is blocked; the choice still holds for this page.
    }
  });
  matchMedia('(prefers-color-scheme: dark)').addEventListener?.('change', label);
}

/** Copy buttons on server-rendered receipts carry the full value in data-copy. */
function wireCopy() {
  document.addEventListener('click', (e) => {
    const btn = e.target.closest?.('button.copy[data-copy]');
    if (!btn) return;
    copy(btn.dataset.copy, 'Copied');
    btn.classList.add('done');
    setTimeout(() => btn.classList.remove('done'), 1200);
  });
}

async function landing() {
  // The server already rendered the landing, evidence included. Keep it as it is.
  if (document.querySelector('#app [data-ssr="landing"]')) {
    wireCopy();
    wireTheme();
    wireHow();
    return playHero();
  }
  const totals = h('p', { class: 'muted small' });
  mount(
    h(
      'div',
      {},
      isTest && h('div', { class: 'testbar' }, 'Test mode. No real money.'),
      h('header', { class: 'top' }, h('a', { class: 'brand', href: `${base}/` }, 'Duly'), h('a', { class: 'btn', href: isTest || NET.live ? `${base}/app` : '/test/app' }, 'Open')),
      h(
        'main',
        { class: 'wrap stack' },
        h(
          'section',
          { class: 'hero' },
          h('h1', {}, 'Send an invoice. Get paid from any chain.'),
          h('p', {}, 'Your client pays with whatever they hold. You receive USDC, your tax share is set aside before you can spend it, and your accountant gets a clean export. No wallet to install, and no gas to buy.'),
          h('div', { class: 'row cta' }, h('a', { class: 'btn primary', href: isTest || !NET.live ? '/test/app' : '/app' }, isTest || !NET.live ? 'Try it with test money' : 'Start'), !isTest && NET.live && h('a', { class: 'btn', href: '/test/app' }, 'Try it with test money')),
        ),
        h(
          'ol',
          { class: 'how' },
          h('li', { class: 'card' }, h('h3', {}, 'Send a link'), h('p', { class: 'muted small' }, 'Sign in with your fingerprint or face, add line items and share the link.')),
          h('li', { class: 'card' }, h('h3', {}, 'Client pays their way'), h('p', { class: 'muted small' }, 'Any major token on any major chain. NEAR Intents converts it, and the invoice closes itself on-chain.')),
          h('li', { class: 'card' }, h('h3', {}, 'It sorts itself out'), h('p', { class: 'muted small' }, 'Tax and subcontractor shares move in the same step. Export a CSV your accountant can open.')),
        ),
        totals,
      ),
    ),
  );
  const t = await view('get_totals').catch(() => null);
  if (t) totals.textContent = `${t.invoices} invoices and ${formatAmount(t.received)} USDC settled through contract ${NET.contract}.`;
}

function notLiveYet() {
  mount(
    h(
      'div',
      {},
      h('header', { class: 'top' }, h('a', { class: 'brand', href: '/' }, 'Duly')),
      h('main', { class: 'wrap narrow' }, h('section', { class: 'card stack' }, h('h2', {}, 'Live payments are not open yet'), h('p', { class: 'muted' }, 'Do not send money to anyone using this link. You can try everything with test money.'), h('a', { class: 'btn primary', href: '/test/app' }, 'Try it with test money'))),
    ),
  );
}

async function route() {
  const path = location.pathname.replace(/^\/test(?=\/|$)/, '') || '/';
  const pay = path.match(/^\/i\/(\d{1,10}-\d{1,10})$/);
  // Live routes need a pinned code hash, so the site can never trust an unverified contract.
  const open = NET.live && (isTest || !!NET.codeHash);
  if (!open && (pay || path === '/app' || path.startsWith('/app/'))) return notLiveYet();
  if (pay) return payPage(pay[1]);
  if (path === '/app' || path.startsWith('/app/')) return appPage(path);
  return landing();
}

route().catch((e) => {
  console.error(e);
  mount(h('main', { class: 'wrap narrow' }, h('div', { class: 'card' }, h('h2', {}, 'Something went wrong'), h('p', { class: 'muted' }, 'Please reload the page.'))));
});