package app

import "html/template"

const pageCSS = `
@font-face{font-family:'Iosevka';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/iosevka-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Iosevka';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/iosevka-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Iosevka';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/iosevka-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Iosevka';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/iosevka-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2')}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0a0a0c;--surface:#18181c;--border:#2a2a2e;--border-strong:#3a3a40;
--text:#f5f4f0;--muted:#a8a6a0;--dim:#6a6864;--green:#5dd39e;--green-bg:#11201a;--green-dim:#1f3a2c;
--red:#ff8a7a;--red-bg:#2a1410;--serif:'Iosevka',ui-monospace,monospace;--sans:'IBM Plex Sans',system-ui,sans-serif;--mono:'Iosevka',ui-monospace,monospace}
html,body{background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem}
.card{width:100%;max-width:400px;background:var(--surface);border:0.5px solid var(--border);border-radius:16px;padding:2.5rem}
.brand{font-family:var(--serif);font-size:22px;font-weight:500;letter-spacing:-0.5px}
.brand span{color:var(--green);font-size:13px}
.brand em{font-style:normal;color:var(--dim);font-size:16px}
h1{font-family:var(--serif);font-size:30px;font-weight:500;letter-spacing:-1px;margin-bottom:1.25rem}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:1rem;letter-spacing:0.2px}
input,select{display:block;width:100%;margin-top:6px;padding:11px 13px;background:var(--bg);color:var(--text);
border:0.5px solid var(--border-strong);border-radius:9px;font-family:var(--sans);font-size:14px}
input:focus,select:focus{outline:none;border-color:var(--green)}
input[readonly]{color:var(--muted);border-style:dashed}
button{font-family:var(--sans);font-size:14px;font-weight:500;padding:12px 22px;border:none;border-radius:100px;
background:var(--green);color:#061a12;cursor:pointer;margin-top:6px}
button.ghost,a.btn-secondary{background:transparent;color:var(--text);border:0.5px solid var(--border-strong);display:inline-block}
.btn-sm{padding:6px 14px;font-size:12px;margin-top:0}
button.link{background:none;border:none;color:var(--muted);font-size:13px;cursor:pointer;padding:0;margin:0}
button.link:hover{color:var(--text)}
.btn-danger{background:transparent;color:var(--red);border:0.5px solid #4a2018;padding:6px 12px;font-size:12px;border-radius:100px;cursor:pointer;margin:0}
.muted{color:var(--muted);font-size:14px;line-height:1.55;margin-bottom:0.75rem}
.muted b{color:var(--text);font-weight:500}.muted a{color:var(--green)}
.err{background:var(--red-bg);color:var(--red);border:0.5px solid #4a2018;border-radius:9px;padding:10px 13px;font-size:13px;margin-bottom:1.25rem}
.notice{background:var(--green-bg);color:var(--green);border:0.5px solid var(--green-dim);border-radius:9px;padding:10px 13px;font-size:13px;margin-bottom:1.25rem}

/* admin */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;border-bottom:0.5px solid var(--border);position:sticky;top:0;background:rgba(10,10,12,.85);backdrop-filter:blur(10px);z-index:10}
.topnav{display:flex;align-items:center;gap:1.5rem}
.topnav a{font-size:13px;color:var(--muted)}.topnav a:hover{color:var(--text)}
.topnav form{margin:0}
.admin{max-width:900px;margin:0 auto;padding:2.5rem 2rem}
.admin h2{font-family:var(--serif);font-size:20px;font-weight:500;margin:2rem 0 1rem;letter-spacing:-.3px}
table.admin-t{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:1rem}
table.admin-t th{text-align:left;padding:9px 10px;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--dim);border-bottom:0.5px solid var(--border)}
table.admin-t td{padding:10px;border-bottom:0.5px solid var(--border);color:var(--muted);vertical-align:middle}
table.admin-t td.mono{font-family:var(--mono);color:var(--text)}
.stat-row{display:flex;gap:12px;margin:1.5rem 0;flex-wrap:wrap}
.stat{flex:1;min-width:120px;background:var(--surface);border:0.5px solid var(--border);border-radius:12px;padding:1.1rem 1.25rem}
.stat .n{font-family:var(--serif);font-size:30px;font-weight:500;letter-spacing:-1px}
.stat .l{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--dim);margin-top:4px}
.form-inline{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;background:var(--surface);border:0.5px solid var(--border);border-radius:12px;padding:1.25rem;margin-bottom:1rem}
.form-inline label{margin:0;flex:1;min-width:140px}
.form-inline .btnwrap{display:flex;gap:8px;align-items:center}
.form-inline button{margin-top:0}
.pill{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:1px;padding:2px 9px;border-radius:100px;border:0.5px solid var(--border-strong);color:var(--dim);vertical-align:middle}
.pill.int{color:var(--green);border-color:var(--green-dim)}
a.editlink{color:var(--green);font-family:var(--mono);font-size:11px}
`

var tmpl = template.Must(template.New("").Parse(`
{{define "head"}}<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"><title>{{.Title}} · Spread</title><style>` + pageCSS + `</style></head><body><div class="wrap">{{end}}
{{define "foot"}}</div></body></html>{{end}}

{{define "ahead"}}<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"><title>{{.Title}} · Spread admin</title><style>` + pageCSS + `</style></head><body>
<div class="topbar">
  <div class="brand">Spread<span>●</span> <em>· admin</em></div>
  <nav class="topnav">
    <a href="/admin">Overview</a>
    <a href="/admin/catalog">Catalog</a>
    <a href="/admin/subscribers">Subscribers</a>
    <a href="/admin/boms">BOMs</a>
    <form method="post" action="/logout"><input type="hidden" name="csrf_token" value="{{.CSRF}}"><button class="link">Log out</button></form>
  </nav>
</div>
<main class="admin">{{end}}
{{define "afoot"}}</main></body></html>{{end}}

{{define "login"}}{{template "head" .}}
<div class="card">
  <div class="brand">Spread<span>●</span></div>
  <h1>Sign in</h1>
  {{if .Error}}<div class="err">{{.Error}}</div>{{end}}
  <form method="post" action="/login">
    <input type="hidden" name="csrf_token" value="{{.CSRF}}">
    <label>Email<input type="email" name="email" value="{{.Email}}" required autofocus></label>
    <label>Password<input type="password" name="password" required></label>
    <button type="submit">Sign in →</button>
  </form>
  <p class="muted" style="margin-top:1rem"><a href="/forgot">Forgot your password?</a></p>
</div>{{template "foot" .}}{{end}}

{{define "chead"}}<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"><title>{{.Title}} · Spread</title>
<style>` + pageCSS + `</style></head><body>
<div class="topbar">
  <div class="brand">Spread<span>●</span></div>
  <nav class="topnav">
    <a href="/app">Your BOMs</a>
    <a href="/">Public demo</a>
    <form method="post" action="/logout"><input type="hidden" name="csrf_token" value="{{.CSRF}}"><button class="link">Log out</button></form>
  </nav>
</div>
<main class="admin">{{end}}
{{define "cfoot"}}</main></body></html>{{end}}

{{define "app"}}{{template "chead" .}}
<h1>Your BOMs</h1>
{{if .Notice}}<div class="notice">{{.Notice}}</div>{{end}}
{{if .Error}}<div class="err">{{.Error}}</div>{{end}}
<form class="form-inline" method="post" action="/app/analyze" enctype="multipart/form-data">
  <input type="hidden" name="csrf_token" value="{{.CSRF}}">
  <label>Upload a BOM (.csv or .xlsx)<input type="file" name="bom" accept=".csv,.tsv,.txt,.xlsx" required></label>
  <div class="btnwrap"><button type="submit">Re-quote →</button></div>
</form>
<p class="muted">Signed in as <b>{{.User.Email}}</b> — <b>{{.Sub.Name}}</b>. Uploads are re-quoted against the live catalog and saved here.</p>
<table class="admin-t">
  <thead><tr><th>BOM</th><th>Uploaded</th><th>Parts</th><th>Total savings</th><th>Net</th><th></th></tr></thead>
  <tbody>
  {{range .BOMs}}
    <tr>
      <td class="mono">{{.Ref}}</td>
      <td>{{.CreatedAt}}</td>
      <td>{{.Lines}}</td>
      <td class="mono">{{printf "$%.2f" .TotalSavings}}</td>
      <td class="mono" style="color:var(--green)">{{printf "$%.2f" .NetSavings}}</td>
      <td style="text-align:right"><a class="editlink" href="/app/bom/{{.ID}}">view</a></td>
    </tr>
  {{else}}
    <tr><td colspan="6" style="color:var(--dim)">No BOMs yet — upload one above to see it re-quoted.</td></tr>
  {{end}}
  </tbody>
</table>
{{template "cfoot" .}}{{end}}

{{define "bom"}}{{template "chead" .}}
{{with .BOM}}
<p class="muted"><a href="{{$.BackURL}}">← back</a></p>
<h1>{{.Ref}}</h1>
<p class="muted">{{.SubscriberName}} · {{.CreatedAt}} · {{.Lines}} parts{{if .Filename}} · {{.Filename}}{{end}}</p>
<div class="stat-row">
  <div class="stat"><div class="n">{{printf "$%.2f" .TotalSavings}}</div><div class="l">Total savings</div></div>
  <div class="stat"><div class="n">{{printf "$%.2f" .OurCut}}</div><div class="l">Our cut (20%)</div></div>
  <div class="stat"><div class="n" style="color:var(--green)">{{printf "$%.2f" .NetSavings}}</div><div class="l">Net savings</div></div>
</div>
<table class="admin-t">
  <thead><tr><th>Part</th><th>Qty</th><th>Market</th><th>Spread price</th><th>You save</th></tr></thead>
  <tbody>
  {{range .Items}}
    <tr>
      <td>{{.Description}}<br><span class="mono" style="font-size:11px;color:var(--dim)">{{.PartNumber}}{{if not .Matched}} · est.{{end}}</span></td>
      <td class="mono">{{printf "%.0f" .Quantity}}</td>
      <td class="mono">{{printf "$%.4f" .UnitPrice}}</td>
      <td class="mono">{{printf "$%.4f" .SpreadPrice}}</td>
      <td class="mono" style="color:var(--green)">{{printf "$%.2f" .LineSaving}}</td>
    </tr>
  {{end}}
  </tbody>
</table>
{{end}}
{{template "cfoot" .}}{{end}}

{{define "boms"}}{{template "ahead" .}}
<h1>Uploaded BOMs</h1>
<table class="admin-t">
  <thead><tr><th>BOM</th><th>Subscriber</th><th>Uploaded by</th><th>When</th><th>Parts</th><th>Savings</th><th></th></tr></thead>
  <tbody>
  {{range .BOMs}}
    <tr>
      <td class="mono">{{.Ref}}</td>
      <td>{{.SubscriberName}}</td>
      <td class="mono">{{.UploadedByEmail}}</td>
      <td>{{.CreatedAt}}</td>
      <td>{{.Lines}}</td>
      <td class="mono">{{printf "$%.2f" .TotalSavings}}</td>
      <td style="text-align:right"><a class="editlink" href="/app/bom/{{.ID}}">view</a></td>
    </tr>
  {{else}}
    <tr><td colspan="7" style="color:var(--dim)">No BOMs uploaded yet.</td></tr>
  {{end}}
  </tbody>
</table>
{{template "afoot" .}}{{end}}

{{define "admin"}}{{template "ahead" .}}
<h1>Overview</h1>
<p class="muted">Signed in as <b>{{.User.Email}}</b> — <b>{{.Sub.Name}}</b>.</p>
<div class="stat-row">
  <div class="stat"><div class="n">{{.Counts.Catalog}}</div><div class="l">Catalog parts</div></div>
  <div class="stat"><div class="n">{{.Counts.Subs}}</div><div class="l">Subscribers</div></div>
  <div class="stat"><div class="n">{{.Counts.Users}}</div><div class="l">Users</div></div>
  <div class="stat"><div class="n">{{.Counts.Boms}}</div><div class="l">BOMs uploaded</div></div>
</div>
<p class="muted"><a href="/admin/catalog">Manage catalog →</a></p>
<p class="muted"><a href="/admin/subscribers">Manage subscribers &amp; users →</a></p>
<p class="muted"><a href="/admin/boms">Review uploaded BOMs →</a></p>
{{template "afoot" .}}{{end}}

{{define "catalog"}}{{template "ahead" .}}
<h1>Catalog</h1>
{{if .Notice}}<div class="notice">{{.Notice}}</div>{{end}}
{{if .Error}}<div class="err">{{.Error}}</div>{{end}}
<form class="form-inline" method="post" action="/admin/catalog">
  <input type="hidden" name="csrf_token" value="{{.CSRF}}">
  <label>Part number<input name="part_number" value="{{with .Edit}}{{.PartNumber}}{{end}}"{{if .Edit}} readonly{{end}} required></label>
  <label>Description<input name="description" value="{{with .Edit}}{{.Description}}{{end}}"></label>
  <label>Spread price<input name="spread_price" type="number" step="0.0001" min="0" value="{{with .Edit}}{{printf "%.4f" .SpreadPrice}}{{end}}" required></label>
  <div class="btnwrap">
    <button type="submit">{{if .Edit}}Update{{else}}Add part{{end}}</button>
    {{if .Edit}}<a class="btn-secondary btn-sm" href="/admin/catalog">Cancel</a>{{end}}
  </div>
</form>
<table class="admin-t">
  <thead><tr><th>Part number</th><th>Description</th><th>Spread price</th><th></th></tr></thead>
  <tbody>
  {{range .Catalog}}
    <tr>
      <td class="mono">{{.PartNumber}}</td>
      <td>{{.Description}}</td>
      <td class="mono">{{printf "$%.4f" .SpreadPrice}}</td>
      <td style="text-align:right;white-space:nowrap">
        <a class="editlink" href="/admin/catalog?edit={{.PartNumber}}">edit</a>
        <form method="post" action="/admin/catalog/delete" style="display:inline;margin-left:12px">
          <input type="hidden" name="csrf_token" value="{{$.CSRF}}">
          <input type="hidden" name="part_number" value="{{.PartNumber}}">
          <button class="btn-danger" type="submit">delete</button>
        </form>
      </td>
    </tr>
  {{else}}
    <tr><td colspan="4" style="color:var(--dim)">No catalog entries yet.</td></tr>
  {{end}}
  </tbody>
</table>
<form method="post" action="/admin/catalog/seed"><input type="hidden" name="csrf_token" value="{{.CSRF}}"><button class="btn-secondary btn-sm">{{if .Catalog}}Re-seed demo parts{{else}}Seed demo catalog{{end}}</button></form>
{{template "afoot" .}}{{end}}

{{define "subscribers"}}{{template "ahead" .}}
<h1>Subscribers &amp; users</h1>
{{if .Notice}}<div class="notice">{{.Notice}}</div>{{end}}
{{if .Error}}<div class="err">{{.Error}}</div>{{end}}

<h2>Add a subscriber</h2>
<form class="form-inline" method="post" action="/admin/subscribers">
  <input type="hidden" name="csrf_token" value="{{.CSRF}}">
  <label>Company / subscriber name<input name="name" required></label>
  <div class="btnwrap"><button type="submit">Create subscriber</button></div>
</form>

<h2>Add a user</h2>
<form class="form-inline" method="post" action="/admin/users">
  <input type="hidden" name="csrf_token" value="{{.CSRF}}">
  <label>Subscriber<select name="subscriber_id" required>{{range .Subs}}<option value="{{.ID}}">{{.Name}}{{if .IsInternal}} (internal){{end}}</option>{{end}}</select></label>
  <label>Email<input type="email" name="email" required></label>
  <label>Name<input name="name"></label>
  <label>Password <span style="color:var(--dim)">(blank = email an invite)</span><input type="password" name="password" minlength="8"></label>
  <div class="btnwrap"><button type="submit">Create user</button></div>
</form>

{{range .Subs}}
<h2>{{.Name}} {{if .IsInternal}}<span class="pill int">internal</span>{{else}}<span class="pill">customer</span>{{end}}</h2>
<table class="admin-t">
  <thead><tr><th>Email</th><th>Name</th><th>User ID</th></tr></thead>
  <tbody>
  {{range .Users}}<tr><td class="mono">{{.Email}}</td><td>{{.Name}}</td><td class="mono">{{.ID}}</td></tr>
  {{else}}<tr><td colspan="3" style="color:var(--dim)">No users yet.</td></tr>{{end}}
  </tbody>
</table>
{{end}}
{{template "afoot" .}}{{end}}

{{define "forgot"}}{{template "head" .}}
<div class="card">
  <div class="brand">Spread<span>●</span></div>
  <h1>Reset password</h1>
  {{if .Notice}}<div class="notice">{{.Notice}}</div>{{end}}
  <form method="post" action="/forgot">
    <input type="hidden" name="csrf_token" value="{{.CSRF}}">
    <label>Email<input type="email" name="email" required autofocus></label>
    <button type="submit">Send reset link →</button>
  </form>
  <p class="muted" style="margin-top:1rem"><a href="/login">Back to sign in</a></p>
</div>{{template "foot" .}}{{end}}

{{define "setpassword"}}{{template "head" .}}
<div class="card">
  <div class="brand">Spread<span>●</span></div>
  <h1>Set your password</h1>
  {{if .Error}}<div class="err">{{.Error}}</div>{{end}}
  <form method="post" action="/set-password">
    <input type="hidden" name="csrf_token" value="{{.CSRF}}">
    <input type="hidden" name="token" value="{{.Token}}">
    <label>New password<input type="password" name="password" required minlength="8" autofocus></label>
    <label>Confirm password<input type="password" name="confirm" required minlength="8"></label>
    <button type="submit">Set password →</button>
  </form>
</div>{{template "foot" .}}{{end}}

{{define "tokenerror"}}{{template "head" .}}
<div class="card">
  <div class="brand">Spread<span>●</span></div>
  <h1>Link expired</h1>
  <p class="muted">This link is invalid or has already been used. Ask an admin to re-send your invite, or <a href="/forgot">request a new reset link</a>.</p>
</div>{{template "foot" .}}{{end}}
`))