import { h, api, copy, whatsappLink, setBusy, toast, mount } from './ui.js';

const app = document.getElementById('app');
const STORE = 'amigo-chule:meus-grupos';

function savedGroups() {
  try {
    return JSON.parse(localStorage.getItem(STORE) || '[]');
  } catch {
    return [];
  }
}

function saveGroup(g) {
  try {
    const list = savedGroups().filter((x) => x.id !== g.id);
    list.unshift(g);
    localStorage.setItem(STORE, JSON.stringify(list.slice(0, 10)));
  } catch {}
}

function renderForm() {
  const nameIn = h('input', { id: 'name', required: true, maxlength: 80, placeholder: 'Ex.: Amigo Chulé da Família 2026' });
  const peopleIn = h('textarea', {
    id: 'people',
    rows: 8,
    required: true,
    placeholder: 'Um nome por linha\nPedro\nSara\nTia Lúcia\n…',
  });
  const counter = h('span', { class: 'small' }, '0 participantes');
  peopleIn.addEventListener('input', () => {
    const n = peopleIn.value.split('\n').filter((l) => l.trim()).length;
    counter.textContent = `${n} participante${n === 1 ? '' : 's'}`;
  });
  const btn = h('button', { type: 'submit', class: 'btn btn-primary btn-big' }, 'Criar grupo 🎁');

  const form = h(
    'form',
    { class: 'card' },
    h('h2', {}, 'Criar um sorteio'),
    h('label', { for: 'name' }, 'Nome do grupo'),
    nameIn,
    h('label', { for: 'people' }, 'Participantes ', counter),
    peopleIn,
    h('p', { class: 'small' }, 'Use nomes diferentes para cada pessoa (ex.: "João Pai" e "João Filho").'),
    btn
  );

  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    setBusy(btn, true, 'Criando…');
    try {
      const participants = peopleIn.value.split('\n').map((s) => s.trim()).filter(Boolean);
      const res = await api('events', {
        method: 'POST',
        body: { name: nameIn.value, participants },
      });
      const adminUrl = `${location.origin}/admin#${res.id}.${res.adminToken}`;
      const groupUrl = `${location.origin}/grupo#${res.id}`;
      saveGroup({ id: res.id, name: nameIn.value.trim(), adminUrl, createdAt: Date.now() });
      renderCreated(nameIn.value.trim(), groupUrl, adminUrl);
    } catch (err) {
      toast(err.message, 'err');
      setBusy(btn, false);
    }
  });

  const saved = savedGroups();
  mount(app, 
    form,
    saved.length
      ? h(
          'section',
          { class: 'card' },
          h('h2', {}, 'Grupos que você criou neste aparelho'),
          h(
            'ul',
            { class: 'plain' },
            saved.map((g) => h('li', {}, h('a', { href: g.adminUrl }, g.name || 'Grupo'), ' ', h('span', { class: 'small' }, '(organizador)')))
          )
        )
      : null
  );
}

function renderCreated(name, groupUrl, adminUrl) {
  const msg = `🎁 Amigo Chulé: ${name}\nEntra aqui, clica no seu nome e cria uma senha. Depois do sorteio é só voltar e ver quem você tirou 🤫\n${groupUrl}`;
  mount(app, 
    h(
      'section',
      { class: 'card' },
      h('h2', {}, 'Grupo criado! 🎉'),
      h('h3', {}, '1. Link do grupo (mande para todo mundo)'),
      h('div', { class: 'linkbox' }, h('code', {}, groupUrl)),
      h(
        'div',
        { class: 'actions' },
        h('button', { class: 'btn', onclick: () => copy(groupUrl) }, 'Copiar'),
        h('a', { class: 'btn btn-whats', href: whatsappLink(msg), target: '_blank', rel: 'noopener' }, 'Enviar no WhatsApp')
      ),
      h('h3', {}, '2. Seu link de organizador (NÃO compartilhe)'),
      h(
        'p',
        { class: 'warn' },
        'É com ele que você acompanha quem já criou senha e faz o sorteio. Ele não mostra os pares, mas guarde bem: sem ele não dá pra sortear.'
      ),
      h('div', { class: 'linkbox' }, h('code', {}, adminUrl)),
      h(
        'div',
        { class: 'actions' },
        h('button', { class: 'btn', onclick: () => copy(adminUrl, 'Link de organizador copiado!') }, 'Copiar'),
        h('a', { class: 'btn btn-primary', href: adminUrl }, 'Abrir painel do organizador')
      ),
      h('p', { class: 'small' }, 'Também salvamos esse link neste navegador, na página inicial.')
    )
  );
}

renderForm();