<template>
    <!-- Component Testing Area -->
    <div class="text-center space-y-4">
        <h1 class="text-heading-lg text-white heading-serif">Titan Component Library</h1>
        <p class="text-body-md text-titan-gray-100 text-sans">Testing components in development</p>
    </div>

    <!-- Color Palette Preview -->
    <div class="bg-white rounded-card p-6 space-y-4">
        <h2 class="text-heading-sm text-titan-gray-800 heading-serif">Brand Colors</h2>

        <!-- Primary Colors (Green) -->
        <div class="space-y-3">
            <h3 class="text-body-md font-medium text-titan-gray-700 text-sans">Primary (Green)</h3>
            <div class="flex flex-wrap gap-2">
                <div class="flex flex-col items-center space-y-1">
                    <div class="w-16 h-16 rounded-lg bg-titan-green-700 shadow-sm border border-gray-200"></div>
                    <span class="text-caption text-titan-gray-600">700</span>
                </div>
                <div class="flex flex-col items-center space-y-1">
                    <div class="w-16 h-16 rounded-lg bg-titan-green-800 shadow-sm border border-gray-200"></div>
                    <span class="text-caption text-titan-gray-600">800 (Brand)</span>
                </div>
                <div class="flex flex-col items-center space-y-1">
                    <div class="w-16 h-16 rounded-lg bg-titan-green-900 shadow-sm border border-gray-200"></div>
                    <span class="text-caption text-titan-gray-600">900</span>
                </div>
            </div>
        </div>

        <!-- Secondary Colors (Yellow) -->
        <div class="space-y-3">
            <h3 class="text-body-md font-medium text-titan-gray-700 text-sans">Secondary (Yellow)</h3>
            <div class="flex flex-wrap gap-2">
                <div class="flex flex-col items-center space-y-1">
                    <div class="w-16 h-16 rounded-lg bg-titan-yellow-300 shadow-sm border border-gray-200"></div>
                    <span class="text-caption text-titan-gray-600">300</span>
                </div>
                <div class="flex flex-col items-center space-y-1">
                    <div class="w-16 h-16 rounded-lg bg-titan-yellow-400 shadow-sm border border-gray-200"></div>
                    <span class="text-caption text-titan-gray-600">400 (Brand)</span>
                </div>
                <div class="flex flex-col items-center space-y-1">
                    <div class="w-16 h-16 rounded-lg bg-titan-yellow-500 shadow-sm border border-gray-200"></div>
                    <span class="text-caption text-titan-gray-600">500</span>
                </div>
            </div>
        </div>

        <!-- Tertiary Colors (Purple) -->
        <div class="space-y-3">
            <h3 class="text-body-md font-medium text-titan-gray-700 text-sans">Tertiary (Purple)</h3>
            <div class="flex flex-wrap gap-2">
                <div class="flex flex-col items-center space-y-1">
                    <div class="w-16 h-16 rounded-lg bg-titan-purple-400 shadow-sm border border-gray-200"></div>
                    <span class="text-caption text-titan-gray-600">400</span>
                </div>
                <div class="flex flex-col items-center space-y-1">
                    <div class="w-16 h-16 rounded-lg bg-titan-purple-500 shadow-sm border border-gray-200"></div>
                    <span class="text-caption text-titan-gray-600">500 (Brand)</span>
                </div>
                <div class="flex flex-col items-center space-y-1">
                    <div class="w-16 h-16 rounded-lg bg-titan-purple-600 shadow-sm border border-gray-200"></div>
                    <span class="text-caption text-titan-gray-600">600</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Test Components Here -->
    <div class="space-y-4">
        <!-- Button Component Test -->
        <div class="bg-white rounded-card p-6 space-y-4">
            <h2 class="text-heading-sm text-titan-gray-800 heading-serif">Titan Button Components</h2>
            <div class="space-y-6">
                <!-- Default variant (LOOKS GOOD style) -->
                <div class="space-y-3">
                    <h3 class="text-body-sm font-medium text-titan-gray-600">Default Variant</h3>
                    <div class="flex justify-center border-t border-titan-gray-200 pt-4">
                        <TitanButton variant="default" @click="handleButtonClick" data-testid="titan-button-default"> LOOKS GOOD → </TitanButton>
                    </div>
                </div>

                <!-- Outline variant (USE ORIGINAL style) -->
                <div class="space-y-3">
                    <h3 class="text-body-sm font-medium text-titan-gray-600">Outline Variant</h3>
                    <div class="flex justify-center border-t border-titan-gray-200 pt-4">
                        <TitanButton variant="outline" @click="handleButtonClick" data-testid="titan-button-outline"> USE ORIGINAL → </TitanButton>
                    </div>
                </div>

                <!-- Custom content example -->
                <div class="space-y-3">
                    <h3 class="text-body-sm font-medium text-titan-gray-600">Custom Content</h3>
                    <div class="flex justify-center space-x-4 border-t border-titan-gray-200 pt-4">
                        <TitanButton variant="default" @click="handleButtonClick"> CONTINUE → </TitanButton>
                        <TitanButton variant="outline" @click="handleButtonClick"> CANCEL </TitanButton>
                    </div>
                </div>

                <!-- Disabled states -->
                <div class="space-y-3">
                    <h3 class="text-body-sm font-medium text-titan-gray-600">Disabled States</h3>
                    <div class="flex justify-center space-x-4 border-t border-titan-gray-200 pt-4">
                        <TitanButton variant="default" disabled data-testid="titan-button-disabled-default"> DISABLED → </TitanButton>
                        <TitanButton variant="outline" disabled data-testid="titan-button-disabled-outline"> DISABLED → </TitanButton>
                    </div>
                </div>
            </div>
        </div>

        <!-- TitanInput Component Test -->
        <div class="bg-white rounded-card p-6 space-y-4" data-testid="titan-input-form-section">
            <h2 class="text-heading-sm text-titan-gray-800 heading-serif">Titan Input Components</h2>
            <div class="space-y-6">
                <!-- Figma Design Examples -->
                <div class="space-y-4">
                    <h3 class="text-body-sm font-medium text-titan-gray-600">Figma Design Examples</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl border-t border-titan-gray-200 pt-4">
                        <div class="space-y-4">
                            <TitanInput
                                v-model="lovedOneName"
                                label="Your Loved One's Name"
                                name="loved-one-name"
                                data-testid="input-loved-one-name"
                                required
                            />

                            <TitanInput
                                v-model="funeralLocation"
                                label="Funeral Location"
                                name="funeral-location"
                                data-testid="input-funeral-location"
                            />
                        </div>
                    </div>
                </div>

                <!-- States Examples -->
                <div class="space-y-4">
                    <h3 class="text-body-sm font-medium text-titan-gray-600 border-t border-titan-gray-200 pt-4">Input States</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl border-t border-titan-gray-200 pt-4">
                        <!-- Error State -->
                        <TitanInput
                            v-model="errorField"
                            label="Field with Error"
                            error
                            errorMessage="This field is required"
                            data-testid="input-error-example"
                        />

                        <!-- Error with Value -->
                        <TitanInput
                            v-model="errorWithValue"
                            label="Error with Value"
                            error
                            errorMessage="Invalid format"
                            data-testid="input-error-with-value"
                        />

                        <!-- Disabled State -->
                        <TitanInput
                            v-model="disabledField"
                            label="Disabled Field"
                            disabled
                            data-testid="input-disabled"
                        />

                        <!-- Disabled with Value -->
                        <TitanInput
                            v-model="disabledWithValue"
                            label="Disabled with Value"
                            disabled
                            data-testid="input-disabled-with-value"
                        />

                        <!-- Required Field -->
                        <TitanInput
                            v-model="requiredField"
                            label="Required Field"
                            required
                            data-testid="input-required"
                        />

                        <!-- No Label Example -->
                        <TitanInput
                            v-model="noLabelField"
                            placeholder="No floating label"
                            data-testid="input-no-label"
                        />
                    </div>
                </div>

                <!-- Size Variants -->
                <div class="space-y-4">
                    <h3 class="text-body-sm font-medium text-titan-gray-600">Size Variants</h3>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-2xl border-t border-titan-gray-200 pt-4">
                        <TitanInput
                            v-model="smallSize"
                            label="Small Size"
                            size="sm"
                            data-testid="input-size-small"
                        />

                        <TitanInput
                            v-model="mediumSize"
                            label="Medium Size (Default)"
                            size="md"
                            data-testid="input-size-medium"
                        />

                        <TitanInput
                            v-model="largeSize"
                            label="Large Size"
                            size="lg"
                            data-testid="input-size-large"
                        />
                    </div>
                </div>

                <!-- Input Types -->
                <div class="space-y-4">
                    <h3 class="text-body-sm font-medium text-titan-gray-600">Input Types</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl border-t border-titan-gray-200 pt-4">
                        <TitanInput
                            v-model="emailField"
                            label="Email Address"
                            type="email"
                            data-testid="input-email"
                        />

                        <TitanInput
                            v-model="passwordField"
                            label="Password"
                            type="password"
                            data-testid="input-password"
                        />

                        <TitanInput
                            v-model="phoneField"
                            label="Phone Number"
                            type="tel"
                            data-testid="input-tel"
                        />

                        <TitanInput
                            v-model="numberField"
                            label="Number Field"
                            type="number"
                            data-testid="input-number"
                        />
                    </div>
                </div>

                <!-- Form Example -->
                <div class="space-y-4">
                    <h3 class="text-body-sm font-medium text-titan-gray-600">Complete Form Example</h3>
                    <form @submit.prevent="handleFormSubmit" class="space-y-6 max-w-md border-t border-titan-gray-200 pt-4">
                        <TitanInput
                            v-model="formData.name"
                            label="Full Name"
                            name="fullName"
                            required
                        />

                        <TitanInput
                            v-model="formData.email"
                            label="Email Address"
                            type="email"
                            name="email"
                            required
                        />

                        <TitanInput
                            v-model="formData.phone"
                            label="Phone Number"
                            type="tel"
                            name="phone"
                        />

                        <div class="pt-4">
                            <TitanButton type="submit">
                                SUBMIT FORM →
                            </TitanButton>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- TitanDatePicker Component Test -->
        <div class="bg-white rounded-card p-6 space-y-4" data-testid="titan-datepicker-form-section">
            <h2 class="text-heading-sm text-titan-gray-800 heading-serif">DatePicker Components</h2>
            <div class="space-y-6">
                <!-- Figma Design Examples -->
                <div class="space-y-4">
                    <h3 class="text-body-sm font-medium text-titan-gray-600">Figma Design Examples</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl border-t border-titan-gray-200 pt-4">
                        <div class="space-y-4">
                            <TitanDatePicker
                                v-model="dateOfBirth"
                                label="Date of birth"
                                name="date-of-birth"
                                data-testid="datepicker-default"
                                required
                            />

                            <TitanDatePicker
                                v-model="dateOfDeath"
                                label="Date of death"
                                name="date-of-death"
                                data-testid="datepicker-with-label"
                            />

                            <TitanDatePicker
                                v-model="funeralDate"
                                label="Funeral Date"
                                name="funeral-date"
                                data-testid="datepicker-with-value"
                            />
                        </div>
                    </div>
                </div>

                <!-- States Examples -->
                <div class="space-y-4">
                    <h3 class="text-body-sm font-medium text-titan-gray-600 border-t border-titan-gray-200 pt-4">DatePicker States</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl">
                        <!-- Error State -->
                        <TitanDatePicker
                            v-model="errorDateField"
                            label="Date with Error"
                            error
                            errorMessage="Please select a valid date"
                            data-testid="datepicker-error"
                        />

                        <!-- Disabled State -->
                        <TitanDatePicker
                            v-model="disabledDateField"
                            label="Disabled Date Field"
                            disabled
                            data-testid="datepicker-disabled"
                        />

                        <!-- Required Field -->
                        <TitanDatePicker
                            v-model="requiredDateField"
                            label="Required Date Field"
                            required
                            data-testid="datepicker-required"
                        />

                        <!-- With Constraints -->
                        <TitanDatePicker
                            v-model="constrainedDateField"
                            label="Date Range (2020-2024)"
                            min="2020-01-01"
                            max="2024-12-31"
                            data-testid="datepicker-constrained"
                        />
                    </div>
                </div>

                <!-- Size Variants -->
                <div class="space-y-4">
                    <h3 class="text-body-sm font-medium text-titan-gray-600">Size Variants</h3>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-2xl border-t border-titan-gray-200 pt-4">
                        <TitanDatePicker
                            v-model="smallDateSize"
                            label="Small Size"
                            size="sm"
                            data-testid="datepicker-small"
                        />

                        <TitanDatePicker
                            v-model="mediumDateSize"
                            label="Medium Size (Default)"
                            size="md"
                            data-testid="datepicker-medium"
                        />

                        <TitanDatePicker
                            v-model="largeDateSize"
                            label="Large Size"
                            size="lg"
                            data-testid="datepicker-large"
                        />
                    </div>
                </div>

                <!-- Form Example with DatePickers -->
                <div class="space-y-4">
                    <h3 class="text-body-sm font-medium text-titan-gray-600">Obituary Form Example</h3>
                    <form @submit.prevent="handleObituaryFormSubmit" class="space-y-6 max-w-md">
                        <TitanInput
                            v-model="obituaryFormData.name"
                            label="Your Loved One's Name"
                            name="loved-one-name"
                            required
                        />

                        <TitanDatePicker
                            v-model="obituaryFormData.birthDate"
                            label="Date of birth"
                            name="birth-date"
                            max="2024-12-31"
                            required
                        />

                        <TitanDatePicker
                            v-model="obituaryFormData.deathDate"
                            label="Date of death"
                            name="death-date"
                            :min="obituaryFormData.birthDate"
                            max="2024-12-31"
                            required
                        />

                        <TitanInput
                            v-model="obituaryFormData.location"
                            label="Funeral Location"
                            name="funeral-location"
                        />

                        <TitanDatePicker
                            v-model="obituaryFormData.funeralDate"
                            label="Funeral Date"
                            name="funeral-date"
                            :min="obituaryFormData.deathDate"
                        />

                        <div class="pt-4">
                            <TitanButton type="submit">
                                CONTINUE →
                            </TitanButton>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- TitanTextarea Component Test -->
        <div class="bg-white rounded-card p-6 space-y-4" data-testid="titan-textarea-form-section">
            <h2 class="text-heading-sm text-titan-gray-800 heading-serif">Textarea Components</h2>
            <div class="space-y-6">
                <!-- Figma Design Examples -->
                <div class="space-y-4">
                    <h3 class="text-body-sm font-medium text-titan-gray-600">Figma Design Examples</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl border-t border-titan-gray-200 pt-4">
                        <div class="space-y-4">
                            <TitanTextarea
                                v-model="otherDescription"
                                label="Other"
                                name="other-description"
                                data-testid="TitanTextarea-default"
                                placeholder="Please specify..."
                                :rows="4"
                            />

                            <TitanTextarea
                                v-model="additionalComments"
                                label="Additional Comments"
                                name="additional-comments"
                                data-testid="TitanTextarea-with-label"
                            />
                        </div>
                    </div>
                </div>

                <!-- States Examples -->
                <div class="space-y-4">
                    <h3 class="text-body-sm font-medium text-titan-gray-600 border-t border-titan-gray-200 pt-4">Textarea States</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl">
                        <!-- Error State -->
                        <TitanTextarea
                            v-model="errorTextareaField"
                            label="Textarea with Error"
                            error
                            errorMessage="This field is required"
                            data-testid="TitanTextarea-error"
                        />

                        <!-- Error with Value -->
                        <TitanTextarea
                            v-model="errorTextareaWithValue"
                            label="Error with Value"
                            error
                            errorMessage="Content is too short"
                            data-testid="TitanTextarea-error-with-value"
                        />

                        <!-- Disabled State -->
                        <TitanTextarea
                            v-model="disabledTextareaField"
                            label="Disabled Textarea"
                            disabled
                            data-testid="TitanTextarea-disabled"
                        />

                        <!-- Disabled with Value -->
                        <TitanTextarea
                            v-model="disabledTextareaWithValue"
                            label="Disabled with Value"
                            disabled
                            data-testid="TitanTextarea-disabled-with-value"
                        />

                        <!-- Required Field -->
                        <TitanTextarea
                            v-model="requiredTextareaField"
                            label="Required Textarea"
                            required
                            data-testid="TitanTextarea-required"
                        />

                        <!-- Readonly Field -->
                        <TitanTextarea
                            v-model="readonlyTextareaField"
                            label="Readonly Textarea"
                            readonly
                            data-testid="TitanTextarea-readonly"
                        />
                    </div>
                </div>

                <!-- Size Variants -->
                <div class="space-y-4">
                    <h3 class="text-body-sm font-medium text-titan-gray-600">Size Variants</h3>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-2xl border-t border-titan-gray-200 pt-4">
                        <TitanTextarea
                            v-model="smallTextareaSize"
                            label="Small Size"
                            size="sm"
                            :rows="3"
                            data-testid="TitanTextarea-small"
                        />

                        <TitanTextarea
                            v-model="mediumTextareaSize"
                            label="Medium Size (Default)"
                            size="md"
                            data-testid="TitanTextarea-medium"
                        />

                        <TitanTextarea
                            v-model="largeTextareaSize"
                            label="Large Size"
                            size="lg"
                            :rows="5"
                            data-testid="TitanTextarea-large"
                        />
                    </div>
                </div>

                <!-- Auto-resize and Content Length Examples -->
                <div class="space-y-4">
                    <h3 class="text-body-sm font-medium text-titan-gray-600">Auto-resize and Content Examples</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl">
                        <!-- Auto-resize -->
                        <TitanTextarea
                            v-model="autoResizeTextarea"
                            label="Auto-resize Textarea"
                            autoResize
                            data-testid="TitanTextarea-auto-resize"
                            placeholder="This textarea will auto-resize as you type..."
                        />

                        <!-- Short Content -->
                        <TitanTextarea
                            v-model="shortContentTextarea"
                            label="Short Content"
                            data-testid="TitanTextarea-short"
                        />

                        <!-- Long Content -->
                        <TitanTextarea
                            v-model="longContentTextarea"
                            label="Long Content"
                            :rows="6"
                            data-testid="TitanTextarea-long"
                        />

                        <!-- With Placeholder -->
                        <TitanTextarea
                            v-model="placeholderTextarea"
                            label="With Placeholder"
                            placeholder="Enter your detailed description here..."
                            data-testid="TitanTextarea-with-placeholder"
                        />
                    </div>
                </div>

                <!-- Character Limits -->
                <div class="space-y-4">
                    <h3 class="text-body-sm font-medium text-titan-gray-600">Character Limits</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl">
                        <TitanTextarea
                            v-model="limitedTextarea"
                            label="Character Limit (100)"
                            :maxlength="100"
                            data-testid="TitanTextarea-maxlength"
                        />

                        <TitanTextarea
                            v-model="minLengthTextarea"
                            label="Minimum Length (10)"
                            :minlength="10"
                            data-testid="TitanTextarea-minlength"
                        />
                    </div>
                </div>

                <!-- Form Example with Textarea -->
                <div class="space-y-4">
                    <h3 class="text-body-sm font-medium text-titan-gray-600">Obituary Form with Textarea</h3>
                    <form @submit.prevent="handleTextareaFormSubmit" class="space-y-6 max-w-md">
                        <TitanInput
                            v-model="textareaFormData.name"
                            label="Your Loved One's Name"
                            name="loved-one-name"
                            required
                        />

                        <TitanDatePicker
                            v-model="textareaFormData.birthDate"
                            label="Date of birth"
                            name="birth-date"
                            required
                        />

                        <TitanDatePicker
                            v-model="textareaFormData.deathDate"
                            label="Date of death"
                            name="death-date"
                            required
                        />

                        <TitanTextarea
                            v-model="textareaFormData.lifeStory"
                            label="Life Story"
                            name="life-story"
                            placeholder="Share memories and stories about your loved one..."
                            :rows="6"
                            required
                            data-testid="TitanTextarea-form-example"
                        />

                        <TitanTextarea
                            v-model="textareaFormData.survivedBy"
                            label="Survived By"
                            name="survived-by"
                            placeholder="List family members and loved ones..."
                            :rows="4"
                        />

                        <TitanTextarea
                            v-model="textareaFormData.specialInstructions"
                            label="Special Instructions"
                            name="special-instructions"
                            placeholder="Any special requests or instructions..."
                            :rows="3"
                        />

                        <div class="pt-4">
                            <TitanButton type="submit">
                                CONTINUE TO REVIEW →
                            </TitanButton>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- TitanSelect Component Test -->
        <div class="bg-white rounded-card p-6 space-y-4" data-testid="titan-select-form-section">
            <h2 class="text-heading-sm text-titan-gray-800 heading-serif">Select Components</h2>
            <div class="space-y-6">
                <!-- Figma Design Example - Multi-select -->
                <div class="space-y-4">
                    <h3 class="text-body-sm font-medium text-titan-gray-600">Figma Design - Multi-select</h3>
                    <div class="max-w-md space-y-4">
                        <TitanSelect
                            v-model="selectedRoles"
                            :options="roleOptions"
                            multiple
                            label="Thank you! Now do any of these apply to Robert?"
                            data-testid="TitanSelect-multi-default"
                        />

                        <!-- Conditional textarea like in Figma -->
                        <TitanTextarea
                            v-if="selectedRoles.includes('Other')"
                            v-model="otherRoleDescription"
                            label="Other"
                            name="other-role"
                            data-testid="TitanSelect-conditional-textarea"
                            placeholder="Please specify..."
                            :rows="4"
                        />
                    </div>
                </div>

                <!-- Single-select Example -->
                <div class="space-y-4">
                    <h3 class="text-body-sm font-medium text-titan-gray-600">Single-select Example</h3>
                    <div class="max-w-md">
                        <TitanSelect
                            v-model="selectedHobby"
                            :options="hobbyOptions"
                            label="What was their favorite hobby?"
                            data-testid="TitanSelect-single-default"
                        />
                    </div>
                </div>

                <!-- Object Options Example -->
                <div class="space-y-4">
                    <h3 class="text-body-sm font-medium text-titan-gray-600">Object Options (Label/Value)</h3>
                    <div class="max-w-md">
                        <TitanSelect
                            v-model="selectedService"
                            :options="serviceOptions"
                            label="Select a service branch"
                            data-testid="TitanSelect-object-options"
                        />
                    </div>
                </div>

                <!-- States Examples -->
                <div class="space-y-4">
                    <h3 class="text-body-sm font-medium text-titan-gray-600 border-t border-titan-gray-200 pt-4">Select States</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl">
                        <!-- Error State -->
                        <TitanSelect
                            v-model="errorSelectField"
                            :options="['Option 1', 'Option 2', 'Option 3']"
                            label="Select with Error"
                            error
                            errorMessage="Please select at least one option"
                            data-testid="TitanSelect-error"
                        />

                        <!-- Disabled State -->
                        <TitanSelect
                            v-model="disabledSelectField"
                            :options="['Disabled 1', 'Disabled 2']"
                            label="Disabled Select"
                            disabled
                            data-testid="TitanSelect-disabled"
                        />

                        <!-- Required Field -->
                        <TitanSelect
                            v-model="requiredSelectField"
                            :options="['Required 1', 'Required 2', 'Required 3']"
                            label="Required Select"
                            required
                            data-testid="TitanSelect-required"
                        />

                        <!-- With Disabled Options -->
                        <TitanSelect
                            v-model="partialDisabledField"
                            :options="disabledOptionsExample"
                            label="Some Options Disabled"
                            data-testid="TitanSelect-partial-disabled"
                        />
                    </div>
                </div>

                <!-- Multi-select Examples -->
                <div class="space-y-4">
                    <h3 class="text-body-sm font-medium text-titan-gray-600">Multi-select Variations</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl">
                        <!-- Pre-selected Multi-select -->
                        <TitanSelect
                            v-model="preselectedMulti"
                            :options="['Art', 'Music', 'Sports', 'Reading', 'Cooking']"
                            multiple
                            label="Hobbies (Pre-selected)"
                            data-testid="TitanSelect-preselected-multi"
                        />

                        <!-- Empty Multi-select -->
                        <TitanSelect
                            v-model="emptyMulti"
                            :options="['Travel', 'Photography', 'Gaming', 'Gardening']"
                            multiple
                            label="Interests (Empty)"
                            data-testid="TitanSelect-empty-multi"
                        />
                    </div>
                </div>

                <!-- Form Example with Select -->
                <div class="space-y-4">
                    <h3 class="text-body-sm font-medium text-titan-gray-600">Obituary Form with Select</h3>
                    <form @submit.prevent="handleSelectFormSubmit" class="space-y-6 max-w-md">
                        <TitanInput
                            v-model="selectFormData.name"
                            label="Your Loved One's Name"
                            name="loved-one-name"
                            required
                        />

                        <TitanSelect
                            v-model="selectFormData.roles"
                            :options="roleOptions"
                            multiple
                            label="Which of these roles apply?"
                            required
                            data-testid="TitanSelect-form-roles"
                        />

                        <TitanTextarea
                            v-if="selectFormData.roles.includes('Other')"
                            v-model="selectFormData.otherRoleDetails"
                            label="Please describe the role"
                            name="other-role-details"
                            placeholder="Tell us more..."
                            :rows="3"
                            required
                        />

                        <TitanSelect
                            v-model="selectFormData.serviceType"
                            :options="serviceOptions"
                            label="Service Type (Optional)"
                            data-testid="TitanSelect-form-service"
                        />

                        <div class="pt-4">
                            <TitanButton type="submit">
                                CONTINUE →
                            </TitanButton>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- TitanInfoPanel Component Test -->
        <div class="bg-white rounded-card p-6 space-y-6">
            <h2 class="text-heading-sm text-titan-gray-800 heading-serif">TitanInfoPanel Component</h2>

            <!-- Variant Examples -->
            <div class="space-y-4">
                <h3 class="text-body-sm font-medium text-titan-gray-600">Variants</h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- Default Variant -->
                    <TitanInfoPanel
                        title="Tips for a great photo"
                        :items="photoTips"
                        variant="default"
                        data-testid="info-panel-default"
                    />

                    <!-- Compact Variant -->
                    <TitanInfoPanel
                        title="Important Safeguards"
                        :items="safeguardTips"
                        variant="compact"
                        data-testid="info-panel-compact"
                    />

                    <!-- Transparent Variant -->
                    <TitanInfoPanel
                        title="Quick Reminder"
                        :items="shortTip"
                        variant="transparent"
                        data-testid="info-panel-transparent"
                    />
                </div>
            </div>

            <!-- With Title and Items -->
            <div class="space-y-4">
                <h3 class="text-body-sm font-medium text-titan-gray-600">With Title and Items</h3>
                <div class="max-w-md">
                    <TitanInfoPanel
                        title="Tips for a great photo"
                        :items="photoTips"
                        data-testid="info-panel-with-items"
                    />
                </div>
            </div>

            <!-- Title Only -->
            <div class="space-y-4">
                <h3 class="text-body-sm font-medium text-titan-gray-600">Title Only</h3>
                <div class="max-w-md">
                    <TitanInfoPanel
                        title="Custom Content Panel"
                        data-testid="info-panel-title-only"
                    >
                        <p class="text-titan-green-800 text-sm">You can add any custom content here using the default slot.</p>
                    </TitanInfoPanel>
                </div>
            </div>

            <!-- Items Only -->
            <div class="space-y-4">
                <h3 class="text-body-sm font-medium text-titan-gray-600">Items Only (No Title)</h3>
                <div class="max-w-md">
                    <TitanInfoPanel
                        :items="photoTips"
                        data-testid="info-panel-items-only"
                    />
                </div>
            </div>

            <!-- Content Length Variations -->
            <div class="space-y-4">
                <h3 class="text-body-sm font-medium text-titan-gray-600">Content Length Variations</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Short Content -->
                    <TitanInfoPanel
                        title="Quick Tip"
                        :items="shortTip"
                        data-testid="info-panel-short"
                    />

                    <!-- Long Content -->
                    <TitanInfoPanel
                        title="Detailed Guidelines"
                        :items="longTips"
                        data-testid="info-panel-long"
                    />
                </div>
            </div>

            <!-- In Context - File Upload Form Example -->
            <div class="space-y-4">
                <h3 class="text-body-sm font-medium text-titan-gray-600">In Context: Photo Upload Form</h3>
                <div class="max-w-md mx-auto space-y-4 p-6 bg-titan-gray-50 rounded-xl">
                    <h4 class="text-lg font-medium text-titan-green-800">Upload a photo of your loved one</h4>

                    <!-- Simulated file upload area -->
                    <div class="border-2 border-dashed border-titan-green-800 rounded-2xl p-8 text-center">
                        <p class="text-titan-green-800 mb-2">Drag photo here</p>
                        <p class="text-titan-green-800 mb-4">or</p>
                        <TitanButton variant="outline">SELECT FILE ⇧</TitanButton>
                    </div>

                    <!-- InfoPanel in context -->
                    <TitanInfoPanel
                        title="Tips for a great photo"
                        :items="photoTips"
                        data-testid="info-panel-in-context"
                    />
                </div>
            </div>
        </div>

        <!-- TitanImageUpload Component Test -->
        <div class="bg-white rounded-card p-6 space-y-6" data-testid="titan-image-upload-section">
            <h2 class="text-heading-sm text-titan-gray-800 heading-serif">Image Upload Component</h2>

            <!-- Basic Upload with Tips Panel -->
            <div class="space-y-4">
                <h3 class="text-body-sm font-medium text-titan-gray-600">Basic Upload with Tips Panel</h3>
                <div class="max-w-md mx-auto space-y-4">
                    <TitanImageUpload
                        v-model="uploadedFile"
                        data-testid="image-upload-basic"
                    />
                    <TitanInfoPanel
                        title="Tips for a great photo"
                        :items="photoTips"
                    />
                </div>
            </div>

            <!-- With Custom Text -->
            <div class="space-y-4">
                <h3 class="text-body-sm font-medium text-titan-gray-600">With Custom Text</h3>
                <div class="max-w-md mx-auto">
                    <TitanImageUpload
                        v-model="customTextFile"
                        label="Upload your portrait photo"
                        drag-text="DROP IMAGE HERE"
                        button-text="BROWSE FILES ⇧"
                        data-testid="image-upload-custom-text"
                    />
                </div>
            </div>

            <!-- With Validation -->
            <div class="space-y-4">
                <h3 class="text-body-sm font-medium text-titan-gray-600">With File Size Limit (2MB)</h3>
                <div class="max-w-md mx-auto">
                    <TitanImageUpload
                        v-model="validatedFile"
                        :max-size="2097152"
                        data-testid="image-upload-validated"
                    />
                </div>
            </div>

            <!-- With Preview (simulated) -->
            <div class="space-y-4">
                <h3 class="text-body-sm font-medium text-titan-gray-600">With Uploaded Image Preview</h3>
                <div class="max-w-md mx-auto">
                    <TitanImageUpload
                        v-model="previewFile"
                        data-testid="image-upload-with-preview"
                    />
                </div>
            </div>

            <!-- Error State -->
            <div class="space-y-4">
                <h3 class="text-body-sm font-medium text-titan-gray-600">Error State</h3>
                <div class="max-w-md mx-auto">
                    <TitanImageUpload
                        v-model="errorFile"
                        :error="true"
                        error-message="File size exceeds 5MB limit"
                        data-testid="image-upload-error"
                    />
                </div>
            </div>

            <!-- Disabled State -->
            <div class="space-y-4">
                <h3 class="text-body-sm font-medium text-titan-gray-600">Disabled State</h3>
                <div class="max-w-md mx-auto">
                    <TitanImageUpload
                        v-model="disabledFile"
                        :disabled="true"
                        data-testid="image-upload-disabled"
                    />
                </div>
            </div>

            <!-- Without Tips Panel -->
            <div class="space-y-4">
                <h3 class="text-body-sm font-medium text-titan-gray-600">Without Tips Panel</h3>
                <div class="max-w-md mx-auto">
                    <TitanImageUpload
                        v-model="noTipsFile"
                        data-testid="image-upload-no-tips"
                    />
                </div>
            </div>

            <!-- With Custom Tips via TitanInfoPanel -->
            <div class="space-y-4">
                <h3 class="text-body-sm font-medium text-titan-gray-600">With Custom Tips via TitanInfoPanel</h3>
                <div class="max-w-md mx-auto space-y-4">
                    <TitanImageUpload
                        v-model="customTipsFile"
                        data-testid="image-upload-custom-tips"
                    />
                    <TitanInfoPanel
                        title="Photo Guidelines"
                        :items="customImageTips"
                    />
                </div>
            </div>

            <!-- Form Integration Example -->
            <div class="space-y-4">
                <h3 class="text-body-sm font-medium text-titan-gray-600">Form Integration Example</h3>
                <form @submit.prevent="handleImageFormSubmit" class="space-y-6 max-w-md mx-auto p-6 bg-titan-gray-50 rounded-xl">
                    <TitanInput
                        v-model="imageFormData.name"
                        label="Your Loved One's Name"
                        name="loved-one-name"
                        required
                    />

                    <TitanImageUpload
                        v-model="imageFormData.photo"
                        label="Upload their portrait photo"
                        :max-size="5242880"
                        required
                        data-testid="image-upload-form"
                    />

                    <TitanTextarea
                        v-model="imageFormData.photoDescription"
                        label="Photo Description (Optional)"
                        name="photo-description"
                        placeholder="Tell us about this photo..."
                        :rows="3"
                    />

                    <div class="pt-4">
                        <TitanButton type="submit">
                            CONTINUE →
                        </TitanButton>
                    </div>
                </form>
            </div>

            <!-- File Upload Events Demo -->
            <div class="space-y-4">
                <h3 class="text-body-sm font-medium text-titan-gray-600">Event Handling Demo</h3>
                <div class="max-w-md mx-auto">
                    <TitanImageUpload
                        v-model="eventDemoFile"
                        @change="handleFileChange"
                        @error="handleFileError"
                        @remove="handleFileRemove"
                        data-testid="image-upload-events"
                    />
                    <div v-if="lastEvent" class="mt-4 p-3 bg-titan-green-50 rounded-lg">
                        <p class="text-sm text-titan-green-800">
                            <strong>Last Event:</strong> {{ lastEvent }}
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Add more component tests here -->
    </div>
</template>

<script setup lang="ts">
// This page serves as a testing ground for components during development
import { ref, reactive } from 'vue'
import TitanButton from '~/components/ui/TitanButton.vue'
import TitanInput from '~/components/ui/TitanInput.vue'
import TitanDatePicker from '~/components/ui/TitanDatePicker.vue'
import TitanTextarea from '~/components/ui/TitanTextarea.vue'
import TitanSelect from '~/components/ui/TitanSelect.vue'
import TitanInfoPanel from '~/components/ui/TitanInfoPanel.vue'
import TitanImageUpload from '~/components/ui/TitanImageUpload.vue'

// Button handlers
const handleButtonClick = (event: Event) => {
    console.log('Button clicked:', event)
}

// Input reactive data
const lovedOneName = ref('')
const funeralLocation = ref('')

// State examples
const errorField = ref('')
const errorWithValue = ref('Invalid Value')
const disabledField = ref('')
const disabledWithValue = ref('Cannot edit this')
const requiredField = ref('')
const noLabelField = ref('')

// Size variants
const smallSize = ref('')
const mediumSize = ref('')
const largeSize = ref('')

// Input types
const emailField = ref('')
const passwordField = ref('')
const phoneField = ref('')
const numberField = ref('')

// Form data
const formData = reactive({
    name: '',
    email: '',
    phone: ''
})

const handleFormSubmit = () => {
    console.log('Form submitted:', formData)
    // Add form validation logic here
    alert(`Form Data: ${JSON.stringify(formData, null, 2)}`)
}

// DatePicker reactive data
const dateOfBirth = ref('')
const dateOfDeath = ref('')
const funeralDate = ref('2023-12-25') // Pre-filled for visual testing

// DatePicker state examples
const errorDateField = ref('')
const disabledDateField = ref('2023-01-01')
const requiredDateField = ref('')
const constrainedDateField = ref('')

// DatePicker size variants
const smallDateSize = ref('')
const mediumDateSize = ref('')
const largeDateSize = ref('')

// Obituary form data
const obituaryFormData = reactive({
    name: '',
    birthDate: '',
    deathDate: '',
    location: '',
    funeralDate: ''
})

const handleObituaryFormSubmit = () => {
    console.log('Obituary form submitted:', obituaryFormData)
    // Add form validation logic here
    alert(`Obituary Form Data: ${JSON.stringify(obituaryFormData, null, 2)}`)
}

// Textarea reactive data
const otherDescription = ref('')
const additionalComments = ref('')

// Textarea state examples
const errorTextareaField = ref('')
const errorTextareaWithValue = ref('This is not enough content')
const disabledTextareaField = ref('')
const disabledTextareaWithValue = ref('This content cannot be edited')
const requiredTextareaField = ref('')
const readonlyTextareaField = ref('This content is read-only and provides information that cannot be changed.')

// Textarea size variants
const smallTextareaSize = ref('')
const mediumTextareaSize = ref('')
const largeTextareaSize = ref('')

// Auto-resize and content examples
const autoResizeTextarea = ref('')
const shortContentTextarea = ref('Short text')
const longContentTextarea = ref('This is a much longer piece of content that demonstrates how the textarea handles multiple lines of text. It includes several sentences to show the component\'s behavior with substantial content. This helps us test the visual appearance and functionality when users enter extended descriptions or detailed information.')
const placeholderTextarea = ref('')

// Character limit examples
const limitedTextarea = ref('')
const minLengthTextarea = ref('')

// Textarea form data
const textareaFormData = reactive({
    name: '',
    birthDate: '',
    deathDate: '',
    lifeStory: '',
    survivedBy: '',
    specialInstructions: ''
})

const handleTextareaFormSubmit = () => {
    console.log('Textarea form submitted:', textareaFormData)
    // Add form validation logic here
    alert(`Textarea Form Data: ${JSON.stringify(textareaFormData, null, 2)}`)
}

// Select component reactive data
const roleOptions = ['Father', 'Veteran', 'Musician', 'Outdoorsman', 'Police', 'EMS', 'Firefighter', 'Husband', 'Other']
const selectedRoles = ref<string[]>(['Father', 'Other'])
const otherRoleDescription = ref('')

const hobbyOptions = ['Reading', 'Fishing', 'Gardening', 'Traveling', 'Cooking']
const selectedHobby = ref('')

const serviceOptions = [
    { label: 'Army', value: 'army' },
    { label: 'Navy', value: 'navy' },
    { label: 'Air Force', value: 'air-force' },
    { label: 'Marines', value: 'marines' },
    { label: 'Coast Guard', value: 'coast-guard' }
]
const selectedService = ref('')

// Select state examples
const errorSelectField = ref('')
const disabledSelectField = ref('Disabled 1')
const requiredSelectField = ref('')
const partialDisabledField = ref('')
const disabledOptionsExample = [
    { label: 'Active Option 1', value: 'active-1' },
    { label: 'Disabled Option', value: 'disabled-1', disabled: true },
    { label: 'Active Option 2', value: 'active-2' },
    { label: 'Another Disabled', value: 'disabled-2', disabled: true }
]

// Multi-select variations
const preselectedMulti = ref(['Art', 'Music'])
const emptyMulti = ref<string[]>([])

// Select form data
const selectFormData = reactive({
    name: '',
    roles: [] as string[],
    otherRoleDetails: '',
    serviceType: ''
})

const handleSelectFormSubmit = () => {
    console.log('Select form submitted:', selectFormData)
    // Add form validation logic here
    alert(`Select Form Data: ${JSON.stringify(selectFormData, null, 2)}`)
}

// InfoPanel component examples
const photoTips = [
    'Use a high resolution image',
    'Make sure they\'re facing the camera',
    'Avoid hats, sunglasses, or other obstructions'
]

const safeguardTips = [
    'Keep valuable documents secure',
    'Store in a fireproof safe',
    'Maintain digital backups'
]

const shortTip = ['One simple tip']

const longTips = [
    'This is a longer tip that demonstrates how the component handles extended text content and wraps properly across multiple lines within the same bullet point',
    'Another detailed guideline with substantial information',
    'A third comprehensive tip with extensive details',
    'Fourth item continues the pattern',
    'Fifth and final detailed recommendation'
]

// ImageUpload component reactive data
const uploadedFile = ref<File | null>(null)
const customTextFile = ref<File | null>(null)
const validatedFile = ref<File | null>(null)
const previewFile = ref<File | null>(null)
const errorFile = ref<File | null>(null)
const disabledFile = ref<File | null>(null)
const noTipsFile = ref<File | null>(null)
const customTipsFile = ref<File | null>(null)
const eventDemoFile = ref<File | null>(null)
const lastEvent = ref('')

const customImageTips = [
    'Choose a recent, clear photo',
    'Ensure good lighting',
    'Photo should be in focus',
    'Landscape or portrait orientation works'
]

// Image form data
const imageFormData = reactive({
    name: '',
    photo: null as File | null,
    photoDescription: ''
})

const handleImageFormSubmit = () => {
    console.log('Image form submitted:', imageFormData)
    if (!imageFormData.photo) {
        alert('Please upload a photo')
        return
    }
    alert(`Image Form Data: Name: ${imageFormData.name}, Photo: ${imageFormData.photo.name}, Description: ${imageFormData.photoDescription}`)
}

// Event handlers for image upload demo
const handleFileChange = (file: File | null) => {
    lastEvent.value = `File changed: ${file ? file.name : 'null'}`
    console.log('File changed:', file)
}

const handleFileError = (error: string) => {
    lastEvent.value = `Error: ${error}`
    console.log('File error:', error)
}

const handleFileRemove = () => {
    lastEvent.value = 'File removed'
    console.log('File removed')
}
</script>

<style scoped>
/* Page-specific styles */
</style>
