import "./style.css";

type User={id:number,username:string,role:string};
let token=localStorage.getItem("token")||"";
let me:User|null=null;
const app=document.querySelector<HTMLDivElement>("#app")!;

const esc=(s:any)=>String(s??"").replace(/[&<>"']/g,c=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#039;"}[c]!));
async function api(path:string, opts:any={}) {
  const r=await fetch(path,{...opts,headers:{"content-type":"application/json",...(token?{Authorization:`Bearer ${token}`}:{})}});
  const data=await r.json().catch(()=>({}));
  if(!r.ok) throw new Error(data.error||"Erreur");
  return data;
}
function shell(content:string){
  app.innerHTML=`<div class="page"><header><div class="brand">📚 <span>Bibliothèque du Bus</span></div><nav><button data-view="home">Accueil</button><button data-view="catalog">Catalogue</button><button data-view="loans">Mes emprunts</button>${me?.role==="admin"?'<button data-view="admin">Administration</button>':''}<button id="logout">Déconnexion</button></nav></header><main>${content}</main></div>`;
  document.querySelectorAll("[data-view]").forEach(b=>b.addEventListener("click",()=>view((b as HTMLElement).dataset.view!)));
  document.querySelector("#logout")?.addEventListener("click",async()=>{try{await api("/api/logout",{method:"POST"})}catch{} localStorage.removeItem("token");token="";me=null;login();});
}
function login(){
 app.innerHTML=`<div class="login"><div class="login-card"><div class="logo">📚</div><small>ESPACE PRIVÉ</small><h1>Bibliothèque du Bus</h1><p>Connecte-toi pour accéder aux catalogues.</p><form id="login"><input name="username" placeholder="Identifiant" autocomplete="username" required><input name="password" placeholder="Code personnel" type="password" autocomplete="current-password" required><label class="check"><input type="checkbox" checked> Rester connecté 30 jours sur cet appareil</label><button class="primary">Se connecter</button><div id="err" class="error"></div></form></div></div>`;
 document.querySelector("#login")!.addEventListener("submit",async(e)=>{e.preventDefault();const f=new FormData(e.target as HTMLFormElement);try{const x=await api("/api/login",{method:"POST",body:JSON.stringify({username:f.get("username"),password:f.get("password")})});token=x.token;localStorage.setItem("token",token);me=x.user;view("home")}catch(err:any){document.querySelector("#err")!.textContent=err.message}});
}
async function view(name:string){
 if(!me){login();return}
 if(name==="home"){shell(`<section class="hero"><div><span class="pill">ESPACE MEMBRE</span><h1>Bienvenue, ${esc(me.username)} 👋</h1><p>Retrouve les livres disponibles et gère tes emprunts.</p><button class="primary" data-view="catalog">Voir le catalogue</button></div><div class="hero-art">📚</div></section><section class="grid"><div class="card"><b>📖 Catalogue</b><p>Recherche rapidement un livre.</p></div><div class="card"><b>🕘 Emprunts</b><p>Consulte tes retours à venir.</p></div><div class="card"><b>🔒 Compte sécurisé</b><p>Session protégée par un token.</p></div></section>`);return}
 if(name==="catalog"){shell(`<div class="section-head"><div><span class="pill">CATALOGUE</span><h1>Les livres</h1></div><input id="search" class="search" placeholder="🔎 Rechercher un titre, auteur..."></div><div id="books" class="book-grid">Chargement…</div>`);loadBooks();return}
 if(name==="loans"){shell(`<div class="section-head"><div><span class="pill">MES EMPRUNTS</span><h1>Mes emprunts</h1></div></div><div id="loans">Chargement…</div>`);loadLoans();return}
 if(name==="admin"){shell(`<div class="section-head"><div><span class="pill">ADMIN</span><h1>Administration</h1></div></div><div class="admin-grid"><form id="addBook" class="card form"><h2>Ajouter un livre</h2><input name="title" placeholder="Titre" required><input name="author" placeholder="Auteur" required><input name="category" placeholder="Catégorie"><input name="isbn" placeholder="ISBN"><textarea name="description" placeholder="Description"></textarea><button class="primary">Ajouter</button></form><div class="card"><h2>Utilisateurs</h2><div id="users">Chargement…</div></div></div>`);loadUsers();document.querySelector("#addBook")!.addEventListener("submit",async e=>{e.preventDefault();const f=new FormData(e.target as HTMLFormElement);await api("/api/books",{method:"POST",body:JSON.stringify(Object.fromEntries(f))});alert("Livre ajouté");view("catalog")});}
}
async function loadBooks(){
 const box=document.querySelector("#books")!, search=document.querySelector<HTMLInputElement>("#search")!;
 const run=async()=>{const rows=await api("/api/books?q="+encodeURIComponent(search.value));box.innerHTML=rows.length?rows.map((b:any)=>`<article class="book"><div class="cover">📖</div><div><span class="category">${esc(b.category)}</span><h3>${esc(b.title)}</h3><p>${esc(b.author)}</p><small>${b.available?"Disponible":"Emprunté"}</small>${b.available?`<button class="borrow" data-id="${b.id}">Emprunter</button>`:""}</div></article>`).join(""):`<div class="empty">Aucun livre trouvé.</div>`;document.querySelectorAll(".borrow").forEach(x=>x.addEventListener("click",async()=>{await api("/api/borrow",{method:"POST",body:JSON.stringify({bookId:Number((x as HTMLElement).dataset.id)})});run()})};
 search.addEventListener("input",run);run();
}
async function loadLoans(){
 const box=document.querySelector("#loans")!, rows=await api("/api/loans");
 box.innerHTML=rows.length?`<div class="table">${rows.map((x:any)=>`<div class="row"><div><b>${esc(x.title)}</b><small>${x.due_at?"À rendre le "+new Date(x.due_at).toLocaleDateString("fr-FR"):""}</small></div><span>${x.returned_at?"Rendu":"En cours"}</span>${!x.returned_at?`<button class="borrow" data-id="${x.id}">Rendre</button>`:""}</div>`).join("")}</div>`:`<div class="empty">Aucun emprunt.</div>`;
 document.querySelectorAll(".row .borrow").forEach(x=>x.addEventListener("click",async()=>{await api("/api/return",{method:"POST",body:JSON.stringify({loanId:Number((x as HTMLElement).dataset.id)})});loadLoans()}));
}
async function loadUsers(){const box=document.querySelector("#users")!,rows=await api("/api/users");box.innerHTML=rows.map((u:any)=>`<div class="user-row"><b>${esc(u.username)}</b><span>${esc(u.role)}</span></div>`).join("")}
(async()=>{try{const x=await api("/api/me");me=x.user;view("home")}catch{login()}})();