import './style.css';
import { VybeNostr, DEFAULT_RELAYS } from './nostr';
import { hasLocalKey } from './vault';

const app=document.querySelector<HTMLDivElement>('#app')!;
const nostr=new VybeNostr();
let feed:unknown[]=[];
const esc=(s:string)=>s.replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]!));
function render(){app.innerHTML=`<div class="layout"><aside><div class="brand"><span>✦</span> VYBE</div><nav><button class="active">⌂ Лента</button><button disabled>♧ Друзья · скоро</button><button disabled>▱ Сообщения · скоро</button><button disabled>⚙ Настройки · скоро</button></nav><div class="muted">Nostr · децентрализованная сеть</div></aside><main><header><div><h1>Твоя сеть. Твои ключи.</h1><p>Подключись через Nostr signer или создай локальный ключ.</p></div><span class="status">${nostr.pubkey?'Подключено':'Не подключено'}</span></header><section class="panel auth"><h2>Аккаунт</h2><p class="muted">${nostr.pubkey?`npub: <code>${esc(nostr.npub())}</code>`:'Подключи расширение или создай зашифрованный локальный аккаунт.'}</p><div class="actions"><button id="connect" class="primary">Подключить signer</button><button id="create">Создать локальный ключ</button><button id="unlock">Разблокировать</button></div><div class="relays"><strong>Relay:</strong> ${DEFAULT_RELAYS.map(esc).join(' · ')}</div></section><section class="panel compose"><h2>Новая публикация</h2><textarea id="postText" placeholder="Чем хочешь поделиться?" ${nostr.pubkey?'':'disabled'}></textarea><button id="publish" class="primary" ${nostr.pubkey?'':'disabled'}>Опубликовать в Nostr</button></section><section class="feed"><h2>Твоя лента</h2>${feed.length?feed.map((e:any)=>`<article class="panel"><small>${esc(e.pubkey)} · ${new Date(e.created_at*1000).toLocaleString()}</small><p>${esc(e.content)}</p></article>`).join(''):'<div class="panel muted">Лента появится после подключения аккаунта. Сейчас загружаются только события твоего ключа.</div>'}</section><p id="message" role="status" class="message"></p></main></div>`;
 document.getElementById('connect')!.onclick=async()=>{try{await nostr.connectExtension();await afterConnect();say('Signer подключён.')}catch(e){say(errorText(e))}};
 document.getElementById('create')!.onclick=async()=>{const p=prompt('Задай пароль для локального ключа (не менее 12 символов).');if(!p)return;try{await nostr.createLocalAccount(p);await afterConnect();say('Ключ создан и сохранён в зашифрованном IndexedDB. Сохрани резервную копию ключа отдельно.')}catch(e){say(errorText(e))}};
 document.getElementById('unlock')!.onclick=async()=>{const p=prompt('Пароль локального ключа');if(!p)return;try{await nostr.unlockLocalAccount(p);await afterConnect();say('Локальный ключ разблокирован.')}catch(e){say(errorText(e))}};
 document.getElementById('publish')!.onclick=async()=>{const el=document.getElementById('postText') as HTMLTextAreaElement;try{const ev=await nostr.publishPost(el.value);say(`Событие ${ev.id} отправлено relay.`);el.value='';}catch(e){say(errorText(e))}};
}
async function afterConnect(){render();const stop=await nostr.loadFeed(e=>{feed=[e,...feed.filter((x:any)=>x.id!==e.id)].slice(0,30);render();});window.addEventListener('beforeunload',stop,{once:true});}
function say(s:string){const el=document.getElementById('message');if(el)el.textContent=s;}
function errorText(e:unknown){return e instanceof Error?e.message:String(e)}
render();hasLocalKey().then(found=>{if(found)say('Найден локальный зашифрованный ключ. Нажми «Разблокировать».')}).catch(()=>{});