import{j as e}from"./jsx-runtime.D_zvdyIk.js";import{r as i}from"./index.DIfZGIpv.js";import{A as D,a as O,u as k}from"./AdminAuth.CbzFS552.js";import{A as L}from"./AdminLayout.CKC2eNsX.js";const R=[{type:"header",label:"Header",icon:"🏷️"},{type:"product",label:"Product",icon:"👟"},{type:"text",label:"Tekst",icon:"📝"},{type:"button",label:"Button",icon:"🔘"},{type:"divider",label:"Divider",icon:"➖"},{type:"price_comparison",label:"Prijsvergelijk",icon:"💰"}];function U(){return Math.random().toString(36).slice(2,9)}function H(t){switch(t.type){case"header":return`<div style="background:#0A0A0A;padding:24px;text-align:center;">
        ${t.data.logo?`<img src="${t.data.logo}" alt="" style="height:32px;margin-bottom:8px;" />`:""}
        <h1 style="color:#00FF6A;font-size:24px;margin:0;">${t.data.title||"SneakerPicks"}</h1>
      </div>`;case"product":return`<div style="background:#141414;border:1px solid #333;border-radius:8px;padding:16px;margin:8px 0;">
        <table width="100%"><tr>
          <td width="80"><img src="${t.data.image||""}" alt="" style="width:80px;height:80px;object-fit:contain;background:white;border-radius:4px;" /></td>
          <td style="padding-left:16px;">
            <div style="color:#F5F5F5;font-size:16px;font-weight:bold;">${t.data.name||"Product"}</div>
            <div style="color:#00FF6A;font-size:20px;margin-top:4px;">${t.data.price?`€${t.data.price}`:""}</div>
            ${t.data.url?`<a href="${t.data.url}" style="display:inline-block;background:#00FF6A;color:#000;padding:8px 16px;border-radius:6px;text-decoration:none;font-size:14px;margin-top:8px;">Bekijk Deal →</a>`:""}
          </td>
        </tr></table>
      </div>`;case"text":return`<div style="color:#CCCCCC;font-size:14px;line-height:1.6;padding:12px 0;">${t.data.content||""}</div>`;case"button":return`<div style="text-align:center;padding:16px 0;">
        <a href="${t.data.url||"#"}" style="display:inline-block;background:${t.data.color||"#00FF6A"};color:${t.data.textColor||"#000"};padding:12px 32px;border-radius:8px;text-decoration:none;font-weight:bold;">${t.data.label||"Click here"}</a>
      </div>`;case"divider":return'<hr style="border:none;border-top:1px solid #333;margin:16px 0;" />';case"price_comparison":const x=t.data.shops||[];return`<div style="background:#141414;border:1px solid #333;border-radius:8px;padding:16px;margin:8px 0;">
        <div style="color:#F5F5F5;font-size:16px;font-weight:bold;margin-bottom:12px;">${t.data.name||"Product"}</div>
        ${x.map(p=>`<div style="display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid #222;">
          <span style="color:#999;">${p.shop}</span>
          <span style="color:#00FF6A;font-weight:bold;">€${p.price}</span>
        </div>`).join("")}
      </div>`;default:return""}}function M({block:t,onChange:x,onRemove:p,onMoveUp:c,onMoveDown:m}){const r=(a,l)=>x({...t,data:{...t.data,[a]:l}});return e.jsxs("div",{className:"bg-[#1A1A1A] border border-[#333] rounded-lg p-4 group",children:[e.jsxs("div",{className:"flex items-center justify-between mb-3",children:[e.jsx("span",{className:"text-sm text-[#999] font-medium uppercase tracking-wider",children:t.type}),e.jsxs("div",{className:"flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity",children:[e.jsx("button",{onClick:c,className:"text-xs px-2 py-1 text-[#999] hover:text-white",children:"↑"}),e.jsx("button",{onClick:m,className:"text-xs px-2 py-1 text-[#999] hover:text-white",children:"↓"}),e.jsx("button",{onClick:p,className:"text-xs px-2 py-1 text-[#FF3B3B] hover:text-[#FF6666]",children:"✕"})]})]}),t.type==="header"&&e.jsxs("div",{className:"space-y-2",children:[e.jsx("input",{value:t.data.title||"",onChange:a=>r("title",a.target.value),placeholder:"Titel",className:"w-full bg-[#0A0A0A] border border-[#333] rounded px-3 py-2 text-sm text-[#F5F5F5]"}),e.jsx("input",{value:t.data.logo||"",onChange:a=>r("logo",a.target.value),placeholder:"Logo URL",className:"w-full bg-[#0A0A0A] border border-[#333] rounded px-3 py-2 text-sm text-[#F5F5F5]"})]}),t.type==="product"&&e.jsxs("div",{className:"space-y-2",children:[e.jsx("input",{value:t.data.name||"",onChange:a=>r("name",a.target.value),placeholder:"Product naam",className:"w-full bg-[#0A0A0A] border border-[#333] rounded px-3 py-2 text-sm text-[#F5F5F5]"}),e.jsxs("div",{className:"grid grid-cols-2 gap-2",children:[e.jsx("input",{value:t.data.price||"",onChange:a=>r("price",a.target.value),placeholder:"Prijs",className:"bg-[#0A0A0A] border border-[#333] rounded px-3 py-2 text-sm text-[#F5F5F5]"}),e.jsx("input",{value:t.data.url||"",onChange:a=>r("url",a.target.value),placeholder:"Link",className:"bg-[#0A0A0A] border border-[#333] rounded px-3 py-2 text-sm text-[#F5F5F5]"})]}),e.jsx("input",{value:t.data.image||"",onChange:a=>r("image",a.target.value),placeholder:"Afbeelding URL",className:"w-full bg-[#0A0A0A] border border-[#333] rounded px-3 py-2 text-sm text-[#F5F5F5]"}),e.jsx(I,{onSelect:a=>x({...t,data:{...t.data,name:a.name,image:a.image_url,product_id:a.id}})})]}),t.type==="text"&&e.jsx("textarea",{value:t.data.content||"",onChange:a=>r("content",a.target.value),placeholder:"Tekst...",rows:3,className:"w-full bg-[#0A0A0A] border border-[#333] rounded px-3 py-2 text-sm text-[#F5F5F5]"}),t.type==="button"&&e.jsxs("div",{className:"space-y-2",children:[e.jsx("input",{value:t.data.label||"",onChange:a=>r("label",a.target.value),placeholder:"Button tekst",className:"w-full bg-[#0A0A0A] border border-[#333] rounded px-3 py-2 text-sm text-[#F5F5F5]"}),e.jsx("input",{value:t.data.url||"",onChange:a=>r("url",a.target.value),placeholder:"Button link",className:"w-full bg-[#0A0A0A] border border-[#333] rounded px-3 py-2 text-sm text-[#F5F5F5]"})]}),t.type==="price_comparison"&&e.jsxs("div",{className:"space-y-2",children:[e.jsx("input",{value:t.data.name||"",onChange:a=>r("name",a.target.value),placeholder:"Product naam",className:"w-full bg-[#0A0A0A] border border-[#333] rounded px-3 py-2 text-sm text-[#F5F5F5]"}),(t.data.shops||[]).map((a,l)=>e.jsxs("div",{className:"flex gap-2",children:[e.jsx("input",{value:a.shop,onChange:u=>{const o=[...t.data.shops||[]];o[l]={...a,shop:u.target.value},r("shops",o)},placeholder:"Shop",className:"flex-1 bg-[#0A0A0A] border border-[#333] rounded px-3 py-2 text-sm text-[#F5F5F5]"}),e.jsx("input",{value:a.price,onChange:u=>{const o=[...t.data.shops||[]];o[l]={...a,price:u.target.value},r("shops",o)},placeholder:"Prijs",className:"w-24 bg-[#0A0A0A] border border-[#333] rounded px-3 py-2 text-sm text-[#F5F5F5]"}),e.jsx("button",{onClick:()=>{const u=(t.data.shops||[]).filter((o,h)=>h!==l);r("shops",u)},className:"text-[#FF3B3B] px-2",children:"✕"})]},l)),e.jsx("button",{onClick:()=>r("shops",[...t.data.shops||[],{shop:"",price:""}]),className:"text-sm text-[#00FF6A] hover:underline",children:"+ Shop toevoegen"})]})]})}function I({onSelect:t}){const{token:x}=k(),[p,c]=i.useState(""),[m,r]=i.useState([]);return i.useEffect(()=>{if(p.length<2){r([]);return}const a=setTimeout(()=>{fetch(`/api/admin/products?search=${encodeURIComponent(p)}&limit=5`,{headers:{Authorization:`Bearer ${x}`}}).then(l=>l.json()).then(l=>r(l.data||[]))},300);return()=>clearTimeout(a)},[p]),e.jsxs("div",{className:"relative",children:[e.jsx("input",{value:p,onChange:a=>c(a.target.value),placeholder:"🔍 Zoek product...",className:"w-full bg-[#0A0A0A] border border-[#333] rounded px-3 py-2 text-sm text-[#F5F5F5]"}),m.length>0&&e.jsx("div",{className:"absolute z-10 w-full mt-1 bg-[#1A1A1A] border border-[#333] rounded-lg shadow-lg max-h-48 overflow-auto",children:m.map(a=>e.jsxs("button",{onClick:()=>{t(a),c(""),r([])},className:"w-full text-left px-3 py-2 text-sm text-[#F5F5F5] hover:bg-[#222] flex items-center gap-2",children:[a.image_url&&e.jsx("img",{src:a.image_url,alt:"",className:"w-8 h-8 rounded bg-white object-contain"}),e.jsx("span",{className:"truncate",children:a.name})]},a.id))})]})}function G(){const{token:t}=k(),[x,p]=i.useState([]),[c,m]=i.useState(null),[r,a]=i.useState(""),[l,u]=i.useState("custom"),[o,h]=i.useState([]),[j,A]=i.useState(!1),[N,w]=i.useState(!1),[y,v]=i.useState(""),b={Authorization:`Bearer ${t}`,"Content-Type":"application/json"},f=()=>{fetch("/api/admin/emails/templates",{headers:b}).then(s=>s.json()).then(s=>p(s.data||[]))};i.useEffect(f,[]);const B=s=>{fetch(`/api/admin/emails/templates?id=${s}`,{headers:b}).then(n=>n.json()).then(n=>{m(n.id),a(n.name),u(n.type),h(n.blocks_json||[])})},C=()=>{m(null),a(""),u("custom"),h([])},S=s=>{const n={header:{title:"SneakerPicks",logo:""},product:{name:"",price:"",image:"",url:""},text:{content:""},button:{label:"Bekijk nu",url:"",color:"#00FF6A",textColor:"#000"},divider:{},price_comparison:{name:"",shops:[]}};h([...o,{id:U(),type:s,data:n[s]}])},T=(s,n)=>{const d=[...o];d[s]=n,h(d)},P=s=>h(o.filter((n,d)=>d!==s)),$=(s,n)=>{const d=s+n;if(d<0||d>=o.length)return;const g=[...o];[g[s],g[d]]=[g[d],g[s]],h(g)},F=i.useCallback(()=>`<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"></head>
      <body style="margin:0;padding:0;background:#0A0A0A;font-family:Arial,sans-serif;">
        <div style="max-width:600px;margin:0 auto;padding:20px;">${o.map(H).join("")}
          <div style="text-align:center;padding:20px;color:#666;font-size:12px;">
            <a href="https://sneakerpicks.nl" style="color:#00FF6A;">SneakerPicks.nl</a>
          </div>
        </div>
      </body></html>`,[o]),E=async()=>{A(!0),v("");const s=F(),n={name:r,type:l,blocks_json:o,html_cache:s,...c&&{id:c}},d=await fetch("/api/admin/emails/templates",{method:c?"PUT":"POST",headers:b,body:JSON.stringify(n)}),g=await d.json();d.ok?(m(g.id),v("Opgeslagen!"),f()):v(`Fout: ${g.error}`),A(!1)},_=async()=>{w(!0),v("");const s=await fetch("/api/admin/emails/send-test",{method:"POST",headers:b,body:JSON.stringify({html:F(),subject:`Test: ${r}`})}),n=await s.json();v(s.ok?"Test email verstuurd!":`Fout: ${n.error}`),w(!1)},z=async()=>{!c||!confirm("Template verwijderen?")||(await fetch(`/api/admin/emails/templates?id=${c}`,{method:"DELETE",headers:b}),C(),f())};return e.jsx(L,{title:"Email Editor",children:e.jsxs("div",{className:"flex gap-6 h-[calc(100vh-140px)]",children:[e.jsxs("div",{className:"w-60 flex-shrink-0 space-y-4 overflow-auto",children:[e.jsxs("div",{className:"bg-[#141414] border border-[#333] rounded-xl p-4",children:[e.jsxs("div",{className:"flex items-center justify-between mb-3",children:[e.jsx("h3",{className:"text-sm text-[#999] font-medium",children:"Templates"}),e.jsx("button",{onClick:C,className:"text-xs text-[#00FF6A] hover:underline",children:"+ Nieuw"})]}),e.jsxs("div",{className:"space-y-1",children:[x.map(s=>e.jsx("button",{onClick:()=>B(s.id),className:`w-full text-left px-3 py-2 rounded text-sm truncate ${c===s.id?"bg-[#00FF6A]/10 text-[#00FF6A]":"text-[#999] hover:text-white hover:bg-[#1A1A1A]"}`,children:s.name},s.id)),x.length===0&&e.jsx("div",{className:"text-[#666] text-xs",children:"Geen templates"})]})]}),e.jsxs("div",{className:"bg-[#141414] border border-[#333] rounded-xl p-4",children:[e.jsx("h3",{className:"text-sm text-[#999] font-medium mb-3",children:"Blokken"}),e.jsx("div",{className:"space-y-1",children:R.map(s=>e.jsxs("button",{onClick:()=>S(s.type),className:"w-full text-left px-3 py-2 rounded text-sm text-[#999] hover:text-white hover:bg-[#1A1A1A] flex items-center gap-2",children:[e.jsx("span",{children:s.icon}),e.jsx("span",{children:s.label})]},s.type))})]})]}),e.jsxs("div",{className:"flex-1 overflow-auto space-y-4",children:[e.jsxs("div",{className:"flex gap-3 items-center",children:[e.jsx("input",{value:r,onChange:s=>a(s.target.value),placeholder:"Template naam...",className:"flex-1 bg-[#141414] border border-[#333] rounded-lg px-4 py-2 text-[#F5F5F5]"}),e.jsxs("select",{value:l,onChange:s=>u(s.target.value),className:"bg-[#141414] border border-[#333] rounded-lg px-3 py-2 text-[#F5F5F5] text-sm",children:[e.jsx("option",{value:"custom",children:"Custom"}),e.jsx("option",{value:"price_alert",children:"Prijsalert"}),e.jsx("option",{value:"weekly_digest",children:"Weekly Digest"}),e.jsx("option",{value:"promo",children:"Promo"})]}),e.jsx("button",{onClick:E,disabled:j||!r,className:"px-4 py-2 rounded-lg text-sm bg-[#00FF6A] text-black font-medium disabled:opacity-50",children:j?"...":"💾 Opslaan"}),e.jsx("button",{onClick:_,disabled:N||o.length===0,className:"px-4 py-2 rounded-lg text-sm bg-[#1A1A1A] border border-[#333] text-[#999] hover:text-white disabled:opacity-50",children:N?"...":"📧 Test"}),c&&e.jsx("button",{onClick:z,className:"px-4 py-2 rounded-lg text-sm text-[#FF3B3B] hover:bg-[#FF3B3B]/10",children:"🗑️"})]}),y&&e.jsx("div",{className:`text-sm px-3 py-2 rounded ${y.includes("Fout")?"text-[#FF3B3B] bg-[#FF3B3B]/10":"text-[#00FF6A] bg-[#00FF6A]/10"}`,children:y}),o.length===0?e.jsx("div",{className:"text-[#666] text-center py-20 bg-[#141414] border border-[#333] rounded-xl",children:"Klik op een blok links om te beginnen"}):e.jsx("div",{className:"space-y-3",children:o.map((s,n)=>e.jsx(M,{block:s,onChange:d=>T(n,d),onRemove:()=>P(n),onMoveUp:()=>$(n,-1),onMoveDown:()=>$(n,1)},s.id))})]}),e.jsxs("div",{className:"w-[350px] flex-shrink-0 bg-[#141414] border border-[#333] rounded-xl overflow-hidden",children:[e.jsx("div",{className:"p-3 border-b border-[#333] text-sm text-[#999]",children:"Preview"}),e.jsx("div",{className:"overflow-auto h-full",children:e.jsx("iframe",{srcDoc:F(),className:"w-full h-full border-0",title:"Preview",style:{minHeight:"500px"}})})]})]})})}function Q(){return e.jsx(D,{children:e.jsx(O,{children:e.jsx(G,{})})})}export{Q as default};
