package gonexapp

import (
	_ "embed"
	"html/template"
)

//go:embed dialog.js
var dialogJS string

// DialogHTML is the Dialog markup and script for an ExApp page.
// App navigation includes it. A page the ExApp renders itself inserts the
// same fragment. The page then calls exappDialog.message, exappDialog.confirm,
// or exappDialog.prompt and waits for the user's choice.
func DialogHTML() template.HTML {
	return template.HTML(dialogStyle + dialogMarkup + "<script>" + dialogJS + "</script>")
}

const dialogStyle = `<style>
#exapp-dialog {
  border: none;
  padding: 0;
  background: transparent;
  max-width: calc(100% - 2rem);
}
#exapp-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
#exapp-dialog-panel {
  box-sizing: border-box;
  width: min(28rem, 100%);
  padding: 1.1rem 1.25rem 1rem;
  border-radius: var(--border-radius-element, 8px);
  border-top: 4px solid var(--color-primary-element, #00679e);
  background: var(--color-main-background, #fff);
  color: var(--color-main-text, #222);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}
#exapp-dialog[data-severity="warning"] #exapp-dialog-panel { border-top-color: var(--color-warning, #eca700); }
#exapp-dialog[data-severity="error"] #exapp-dialog-panel { border-top-color: var(--color-error, #e9322d); }
#exapp-dialog-heading { margin: 0 0 0.6rem; font-size: 1.15rem; }
#exapp-dialog-severity {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#exapp-dialog-message { margin: 0; white-space: pre-wrap; }
#exapp-dialog-value {
  box-sizing: border-box;
  width: 100%;
  margin-top: 0.8rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--color-border, #ccc);
  border-radius: var(--border-radius-element, 8px);
  background: var(--color-main-background, #fff);
  color: inherit;
  font: inherit;
}
#exapp-dialog-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.1rem; }
#exapp-dialog-actions button {
  min-height: var(--default-clickable-area, 34px);
  padding: 0 0.9rem;
  border: 1px solid var(--color-border, #ccc);
  border-radius: var(--border-radius-element, 8px);
  background: var(--color-main-background, #fff);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
#exapp-dialog-actions button#exapp-dialog-agree {
  border-color: transparent;
  background: var(--color-primary-element, #00679e);
  color: var(--color-primary-element-text, #fff);
}
#exapp-dialog-actions button#exapp-dialog-agree.destructive {
  background: var(--color-error, #ffe7e7);
  color: var(--color-error-text, #8a0000);
}
#exapp-dialog-actions button#exapp-dialog-agree:disabled { opacity: 0.45; cursor: default; }
</style>`

const dialogMarkup = `<dialog id="exapp-dialog" aria-modal="true">
  <div id="exapp-dialog-panel">
    <h2 id="exapp-dialog-heading" hidden></h2>
    <p id="exapp-dialog-severity" hidden></p>
    <p id="exapp-dialog-message"></p>
    <input id="exapp-dialog-value" hidden autocomplete="off">
    <div id="exapp-dialog-actions">
      <button type="button" id="exapp-dialog-cancel">Cancel</button>
      <button type="button" id="exapp-dialog-agree">OK</button>
    </div>
  </div>
</dialog>`