{% extends 'base_dashboard.html' %}
{% load static %}

{% block title %}Configuración de Negocio{% endblock %}

{% block extra_css %}
<style>
    .camera-badge {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
</style>
{% endblock %}

{% block content %}
<div class="max-w-5xl mx-auto page-header">
    <div class="mb-10 lg:mb-12 reveal">
        <h1 class="text-5xl mb-4 font-black tracking-tightest">Mi Negocio.</h1>
        <p class="text-sm font-bold uppercase tracking-widest text-body-text/30 italic">Configura tu presencia pública y
            los canales de contacto de tu empresa.</p>
    </div>

    <form method="post" enctype="multipart/form-data" class="space-y-10" id="businessForm">
        {% csrf_token %}
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
            <!-- Columna Izquierda: Formulario -->
            <div class="lg:col-span-2 space-y-10">
                
                <!-- SECCIÓN 0: BRANDING (LOGO) -->
                <div class="card-premium reveal">
                    <div class="flex items-center gap-4 mb-8">
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                            <i data-lucide="palette" class="w-5 h-5"></i>
                        </div>
                        <h3 class="text-[10px] md:text-xs font-black uppercase tracking-[0.2em] md:tracking-[0.4em] text-body-text/30">Branding Visual</h3>
                    </div>

                    <div class="flex flex-col md:flex-row items-center gap-10">
                        <div class="relative group">
                            <div class="w-24 h-24 rounded-full border-2 border-accent/20 bg-surface flex items-center justify-center overflow-hidden shadow-inner">
                                {% if business.logo %}
                                    <img src="{{ business.logo.url }}" class="w-full h-full object-cover">
                                {% else %}
                                    <span class="text-2xl font-black text-accent/30">{{ business.initials }}</span>
                                {% endif %}
                            </div>
                            <div class="absolute -bottom-1 -right-1 bg-primary text-white camera-badge shadow-lg border-2 border-white z-10">
                                <i data-lucide="camera" class="w-4 h-4 text-white shrink-0"></i>
                            </div>
                        </div>

                        <div class="flex-1 space-y-4 text-center md:text-left">
                            <label class="text-[10px] font-black uppercase tracking-widest text-body-text/40 block">Logo del negocio</label>
                            <input type="file" name="logo" id="id_logo" accept="image/*" class="text-xs text-body-text/60 file:mr-4 file:py-2 file:px-4 file:rounded-sm file:border-0 file:text-[10px] file:font-black file:uppercase file:bg-primary/10 file:text-primary hover:file:bg-primary/20 transition-all cursor-pointer">
                            <p class="text-[9px] text-body-text/30 font-bold uppercase tracking-widest leading-relaxed">
                                "Idealmente usa una imagen cuadrada para que se visualice correctamente en formato circular."
                            </p>
                        </div>
                    </div>
                </div>

                <!-- SECCIÓN 1: IDENTIDAD -->
                <div class="card-premium reveal stagger-1">
                    <div class="flex items-center gap-4 mb-8">
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                            <i data-lucide="building-2" class="w-5 h-5"></i>
                        </div>
                        <h3 class="text-[10px] md:text-xs font-black uppercase tracking-[0.2em] md:tracking-[0.4em] text-body-text/30">Identidad del
                            Negocio</h3>
                    </div>

                    <div class="space-y-8">
                        <div>
                            <label for="id_name">Nombre de Fantasía *</label>
                            <input type="text" name="name" id="id_name" value="{{ business.name }}" required
                                class="w-full px-4 py-3 bg-white border border-accent/30 rounded-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all font-medium text-sm">
                            <p class="text-[10px] text-body-text/40 mt-2">Este nombre aparecerá en tu agenda pública y
                                correos.</p>
                        </div>

                    </div>
                </div>

                <!-- SECCIÓN 1.5: BANNER GLOBAL -->
                <div class="card-premium reveal stagger-2">
                    <div class="flex items-center justify-between mb-8">
                        <div class="flex items-center gap-4">
                            <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                                <i data-lucide="megaphone" class="w-5 h-5"></i>
                            </div>
                            <h3 class="text-[10px] md:text-xs font-black uppercase tracking-[0.2em] md:tracking-[0.4em] text-body-text/30">Anuncio Global</h3>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="banner_active" id="id_banner_active" class="sr-only peer" 
                                   {% if business.banner_active %}checked{% endif %}>
                            <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-primary"></div>
                        </label>
                    </div>

                    <div class="space-y-8">
                        <div>
                            <label for="id_banner_message">Mensaje del Banner</label>
                            <input type="text" name="banner_message" id="id_banner_message" value="{{ business.banner_message|default:'' }}"
                                placeholder="Ej: Alta demanda esta semana..."
                                class="w-full px-4 py-3 bg-white border border-accent/30 rounded-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all font-medium text-sm">
                            <p class="text-[10px] text-body-text/40 mt-2">Este mensaje será visible para todos en la parte superior de tu agenda.</p>
                        </div>
                        <div>
                            <label for="id_banner_type">Estilo del Aviso</label>
                            <select name="banner_type" id="id_banner_type" class="w-full px-4 py-3 bg-white border border-accent/30 rounded-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all font-medium text-sm">
                                <option value="info" {% if business.banner_type == 'info' %}selected{% endif %}>Información (Azul)</option>
                                <option value="warning" {% if business.banner_type == 'warning' %}selected{% endif %}>Advertencia (Ámbar)</option>
                                <option value="success" {% if business.banner_type == 'success' %}selected{% endif %}>Éxito (Verde)</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- SECCIÓN 1.6: ESTADO OPERATIVO (STATUS ENGINE) -->
                <div class="card-premium reveal stagger-3">
                    <div class="flex items-center gap-4 mb-8">
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                            <i data-lucide="activity" class="w-5 h-5"></i>
                        </div>
                        <h3 class="text-[10px] md:text-xs font-black uppercase tracking-[0.2em] md:tracking-[0.4em] text-body-text/30">Motor de Estado Operativo</h3>
                    </div>

                    <div class="space-y-8">
                        <div>
                            <label for="id_business_status">Estado Actual del Negocio</label>
                            <select name="business_status" id="id_business_status" class="w-full px-4 py-3 bg-white border border-accent/30 rounded-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all font-medium text-sm">
                                <option value="available" {% if business.business_status == 'available' %}selected{% endif %}>🟢 Disponible (Operación Normal)</option>
                                <option value="high_demand" {% if business.business_status == 'high_demand' %}selected{% endif %}>🟡 Alta Demanda (Retrasos posibles)</option>
                                <option value="closed" {% if business.business_status == 'closed' %}selected{% endif %}>🔴 Cerrado Temporalmente (No se aceptan citas)</option>
                            </select>
                        </div>

                        <div>
                            <label for="id_status_message">Mensaje de Estado (Contexto)</label>
                            <input type="text" name="status_message" id="id_status_message" value="{{ business.status_message|default:'' }}"
                                placeholder="Ej: Agenda completa para esta semana..."
                                class="w-full px-4 py-3 bg-white border border-accent/30 rounded-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all font-medium text-sm">
                            <p class="text-[10px] text-body-text/40 mt-2">Este mensaje dará contexto sobre tu estado actual en la cabecera de la agenda.</p>
                        </div>

                        <div class="flex items-center gap-4 py-4 p-5 bg-surface/50 rounded-sm border border-accent/20">
                            <input type="checkbox" name="status_auto" id="id_status_auto" {% if business.status_auto %}checked{% endif %} class="w-5 h-5 accent-primary">
                            <div>
                                <p class="text-xs font-black uppercase tracking-tighter">Automatización de Estado</p>
                                <p class="text-[9px] text-body-text/40 font-bold uppercase tracking-widest">Permitir que Citalis cambie tu estado basándose en tu carga de trabajo.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- SECCIÓN 2: CONTACTO -->
                <div class="card-premium reveal stagger-2">
                    <div class="flex items-center gap-4 mb-8">
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                            <i data-lucide="phone" class="w-5 h-5"></i>
                        </div>
                        <h3 class="text-[10px] md:text-xs font-black uppercase tracking-[0.2em] md:tracking-[0.4em] text-body-text/30">Información de
                            Contacto</h3>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <div>
                            <label for="id_phone">Teléfono Principal</label>
                            <input type="text" name="phone" id="id_phone" value="{{ business.phone|default:'' }}"
                                class="w-full px-4 py-3 bg-white border border-accent/30 rounded-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all font-medium text-sm">
                        </div>
                        <div>
                            <label for="id_phone_secondary">Teléfono Secundario</label>
                            <input type="text" name="phone_secondary" id="id_phone_secondary"
                                value="{{ business.phone_secondary|default:'' }}"
                                class="w-full px-4 py-3 bg-white border border-accent/30 rounded-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all font-medium text-sm">
                        </div>
                        <div>
                            <label for="id_email_contact">Email de Contacto</label>
                            <input type="email" name="email_contact" id="id_email_contact"
                                value="{{ business.email_contact|default:'' }}"
                                class="w-full px-4 py-3 bg-white border border-accent/30 rounded-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all font-medium text-sm">
                        </div>
                        <div>
                            <label for="id_website">Sitio Web (URL)</label>
                            <input type="url" name="website" id="id_website" value="{{ business.website|default:'' }}"
                                placeholder="https://..."
                                class="w-full px-4 py-3 bg-white border border-accent/30 rounded-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all font-medium text-sm">
                        </div>
                    </div>
                </div>

                <!-- SECCIÓN 3: UBICACIÓN Y HORARIO -->
                <div class="card-premium reveal stagger-3">
                    <div class="flex items-center gap-4 mb-8">
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                            <i data-lucide="map-pin" class="w-5 h-5"></i>
                        </div>
                        <h3 class="text-[10px] md:text-xs font-black uppercase tracking-[0.2em] md:tracking-[0.4em] text-body-text/30">Ubicación y Perfil
                        </h3>
                    </div>

                    <div class="space-y-8">
                        <div>
                            <label for="id_address">Dirección Física</label>
                            <input type="text" name="address" id="id_address" value="{{ business.address|default:'' }}"
                                class="w-full px-4 py-3 bg-white border border-accent/30 rounded-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all font-medium text-sm">
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                            <div>
                                <label for="id_city">Ciudad</label>
                                <input type="text" name="city" id="id_city" value="{{ business.city|default:'' }}"
                                    class="w-full px-4 py-3 bg-white border border-accent/30 rounded-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all font-medium text-sm">
                            </div>
                            <div>
                                <label for="id_country">País</label>
                                <input type="text" name="country" id="id_country"
                                    value="{{ business.country|default:'' }}"
                                    class="w-full px-4 py-3 bg-white border border-accent/30 rounded-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all font-medium text-sm">
                            </div>
                        </div>
                        <div>
                            <label for="id_timezone">Zona Horaria *</label>
                            {{ form.timezone }}
                            <p
                                class="text-[10px] text-body-text/40 mt-3 font-bold uppercase tracking-widest italic flex items-center gap-2">
                                <i data-lucide="globe" class="w-3 h-3"></i> Crucial para el cálculo de tu
                                disponibilidad.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="flex justify-start">
                    <button type="submit" id="saveBtn"
                        class="bg-on-surface text-white px-12 py-5 text-xs font-black uppercase tracking-[0.4em] hover:bg-primary transition-all duration-500 shadow-lift disabled:opacity-50 disabled:cursor-as-not-allowed flex items-center gap-3">
                        <i data-lucide="save" class="w-4 h-4"></i>
                        Guardar Perfil
                    </button>
                </div>
            </div>

            <!-- Columna Derecha: Tips/Preview -->
            <div class="space-y-8">
                <div class="bg-primary shadow-lift p-8 rounded-sm sticky top-8">
                    <label class="text-white/40 block mb-6 font-black uppercase tracking-[0.2em] text-[10px]">Tu enlace
                        principal</label>
                    <div class="group relative">
                        <p id="previewUrl"
                            class="text-xs font-black tracking-widest text-white underline decoration-white/20 underline-offset-4 break-all">
                            {{ request.get_host }}
                        </p>
                        <button type="button" onclick="copyLink()"
                            class="mt-8 flex items-center gap-3 text-[10px] font-black uppercase tracking-[0.3em] text-white/50 hover:text-white transition-colors group">
                            <i data-lucide="copy" class="w-4 h-4 group-hover:scale-110 transition-transform"></i>
                            Copiar enlace
                        </button>
                    </div>
                </div>

                <div class="card-premium">
                    <h4 class="text-[10px] font-black uppercase tracking-[0.3em] text-body-text/30 mb-6">Importancia del
                        Perfil</h4>
                    <ul class="space-y-6">
                        <li class="flex gap-4">
                            <i data-lucide="mail" class="w-4 h-4 text-primary shrink-0 mt-1"></i>
                            <p class="text-[10px] font-bold uppercase tracking-tight text-body-text/60 leading-relaxed">
                                Tu email será usado para avisos de confirmación oficiales.</p>
                        </li>
                        <li class="flex gap-4">
                            <i data-lucide="smartphone" class="w-4 h-4 text-primary shrink-0 mt-1"></i>
                            <p class="text-[10px] font-bold uppercase tracking-tight text-body-text/60 leading-relaxed">
                                El teléfono principal se mostrará en el pie de tu agenda.</p>
                        </li>
                        <li class="flex gap-4">
                            <i data-lucide="clock" class="w-4 h-4 text-primary shrink-0 mt-1"></i>
                            <p class="text-[10px] font-bold uppercase tracking-tight text-body-text/60 leading-relaxed">
                                Asegúrate que tu Zona Horaria sea correcta para evitar errores en las citas.</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_js %}
<script>
    function copyLink() {
        const text = window.location.origin + "/";
        navigator.clipboard.writeText(text).then(() => {
            alert("Enlace copiado al portapapeles");
        });
    }

    lucide.createIcons();
</script>
{% endblock %}