<script lang="ts" setup>
import { Link, useForm } from '@inertiajs/vue3'
import { computed } from 'vue'
import AdminLayout from '@/Layouts/AdminLayout.vue'

defineOptions({ layout: AdminLayout })

const countryOptions = [
  { title: 'United States (US)', value: 'US' },
  { title: 'United Kingdom (GB)', value: 'GB' },
  { title: 'Germany (DE)', value: 'DE' },
  { title: 'France (FR)', value: 'FR' },
  { title: 'Canada (CA)', value: 'CA' },
  { title: 'Australia (AU)', value: 'AU' },
  { title: 'Netherlands (NL)', value: 'NL' },
  { title: 'Sweden (SE)', value: 'SE' },
  { title: 'Japan (JP)', value: 'JP' },
  { title: 'Brazil (BR)', value: 'BR' },
  { title: 'Italy (IT)', value: 'IT' },
  { title: 'Spain (ES)', value: 'ES' },
  { title: 'Ireland (IE)', value: 'IE' },
  { title: 'New Zealand (NZ)', value: 'NZ' },
  { title: 'Singapore (SG)', value: 'SG' },
  { title: 'India (IN)', value: 'IN' },
  { title: 'Switzerland (CH)', value: 'CH' },
  { title: 'Austria (AT)', value: 'AT' },
  { title: 'Belgium (BE)', value: 'BE' },
  { title: 'Portugal (PT)', value: 'PT' },
  { title: 'Denmark (DK)', value: 'DK' },
  { title: 'Norway (NO)', value: 'NO' },
  { title: 'Finland (FI)', value: 'FI' },
  { title: 'Poland (PL)', value: 'PL' },
  { title: 'Czech Republic (CZ)', value: 'CZ' },
  { title: 'Mexico (MX)', value: 'MX' },
]

const typeOptions = [
  { title: 'Exclusive (added on top of price)', value: 'exclusive' },
  { title: 'Inclusive (included in price)', value: 'inclusive' },
]

const form = useForm({
  name: '',
  country_code: '' as string,
  region_code: '' as string,
  rate: '' as string | number,
  type: 'exclusive' as string,
  priority: 0,
  is_active: true,
})

const typeHint = computed<string>(() => {
  if (form.type === 'inclusive') {
    return 'Tax is already included in the displayed price.'
  }
  return 'Tax will be added on top of the displayed price at checkout.'
})

function submit(): void {
  form.post('/tax-rates', {
    preserveScroll: true,
  })
}
</script>

<template>
  <div>
    <!-- Header -->
    <div class="d-flex align-center justify-space-between mb-6">
      <div>
        <div class="d-flex align-center gap-2 mb-1">
          <Link href="/tax-rates" class="text-decoration-none">
            <VBtn icon="tabler-arrow-left" variant="text" size="small" />
          </Link>
          <span class="text-h4 font-weight-bold">Create Tax Rate</span>
        </div>
        <div class="text-body-2 text-medium-emphasis ms-10">
          Add a new tax rate for a country or region
        </div>
      </div>
    </div>

    <form @submit.prevent="submit">
      <VRow>
        <!-- Tax Rate Details -->
        <VCol cols="12" lg="8">
          <VCard title="Tax Rate Details" class="mb-6">
            <VCardText>
              <VRow>
                <VCol cols="12">
                  <VTextField
                    v-model="form.name"
                    label="Name"
                    placeholder="e.g. US Sales Tax - California, EU VAT - Germany"
                    :error-messages="form.errors.name"
                  />
                </VCol>
                <VCol cols="12" md="6">
                  <VSelect
                    v-model="form.country_code"
                    label="Country"
                    :items="countryOptions"
                    placeholder="Select a country"
                    :error-messages="form.errors.country_code"
                  />
                </VCol>
                <VCol cols="12" md="6">
                  <VTextField
                    v-model="form.region_code"
                    label="Region / State Code"
                    placeholder="e.g. CA, NY, ON (optional)"
                    :error-messages="form.errors.region_code"
                  />
                </VCol>
                <VCol cols="12" md="6">
                  <VTextField
                    v-model="form.rate"
                    label="Tax Rate (%)"
                    type="number"
                    step="0.01"
                    min="0"
                    max="100"
                    placeholder="e.g. 21.00"
                    :error-messages="form.errors.rate"
                  />
                </VCol>
                <VCol cols="12" md="6">
                  <VSelect
                    v-model="form.type"
                    label="Tax Type"
                    :items="typeOptions"
                    :error-messages="form.errors.type"
                  />
                  <p class="text-body-2 text-medium-emphasis mt-1">
                    {{ typeHint }}
                  </p>
                </VCol>
              </VRow>
            </VCardText>
          </VCard>
        </VCol>

        <!-- Sidebar -->
        <VCol cols="12" lg="4">
          <VCard title="Options" class="mb-6">
            <VCardText>
              <VTextField
                v-model="form.priority"
                label="Priority"
                type="number"
                min="0"
                placeholder="0"
                :error-messages="form.errors.priority"
                class="mb-4"
              />
              <p class="text-body-2 text-medium-emphasis mb-4">
                Higher priority tax rates are applied first when multiple rates match a location.
              </p>
              <VSwitch
                v-model="form.is_active"
                label="Active"
                color="primary"
                :error-messages="form.errors.is_active"
              />
            </VCardText>
          </VCard>

          <!-- Actions -->
          <VCard>
            <VCardText>
              <VBtn
                type="submit"
                color="primary"
                block
                :loading="form.processing"
                :disabled="form.processing"
                prepend-icon="tabler-check"
                class="mb-3"
              >
                Create Tax Rate
              </VBtn>
              <Link href="/tax-rates" class="text-decoration-none">
                <VBtn
                  variant="outlined"
                  block
                >
                  Cancel
                </VBtn>
              </Link>
            </VCardText>
          </VCard>
        </VCol>
      </VRow>
    </form>
  </div>
</template>
