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

defineOptions({ layout: AdminLayout })

interface Props {
  customer: User
}

const props = defineProps<Props>()

const form = useForm({
  name: props.customer.name,
  email: props.customer.email,
  phone: props.customer.phone ?? '',
  company: props.customer.company ?? '',
  status: props.customer.status,
  admin_notes: props.customer.admin_notes ?? '',
  override_days_to_suspend: props.customer.override_days_to_suspend ?? null,
  override_days_to_terminate: props.customer.override_days_to_terminate ?? null,
})

const statusOptions = [
  { title: 'Active', value: 'active' },
  { title: 'Suspended', value: 'suspended' },
  { title: 'Banned', value: 'banned' },
]

function submit(): void {
  form.put(`/customers/${props.customer.id}`)
}
</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="`/customers/${customer.id}`" class="text-decoration-none">
            <VBtn icon="tabler-arrow-left" variant="text" size="small" />
          </Link>
          <span class="text-h4 font-weight-bold">Edit Customer</span>
        </div>
        <div class="text-body-2 text-medium-emphasis ms-10">
          Update details for "{{ customer.name }}"
        </div>
      </div>
    </div>

    <form @submit.prevent="submit">
      <VRow>
        <!-- Customer Details -->
        <VCol cols="12" lg="8">
          <VCard title="Customer Details" class="mb-6">
            <VCardText>
              <VRow>
                <VCol cols="12" md="6">
                  <VTextField
                    v-model="form.name"
                    label="Name"
                    placeholder="Full name"
                    :error-messages="form.errors.name"
                  />
                </VCol>
                <VCol cols="12" md="6">
                  <VTextField
                    v-model="form.email"
                    label="Email"
                    type="email"
                    placeholder="email@example.com"
                    :error-messages="form.errors.email"
                  />
                </VCol>
                <VCol cols="12" md="6">
                  <VTextField
                    v-model="form.phone"
                    label="Phone"
                    placeholder="Phone number"
                    :error-messages="form.errors.phone"
                  />
                </VCol>
                <VCol cols="12" md="6">
                  <VTextField
                    v-model="form.company"
                    label="Company"
                    placeholder="Company name"
                    :error-messages="form.errors.company"
                  />
                </VCol>
                <VCol cols="12" md="6">
                  <VSelect
                    v-model="form.status"
                    label="Status"
                    :items="statusOptions"
                    :error-messages="form.errors.status"
                  />
                </VCol>
              </VRow>
            </VCardText>
          </VCard>

          <!-- Admin Notes -->
          <VCard title="Admin Notes" class="mb-6">
            <VCardText>
              <VTextarea
                v-model="form.admin_notes"
                label="Internal Notes"
                placeholder="Add internal notes about this customer (only visible to admins)..."
                rows="4"
                :error-messages="form.errors.admin_notes"
              />
              <div class="text-caption text-medium-emphasis mt-2">
                These notes are only visible to administrators and will not be shown to the customer.
              </div>
            </VCardText>
          </VCard>

          <!-- Lifecycle Overrides -->
          <VCard title="Lifecycle Overrides" class="mb-6">
            <VCardText>
              <VAlert type="info" variant="tonal" density="compact" class="mb-4">
                Override suspension/termination timings for this specific customer. Leave empty to use plan or global defaults.
              </VAlert>
              <VRow>
                <VCol cols="12" md="6">
                  <VTextField
                    v-model.number="form.override_days_to_suspend"
                    label="Override Days to Suspend"
                    type="number"
                    min="1"
                    placeholder="Use plan/global default"
                    hint="Customer-specific days past due before suspension"
                    persistent-hint
                    :error-messages="form.errors.override_days_to_suspend"
                  />
                </VCol>
                <VCol cols="12" md="6">
                  <VTextField
                    v-model.number="form.override_days_to_terminate"
                    label="Override Days to Terminate"
                    type="number"
                    min="1"
                    placeholder="Use plan/global default"
                    hint="Customer-specific days after suspension before termination"
                    persistent-hint
                    :error-messages="form.errors.override_days_to_terminate"
                  />
                </VCol>
              </VRow>
            </VCardText>
          </VCard>
        </VCol>

        <!-- Sidebar -->
        <VCol cols="12" lg="4">
          <!-- Actions -->
          <VCard>
            <VCardText>
              <VBtn
                type="submit"
                color="primary"
                block
                :loading="form.processing"
                :disabled="form.processing"
                prepend-icon="tabler-check"
                class="mb-3"
              >
                Save Changes
              </VBtn>
              <Link :href="`/customers/${customer.id}`" class="text-decoration-none">
                <VBtn
                  variant="outlined"
                  block
                >
                  Cancel
                </VBtn>
              </Link>
            </VCardText>
          </VCard>
        </VCol>
      </VRow>
    </form>
  </div>
</template>
