<script setup lang="ts">
// Strict port of platform-flows.jsx `DomainSetupWizard` (lines 134-176) +
// step components 178-369. 6-step full-page route: Domain · Verify · Mail ·
// DKIM · DMARC · Done. Same step rail at the top, same DNS record rows and
// per-step copy.


const router = useRouter()

const step = ref(1)
const domain = ref('lyngby-biler.dk')
const policy = ref<'none' | 'quarantine' | 'reject'>('quarantine')
const steps = ['Domain', 'Verify', 'Mail', 'DKIM', 'DMARC', 'Done']

const dmarcValue = computed(() => `v=DMARC1; p=${policy.value}; rua=mailto:dmarc@${domain.value}; pct=100; adkim=s; aspf=s`)

const policyOptions = [
  { v: 'none' as const,       l: 'none · monitor only',      d: 'Reports failures but never blocks. Use only for the first 2 weeks while you confirm legitimate mail flows.' },
  { v: 'quarantine' as const, l: 'quarantine · recommended', d: 'Suspicious mail goes to spam. Catches almost all spoofing without breaking legitimate edge cases.' },
  { v: 'reject' as const,     l: 'reject · strictest',       d: "Suspicious mail is bounced. Use after you've been at quarantine for 30+ days with no surprises." },
]

function cancel() {
  router.push('/admin/domains')
}
function done() {
  router.push('/admin/domains')
}
</script>

<template>
  <div class="wizard">
    <div class="flow-head">
      <div class="row top">
        <div class="left">
          <button v-if="step > 1 && step < 6" class="back" @click="step--">
            <UiIcon name="chevLeft" :size="12" /> back
          </button>
          <Eyebrow>Add domain</Eyebrow>
        </div>
        <button class="cancel" @click="cancel">
          <UiIcon name="x" :size="14" /> cancel
        </button>
      </div>
      <div class="row title-row">
        <h1>{{ step < 6 ? 'Verify and configure your domain' : `${domain} is ready` }}</h1>
        <Mono dim>Step {{ step }} of 6</Mono>
      </div>
      <div class="rail">
        <div v-for="(s, i) in steps" :key="s" class="rail-cell">
          <div
            class="bar"
            :class="i + 1 < step ? 'done' : i + 1 === step ? 'active' : 'todo'"
          />
          <div class="rail-label">
            <Mono dim>0{{ i + 1 }}</Mono>
            <span :class="i + 1 === step ? 'is-active' : i + 1 < step ? 'is-done' : 'is-todo'">{{ s }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="body">
      <!-- Step 1: Domain -->
      <div v-if="step === 1" class="step1">
        <p class="lead">
          Enter the domain you'll use for mail and identity. You'll need to add a few DNS records to prove you own it and route mail correctly.
        </p>
        <label class="field">
          <Eyebrow>Domain</Eyebrow>
          <div class="input-wrap">
            <UiIcon name="globe" :size="14" stroke="var(--text-mute)" />
            <input v-model="domain" placeholder="acme.dk" />
          </div>
        </label>
        <div class="info-box">
          <Eyebrow>Need to know</Eyebrow>
          <div class="info-body">
            • DNS changes typically propagate in 5–30 minutes<br />
            • You'll need access to your domain's DNS provider (Cloudflare, GoDaddy, etc.)<br />
            • For Danish .dk domains, you'll work with <Mono>DK-Hostmaster</Mono> or your registrar
          </div>
        </div>
      </div>

      <!-- Step 2: Verify -->
      <div v-else-if="step === 2" class="step2">
        <p class="lead">
          Add this TXT record to <Mono>{{ domain }}</Mono>. We check every 30 seconds until it appears.
        </p>
        <div class="dns-rows">
          <div class="dns-row">
            <div><Mono dim>TYPE</Mono><div class="dns-val">TXT</div></div>
            <div><Mono dim>HOST</Mono><div class="dns-val">_dezky-verify.{{ domain }}</div></div>
            <div><Mono dim>VALUE</Mono><div class="dns-val dim">dezky-verify=8a3f9c2e-4b7d-4e1a-9c8f-2d6e1a3b5c7e</div></div>
            <div class="dns-right">
              <Badge tone="warn" dot>pending</Badge>
              <button class="copy-btn"><UiIcon name="copy" :size="11" stroke="var(--text-mute)" /> COPY</button>
            </div>
          </div>
        </div>
        <div class="banner warn">
          <UiIcon name="refresh" :size="14" stroke="var(--warn)" />
          <div class="banner-body">
            <div class="banner-title">Last check · 14:42:08 · still waiting</div>
            <div class="banner-text">
              We saw <Mono>NS · ns1.gratisdns.dk</Mono> but no TXT record at <Mono>_dezky-verify.{{ domain }}</Mono> yet. Add the record above and click verify, or wait — we'll check every 30 seconds.
            </div>
          </div>
          <UiButton size="sm" variant="primary">Verify now</UiButton>
        </div>
      </div>

      <!-- Step 3: Mail -->
      <div v-else-if="step === 3" class="step3">
        <p class="lead">
          Add these records so mail to <Mono>@{{ domain }}</Mono> reaches dezky and outgoing mail is trusted.
        </p>
        <Eyebrow style="display: block; margin-top: 20px; margin-bottom: 10px">MX · inbound</Eyebrow>
        <div class="dns-rows">
          <div class="dns-row">
            <div><Mono dim>TYPE</Mono><div class="dns-val">MX</div></div>
            <div><Mono dim>HOST</Mono><div class="dns-val">{{ domain }}</div></div>
            <div><Mono dim>VALUE</Mono><div class="dns-val dim">10 inbound.mx.dezky.com</div></div>
            <div class="dns-right"><Badge tone="ok" dot>verified</Badge></div>
          </div>
          <div class="dns-row">
            <div><Mono dim>TYPE</Mono><div class="dns-val">MX</div></div>
            <div><Mono dim>HOST</Mono><div class="dns-val">{{ domain }}</div></div>
            <div><Mono dim>VALUE</Mono><div class="dns-val dim">20 inbound-backup.mx.dezky.com</div></div>
            <div class="dns-right"><Badge tone="ok" dot>verified</Badge></div>
          </div>
        </div>
        <Eyebrow style="display: block; margin-top: 24px; margin-bottom: 10px">SPF · sender policy</Eyebrow>
        <div class="dns-rows">
          <div class="dns-row">
            <div><Mono dim>TYPE</Mono><div class="dns-val">TXT</div></div>
            <div><Mono dim>HOST</Mono><div class="dns-val">{{ domain }}</div></div>
            <div><Mono dim>VALUE</Mono><div class="dns-val dim">v=spf1 include:_spf.dezky.com -all</div></div>
            <div class="dns-right"><Badge tone="ok" dot>verified</Badge></div>
          </div>
        </div>
        <div class="banner ok">
          <UiIcon name="check" :size="14" stroke="var(--ok)" :stroke-width="2.5" />
          <div class="banner-body">
            <div class="banner-title">Mail routing verified</div>
            <div class="banner-text">All MX and SPF records resolve correctly. Test by sending mail to <Mono>postmaster@{{ domain }}</Mono>.</div>
          </div>
        </div>
      </div>

      <!-- Step 4: DKIM -->
      <div v-else-if="step === 4" class="step4">
        <p class="lead">
          DKIM signs every outgoing email so Gmail and Outlook trust it. Two records, then we'll rotate the keys for you automatically every 90 days.
        </p>
        <Eyebrow style="display: block; margin-top: 20px; margin-bottom: 10px">DKIM · selector 1</Eyebrow>
        <div class="dns-rows">
          <div class="dns-row">
            <div><Mono dim>TYPE</Mono><div class="dns-val">CNAME</div></div>
            <div><Mono dim>HOST</Mono><div class="dns-val">dezky1._domainkey.{{ domain }}</div></div>
            <div><Mono dim>VALUE</Mono><div class="dns-val dim">dezky1.dkim.dezky.com</div></div>
            <div class="dns-right"><Badge tone="ok" dot>verified</Badge></div>
          </div>
          <div class="dns-row">
            <div><Mono dim>TYPE</Mono><div class="dns-val">CNAME</div></div>
            <div><Mono dim>HOST</Mono><div class="dns-val">dezky2._domainkey.{{ domain }}</div></div>
            <div><Mono dim>VALUE</Mono><div class="dns-val dim">dezky2.dkim.dezky.com</div></div>
            <div class="dns-right"><Badge tone="ok" dot>verified</Badge></div>
          </div>
        </div>
        <div class="banner ok">
          <UiIcon name="check" :size="14" stroke="var(--ok)" :stroke-width="2.5" />
          <div class="banner-body">
            <div class="banner-title">DKIM is signing</div>
            <div class="banner-text">Selectors verified · key rotation enabled · next rotation 14 Aug 2026.</div>
          </div>
        </div>
      </div>

      <!-- Step 5: DMARC -->
      <div v-else-if="step === 5" class="step5">
        <p class="lead">
          DMARC tells receiving servers what to do with email that fails authentication. We strongly recommend at least <Mono>quarantine</Mono>.
        </p>
        <Eyebrow style="display: block; margin-top: 20px; margin-bottom: 10px">Choose policy</Eyebrow>
        <div class="policy-list">
          <label v-for="p in policyOptions" :key="p.v" :class="{ active: policy === p.v }">
            <span class="radio-dot"><span v-if="policy === p.v" /></span>
            <input type="radio" :value="p.v" v-model="policy" />
            <div>
              <div class="policy-label">{{ p.l }}</div>
              <div class="policy-d">{{ p.d }}</div>
            </div>
          </label>
        </div>
        <Eyebrow style="display: block; margin-top: 24px; margin-bottom: 10px">Add this record</Eyebrow>
        <div class="dns-rows">
          <div class="dns-row">
            <div><Mono dim>TYPE</Mono><div class="dns-val">TXT</div></div>
            <div><Mono dim>HOST</Mono><div class="dns-val">_dmarc.{{ domain }}</div></div>
            <div><Mono dim>VALUE</Mono><div class="dns-val dim">{{ dmarcValue }}</div></div>
            <div class="dns-right"><button class="copy-btn"><UiIcon name="copy" :size="11" stroke="var(--text-mute)" /> COPY</button></div>
          </div>
        </div>
      </div>

      <!-- Step 6: Done -->
      <div v-else class="step6">
        <div class="check-badge">
          <UiIcon name="check" :size="36" :stroke-width="2.5" />
        </div>
        <h2>{{ domain }} is connected.</h2>
        <p class="lead-center">
          Mail is routing. DKIM is signing. DMARC is enforcing. You can now invite users on this domain and they'll receive working email immediately.
        </p>
        <div class="summary-grid">
          <div v-for="k in ['MX', 'SPF', 'DKIM', 'DMARC']" :key="k" class="summary-cell">
            <Badge tone="ok" dot>verified</Badge>
            <Mono>{{ k }}</Mono>
          </div>
        </div>
      </div>
    </div>

    <div class="footer">
      <template v-if="step < 6">
        <UiButton variant="ghost" @click="cancel">Save and exit</UiButton>
        <div class="spacer" />
        <UiButton v-if="step === 5" variant="secondary" @click="step = 6">Skip DMARC for now</UiButton>
        <UiButton variant="primary" @click="step++">
          <template v-if="step === 5" #leading><UiIcon name="check" :size="13" /></template>
          {{ step === 1 ? 'Continue' : step === 5 ? 'Add DMARC & finish' : 'Verified · continue' }}
          <template v-if="step < 5" #trailing><UiIcon name="arrowRight" :size="13" /></template>
        </UiButton>
      </template>
      <template v-else>
        <div class="spacer" />
        <UiButton variant="secondary" @click="done">
          <template #leading><UiIcon name="users" :size="13" /></template>
          Invite users on this domain
        </UiButton>
        <UiButton variant="primary" @click="done">Back to domains</UiButton>
      </template>
    </div>
  </div>
</template>

<style scoped>
.wizard { display: flex; flex-direction: column; min-height: 100%; }

.flow-head { border-bottom: 1px solid var(--border); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.row.top { padding: 14px 32px; }
.row.title-row { padding: 0 32px 18px 32px; align-items: flex-end; }
.left { display: flex; align-items: center; gap: 14px; }
.back, .cancel {
  background: transparent;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-mute);
  font-size: 12px;
  cursor: pointer;
  font-family: var(--font-mono);
}
.cancel { padding: 6px; font-family: inherit; }
.row.title-row h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.05;
}
.rail { padding: 0 32px 18px 32px; display: flex; gap: 6px; }
.rail-cell { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.bar { height: 3px; border-radius: 2px; }
.bar.done { background: var(--text); }
.bar.active { background: var(--accent); }
.bar.todo { background: var(--border); }
.rail-label { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.is-active { font-weight: 600; color: var(--text); }
.is-done { color: var(--text); }
.is-todo { color: var(--text-mute); }

.body { flex: 1; padding: 24px 32px; max-width: 920px; margin: 0 auto; width: 100%; }
.lead { color: var(--text-dim); font-size: 14px; line-height: 1.6; margin-top: 0; }
.lead-center { color: var(--text-dim); font-size: 15px; line-height: 1.6; margin-top: 12px; max-width: 500px; margin-inline: auto; }

.field { display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
.input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.input-wrap input { flex: 1; border: none; outline: none; background: transparent; font-family: inherit; font-size: 13px; color: var(--text); }

.info-box {
  margin-top: 18px;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  max-width: 520px;
}
.info-body { margin-top: 10px; font-size: 13px; color: var(--text-dim); line-height: 1.65; }

.dns-rows { display: flex; flex-direction: column; gap: 8px; }
.dns-row {
  display: grid;
  grid-template-columns: 80px 220px 1fr 90px;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.dns-val { font-family: var(--font-mono); font-size: 13px; font-weight: 600; margin-top: 2px; }
.dns-val.dim { color: var(--text-dim); font-weight: 400; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dns-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.copy-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.banner {
  margin-top: 16px;
  padding: 14px;
  border-radius: 6px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.banner.warn { background: rgba(232, 154, 31, 0.06); border: 1px solid rgba(232, 154, 31, 0.24); border-left: 3px solid var(--warn); }
.banner.ok   { background: rgba(31, 138, 91, 0.06); border: 1px solid rgba(31, 138, 91, 0.24); border-left: 3px solid var(--ok); }
.banner-body { flex: 1; font-size: 13px; }
.banner-title { font-weight: 600; }
.banner-text { color: var(--text-dim); margin-top: 4px; line-height: 1.5; }

.policy-list { display: flex; flex-direction: column; gap: 8px; }
.policy-list label {
  display: flex;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  cursor: pointer;
}
.policy-list label.active { background: var(--bg); border-color: var(--text); }
.policy-list input { display: none; }
.radio-dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid var(--border-hi, var(--border));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.policy-list label.active .radio-dot { border-color: var(--text); }
.radio-dot span { width: 7px; height: 7px; border-radius: 999px; background: var(--text); }
.policy-label { font-size: 13px; font-weight: 600; }
.policy-d { font-size: 12px; color: var(--text-mute); margin-top: 4px; line-height: 1.5; }

.step6 { max-width: 680px; text-align: center; padding: 60px 0; margin: 0 auto; }
.check-badge {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: var(--accent);
  color: var(--accent-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.step6 h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 36px;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.05;
}
.summary-grid {
  display: inline-grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 36px;
  padding: 16px 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: left;
}
.summary-cell { display: flex; align-items: center; gap: 6px; }

.footer {
  border-top: 1px solid var(--border);
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  position: sticky;
  bottom: 0;
}
.spacer { flex: 1; }
</style>
