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

// Nesting an object nests the schema -- each group becomes a collapsible
// branch in the toast's errorList below, for free.
const employeeForm = reactive({
  personalInformation: { firstName: '', lastName: '', email: '' },
  employmentDetails: { department: '', position: '', startDate: null },
  emergencyContact: { contactName: '', contactPhone: '' }
})

const employeeRules: RulesSchema = {
  personalInformation: {
    displayName: 'Personal Information',
    firstName: { required: true, displayName: 'First Name' },
    email: { required: true, email: true, displayName: 'Email Address' }
    // ... lastName
  },
  employmentDetails: { displayName: 'Employment Details', /* ... */ },
  emergencyContact: { displayName: 'Emergency Contact', /* ... */ }
}

const validator = useDataValidator()
const toast = useToast()

const saveEmployee = () => {
  if (validator.execute(employeeForm, employeeRules)) return save()

  // getErrorList() mirrors the error tree straight into the toast's
  // errorList shape -- no hand-authored array to keep in sync by hand.
  // Each leaf auto-scrolls to [data-validate-field="<path>"] on click,
  // e.g. data-validate-field="personalInformation.firstName".
  toast.danger('Click an item below to jump straight to the field.', {
    title: `Submission blocked — ${validator.errorCount.value} issues`,
    position: 'center',
    size: 'md',
    duration: 0,
    actionAlign: 'end',
    errorList: validator.getErrorList(),
    actions: [{ label: 'Review form', variant: 'solid', severity: 'danger', onClick: () => {} }]
  })
}

// confirm() centers itself, blocks dismissal, and returns a Promise
// that resolves to the clicked button's value -- no local open/loading refs needed.
// Icon defaults to a question mark since a confirm is always "you must decide" --
// severity is still yours to pick, it only changes the color, not the icon.
const confirmed = await toast.confirm<boolean>({
    title: 'Delete employee record?',
    message:
      "This permanently deletes Chrisjelo Vega's record, including employment history and documents. This can't be undone.",
    buttons: [
      { label: 'Cancel', value: false, severity: 'secondary', variant: 'text' },
      { label: 'Delete record', value: true, severity: 'danger', variant: 'solid' }
    ]
  })
  if (confirmed) toast.success('Employee record deleted.')

// "Save or discard?" is a decision, not a routine outcome -- confirm() is the
// right primitive here, not a warning() shorthand with a bolted-on action.
const shouldSave = await toast.confirm<boolean>({
    title: 'Unsaved changes',
    message: "You have unsaved changes on this employee's record. Save before leaving?",
    severity: 'warning',
    buttons: [
      { label: 'Discard', value: false, severity: 'secondary', variant: 'text' },
      { label: 'Save now', value: true, severity: 'warning', variant: 'solid' }
    ]
  })
  toast.success(shouldSave ? 'Employee record saved.' : 'Changes discarded.')

// Pass any native Javascript Promise
const save = axios.patch(`/api/employees/${id}`, payload)

toast.promise(save, {
  loading: 'Saving employee record...',
  success: 'Employee record saved.',
  error: 'Could not save the employee record.'
}, {
  variant: 'surface'
})

// Same running Employee Records scenario, one shorthand per outcome --
// each forwards to add() with its severity already applied.
toast.info('Chrisjelo Vega\'s status changed to "On Leave".', {
  title: 'Status updated'
})

toast.success('Employee record updated successfully.')

toast.warning("Chrisjelo Vega's probationary period ends in 3 days.", {
  title: 'Review due soon'
})

// error() is an alias for danger() -- same severity, same 6s default duration
toast.error('Scheduled maintenance begins in 15 minutes. Save any unsaved changes now.', {
  title: 'Server maintenance'
})

// success/error are optional -- omit both and the loading toast just
// closes on settle instead of flashing a result toast. Handy when your own
// UI (a Modal here) is what actually shows the result, not another toast.
const refreshedAt = await toast.promise(refreshEmployeeDirectory(), {
  loading: 'Refreshing employee directory...'
})

showRefreshModal.value = true

import { ref, markRaw, h } from 'vue'
import { InputText, Button } from '@midnight-owl/ui'

const noteText = ref('')
let toastId = ''

// Wrap in markRaw so the component itself isn't made reactive. componentProps
// flows in via v-bind, so the component reads call-site data as a real prop
// instead of closing over an outer variable.
const NoteForm = markRaw({
  props: { employeeName: { type: String, required: true } },
  setup(props) {
    const addNote = () => {
      if (!noteText.value) return
      toast.remove(toastId)
      toast.success(`Note added to ${props.employeeName}'s record.`)
    }

    return () => h('div', { class: 'mt-3 flex items-center gap-2' }, [
      h(InputText, {
        modelValue: noteText.value,
        'onUpdate:modelValue': (value) => (noteText.value = value ?? ''),
        onKeyup: (e) => { if (e.key === 'Enter') addNote() },
        placeholder: 'Approved for remote work...',
        iconStart: 'lucide:pencil-line',
        size: 'sm',
        class: 'flex-1'
      }),
      h(Button, { label: 'Add', size: 'sm', onClick: addNote })
    ])
  }
})

toastId = toast.surface("Leave an HR note on this record without leaving this page.", {
  title: 'Add a note',
  component: NoteForm,
  componentProps: { employeeName: 'Chrisjelo Vega' },
  duration: 0
})

// A caller-supplied id means remove()/update() can target this exact toast
// from anywhere, without having to plumb the id that add() would otherwise
// generate and return.
const SYNC_TOAST_ID = 'directory-sync-status'

toast.info('Directory sync is running in the background.', {
  id: SYNC_TOAST_ID,
  title: 'Background sync',
  duration: 0
})

// ...later, from a websocket handler, another button, anywhere:
toast.remove(SYNC_TOAST_ID)

// The toast-level onNavigate is the fallback for any errorList item that
// doesn't define its own onNavigate -- every item below has none, so every
// click falls through to this single handler.
toast.danger('...', {
  title: 'Sync conflicts detected',
  position: 'center',
  errorList: [
    { key: 'employeeId', label: 'Employee ID', messages: 'Already exists.', canNavigate: true },
    { key: 'startDate', label: 'Start Date', messages: 'Conflicts with a contract.', canNavigate: true }
  ],
  onNavigate: (err) => {
    // e.g. open the relevant record, route to it, or scroll a custom container
    router.push(`/employees/conflicts/${err.key}`)
  }
})

toast.info(`
    Unlock automated payroll runs, tax filing, and audit trails for your HR team.
    <div class="mt-2 overflow-hidden rounded-md border border-main/10">
      <div class="bg-gradient-to-br from-primary to-secondary p-2.5 text-white">
        <div class="... uppercase opacity-80">Limited-time offer</div>
        <div class="mt-0.5 font-bold">30% off Payroll Pro this week</div>
      </div>
    </div>
    <a href="#" class="mt-2 inline-block text-primary hover:underline">Claim the offer →</a>
  `, {
  title: 'Special offer <span class="...">New</span>',
  html: true,
  icon: 'lucide:megaphone'
})