<script lang="ts" setup>
import AdminLayout from '@/Layouts/AdminLayout.vue'

interface AffiliateSettings {
  default_commission_type: string
  default_commission_rate: number
  default_recurring_commissions: boolean
  default_minimum_payout: number
  cookie_lifetime_days: number
  auto_approve: boolean
}

interface Props {
  settings: AffiliateSettings
}

defineOptions({ layout: AdminLayout })

const props = defineProps<Props>()
</script>

<template>
  <div>
    <div class="text-h4 font-weight-bold mb-2">
      Affiliate Settings
    </div>
    <div class="text-body-2 text-medium-emphasis mb-6">
      Configure default affiliate program settings
    </div>

    <VCard>
      <VCardText>
        <VRow>
          <VCol cols="12" md="6">
            <VTextField
              :model-value="settings.default_commission_rate"
              label="Default Commission Rate"
              variant="outlined"
              readonly
              :suffix="settings.default_commission_type === 'percentage' ? '%' : 'USD'"
              hint="Configured via AFFILIATE_COMMISSION_RATE environment variable"
              persistent-hint
            />
          </VCol>
          <VCol cols="12" md="6">
            <VTextField
              :model-value="settings.default_commission_type"
              label="Default Commission Type"
              variant="outlined"
              readonly
              class="text-capitalize"
              hint="Configured via AFFILIATE_COMMISSION_TYPE environment variable"
              persistent-hint
            />
          </VCol>
          <VCol cols="12" md="6">
            <VTextField
              :model-value="settings.default_minimum_payout"
              label="Minimum Payout Amount"
              variant="outlined"
              readonly
              prefix="$"
              hint="Configured via AFFILIATE_MINIMUM_PAYOUT environment variable"
              persistent-hint
            />
          </VCol>
          <VCol cols="12" md="6">
            <VTextField
              :model-value="settings.cookie_lifetime_days"
              label="Cookie Lifetime (Days)"
              variant="outlined"
              readonly
              suffix="days"
              hint="Configured via AFFILIATE_COOKIE_DAYS environment variable"
              persistent-hint
            />
          </VCol>
          <VCol cols="12" md="6">
            <VSwitch
              :model-value="settings.default_recurring_commissions"
              label="Recurring Commissions (Default)"
              readonly
              color="primary"
              hint="Configured via AFFILIATE_RECURRING_COMMISSIONS environment variable"
              persistent-hint
            />
          </VCol>
          <VCol cols="12" md="6">
            <VSwitch
              :model-value="settings.auto_approve"
              label="Auto-Approve Applications"
              readonly
              color="primary"
              hint="Configured via AFFILIATE_AUTO_APPROVE environment variable"
              persistent-hint
            />
          </VCol>
        </VRow>
      </VCardText>
    </VCard>

    <VAlert type="info" variant="tonal" class="mt-6">
      <VAlertTitle>Environment Configuration</VAlertTitle>
      These settings are configured via environment variables in your <code>.env</code> file. Update the values there and restart the application to apply changes.
    </VAlert>
  </div>
</template>
