<template>
    <div class="row g-3">
        <!-- Mode Switcher (only in create mode) -->
        <div class="col-12" v-if="formType === 1">
            <div class="btn-group w-100 mb-2" role="group">
                <button
                    type="button"
                    class="btn btn-sm"
                    :class="addMode === 'single' ? 'btn-primary' : 'btn-outline-secondary'"
                    @click="setMode('single')"
                >
                    <i class="fa fa-user me-1"></i> Single Contact
                </button>
                <button
                    type="button"
                    class="btn btn-sm"
                    :class="addMode === 'bulk' ? 'btn-primary' : 'btn-outline-secondary'"
                    @click="setMode('bulk')"
                >
                    <i class="fa fa-list me-1"></i> Bulk Add / Paste
                </button>
            </div>
        </div>

        <!-- Single Contact Mode -->
        <template v-if="addMode === 'single' || formType === 2">
            <!-- Phone Number -->
            <div class="col-md-12">
                <label class="form-label fw-bold">Phone Number <span class="text-danger">*</span></label>
                <div class="input-group">
                    <span class="input-group-text"><i class="fa fa-phone"></i></span>
                    <input
                        type="text"
                        class="form-control"
                        v-model="formObject.number"
                        placeholder="e.g. +8801712345678 or 01712345678"
                        v-validate="'required'"
                        name="number"
                    />
                </div>
            </div>

            <!-- Contact Name -->
            <div class="col-md-12">
                <label class="form-label fw-bold">Contact Name <span class="text-muted small">(Optional)</span></label>
                <div class="input-group">
                    <span class="input-group-text"><i class="fa fa-user"></i></span>
                    <input
                        type="text"
                        class="form-control"
                        v-model="formObject.name"
                        placeholder="e.g. John Doe, Acme Corp"
                    />
                </div>
            </div>
        </template>

        <!-- Bulk Add Mode -->
        <template v-if="addMode === 'bulk' && formType === 1">
            <div class="col-md-12">
                <label class="form-label fw-bold">Paste Phone Numbers <span class="text-danger">*</span></label>
                <textarea
                    class="form-control font-monospace"
                    v-model="formObject.bulk_numbers"
                    placeholder="01712345678, 01812345678&#10;01912345678&#10;+8801612345678"
                    rows="6"
                    v-validate="'required'"
                    name="bulk_numbers"
                ></textarea>
                <small class="text-muted d-block mt-1">
                    Paste numbers separated by commas, spaces, or newlines.
                </small>
            </div>
        </template>

        <!-- Group Assignment -->
        <div class="col-md-12">
            <div class="d-flex align-items-center justify-content-between mb-1">
                <label class="form-label fw-bold mb-0">Assign to Group</label>
                <router-link to="/admin/groups" class="small text-primary text-decoration-none">
                    <i class="fa fa-plus-circle"></i> New Group
                </router-link>
            </div>
            <div class="input-group">
                <span class="input-group-text"><i class="fa fa-users"></i></span>
                <select class="form-select form-control" v-model="formObject.group_id">
                    <option :value="0">-- No Group (Unassigned) --</option>
                    <option
                        v-for="grp in groups"
                        :key="grp.id"
                        :value="grp.id"
                    >
                        {{ grp.name || grp.group_name }}
                    </option>
                </select>
            </div>
        </div>

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

<script>
import axios from 'axios';

export default {
    name: "NumberForm",
    data() {
        return {
            addMode: 'single',
            groups: []
        };
    },
    methods: {
        setMode(mode) {
            this.addMode = mode;
            this.$set(this.formObject, 'is_bulk', mode === 'bulk');
            if (mode === 'single') {
                this.$set(this.formObject, 'bulk_numbers', '');
            } else {
                this.$set(this.formObject, 'number', '');
            }
        },
        async fetchGroups() {
            try {
                const response = await axios.get('/api/groups', { params: { perPage: 100 } });
                if (response.data && response.data.status === 2000) {
                    this.groups = response.data.result.data || response.data.result || [];
                }
            } catch (err) {
                console.error('Failed to load groups in NumberForm:', err);
            }
        }
    },
    mounted() {
        this.fetchGroups();
        if (this.formObject.group_id === undefined) {
            this.$set(this.formObject, 'group_id', 0);
        }
    }
};
</script>
