<script setup>
import { ref } from 'vue';
import Modal from '@Holos/Modal.vue';
import FormInput from '@Holos/Form/Input.vue';
import GoogleIcon from '@Shared/GoogleIcon.vue';

/** Props */
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    }
});

/** Emits */
const emit = defineEmits(['close', 'confirm']);

/** Estado */
const initialCash = ref(0);
const loading = ref(false);

/** Métodos */
const handleSubmit = () => {
    if (initialCash.value < 0) {
        Notify.error('El monto inicial no puede ser negativo');
        return;
    }

    emit('confirm', initialCash.value);
};

const handleClose = () => {
    initialCash.value = 0;
    loading.value = false;
    emit('close');
};
</script>

<template>
    <Modal :show="show" max-width="lg" @close="handleClose">
        <div class="p-6">
            <!-- Header -->
            <div class="flex items-center justify-between mb-6">
                <div class="flex items-center gap-3">
                    <div class="flex items-center justify-center w-14 h-14 rounded-full bg-green-100 dark:bg-green-900/30">
                        <GoogleIcon name="point_of_sale" class="text-3xl text-green-600 dark:text-green-400" />
                    </div>
                    <div>
                        <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">
                            Abrir Caja Registradora
                        </h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Inicio de turno</p>
                    </div>
                </div>
                <button
                    @click="handleClose"
                    class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
                >
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>

            <!-- Content -->
            <form @submit.prevent="handleSubmit" class="space-y-6">
                <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
                    <div class="flex items-start gap-3">
                        <GoogleIcon name="info" class="text-blue-600 dark:text-blue-400 text-2xl shrink-0" />
                        <div class="flex-1">
                            <p class="text-sm text-blue-800 dark:text-blue-300 font-semibold mb-1">
                                Inicio de Turno
                            </p>
                            <p class="text-sm text-blue-700 dark:text-blue-400">
                                Ingresa el monto inicial en efectivo con el que comenzarás tu turno.
                                Este monto se utilizará como base para el corte de caja al finalizar.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Monto Inicial -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
                        Monto Inicial en Efectivo *
                    </label>
                    <div class="bg-gray-50 dark:bg-gray-800 border-2 border-gray-200 dark:border-gray-700 rounded-xl p-5">
                        <div class="flex items-center gap-2 mb-2">
                            <span class="text-4xl font-bold text-gray-900 dark:text-gray-100">$</span>
                            <input
                                v-model.number="initialCash"
                                type="number"
                                min="0"
                                step="0.01"
                                placeholder="0.00"
                                class="flex-1 text-4xl font-bold bg-transparent border-none outline-none text-gray-900 dark:text-gray-100 placeholder-gray-400"
                                required
                                autofocus
                            />
                        </div>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">
                            Ejemplo: Si comienzas con $1,000.00 en efectivo para dar cambio
                        </p>
                    </div>
                </div>

                <!-- Preview -->
                <div class="bg-linear-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 border border-green-200 dark:border-green-800 rounded-xl p-5">
                    <div class="grid grid-cols-2 gap-6">
                        <div>
                            <p class="text-xs text-green-700 dark:text-green-400 uppercase font-semibold tracking-wide mb-2">
                                Efectivo Inicial
                            </p>
                            <p class="text-3xl font-bold text-green-900 dark:text-green-100">
                                ${{ (initialCash || 0).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }}
                            </p>
                        </div>
                        <div>
                            <p class="text-xs text-green-700 dark:text-green-400 uppercase font-semibold tracking-wide mb-2">
                                Fecha y Hora
                            </p>
                            <p class="text-base font-semibold text-green-800 dark:text-green-300">
                                {{ new Date().toLocaleDateString('es-MX', {
                                    year: 'numeric',
                                    month: 'short',
                                    day: 'numeric'
                                }) }}
                            </p>
                            <p class="text-sm text-green-700 dark:text-green-400">
                                {{ new Date().toLocaleTimeString('es-MX', {
                                    hour: '2-digit',
                                    minute: '2-digit'
                                }) }}
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Footer -->
                <div class="flex items-center justify-end gap-3 pt-6 border-t border-gray-200 dark:border-gray-700">
                    <button
                        type="button"
                        @click="handleClose"
                        class="px-6 py-3 text-sm font-semibold text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-colors"
                    >
                        Cancelar
                    </button>
                    <button
                        type="submit"
                        :disabled="loading || initialCash <= 0"
                        class="flex items-center gap-2 px-6 py-3 bg-green-600 hover:bg-green-700 text-white text-sm font-semibold rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-600 disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-green-600/30 transition-all"
                    >
                        <GoogleIcon name="lock_open" class="text-xl" />
                        <span v-if="loading">Abriendo...</span>
                        <span v-else>Abrir Caja</span>
                    </button>
                </div>
            </form>
        </div>
    </Modal>
</template>
