<script setup lang="ts">
interface MagicLinkEmailProps {
  url?: string
  appName?: string
}

const props = withDefaults(defineProps<MagicLinkEmailProps>(), {
  url: '',
  appName: 'Harmonic SaaS'
})

// Create redirect URL that will attempt to open the app
// Extract the base URL from the verification URL
const baseUrl = props.url ? new URL(props.url).origin : 'https://harmonic-saas.vercel.app'
const appUrl = `${baseUrl}/auth/magic-link-redirect?url=${encodeURIComponent(props.url)}`
</script>

<template>
  <EHtml>
    <EHead />
    <EPreview>Sign in to {{ appName }}</EPreview>
    <EBody :style="{ backgroundColor: '#ffffff', fontFamily: 'ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' }">
      <EContainer :style="{ paddingLeft: '16px', paddingRight: '16px', margin: '0 auto', maxWidth: '600px' }">
        <ESection style="background-color: #fafafa; border-radius: 12px; padding: 32px; margin-bottom: 24px; border: 1px solid #e5e5e5;">
          <EHeading
            as="h1"
            style="color: #09090b; margin: 0 0 24px 0; font-size: 28px; font-weight: 700; letter-spacing: -0.025em;"
          >
            Sign in to {{ appName }}
          </EHeading>
          <EText style="margin: 0 0 16px 0; font-size: 16px; color: #52525b; line-height: 1.75;">
            Click the button below to sign in to your account:
          </EText>
          <ESection style="text-align: center; margin: 32px 0;">
            <EButton
              :href="url"
              style="background-color: #16a34a; color: #ffffff; padding: 12px 24px; text-decoration: none; border-radius: 8px; font-weight: 600; display: inline-block; font-size: 15px;"
            >
              Sign In (Web/Browser)
            </EButton>
          </ESection>
          <EText style="margin: 24px 0 16px 0; font-size: 14px; color: #71717a; font-weight: 600;">
            Using the mobile app?
          </EText>
          <ESection style="text-align: center; margin: 32px 0;">
            <EButton
              :href="appUrl"
              style="background-color: #f4f4f5; color: #18181b; padding: 12px 24px; text-decoration: none; border-radius: 8px; font-weight: 600; display: inline-block; font-size: 15px;"
            >
              Open in App
            </EButton>
          </ESection>
          <EText style="margin: 24px 0 0 0; font-size: 14px; color: #71717a;">
            Or copy and paste this link into your browser:
          </EText>
          <EText style="margin: 12px 0 0 0; font-size: 13px; color: #16a34a; word-break: break-all; font-family: ui-monospace, monospace;">
            {{ url }}
          </EText>
          <EText style="margin: 24px 0 0 0; font-size: 14px; color: #71717a;">
            This link will expire in 15 minutes.
          </EText>
        </ESection>
        <EText style="font-size: 13px; color: #a1a1aa; text-align: center; margin: 24px 0 0 0;">
          If you didn't request this email, you can safely ignore it.
        </EText>
      </EContainer>
    </EBody>
  </EHtml>
</template>
