import { useDataValidator, type RulesSchema } from '@midnight-owl/use-data-validator'

const schedule = reactive({
  vesselName: '',
  voyageNumber: '',
  operator: { name: '', scacCode: '' },
  ports: [{ code: '', name: '', type: '', customsCode: '' }]
})

const scheduleRules: RulesSchema = {
  vesselName: { required: true, minChar: 3, displayName: 'Vessel name' },
  voyageNumber: { required: true, alphanumeric: true, displayName: 'Voyage number' },
  operator: {
    // Nesting an object nests the schema — displayName labels the group
    displayName: 'Operator',
    name: { required: true, displayName: 'Operator name' },
    scacCode: { required: true, alpha: true, minChar: 4, maxChar: 4, displayName: 'SCAC code' }
  },
  ports: {
    displayName: 'Ports',
    required: true,
    type: 'array',
    minLength: 2,
    // each = per-item rules. A function of (item, index) makes them
    // conditional — customs code only exists for international ports.
    each: (item) => {
      const rules: RulesSchema = {
        code: { required: true, minChar: 5, maxChar: 5, unique: true },
        name: { required: true },
        type: { required: true, oneOf: ['DOMESTIC', 'INTERNATIONAL'] }
      }
      if (item.type === 'INTERNATIONAL') {
        rules.customsCode = { required: true, alphanumeric: true }
      }
      return rules
    }
  }
}

const validator = useDataValidator()

<!-- Per-<td> inputs: validate the one cell on both input and blur, so
     the error updates live instead of hiding until the field loses focus.
     Paths use dot + [index] notation however deep the field sits. -->
<Table :records="schedule.ports" :columns="portColumns">
  <template #cell-code="{ index }">
    <InputText
      v-model="schedule.ports[index].code"
      size="sm"
      :data-validate-field="`ports[${index}].code`"
      :error="validator.getFieldError(`ports[${index}].code`)"
      @update:model-value="validator.validateField(`ports[${index}].code`, schedule, scheduleRules)"
      @blur="validator.validateField(`ports[${index}].code`, schedule, scheduleRules)"
    />
  </template>
</Table>

<!-- unique: true re-checks the WHOLE column on every cell validation, so
     fixing a duplicate in row 2 also clears the mirror error in row 1. -->

import { useDataValidator, type RulesSchema } from '@midnight-owl/use-data-validator'

const account = reactive({ email: '', password: '', confirm: '' })

const accountRules: RulesSchema = {
  email: { required: true, email: true },
  password: {
    required: true,
    minChar: 8,
    regex: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/,
    messages: {
      regex: 'Password needs an uppercase letter, a lowercase letter, and a number.'
    }
  },
  confirm: { required: true, sameAs: 'password', displayName: 'confirmation' }
}

const { execute, validateField, getFieldError } = useDataValidator()

// Same trigger convention on every form in this app: validate on input AND
// on blur (both call the same field, so the error tracks every keystroke
// instead of hiding until the field loses focus), and a final execute() as
// the real submit-time gate.
const validateAccountField = (field) => validateField(field, account, accountRules)

const submit = () => {
  if (!execute(account, accountRules)) return // errors tree is now populated
  // ... send the payload
}

<InputText
  v-model="account.email"
  label="Email"
  :error="getFieldError('email')"
  @update:model-value="validateAccountField('email')"
  @blur="validateAccountField('email')"
/>
<InputPassword
  v-model="account.password"
  label="Password"
  :error="getFieldError('password')"
  @update:model-value="validateAccountField('password')"
  @blur="validateAccountField('password')"
/>

// Validate one field without touching any other field's errors — wire the
// same call to both @update:model-value and @blur so the error tracks every
// keystroke instead of hiding until the field loses focus. data/rules are
// remembered from the last call, so subsequent calls only need the path.
validateField('email', form, rules)
validateField('operator.scacCode')      // nested object
validateField('ports[2].code')          // array item — also re-checks unique

// clearFieldError is for clearing a DIFFERENT field's now-stale error —
// e.g. switching a port's type away from INTERNATIONAL removes the
// customsCode rule, so its old error has to be cleared by hand since
// validateField('customsCode') would find no rule left to run.
clearFieldError('ports[2].customsCode')

// Read state anywhere (all read-only, safe in templates):
getFieldError('email')                  // first message or ''
getFieldErrors('email')                 // every message
getFieldStyle('ports[2].code')          // { border: '1px solid #ef4444', ... } while invalid
isValid.value                           // whole-payload flag
errorCount.value                        // total message count

import { useToast } from '@midnight-owl/ui'

const toast = useToast()

const submit = () => {
  if (validator.execute(schedule, scheduleRules)) return save()

  // getErrorList() mirrors the error tree as { label, messages, children,
  // onNavigate } items — exactly the shape the toast's errorList renders.
  toast.danger('Click an item below to jump straight to the field.', {
    title: 'Submission blocked',
    position: 'center',
    size: 'md',
    duration: 0,
    errorList: validator.getErrorList()
  })
}

<!-- Navigation targets: mark inputs with data-validate-field="<path>"
     (or id="<path>") and clicking the toast item scrolls to + focuses it. -->
<InputText v-model="schedule.vesselName" data-validate-field="vesselName" />
<InputText
  v-model="schedule.ports[index].code"
  :data-validate-field="`ports[${index}].code`"
/>

<!-- Take over navigation yourself (e.g. switch to the right tab first): -->
toast.danger('...', {
  errorList: validator.getErrorList({
    onNavigate: (path) => {
      activeTab.value = path.startsWith('operator.') ? 'operator' : 'schedule'
      nextTick(() => focusValidatedField(path))
    }
  })
})

const validator = useDataValidator({
  // Extra validators, addressed from rule sets by their key
  validators: {
    phPhone: (value) => /^09\d{9}$/.test(String(value))
  },
  // Global default-message overrides, keyed by rule name
  messages: {
    phPhone: (field) => `The ${field} must be a valid PH mobile number.`,
    required: (field) => `${field} is required.`
  },
  // Replace the default red border applied via getFieldStyle()
  errorStyle: { outline: '2px solid #f97316' }
})

validator.execute(form, {
  mobile: { required: true, phPhone: true },

  // Per-field escape hatch: return true, or an error string (or false)
  coupon: {
    custom: (value, { data }) =>
      data.total > 100 || value === '' ? true : 'Coupons only apply to orders over $100.'
  },

  // Per-field message overrides beat both defaults and global overrides
  username: {
    required: true,
    minChar: 3,
    messages: { minChar: 'Pick a longer username (3+ characters).' }
  }
})