<template>
    <div class="row g-3">
        <!-- Group Name -->
        <div class="col-md-12">
            <label class="form-label fw-bold">Group Name <span class="text-danger">*</span></label>
            <input
                type="text"
                class="form-control"
                v-model="formObject.name"
                placeholder="e.g. VIP Customers, Employees, Marketing Leads"
                v-validate="'required'"
                name="name"
                @input="syncGroupName"
            />
        </div>

        <!-- Description -->
        <div class="col-md-12">
            <label class="form-label fw-bold">Description <span class="text-muted small">(Optional)</span></label>
            <textarea
                class="form-control"
                v-model="formObject.description"
                placeholder="Brief notes about this contact group..."
                rows="2"
            ></textarea>
        </div>

        <!-- Color Tag Selector -->
        <div class="col-md-12">
            <label class="form-label fw-bold d-block">Group Color Tag</label>
            <div class="d-flex align-items-center gap-2 flex-wrap mb-2">
                <button
                    type="button"
                    v-for="preset in colorPresets"
                    :key="preset"
                    class="btn p-0 color-swatch"
                    :class="{ active: formObject.color === preset }"
                    :style="{ backgroundColor: preset }"
                    @click="formObject.color = preset"
                >
                    <i v-if="formObject.color === preset" class="fa fa-check text-white fs-12"></i>
                </button>
                <div class="d-flex align-items-center gap-1 ms-2">
                    <input
                        type="color"
                        class="form-control form-control-color p-0 border-0"
                        v-model="formObject.color"
                        style="width: 32px; height: 32px; cursor: pointer;"
                    />
                    <small class="text-muted">{{ formObject.color || '#246bfd' }}</small>
                </div>
            </div>
        </div>

        <!-- Initial Contacts Upload (Only in Create Mode) -->
        <div class="col-md-12 border-top pt-3" v-if="formType === 1">
            <label class="form-label fw-bold mb-2">Add Initial Contacts <span class="text-muted small">(Optional)</span></label>
            <div class="row g-2 mb-2">
                <div class="col-4">
                    <div class="form-check form-radio-primary">
                        <input class="form-check-input" type="radio" id="noNumbers" v-model="formObject.number_type" :value="0">
                        <label class="form-check-label small" for="noNumbers">None (Add later)</label>
                    </div>
                </div>
                <div class="col-4">
                    <div class="form-check form-radio-primary">
                        <input class="form-check-input" type="radio" id="copyPaste" v-model="formObject.number_type" :value="1">
                        <label class="form-check-label small" for="copyPaste">Copy / Paste</label>
                    </div>
                </div>
                <div class="col-4">
                    <div class="form-check form-radio-primary">
                        <input class="form-check-input" type="radio" id="excelUpload" v-model="formObject.number_type" :value="2">
                        <label class="form-check-label small" for="excelUpload">Excel Upload</label>
                    </div>
                </div>
            </div>

            <!-- Copy/Paste Area -->
            <div v-if="parseInt(formObject.number_type) === 1" class="mt-2">
                <label class="form-label small text-muted">Paste phone numbers (comma or line separated):</label>
                <textarea
                    class="form-control"
                    v-model="formObject.total_number"
                    placeholder="01712345678, 01812345678, 01912345678"
                    rows="4"
                ></textarea>
            </div>

            <!-- Excel Upload Component -->
            <div v-if="parseInt(formObject.number_type) === 2" class="mt-2">
                <excel-upload></excel-upload>
            </div>
        </div>
    </div>
</template>

<script>
import ExcelUpload from "../../../components/excelUpload";

export default {
    name: "GroupForm",
    components: { ExcelUpload },
    data() {
        return {
            colorPresets: [
                '#246bfd', // Blue
                '#6366f1', // Indigo
                '#10b981', // Emerald
                '#f59e0b', // Amber
                '#f43f5e', // Rose
                '#a855f7', // Purple
                '#14b8a6', // Teal
                '#64748b', // Slate
            ]
        };
    },
    methods: {
        syncGroupName() {
            this.formObject.group_name = this.formObject.name;
        }
    },
    mounted() {
        if (!this.formObject.color) {
            this.$set(this.formObject, 'color', '#246bfd');
        }
        if (this.formObject.number_type === undefined) {
            this.$set(this.formObject, 'number_type', 0);
        }
        if (!this.formObject.name && this.formObject.group_name) {
            this.$set(this.formObject, 'name', this.formObject.group_name);
        }
    }
};
</script>

<style scoped>
.color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    transition: transform 0.15s ease;
}
.color-swatch:hover {
    transform: scale(1.15);
}
.color-swatch.active {
    border-color: #0f172a;
    box-shadow: 0 0 0 2px rgba(36, 107, 253, 0.4);
}
</style>
