<script lang="ts" setup>
import { Link, useForm } from '@inertiajs/vue3'
import AdminLayout from '@/Layouts/AdminLayout.vue'
import ConfigOptionBuilder from '@/Components/Admin/ConfigOptionBuilder.vue'
import type { PlanConfigOption } from '@/types'

interface PlanItem {
  id: number
  name: string
  service_type: string
  status: string
}

interface Props {
  plans: PlanItem[]
}

defineOptions({ layout: AdminLayout })

const props = defineProps<Props>()

const serviceTypeOptions = [
  { title: 'VPS', value: 'vps' },
  { title: 'Dedicated', value: 'dedicated' },
  { title: 'Hosting', value: 'hosting' },
  { title: 'MySQL', value: 'mysql' },
  { title: 'Game Server', value: 'game' },
  { title: 'Backups', value: 'backups' },
]

const modeOptions = [
  { title: 'Preset (attach to specific plans)', value: 'preset' },
  { title: 'Build Your Own (by service type)', value: 'build_your_own' },
]

const planSelectItems = props.plans.map(p => ({
  title: `${p.name} (${p.service_type})`,
  value: p.id,
}))

const form = useForm({
  name: '',
  description: '',
  mode: 'preset' as 'preset' | 'build_your_own',
  service_type: '' as string,
  is_active: true,
  plan_ids: [] as number[],
  options: [] as Partial<PlanConfigOption>[],
})

function submit(): void {
  form.post('/config-groups', {
    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="/config-groups" class="text-decoration-none">
            <VBtn icon="tabler-arrow-left" variant="text" size="small" />
          </Link>
          <span class="text-h4 font-weight-bold">Create Config Group</span>
        </div>
        <div class="text-body-2 text-medium-emphasis ms-10">
          Add a new configurable option group
        </div>
      </div>
    </div>

    <form @submit.prevent="submit">
      <VRow>
        <!-- Main content -->
        <VCol cols="12" lg="8">
          <!-- Group Details -->
          <VCard title="Group Details" class="mb-6">
            <VCardText>
              <VRow>
                <VCol cols="12" md="6">
                  <VTextField
                    v-model="form.name"
                    label="Group Name"
                    placeholder="e.g. VPS RAM Options"
                    :error-messages="form.errors.name"
                  />
                </VCol>
                <VCol cols="12" md="6">
                  <VSelect
                    v-model="form.mode"
                    label="Mode"
                    :items="modeOptions"
                    :error-messages="form.errors.mode"
                  />
                </VCol>
                <VCol cols="12">
                  <VTextarea
                    v-model="form.description"
                    label="Description"
                    placeholder="Brief description of this config group..."
                    rows="2"
                    :error-messages="form.errors.description"
                  />
                </VCol>
              </VRow>
            </VCardText>
          </VCard>

          <!-- Mode-specific fields -->
          <VCard v-if="form.mode === 'build_your_own'" title="Service Type" class="mb-6">
            <VCardText>
              <VAlert type="info" variant="tonal" density="compact" class="mb-4">
                Build Your Own groups are shown to customers configuring a custom server for the selected service type.
              </VAlert>
              <VSelect
                v-model="form.service_type"
                label="Service Type"
                :items="serviceTypeOptions"
                placeholder="Select service type"
                :error-messages="form.errors.service_type"
              />
            </VCardText>
          </VCard>

          <VCard v-if="form.mode === 'preset'" title="Plan Assignment" class="mb-6">
            <VCardText>
              <VAlert type="info" variant="tonal" density="compact" class="mb-4">
                Preset groups are attached to specific plans and shown during checkout.
              </VAlert>
              <VSelect
                v-model="form.plan_ids"
                label="Plans"
                :items="planSelectItems"
                multiple
                chips
                closable-chips
                placeholder="Select plans..."
                :error-messages="form.errors.plan_ids"
              />
            </VCardText>
          </VCard>

          <!-- Options -->
          <VCard title="Options" class="mb-6">
            <VCardText>
              <ConfigOptionBuilder
                v-model="form.options"
                :mode="form.mode"
              />
              <div v-if="form.errors.options" class="text-error text-caption mt-2">
                {{ form.errors.options }}
              </div>
            </VCardText>
          </VCard>
        </VCol>

        <!-- Sidebar -->
        <VCol cols="12" lg="4">
          <VCard title="Status" class="mb-6">
            <VCardText>
              <VSwitch
                v-model="form.is_active"
                label="Active"
                hint="Inactive groups are hidden from customers"
                persistent-hint
              />
            </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 Config Group
              </VBtn>
              <Link href="/config-groups" class="text-decoration-none">
                <VBtn
                  variant="outlined"
                  block
                >
                  Cancel
                </VBtn>
              </Link>
            </VCardText>
          </VCard>
        </VCol>
      </VRow>
    </form>
  </div>
</template>
