<template>
  <div class="checkbox-test">
    <div class="checkbox-test__back">
      <router-link to="/" class="back-link"> ← Back to Dashboard </router-link>
    </div>

    <div class="checkbox-test__section">
      <h2>Single Select Checkbox</h2>
      <Checkbox
        v-model="selectedSingle"
        :options="options"
        label="Select a Color"
        labelPosition="left"
        labelWidth="100px"
        labelAlign="right"
        required
        @update:modelValue="handleSingleChange"
        error="This is an error"
      />
      <div v-if="selectedSingle.length" class="selection-info">
        Selected:
        {{
          Array.isArray(selectedSingle)
            ? getSelectedLabels(selectedSingle).join(', ')
            : getOptionLabel(selectedSingle)
        }}
      </div>
    </div>

    <div class="checkbox-test__section">
      <h2>Multiple Select Checkbox</h2>
      <Checkbox
        v-model="selectedMultiple"
        :options="options"
        label="Select Colors"
        :multiple="true"
        icon="paintbrush"
        @update:modelValue="handleMultipleChange"
        color="#aa0000"
      />
      <div v-if="selectedMultiple.length" class="selection-info">
        Selected: {{ getSelectedLabels(selectedMultiple).join(', ') }}
      </div>
    </div>

    <div class="checkbox-test__section">
      <h2>Checkbox with Disabled Options</h2>
      <Checkbox
        v-model="selectedWithDisabled"
        :options="optionsWithDisabled"
        label="Select with Disabled Options"
        @update:modelValue="handleDisabledChange"
      />
      <div v-if="selectedWithDisabled" class="selection-info">
        Selected: {{ getOptionLabel(selectedWithDisabled) }}
      </div>
    </div>

    <div class="checkbox-test__section">
      <h2>Disabled Checkbox</h2>
      <Checkbox
        v-model="selectedDisabled"
        :options="options"
        label="Disabled Checkbox"
        :disabled="true"
      />
    </div>

    <div class="checkbox-test__section">
      <h2>Custom Styled Checkbox</h2>
      <Checkbox
        v-model="selectedCustom"
        :options="options"
        label="Custom Style"
        color="#4a90e2"
        hoverColor="#357abd"
        activeColor="#2c5a8c"
        borderRadius="1rem"
        padding="0.75rem 1rem"
        @update:modelValue="handleCustomChange"
      />
      <div v-if="selectedCustom" class="selection-info">
        Selected: {{ getOptionLabel(selectedCustom) }}
      </div>
    </div>

    <div class="checkbox-test__section">
      <h2>Checkbox with Autosave</h2>
      <Checkbox
        v-model="selectedAutosave"
        :options="options"
        label="With Autosave"
        :autosave="handleAutosave"
        @update:modelValue="handleAutosaveChange"
      />
      <div v-if="selectedAutosave" class="selection-info">
        Selected: {{ getOptionLabel(selectedAutosave) }}
      </div>
    </div>

    <div class="checkbox-test__section">
      <h2>Minimal Presentation</h2>
      <Checkbox
        v-model="selectedMinimal"
        :options="options"
        label="Minimal Style"
        presentation="minimal"
        @update:modelValue="handleMinimalChange"
      />
      <div v-if="selectedMinimal" class="selection-info">
        Selected: {{ getOptionLabel(selectedMinimal) }}
      </div>
    </div>

    <div class="checkbox-test__section">
      <h2>Multi-Column Checkbox</h2>
      <Checkbox
        v-model="selectedMultiColumn"
        :options="options"
        label="Multi-Column Layout"
        :columns="3"
        :multiple="true"
        presentation="minimal"
        @update:modelValue="handleMultiColumnChange"
      />
      <div v-if="selectedMultiColumn" class="selection-info">
        Selected: {{ getSelectedLabels(selectedMultiColumn).join(', ') }}
      </div>
    </div>

    <div class="checkbox-test__section">
      <h2>Wrapped Labels</h2>
      <Checkbox
        v-model="selectedWrapped"
        :options="optionsWithLongLabels"
        label="Wrapped Labels"
        :multiple="true"
        :wrap="true"
        width="420px"
        @update:modelValue="handleWrappedChange"
      />
      <div v-if="selectedWrapped.length" class="selection-info">
        Selected: {{ getSelectedLabels(selectedWrapped).join(', ') }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { CheckboxOption } from '../types/checkbox'
import Checkbox from '@/components/Checkbox.vue'

const options: CheckboxOption[] = [
  { id: 'red', label: 'Red' },
  { id: 'blue', label: 'Blue' },
  { id: 'green', label: 'Green' },
  { id: 'yellow', label: 'Yellow' },
  { id: 'purple', label: 'Purple' },
]

const optionsWithDisabled: CheckboxOption[] = [
  { id: 'red', label: 'Red' },
  { id: 'blue', label: 'Blue', disabled: true },
  { id: 'green', label: 'Green' },
  { id: 'yellow', label: 'Yellow', disabled: true },
  { id: 'purple', label: 'Purple' },
]

const optionsWithLongLabels: CheckboxOption[] = [
  { id: 'feature-a', label: 'Enable advanced export settings for regulatory archive submissions' },
  {
    id: 'feature-b',
    label: 'Send detailed status updates with per-environment rollout diagnostics',
  },
  { id: 'feature-c', label: 'Include historical audit metadata in generated release reports' },
]

const selectedSingle = ref<string[]>(['red', 'yellow'])
const selectedMultiple = ref<string[]>(['red', 'yellow'])
const selectedCustom = ref('')
const selectedDisabled = ref('green')
const selectedWithDisabled = ref('')
const selectedAutosave = ref('')
const selectedMinimal = ref('')
const selectedMultiColumn = ref<string[]>(['red', 'yellow'])
const selectedWrapped = ref<string[]>(['feature-a'])

const getOptionLabel = (id: string) => {
  return options.find((option) => option.id === id)?.label || ''
}

const getSelectedLabels = (ids: string[]) => {
  return ids.map((id) => getOptionLabel(id)).filter(Boolean)
}

const handleSingleChange = (value: string | string[]) => {
  if (typeof value === 'string') {
    console.log('Single selection changed:', value)
  }
}

const handleMultipleChange = (value: string | string[]) => {
  if (Array.isArray(value)) {
    console.log('Multiple selection changed:', value)
  }
}

const handleCustomChange = (value: string | string[]) => {
  if (typeof value === 'string') {
    console.log('Custom selection changed:', value)
  }
}

const handleDisabledChange = (value: string | string[]) => {
  if (typeof value === 'string') {
    console.log('Selection with disabled options changed:', value)
  }
}

const handleAutosaveChange = (value: string | string[]) => {
  if (typeof value === 'string') {
    console.log('Autosave selection changed:', value)
  }
}

const handleAutosave = async (value: string | string[]) => {
  console.log('Autosaving:', value)
  // Simulate API call
  await new Promise((resolve) => setTimeout(resolve, 1000))
}

const handleMinimalChange = (value: string | string[]) => {
  if (typeof value === 'string') {
    console.log('Minimal selection changed:', value)
  }
}

const handleMultiColumnChange = (value: string | string[]) => {
  if (typeof value === 'string') {
    console.log('Multi-column selection changed:', value)
  }
}

const handleWrappedChange = (value: string | string[]) => {
  if (Array.isArray(value)) {
    console.log('Wrapped selection changed:', value)
  }
}
</script>

<style scoped>
.checkbox-test {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  margin-bottom: 5rem;
}

.checkbox-test__back {
  margin-bottom: 2rem;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #4a90e2;
  text-decoration: none;
  font-weight: 500;
}

.back-link:hover {
  color: #357abd;
}

.checkbox-test__section {
  margin-bottom: 3rem;
}

.checkbox-test__section h2 {
  margin-bottom: 1rem;
  color: #333;
  font-size: 1.5rem;
}

.selection-info {
  margin-top: 1rem;
  padding: 0.5rem;
  background-color: #f7fafc;
  border-radius: 4px;
  font-size: 0.9rem;
  color: #4a5568;
}
</style>
