<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PM-Sök — OftaICD</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#EEF1F5;--surface:#FFFFFF;--surfAlt:#F6F8FA;
--border:#D4DAE3;--borderL:#E6EAF0;
--pri:#0F5D4F;--priL:#E4F3EE;--priD:#0A4A3E;
--acc:#C8922A;--accL:#FDF6E3;--accD:#A07520;
--txt:#15202E;--txtS:#4E5D6F;--txtM:#8694A5;
--red:#B73225;--redL:#FDF0EE;
--hlBg:#FFF4CC;--hlBorder:#E8C83E;--hlText:#5C4A00;
--sh:0 1px 3px rgba(0,0,0,0.05),0 1px 2px rgba(0,0,0,0.03);
--shL:0 4px 16px rgba(0,0,0,0.07),0 2px 4px rgba(0,0,0,0.03);
--radius:10px;
}
html{font-size:15px}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--txt);min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:var(--pri);text-decoration:none}
::selection{background:#B2DFDB}
input,select,textarea,button{font-family:inherit}
/* ═══════ HEADER ═══════ */
.header{background:linear-gradient(135deg,var(--pri) 0%,var(--priD) 100%);position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(0,0,0,0.18)}
.header-inner{max-width:1160px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.logo{display:flex;align-items:center;gap:12px;cursor:pointer}
.logo-icon{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center}
.logo-text{font-family:'DM Serif Display',serif;font-size:21px;color:#fff}
.logo-sub{font-size:10.5px;color:rgba(255,255,255,0.6);letter-spacing:0.08em;text-transform:uppercase}
.nav{display:flex;gap:3px}
.nav-btn{padding:7px 15px;border-radius:8px;border:none;cursor:pointer;font-size:13px;font-weight:600;background:transparent;color:rgba(255,255,255,0.7);display:flex;align-items:center;gap:6px;transition:all .15s}
.nav-btn:hover{background:rgba(255,255,255,0.1);color:#fff}
.nav-btn.active{background:rgba(255,255,255,0.18);color:#fff}
.nav-btn .count{font-size:11px;opacity:.6}
/* ═══════ MAIN ═══════ */
.main{max-width:1160px;margin:0 auto;padding:24px}
/* ═══════ CARDS ═══════ */
.card{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--sh);overflow:hidden;transition:box-shadow .15s}
.card:hover{box-shadow:var(--shL)}
/* ═══════ SEARCH BOX ═══════ */
.search-wrap{background:var(--surface);border-radius:14px;border:2px solid var(--border);box-shadow:var(--shL);padding:5px 5px 5px 18px;display:flex;align-items:center;gap:10px;transition:border-color .2s}
.search-wrap:focus-within{border-color:var(--pri)}
.search-input{flex:1;border:none;outline:none;font-size:15px;color:var(--txt);background:transparent;padding:11px 0}
.search-input::placeholder{color:var(--txtM)}
/* ═══════ BUTTONS ═══════ */
.btn{padding:9px 18px;border-radius:8px;border:none;cursor:pointer;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:5px;transition:all .15s}
.btn-pri{background:var(--pri);color:#fff}
.btn-pri:hover{background:var(--priD)}
.btn-pri:disabled{opacity:.4;cursor:not-allowed}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--txtS)}
.btn-outline:hover{background:var(--surfAlt);color:var(--txt)}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-danger{color:var(--red);border-color:rgba(183,50,37,.3)}
.btn-danger:hover{background:var(--redL)}
/* ═══════ FORMS ═══════ */
.form-label{font-size:11px;font-weight:700;color:var(--txtS);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;display:block}
.form-input,.form-select,.form-textarea{width:100%;padding:9px 12px;border-radius:8px;border:1px solid var(--border);font-size:13.5px;color:var(--txt);background:#fff;outline:none;transition:border-color .15s}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--pri)}
.form-select{cursor:pointer;appearance:auto}
.form-textarea{resize:vertical;min-height:180px;line-height:1.6}
/* ═══════ BADGES ═══════ */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:20px;font-size:10.5px;font-weight:600}
.badge-cat{background:var(--priL);color:var(--pri)}
.badge-scope{padding:3px 10px;border-radius:6px;font-size:11px;font-weight:600}
.badge-lokal{background:#F0FDF4;color:#166534}
.badge-region{background:#FFF7ED;color:#9A3412}
.badge-nationellt{background:#EEF2FF;color:#4338CA}
.badge-partial{background:var(--accL);color:var(--acc);font-size:11px;padding:2px 8px;border-radius:20px;font-weight:600}
/* ═══════ MATCH BAR ═══════ */
.match-bar{display:flex;align-items:center;gap:8px}
.match-track{width:80px;height:6px;background:#E8EDF1;border-radius:3px;overflow:hidden}
.match-fill{height:100%;border-radius:3px;transition:width .5s ease}
.match-score{font-size:13px;font-weight:700;min-width:36px}
.score-high{color:#0F5D4F}
.score-med{color:#2563EB}
.score-low{color:#C8922A}
.score-minimal{color:#9CA3AF}
/* ═══════ FILTER BOX ═══════ */
.filter-box{padding:14px 18px}
.filter-header{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--txtS);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
.filter-row{display:flex;gap:10px;flex-wrap:wrap}
.filter-col{display:flex;flex-direction:column;min-width:130px}
.filter-col.grow{flex:1;min-width:150px}
.filter-info{margin-top:10px;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--txtM)}
/* ═══════ RESULTS ═══════ */
.result-card{padding:18px;margin-bottom:10px;cursor:pointer;border-left:4px solid var(--border);transition:all .15s}
.result-card:hover{background:var(--surfAlt)}
.result-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;gap:12px}
.result-title{font-weight:700;font-size:16px;margin-bottom:6px}
.result-tags{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.result-summary{margin-top:8px;font-size:14px;color:var(--txtS);line-height:1.5}
.result-excerpt{margin-top:10px;padding:8px 12px;background:var(--accL);border-left:3px solid var(--acc);border-radius:0 6px 6px 0;font-size:13px;font-style:italic;color:var(--txt);line-height:1.5}
.result-open{margin-top:10px;color:var(--pri);font-size:13px;font-weight:600}
.ai-summary{padding:18px;margin-bottom:20px;display:flex;gap:12px;border-radius:var(--radius)}
.ai-summary.found{background:var(--priL);border:1px solid rgba(15,93,79,0.2)}
.ai-summary.notfound{background:var(--surfAlt);border:1px solid var(--border)}
.ai-label{font-weight:700;font-size:13px;margin-bottom:4px;color:var(--pri)}
/* ═══════ DOCUMENT VIEW ═══════ */
.doc-header{padding:18px 24px;border-bottom:1px solid var(--borderL);display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.doc-title{font-family:'DM Serif Display',serif;font-size:22px;font-weight:400;margin-bottom:8px}
.doc-content{padding:20px 28px;max-height:65vh;overflow-y:auto;white-space:pre-wrap;line-height:1.85;font-size:14px}
.doc-content mark{background:linear-gradient(120deg,#FFF0B3 0%,#FFE066 100%);padding:2px 1px;border-radius:3px;box-shadow:0 1px 4px rgba(220,170,0,0.2);font-weight:600;scroll-margin-top:120px}
.hl-badge{padding:6px 12px;background:var(--accL);border-radius:8px;border:1px solid rgba(200,146,42,0.2);font-size:12px;font-weight:600;color:var(--acc)}
/* ═══════ LIBRARY ═══════ */
.lib-row{display:flex;align-items:center;gap:12px;padding:12px 16px}
.lib-info{flex:1;min-width:0}
.lib-title{font-weight:600;font-size:14px}
.lib-tags{display:flex;gap:5px;align-items:center;margin-top:4px;flex-wrap:wrap}
.lib-meta{font-size:11px;color:var(--txtM)}
/* ═══════ UPLOAD ═══════ */
.upload-zone{border:2px dashed var(--border);border-radius:10px;padding:24px;text-align:center;cursor:pointer;background:var(--surfAlt);transition:border-color .15s}
.upload-zone:hover,.upload-zone.drag{border-color:var(--pri)}
/* ═══════ GRIDS ═══════ */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.recent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.recent-card{padding:14px;cursor:pointer}
/* ═══════ UTILITY ═══════ */
.empty{text-align:center;padding:32px;background:var(--accL);border-radius:12px;max-width:500px;margin:0 auto}
.empty-title{font-weight:700;color:var(--accD);margin-bottom:6px}
.empty-text{font-size:13.5px;color:var(--txtS)}
.section-title{font-size:13px;color:var(--txtM);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}
.page-header{text-align:center;margin:16px 0 32px}
.page-header .sub{font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--txtM);margin-bottom:6px}
.page-header h1{font-family:'DM Serif Display',serif;font-size:34px;font-weight:400;margin-bottom:6px}
.page-header p{color:var(--txtS);font-size:14.5px}
.center-box{max-width:720px;margin:0 auto}
.flex-between{display:flex;justify-content:space-between;align-items:center}
.gap-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.mb-sm{margin-bottom:10px}.mb-md{margin-bottom:16px}.mb-lg{margin-bottom:20px}.mb-xl{margin-bottom:32px}
.hidden{display:none!important}
.spin{animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fade-in{animation:fadeIn .3s ease both}
@media(max-width:640px){
.grid-2,.grid-3{grid-template-columns:1fr}
.filter-row{flex-direction:column}
.header-inner{padding:10px 16px}
.main{padding:16px}
.page-header h1{font-size:26px}
}
</style>
</head>
<body>
<header class="header">
<div class="header-inner">
<div class="logo" onclick="showView('search')">
<div class="logo-icon">
<svg width="22" height="22" viewBox="0 0 32 32" fill="none"><path d="M6 10h20M6 15h14M6 20h16" stroke="#fff" stroke-width="2.2" stroke-linecap="round"/><circle cx="25" cy="23" r="5.5" fill="#C8922A" stroke="#fff" stroke-width="1.5"/><path d="M23.3 23.2l1.1 1.1 2.2-2.2" stroke="#fff" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<div>
<div class="logo-text">PM-Sök</div>
<div class="logo-sub">Kliniskt dokumentbibliotek</div>
</div>
</div>
<nav class="nav">
<button class="nav-btn active" data-nav="search" onclick="showView('search')">
<svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
Sök
</button>
<button class="nav-btn" data-nav="library" onclick="showView('library')">
<svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" viewBox="0 0 24 24"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>
Bibliotek <span class="count" id="navCount">(0)</span>
</button>
<button class="nav-btn" data-nav="add" onclick="showView('add')">
<svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>
Lägg till
</button>
</nav>
</div>
</header>
<main class="main">
<!-- SEARCH -->
<div id="view-search">
<div class="page-header">
<div class="sub">AI-driven dokumentsökning</div>
<h1>Sök i PM-biblioteket</h1>
<p id="statsLine">0 PM</p>
</div>
<div class="center-box mb-md">
<div class="search-wrap">
<svg width="19" height="19" fill="none" stroke="#8694A5" stroke-width="2" stroke-linecap="round" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
<input class="search-input" id="searchInput" placeholder='T.ex. "Handläggning hyperkalemi"' onkeydown="if(event.key==='Enter')doSearch()">
<button class="btn btn-pri" id="searchBtn" onclick="doSearch()">Sök</button>
</div>
<div id="searchError" class="hidden" style="margin-top:10px;padding:9px 14px;background:var(--redL);border-radius:8px;color:var(--red);font-size:12.5px"></div>
</div>
<div class="center-box mb-xl">
<div class="card filter-box">
<div class="filter-header">
<svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" viewBox="0 0 24 24"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
Filtrera sökning
</div>
<div class="filter-row">
<div class="filter-col"><label class="form-label">Omfattning</label>
<select class="form-select" id="fScope" onchange="onFilterChange()"><option value="Alla">Alla nivåer</option><option value="Lokal">Lokal</option><option value="Region">Region</option><option value="Nationellt">Nationellt</option></select>
</div>
<div class="filter-col grow"><label class="form-label">Region</label>
<select class="form-select" id="fRegion" onchange="onFilterChange()"><option value="Alla">Alla regioner</option></select>
</div>
<div class="filter-col grow"><label class="form-label">Sjukhus</label>
<select class="form-select" id="fHospital" onchange="onFilterChange()"><option value="Alla">Välj region först</option></select>
</div>
</div>
<div id="filterInfo" class="filter-info hidden"></div>
</div>
</div>
<div id="emptyState" class="empty hidden"><div class="empty-title">Inga PM-dokument ännu</div><div class="empty-text">Gå till <a href="#" onclick="showView('add');return false">Lägg till PM</a> för att börja.</div></div>
<div id="recentSection" class="hidden"><div class="section-title">Senast tillagda</div><div class="recent-grid" id="recentGrid"></div></div>
</div>
<!-- RESULTS -->
<div id="view-results" class="hidden">
<button class="btn btn-outline mb-lg" onclick="showView('search')">← Tillbaka till sökning</button>
<h2 style="font-family:'DM Serif Display',serif;font-size:24px;font-weight:400;margin-bottom:4px">Sökresultat</h2>
<p id="resultsQuery" style="color:var(--txtS);margin-bottom:20px;font-size:14px"></p>
<div id="aiSummary"></div>
<div id="resultsList"></div>
</div>
<!-- DOC VIEW -->
<div id="view-docview" class="hidden">
<button class="btn btn-outline mb-lg" id="docBackBtn" onclick="goBackFromDoc()">← Tillbaka</button>
<div class="card">
<div class="doc-header"><div><div class="doc-title" id="docTitle"></div><div id="docTags" class="gap-row"></div></div><div id="docHlBadge" class="hl-badge hidden"></div></div>
<div class="doc-content" id="docContent"></div>
</div>
</div>
<!-- LIBRARY -->
<div id="view-library" class="hidden">
<div class="flex-between mb-md">
<h2 style="font-family:'DM Serif Display',serif;font-size:23px;font-weight:400">PM-bibliotek</h2>
<button class="btn btn-pri" onclick="showView('add')">+ Lägg till PM</button>
</div>
<div class="gap-row mb-md">
<div style="flex:1;min-width:180px"><input class="form-input" id="libSearch" placeholder="Sök titel, sjukhus, region…" oninput="renderLibrary()"></div>
<select class="form-select" id="libScope" style="width:auto" onchange="renderLibrary()"><option value="Alla">Alla nivåer</option><option value="Lokal">Lokal</option><option value="Region">Region</option><option value="Nationellt">Nationellt</option></select>
</div>
<div id="libraryList"></div>
</div>
<!-- ADD -->
<div id="view-add" class="hidden">
<button class="btn btn-outline mb-md" onclick="showView('library')">← Tillbaka</button>
<div class="card">
<div style="padding:18px 22px;border-bottom:1px solid var(--borderL)"><h2 style="font-family:'DM Serif Display',serif;font-size:21px;font-weight:400">Lägg till PM-dokument</h2></div>
<div style="padding:18px 22px">
<div class="mb-md"><label class="form-label">Ladda upp fil (.txt, .md)</label>
<div class="upload-zone" id="uploadZone" onclick="document.getElementById('fileInput').click()">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
<div style="margin-top:6px;font-size:13px;color:var(--txtS)">Klicka eller dra-och-släpp filer</div>
<input type="file" id="fileInput" accept=".txt,.md" multiple style="display:none" onchange="handleFiles(this.files)">
</div>
</div>
<div class="grid-2 mb-md">
<div><label class="form-label">Dokumenttitel *</label><input class="form-input" id="addTitle" placeholder="T.ex. PM Hyperkalemi"></div>
<div><label class="form-label">Kategori</label><select class="form-select" id="addCategory"></select></div>
</div>
<div class="grid-3 mb-md">
<div><label class="form-label">Omfattning</label><select class="form-select" id="addScope"><option value="Lokal">Lokal</option><option value="Region">Region</option><option value="Nationellt">Nationellt</option></select></div>
<div><label class="form-label">Region</label><select class="form-select" id="addRegion" onchange="updateAddHospitals()"><option value="">Välj region…</option></select></div>
<div><label class="form-label">Sjukhus</label><select class="form-select" id="addHospital" disabled><option value="">Välj region först</option></select></div>
</div>
<div class="mb-md"><label class="form-label">PM-innehåll *</label><textarea class="form-textarea" id="addContent" placeholder="Klistra in PM-texten här…"></textarea></div>
<div style="display:flex;gap:10px;justify-content:flex-end">
<button class="btn btn-outline" onclick="resetAddForm();showView('library')">Avbryt</button>
<button class="btn btn-pri" onclick="addDocument()">Spara PM</button>
</div>
</div>
</div>
</div>
</main>
<script>
const API_URL = "https://api.anthropic.com/v1/messages";
const REGIONS={"Region Stockholm":["Karolinska Universitetssjukhuset","Danderyds sjukhus","Södersjukhuset","S:t Görans sjukhus","Södertälje sjukhus","Norrtälje sjukhus"],"Region Uppsala":["Akademiska sjukhuset","Lasarettet i Enköping"],"Region Sörmland":["Mälarsjukhuset","Nyköpings lasarett","Kullbergska sjukhuset"],"Region Östergötland":["Universitetssjukhuset i Linköping","Vrinnevisjukhuset"],"Region Jönköping":["Länssjukhuset Ryhov","Höglandssjukhuset","Värnamo sjukhus"],"Region Kronoberg":["Centrallasarettet Växjö","Lasarettet Ljungby"],"Region Kalmar":["Länssjukhuset i Kalmar","Oskarshamns sjukhus","Västerviks sjukhus"],"Region Gotland":["Visby lasarett"],"Region Blekinge":["Blekingesjukhuset Karlskrona","Blekingesjukhuset Karlshamn"],"Region Skåne":["Skånes universitetssjukhus Lund","Skånes universitetssjukhus Malmö","Helsingborgs lasarett","Centralsjukhuset Kristianstad","Landskrona lasarett","Trelleborgs lasarett","Ystads lasarett"],"Region Halland":["Hallands sjukhus Halmstad","Hallands sjukhus Varberg"],"Västra Götalandsregionen":["Sahlgrenska Universitetssjukhuset","NU-sjukvården","Skaraborgs sjukhus","Södra Älvsborgs sjukhus","Alingsås lasarett","Kungälvs sjukhus"],"Region Värmland":["Centralsjukhuset i Karlstad"],"Region Örebro":["Universitetssjukhuset Örebro","Lindesbergs lasarett","Karlskoga lasarett"],"Region Västmanland":["Västmanlands sjukhus Västerås"],"Region Dalarna":["Falu lasarett","Mora lasarett"],"Region Gävleborg":["Gävle sjukhus","Hudiksvalls sjukhus"],"Region Västernorrland":["Sundsvalls sjukhus","Sollefteå sjukhus","Örnsköldsviks sjukhus"],"Region Jämtland Härjedalen":["Östersunds sjukhus"],"Region Västerbotten":["Norrlands universitetssjukhus","Skellefteå lasarett","Lycksele lasarett"],"Region Norrbotten":["Sunderby sjukhus","Gällivare sjukhus","Kiruna sjukhus"]};
const REGION_NAMES=Object.keys(REGIONS);
const CATEGORIES=["Akutmedicin","Anestesi","Barnmedicin","Dermatologi","Endokrinologi","Geriatrik","Gynekologi","Hematologi","Infektion","Internmedicin","Kardiologi","Kirurgi","Lungmedicin","Nefrologi","Neurologi","Onkologi","Ortopedi","Psykiatri","Reumatologi","Urologi","Övrigt"];
let docs=[],lastResults=null,lastSearchDocs=[],lastQuery="";
function loadDocs(){try{docs=JSON.parse(localStorage.getItem("pm-docs-v5")||"[]")}catch{docs=[]}}
function saveDocs(){localStorage.setItem("pm-docs-v5",JSON.stringify(docs))}
function uid(){return Date.now().toString(36)+Math.random().toString(36).slice(2,8)}
function esc(s){if(!s)return"";const d=document.createElement("div");d.textContent=s;return d.innerHTML}
function init(){
loadDocs();
const fR=document.getElementById("fRegion");
fR.innerHTML='<option value="Alla">Alla regioner</option>'+REGION_NAMES.map(r=>`<option value="${r}">${r}</option>`).join("");
const aR=document.getElementById("addRegion");
aR.innerHTML='<option value="">Välj region…</option>'+REGION_NAMES.map(r=>`<option value="${r}">${r}</option>`).join("");
document.getElementById("addCategory").innerHTML=CATEGORIES.map(c=>`<option value="${c}">${c}</option>`).join("");
updateStats();renderRecent();renderLibrary();
const z=document.getElementById("uploadZone");
z.addEventListener("dragover",e=>{e.preventDefault();z.classList.add("drag")});
z.addEventListener("dragleave",()=>z.classList.remove("drag"));
z.addEventListener("drop",e=>{e.preventDefault();z.classList.remove("drag");handleFiles(e.dataTransfer.files)});
}
function showView(name){
["search","results","library","add","docview"].forEach(v=>document.getElementById("view-"+v).classList.toggle("hidden",v!==name));
document.querySelectorAll(".nav-btn").forEach(b=>{
const n=b.dataset.nav;
b.classList.toggle("active",(name==="search"||name==="results")?n==="search":(name==="library"||name==="docview")?n==="library":n===name);
});
if(name==="library")renderLibrary();
if(name==="search"){updateStats();renderRecent();}
}
function updateStats(){
const r=new Set(docs.map(d=>d.region).filter(Boolean)).size;
const h=new Set(docs.map(d=>d.hospital).filter(Boolean)).size;
document.getElementById("statsLine").textContent=`${docs.length} PM`+(docs.length>0?` från ${h} sjukhus i ${r} regioner`:"");
document.getElementById("navCount").textContent=`(${docs.length})`;
document.getElementById("emptyState").classList.toggle("hidden",docs.length>0);
document.getElementById("recentSection").classList.toggle("hidden",docs.length===0);
}
function onFilterChange(){
const region=document.getElementById("fRegion").value;
const hSel=document.getElementById("fHospital");
if(region!=="Alla"){hSel.innerHTML='<option value="Alla">Alla sjukhus</option>'+(REGIONS[region]||[]).map(h=>`<option value="${h}">${h}</option>`).join("");hSel.disabled=false}
else{hSel.innerHTML='<option value="Alla">Välj region först</option>';hSel.disabled=true}
const f=getFiltered(),info=document.getElementById("filterInfo");
const scope=document.getElementById("fScope").value;
if(scope!=="Alla"||region!=="Alla"||hSel.value!=="Alla"){info.classList.remove("hidden");info.innerHTML=`Söker i ${f.length} av ${docs.length} dokument <button class="btn btn-outline btn-sm" onclick="clearFilters()">Rensa</button>`}
else info.classList.add("hidden");
}
function clearFilters(){document.getElementById("fScope").value="Alla";document.getElementById("fRegion").value="Alla";document.getElementById("fHospital").innerHTML='<option value="Alla">Välj region först</option>';document.getElementById("fHospital").disabled=true;document.getElementById("filterInfo").classList.add("hidden")}
function getFiltered(){
const s=document.getElementById("fScope").value,r=document.getElementById("fRegion").value,h=document.getElementById("fHospital").value;
return docs.filter(d=>{if(s!=="Alla"&&d.scope!==s)return false;if(r!=="Alla"&&d.region!==r)return false;if(h!=="Alla"&&d.hospital!==h)return false;return true});
}
async function doSearch(){
const query=document.getElementById("searchInput").value.trim();
const filtered=getFiltered();
if(!query||!filtered.length)return;
const btn=document.getElementById("searchBtn"),err=document.getElementById("searchError");
btn.disabled=true;btn.innerHTML='<span class="spin">⟳</span> Söker…';err.classList.add("hidden");
try{
const blocks=filtered.map((d,i)=>`=== DOK #${i} | "${d.title}" | ${d.hospital||""} | ${d.region||""} | ${d.scope} | ${d.category} ===\n${d.content.split("\n").map((l,li)=>`[RAD ${li+1}] ${l}`).join("\n")}\n=== SLUT DOK #${i} ===`).join("\n\n");
const sys=`Du är en sökassistent för sjukvårdspersonal i Sverige. Sök ENBART i bifogade PM. Svara ALDRIG med info från internet. Svenska.\nRANKNING (matchScore 0-100): 90-100=hela svaret,60-89=stor del,30-59=delar,<30=exkludera.\nhighlightTexts: EXAKTA citat ur dokumentet, 1-3 meningar, ord för ord.\nSvara ENBART giltig JSON utan markdown:\n{"found":true,"results":[{"documentIndex":0,"matchScore":95,"matchLabel":"Fullständigt svar","summary":"Kort","highlightTexts":["exakt citat"]}],"message":"Sammanfattning"}`;
const resp=await fetch(API_URL,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({model:"claude-sonnet-4-20250514",max_tokens:1000,system:sys,messages:[{role:"user",content:`Sökfråga: "${query}"\n\nDokument:\n\n${blocks}`}]})});
if(!resp.ok)throw new Error(`API ${resp.status}`);
const data=await resp.json();
const text=data.content.map(c=>c.text||"").join("");
const result=JSON.parse(text.replace(/```json|```/g,"").trim());
if(result.results)result.results=result.results.filter(r=>filtered[r.documentIndex]).sort((a,b)=>(b.matchScore||0)-(a.matchScore||0));
lastResults=result;lastSearchDocs=filtered;lastQuery=query;
renderResults();showView("results");
}catch(e){err.textContent="Sökningen misslyckades: "+e.message;err.classList.remove("hidden")}
finally{btn.disabled=false;btn.innerHTML="Sök"}
}
function renderResults(){
document.getElementById("resultsQuery").innerHTML=`Fråga: <em>"${esc(lastQuery)}"</em>`;
const s=document.getElementById("aiSummary");
s.className="ai-summary "+(lastResults.found?"found":"notfound");
s.innerHTML=`<div><div class="ai-label">AI-sammanfattning</div><div style="font-size:14px;line-height:1.6">${esc(lastResults.message)}</div></div>`;
const list=document.getElementById("resultsList");
if(!lastResults.found||!lastResults.results?.length){list.innerHTML="";return}
list.innerHTML=lastResults.results.map((r,i)=>{
const doc=lastSearchDocs[r.documentIndex];if(!doc)return"";
const sc=r.matchScore||0;
const cls=sc>=90?"score-high":sc>=60?"score-med":sc>=30?"score-low":"score-minimal";
const bar=sc>=90?"#0F5D4F":sc>=60?"#2563EB":sc>=30?"#C8922A":"#9CA3AF";
const ex=r.highlightTexts?.[0]||"";const tex=ex.length>150?ex.slice(0,150)+"…":ex;
return`<div class="card result-card fade-in" style="border-left-color:${bar};animation-delay:${i*.06}s" onclick='openDocResult(${r.documentIndex},${JSON.stringify(r.highlightTexts||[]).replace(/'/g,"'")})'>
<div class="result-header"><div style="flex:1"><div class="result-title">${esc(doc.title)}</div><div class="result-tags">
<span class="badge-scope badge-${doc.scope.toLowerCase()}">${esc(doc.scope)}</span>
<span class="badge badge-cat">${esc(doc.category)}</span>
${doc.hospital?`<span class="lib-meta">${esc(doc.hospital)} · ${esc(doc.region)}</span>`:""}
${sc<60?'<span class="badge-partial">Delmatchning</span>':""}
</div></div><div class="match-bar"><div class="match-track"><div class="match-fill" style="width:${sc}%;background:${bar}"></div></div><span class="match-score ${cls}">${sc}%</span></div></div>
<div class="result-summary">${esc(r.summary)}</div>
${tex?`<div class="result-excerpt">"${esc(tex)}"</div>`:""}
<div class="result-open">Öppna och visa markerad text →</div></div>`}).join("");
}
function openDoc(doc,hlTexts,fromResults){
document.getElementById("docTitle").textContent=doc.title;
document.getElementById("docTags").innerHTML=`<span class="badge-scope badge-${doc.scope.toLowerCase()}">${esc(doc.scope)}</span><span class="badge badge-cat">${esc(doc.category)}</span>${doc.region?`<span class="lib-meta">${esc(doc.region)}</span>`:""}${doc.hospital?`<span class="lib-meta">· ${esc(doc.hospital)}</span>`:""}`;
const hb=document.getElementById("docHlBadge");
if(hlTexts?.length){hb.textContent=hlTexts.length+" markerade passager";hb.classList.remove("hidden")}else hb.classList.add("hidden");
let content=doc.content;
if(hlTexts?.length){
let segs=[{text:content,hl:false}];
for(const ht of hlTexts){if(!ht||ht.length<5)continue;const next=[];for(const seg of segs){if(seg.hl){next.push(seg);continue}const idx=seg.text.toLowerCase().indexOf(ht.toLowerCase());if(idx===-1){next.push(seg);continue}if(idx>0)next.push({text:seg.text.slice(0,idx),hl:false});next.push({text:seg.text.slice(idx,idx+ht.length),hl:true});if(idx+ht.length<seg.text.length)next.push({text:seg.text.slice(idx+ht.length),hl:false})}segs=next}
document.getElementById("docContent").innerHTML=segs.map(s=>s.hl?`<mark>${esc(s.text)}</mark>`:esc(s.text)).join("");
}else document.getElementById("docContent").textContent=content;
document.getElementById("docBackBtn").onclick=()=>showView(fromResults?"results":"library");
showView("docview");
setTimeout(()=>{const m=document.querySelector(".doc-content mark");if(m)m.scrollIntoView({behavior:"smooth",block:"center"})},300);
}
function openDocResult(idx,hl){const d=lastSearchDocs[idx];if(d)openDoc(d,hl,true)}
function goBackFromDoc(){showView(lastResults?"results":"library")}
function renderRecent(){
document.getElementById("recentGrid").innerHTML=docs.slice(-6).reverse().map((d,i)=>`<div class="card recent-card" onclick='openDoc(${JSON.stringify(d).replace(/'/g,"'")},[],false)'><div style="font-weight:600;font-size:14px;margin-bottom:6px">${esc(d.title)}</div><div class="gap-row" style="margin-bottom:4px"><span class="badge badge-cat">${esc(d.category)}</span><span class="badge-scope badge-${d.scope.toLowerCase()}">${esc(d.scope)}</span></div>${d.hospital?`<div class="lib-meta">${esc(d.hospital)}</div>`:""}</div>`).join("");
}
function renderLibrary(){
const q=(document.getElementById("libSearch").value||"").toLowerCase(),sc=document.getElementById("libScope").value;
const f=docs.filter(d=>{if(sc!=="Alla"&&d.scope!==sc)return false;if(!q)return true;return d.title.toLowerCase().includes(q)||(d.hospital||"").toLowerCase().includes(q)||(d.region||"").toLowerCase().includes(q)});
const list=document.getElementById("libraryList");
if(!f.length){list.innerHTML='<div style="text-align:center;padding:36px;color:var(--txtM)">Inga dokument hittades</div>';return}
list.innerHTML=f.map(d=>`<div class="card lib-row" style="margin-bottom:7px"><div class="lib-info"><div class="lib-title">${esc(d.title)}</div><div class="lib-tags"><span class="badge badge-cat">${esc(d.category)}</span><span class="badge-scope badge-${d.scope.toLowerCase()}">${esc(d.scope)}</span><span class="lib-meta">${esc(d.hospital||"")} ${d.region?"· "+esc(d.region):""}</span></div></div><button class="btn btn-outline btn-sm" onclick='openDoc(${JSON.stringify(d).replace(/'/g,"'")},[],false)'>Visa</button><button class="btn btn-outline btn-sm btn-danger" onclick="deleteDoc('${d.id}')">Ta bort</button></div>`).join("");
}
function updateAddHospitals(){
const r=document.getElementById("addRegion").value,h=document.getElementById("addHospital");
if(r){h.innerHTML='<option value="">Välj sjukhus…</option>'+(REGIONS[r]||[]).map(x=>`<option value="${x}">${x}</option>`).join("");h.disabled=false}
else{h.innerHTML='<option value="">Välj region först</option>';h.disabled=true}
}
function addDocument(){
const t=document.getElementById("addTitle").value.trim(),c=document.getElementById("addContent").value.trim();
if(!t||!c)return alert("Titel och innehåll krävs.");
docs.push({id:uid(),title:t,category:document.getElementById("addCategory").value,scope:document.getElementById("addScope").value,region:document.getElementById("addRegion").value,hospital:document.getElementById("addHospital").value,content:c,addedAt:new Date().toISOString()});
saveDocs();resetAddForm();showView("library");
}
function resetAddForm(){document.getElementById("addTitle").value="";document.getElementById("addContent").value="";document.getElementById("addCategory").value="Övrigt";document.getElementById("addScope").value="Lokal";document.getElementById("addRegion").value="";updateAddHospitals()}
function deleteDoc(id){if(!confirm("Vill du ta bort detta PM?"))return;docs=docs.filter(d=>d.id!==id);saveDocs();renderLibrary();updateStats()}
function handleFiles(files){Array.from(files).forEach(f=>{const r=new FileReader();r.onload=e=>{document.getElementById("addTitle").value=document.getElementById("addTitle").value||f.name.replace(/\.\w+$/,"");const c=document.getElementById("addContent");c.value=c.value?c.value+"\n\n"+e.target.result:e.target.result};r.readAsText(f)})}
init();
</script>
</body>
</html>
