<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Integraties — Mek-Tech</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/neon.css">
<link rel="stylesheet" href="/css/dynamic.css">
<link rel="icon" href="/img/favicon.svg">
<script src="https://unpkg.com/lucide@latest"></script>
<style>
.int-wrap{max-width:1100px;margin:0 auto;padding:1.5rem 2rem 3rem}
.int-hdr{margin-bottom:1.25rem}
.int-hdr h1{font-size:1.4rem;font-weight:800;margin:0}
.int-hdr p{font-size:.78rem;color:var(--text-muted);margin-top:.2rem}
.int-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.85rem}
.int-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:1.1rem;transition:all .2s}
.int-card:hover{border-color:rgba(0,212,255,.3);box-shadow:0 4px 20px rgba(0,212,255,.08)}
.int-card.connected{border-color:rgba(63,185,80,.4)}
.int-icon{width:48px;height:48px;border-radius:10px;background:linear-gradient(135deg,rgba(0,212,255,.15),rgba(168,85,247,.15));display:flex;align-items:center;justify-content:center;margin-bottom:.75rem}
.int-icon svg{width:24px;height:24px;color:var(--accent)}
.int-title{font-size:.95rem;font-weight:700;margin-bottom:.25rem}
.int-desc{font-size:.72rem;color:var(--text-muted);margin-bottom:.65rem;line-height:1.4}
.int-status{font-size:.62rem;font-weight:600;padding:.15rem .5rem;border-radius:999px;display:inline-block}
.int-status.connected{background:var(--green-bg);color:var(--green)}
.int-status.available{background:var(--cyan-bg);color:var(--cyan)}
.int-actions{display:flex;gap:.4rem;margin-top:.75rem;flex-wrap:wrap}
.int-modal{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:200;display:none;align-items:center;justify-content:center}
.int-modal.open{display:flex}
.int-modal-box{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:1.25rem;width:95%;max-width:420px}
.int-modal-box h3{font-size:.9rem;margin:0 0 .75rem}
.int-modal-box label{font-size:.65rem;color:var(--text-muted);display:block;margin-bottom:.2rem}
.int-modal-box input{width:100%;padding:.45rem .6rem;background:var(--bg);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:.78rem;margin-bottom:.65rem;font-family:inherit}
</style>
</head>
<body>
<nav class="navbar"><div class="nav-inner">
<a href="/" class="nav-brand"><img src="/img/logo.svg" class="nav-logo" alt="Mek-Tech"></a>
<div style="display:flex;align-items:center;gap:.4rem">
<a href="/" class="nav-icon-btn"><i data-lucide="layout-dashboard" style="width:15px;height:15px"></i> Dashboard</a>
<a href="/ai/providers" class="nav-icon-btn"><i data-lucide="sparkles" style="width:15px;height:15px"></i> AI</a>
<a href="/settings" class="nav-icon-btn"><i data-lucide="settings" style="width:15px;height:15px"></i></a>
<a href="/auth/logout" class="nav-icon-btn" style="color:var(--red)"><i data-lucide="log-out" style="width:15px;height:15px"></i></a>
</div></div></nav>

<div class="int-wrap">
<a href="/" class="back-link"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg> Terug naar dashboard</a>
<% if (saved) { %><div class="alert" style="margin-top:.75rem">Integratie opgeslagen.</div><% } %>

<div class="int-hdr fade-in-up">
<h1>Integraties</h1>
<p>Verbind externe systemen met je Mek-Tech consultancy platform — AI, calendar, CRM en boekhouding.</p>
</div>

<div class="int-grid">
<% var activeIds = (activeIntegrations || []).map(function(i){ return i.id; });
integrations.forEach(function(integration) {
  var isConnected = activeIds.indexOf(integration.id) >= 0;
%>
<div class="int-card <%= isConnected ? 'connected' : '' %> fade-in-up">
<div class="int-icon"><i data-lucide="<%= integration.icon %>"></i></div>
<div class="int-title"><%= integration.name %></div>
<div class="int-desc"><%= integration.description %></div>
<span class="int-status <%= isConnected ? 'connected' : 'available' %>"><%= isConnected ? 'Verbonden' : 'Beschikbaar' %></span>
<div class="int-actions">
<% if (integration.category === 'ai') { %>
<a href="/ai/providers" class="btn btn-accent btn-small">Configureren</a>
<% } else if (isConnected) { %>
<form method="POST" action="/integrations/disconnect/<%= integration.id %>" style="display:inline"><button type="submit" class="btn btn-secondary btn-small">Verbreken</button></form>
<button type="button" class="btn btn-secondary btn-small" onclick="testIntegration('<%= integration.id %>')">Test</button>
<% } else { %>
<button type="button" class="btn btn-accent btn-small" onclick="openConnect('<%= integration.id %>','<%= integration.name %>')">Verbinden</button>
<% } %>
</div>
</div>
<% }) %>
</div>
</div>

<div class="int-modal" id="connectModal" onclick="if(event.target===this)closeConnect()">
<div class="int-modal-box">
<h3 id="connectTitle">Integratie verbinden</h3>
<form id="connectForm" method="POST">
<label>API Key / Token</label>
<input type="password" name="api_key" placeholder="Optioneel — laat leeg voor webhook-only">
<label>Webhook URL</label>
<input type="url" name="webhook_url" placeholder="https://...">
<div style="display:flex;gap:.4rem;margin-top:.25rem">
<button type="submit" class="btn btn-accent btn-small">Opslaan & verbinden</button>
<button type="button" class="btn btn-secondary btn-small" onclick="closeConnect()">Annuleren</button>
</div>
</form>
</div>
</div>

<script>
lucide.createIcons();
function openConnect(id, name) {
  document.getElementById('connectTitle').textContent = name + ' verbinden';
  document.getElementById('connectForm').action = '/integrations/connect/' + id;
  document.getElementById('connectModal').classList.add('open');
}
function closeConnect() { document.getElementById('connectModal').classList.remove('open'); }
async function testIntegration(id) {
  try {
    var r = await fetch('/integrations/test/' + id, { method: 'POST' });
    var d = await r.json();
    alert(d.success ? 'Verbinding succesvol getest.' : (d.message || 'Test mislukt'));
  } catch (e) { alert('Test mislukt: ' + e.message); }
}
</script>
<script src="/js/theme.js"></script>
</body>
</html>
