<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Institut Guilera - Assistent Virtual</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .sidebar { background: #2c3e50; min-height: 100vh; }
        .sidebar a { color: #ecf0f1; }
        .sidebar a:hover { background: #34495e; }
        .stat-card { border-left: 4px solid #3498db; }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <nav class="col-md-2 sidebar p-3">
            <h5 class="text-white mb-4">Institut Guilera</h5>
            <ul class="nav flex-column">
                <li class="nav-item"><a class="nav-link" href="#" onclick="showSection('dashboard')">Dashboard</a></li>
                <li class="nav-item"><a class="nav-link" href="#" onclick="showSection('documents')">Documents OCR</a></li>
                <li class="nav-item"><a class="nav-link" href="#" onclick="showSection('cites')">Cites</a></li>
                <li class="nav-item"><a class="nav-link" href="#" onclick="showSection('biopsies')">Biopsies</a></li>
                <li class="nav-item"><a class="nav-link" href="#" onclick="showSection('factures')">Factures</a></li>
                <li class="nav-item"><a class="nav-link" href="#" onclick="showSection('emails')">Emails</a></li>
            </ul>
        </nav>
        <main class="col-md-10 p-4">
            <div id="dashboard" class="section">
                <h2>Dashboard</h2>
                <div class="row mt-4" id="stats"></div>
            </div>
            <div id="documents" class="section d-none">
                <h2>Documents OCR</h2>
                <div class="mb-3">
                    <input type="file" id="fileInput" class="form-control" accept=".pdf,.png,.jpg,.jpeg">
                    <button class="btn btn-primary mt-2" onclick="uploadDocument()">Pujar i processar OCR</button>
                </div>
                <div id="documentsList"></div>
            </div>
            <div id="cites" class="section d-none">
                <h2>Cites</h2>
                <button class="btn btn-success mb-3" data-bs-toggle="modal" data-bs-target="#citaModal">Nova Cita</button>
                <div id="citesList"></div>
            </div>
            <div id="biopsies" class="section d-none">
                <h2>Biopsies</h2>
                <div id="biopsiesList"></div>
            </div>
            <div id="factures" class="section d-none">
                <h2>Factures</h2>
                <div id="facturesList"></div>
            </div>
            <div id="emails" class="section d-none">
                <h2>Emails</h2>
                <button class="btn btn-primary mb-3" onclick="importEmails()">Importar Emails IMAP</button>
                <div id="emailsList"></div>
            </div>
        </main>
    </div>
</div>
<div class="modal fade" id="citaModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"><h5>Nova Cita</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
            <div class="modal-body">
                <input type="text" id="citaPacient" class="form-control mb-2" placeholder="Nom pacient">
                <input type="tel" id="citaTelefon" class="form-control mb-2" placeholder="Telefon (+34...)">
                <input type="datetime-local" id="citaData" class="form-control mb-2">
                <input type="text" id="citaMotiu" class="form-control" placeholder="Motiu">
            </div>
            <div class="modal-footer"><button class="btn btn-primary" onclick="crearCita()">Crear</button></div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
function showSection(id){
    document.querySelectorAll(".section").forEach(s=>s.classList.add("d-none"));
    document.getElementById(id).classList.remove("d-none");
    if(id==="documents")loadDocuments();
    if(id==="cites")loadCites();
    if(id==="emails")loadEmails();
    if(id==="biopsies")loadBiopsies();
    if(id==="factures")loadFactures();
}
async function loadDocuments(){
    const r=await fetch("/api/documents");
    const d=await r.json();
    document.getElementById("documentsList").innerHTML=d.documents.map(x=>
        "<div class='card mb-2'><div class='card-body'><strong>"+x.nom_fitxer+"</strong> - "+x.tipus+"<br><small>"+(x.text_ocr?x.text_ocr.substring(0,300)+"...":"")+"</small></div></div>"
    ).join("");
}
async function loadCites(){
    const r=await fetch("/api/cites");
    const d=await r.json();
    document.getElementById("citesList").innerHTML=d.cites.map(x=>
        "<div class='card mb-2'><div class='card-body'><strong>"+x.pacient_nom+"</strong> - "+new Date(x.data_cita).toLocaleString()+"<br>"+x.motiu+" <button class='btn btn-sm btn-outline-success' onclick='enviarRecordatori("+x.id+")'>WhatsApp</button></div></div>"
    ).join("");
}
async function loadEmails(){
    const r=await fetch("/api/emails");
    const d=await r.json();
    document.getElementById("emailsList").innerHTML=d.emails.map(x=>
        "<div class='card mb-2'><div class='card-body'><strong>"+x.assumpte+"</strong><br><small>De: "+x.remitent+"</small></div></div>"
    ).join("");
}
async function loadBiopsies(){
    const r=await fetch("/api/biopsies");
    const d=await r.json();
    document.getElementById("biopsiesList").innerHTML=d.biopsies.length?d.biopsies.map(x=>"<div class='card mb-2'><div class='card-body'>"+x.pacient_nom+" - "+x.tipus+"</div></div>").join(""):"<p>No hi ha biopsies</p>";
}
async function loadFactures(){
    const r=await fetch("/api/factures");
    const d=await r.json();
    document.getElementById("facturesList").innerHTML=d.factures.length?d.factures.map(x=>"<div class='card mb-2'><div class='card-body'>"+x.numero_factura+" - "+x.proveidor+" - "+x.total+"</div></div>").join(""):"<p>No hi ha factures</p>";
}
async function uploadDocument(){
    const f=document.getElementById("fileInput").files[0];
    if(!f)return alert("Selecciona fitxer");
    const fd=new FormData();fd.append("file",f);
    const r=await fetch("/api/documents/upload",{method:"POST",body:fd});
    const d=await r.json();
    alert(d.success?"OK!":"Error");loadDocuments();
}
async function crearCita(){
    await fetch("/api/cites",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({pacient_nom:document.getElementById("citaPacient").value,pacient_telefon:document.getElementById("citaTelefon").value,data_cita:document.getElementById("citaData").value,motiu:document.getElementById("citaMotiu").value})});
    bootstrap.Modal.getInstance(document.getElementById("citaModal")).hide();loadCites();
}
async function enviarRecordatori(id){
    const r=await fetch("/api/cites/"+id+"/recordatori",{method:"POST"});
    const d=await r.json();
    alert(d.success?"Enviat!":"Error: WhatsApp no configurat");
}
async function importEmails(){
    const r=await fetch("/api/emails/import",{method:"POST"});
    const d=await r.json();
    alert(d.success?"Importats: "+d.imported:"Error: "+d.error);loadEmails();
}
document.addEventListener("DOMContentLoaded",async()=>{
    const s=document.getElementById("stats");
    for(const e of["documents","cites","emails","biopsies","factures"]){
        const r=await fetch("/api/"+e);
        const d=await r.json();
        const c=d[e]?d[e].length:0;
        s.innerHTML+="<div class='col-md-2'><div class='card stat-card'><div class='card-body text-center'><h3>"+c+"</h3><small>"+e+"</small></div></div></div>";
    }
});
</script>
</body>
</html>