import { api } from "../lib/api.js";

const DAYS = [
  { id: "lun", label: "Lunes", short: "Lun" },
  { id: "mar", label: "Martes", short: "Mar" },
  { id: "mie", label: "Miércoles", short: "Mié" },
  { id: "jue", label: "Jueves", short: "Jue" },
  { id: "vie", label: "Viernes", short: "Vie" },
  { id: "sab", label: "Sábado", short: "Sáb" },
  { id: "dom", label: "Domingo", short: "Dom" },
];

class SettingsCrud extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.settings = null;
    this.loading = false;
    this.saving = false;

    this.shadowRoot.innerHTML = `
      <style>
        :host { display:block; height:100%; padding:16px; overflow:auto; }
        * { box-sizing:border-box; font-family:system-ui,Segoe UI,Roboto,Arial; }
        .container { max-width:800px; margin:0 auto; }
        .panel { background:#121823; border:1px solid #1e2a3a; border-radius:10px; padding:20px; margin-bottom:16px; }
        .panel-title { font-size:16px; font-weight:700; color:#e7eef7; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
        .panel-title svg { width:20px; height:20px; fill:#1f6feb; }
        
        .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
        .form-row.full { grid-template-columns:1fr; }
        
        .field { }
        .field label { display:block; font-size:12px; color:#8aa0b5; margin-bottom:6px; text-transform:uppercase; letter-spacing:.4px; }
        .field-hint { font-size:11px; color:#6c7a89; margin-top:4px; }
        
        input, select, textarea { 
          background:#0f1520; color:#e7eef7; border:1px solid #253245; 
          border-radius:8px; padding:10px 14px; font-size:14px; width:100%;
        }
        input:focus, select:focus, textarea:focus { outline:none; border-color:#1f6feb; }
        input:disabled { opacity:.6; cursor:not-allowed; }
        
        button { 
          cursor:pointer; background:#1f6feb; color:#fff; border:none; 
          border-radius:8px; padding:10px 20px; font-size:14px; font-weight:600;
        }
        button:hover { background:#1a5fd0; }
        button:disabled { opacity:.5; cursor:not-allowed; }
        button.secondary { background:#253245; }
        button.secondary:hover { background:#2d3e52; }
        
        .toggle-row { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
        .toggle { 
          position:relative; width:48px; height:26px; 
          background:#253245; border-radius:13px; cursor:pointer;
          transition:background .2s; flex-shrink:0;
        }
        .toggle.active { background:#1f6feb; }
        .toggle::after {
          content:''; position:absolute; top:3px; left:3px;
          width:20px; height:20px; background:#fff; border-radius:50%;
          transition:transform .2s;
        }
        .toggle.active::after { transform:translateX(22px); }
        .toggle-label { font-size:14px; color:#e7eef7; }
        
        /* Schedule grid */
        .schedule-grid { display:flex; flex-direction:column; gap:8px; }
        .schedule-row { 
          display:grid; 
          grid-template-columns:90px 32px 1fr; 
          gap:12px; 
          align-items:center;
          padding:8px 12px;
          background:#0f1520;
          border-radius:8px;
          border:1px solid #1e2a3a;
        }
        .schedule-row.disabled { opacity:0.4; }
        .day-label { font-size:13px; color:#e7eef7; font-weight:500; }
        .day-toggle { 
          width:32px; height:18px; background:#253245; border-radius:9px; 
          cursor:pointer; position:relative; transition:background .2s;
        }
        .day-toggle.active { background:#2ecc71; }
        .day-toggle::after {
          content:''; position:absolute; top:2px; left:2px;
          width:14px; height:14px; background:#fff; border-radius:50%;
          transition:transform .2s;
        }
        .day-toggle.active::after { transform:translateX(14px); }
        .hours-inputs { display:flex; align-items:center; gap:8px; }
        .hours-inputs input { 
          width:70px; text-align:center; font-family:monospace; 
          font-size:13px; padding:6px 8px; letter-spacing:1px;
        }
        .hours-inputs span { color:#6c7a89; font-size:12px; }
        .hours-inputs.disabled input { opacity:0.4; pointer-events:none; }
        
        .actions { display:flex; gap:12px; margin-top:24px; }
        .loading { text-align:center; padding:60px; color:#8aa0b5; }
        
        .success-msg { 
          background:#2ecc7130; border:1px solid #2ecc71; 
          color:#2ecc71; padding:12px 16px; border-radius:8px; 
          margin-bottom:16px; font-size:14px;
        }
        .error-msg { 
          background:#e74c3c30; border:1px solid #e74c3c; 
          color:#e74c3c; padding:12px 16px; border-radius:8px; 
          margin-bottom:16px; font-size:14px;
        }
        
        .min-order-field { margin-top:16px; padding-top:16px; border-top:1px solid #1e2a3a; }
      </style>

      <div class="container">
        <div id="messages"></div>
        <div id="content">
          <div class="loading">Cargando configuración...</div>
        </div>
      </div>
    `;
  }

  connectedCallback() {
    this.load();
  }

  async load() {
    this.loading = true;
    this.render();

    try {
      this.settings = await api.getSettings();
      // Asegurar que schedule existe
      if (!this.settings.schedule) {
        this.settings.schedule = { delivery: {}, pickup: {} };
      }
      this.loading = false;
      this.render();
    } catch (e) {
      console.error("Error loading settings:", e);
      this.loading = false;
      this.showError("Error cargando configuración: " + e.message);
    }
  }

  getScheduleSlot(type, dayId) {
    return this.settings?.schedule?.[type]?.[dayId] || null;
  }

  setScheduleSlot(type, dayId, slot) {
    if (!this.settings.schedule) {
      this.settings.schedule = { delivery: {}, pickup: {} };
    }
    if (!this.settings.schedule[type]) {
      this.settings.schedule[type] = {};
    }
    this.settings.schedule[type][dayId] = slot;
  }

  renderScheduleGrid(type, enabled) {
    const defaultStart = type === "delivery" ? "09:00" : "08:00";
    const defaultEnd = type === "delivery" ? "18:00" : "20:00";

    return DAYS.map(day => {
      const slot = this.getScheduleSlot(type, day.id);
      const isActive = slot !== null && slot !== undefined;
      const start = slot?.start || defaultStart;
      const end = slot?.end || defaultEnd;

      return `
        <div class="schedule-row ${!enabled ? 'disabled' : ''}">
          <span class="day-label">${day.label}</span>
          <div class="day-toggle ${isActive ? 'active' : ''}" 
               data-type="${type}" data-day="${day.id}" 
               ${!enabled ? 'style="pointer-events:none"' : ''}></div>
          <div class="hours-inputs ${!isActive ? 'disabled' : ''}">
            <input type="text" 
                   class="hour-start" 
                   data-type="${type}" 
                   data-day="${day.id}" 
                   value="${start}" 
                   placeholder="09:00" 
                   maxlength="5"
                   ${!enabled || !isActive ? 'disabled' : ''} />
            <span>a</span>
            <input type="text" 
                   class="hour-end" 
                   data-type="${type}" 
                   data-day="${day.id}" 
                   value="${end}" 
                   placeholder="18:00" 
                   maxlength="5"
                   ${!enabled || !isActive ? 'disabled' : ''} />
          </div>
        </div>
      `;
    }).join("");
  }

  render() {
    const content = this.shadowRoot.getElementById("content");

    if (this.loading) {
      content.innerHTML = `<div class="loading">Cargando configuración...</div>`;
      return;
    }

    if (!this.settings) {
      content.innerHTML = `<div class="loading">No se pudo cargar la configuración</div>`;
      return;
    }

    const s = this.settings;

    content.innerHTML = `
      <!-- Info del Negocio -->
      <div class="panel">
        <div class="panel-title">
          <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
          Información del Negocio
        </div>
        
        <div class="form-row">
          <div class="field">
            <label>Nombre del negocio</label>
            <input type="text" id="storeName" value="${this.escapeHtml(s.store_name || "")}" placeholder="Ej: Carnicería Don Pedro" />
            <div class="field-hint">Se usa en los mensajes del bot</div>
          </div>
          <div class="field">
            <label>Nombre del bot</label>
            <input type="text" id="botName" value="${this.escapeHtml(s.bot_name || "")}" placeholder="Ej: Piaf" />
            <div class="field-hint">El asistente virtual</div>
          </div>
        </div>
        
        <div class="form-row">
          <div class="field">
            <label>Dirección</label>
            <input type="text" id="storeAddress" value="${this.escapeHtml(s.store_address || "")}" placeholder="Ej: Av. Corrientes 1234, CABA" />
          </div>
          <div class="field">
            <label>Teléfono</label>
            <input type="text" id="storePhone" value="${this.escapeHtml(s.store_phone || "")}" placeholder="Ej: +54 11 1234-5678" />
          </div>
        </div>
      </div>

      <!-- Delivery -->
      <div class="panel">
        <div class="panel-title">
          <svg viewBox="0 0 24 24"><path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/></svg>
          Delivery (Envío a domicilio)
        </div>
        
        <div class="toggle-row">
          <div class="toggle ${s.delivery_enabled ? "active" : ""}" id="deliveryToggle"></div>
          <span class="toggle-label">Delivery habilitado</span>
        </div>
        
        <div class="schedule-grid" id="deliverySchedule">
          ${this.renderScheduleGrid("delivery", s.delivery_enabled)}
        </div>
        
        <div class="min-order-field">
          <div class="field">
            <label>Pedido mínimo para delivery ($)</label>
            <input type="number" id="deliveryMinOrder" value="${s.delivery_min_order || 0}" min="0" step="100" style="width:150px;" />
          </div>
        </div>
      </div>

      <!-- Retiro en tienda -->
      <div class="panel">
        <div class="panel-title">
          <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14l-5-5 1.41-1.41L12 14.17l4.59-4.58L18 11l-6 6z"/></svg>
          Retiro en Tienda
        </div>
        
        <div class="toggle-row">
          <div class="toggle ${s.pickup_enabled ? "active" : ""}" id="pickupToggle"></div>
          <span class="toggle-label">Retiro en tienda habilitado</span>
        </div>
        
        <div class="schedule-grid" id="pickupSchedule">
          ${this.renderScheduleGrid("pickup", s.pickup_enabled)}
        </div>
      </div>

      <div class="actions">
        <button id="saveBtn" ${this.saving ? "disabled" : ""}>${this.saving ? "Guardando..." : "Guardar Configuración"}</button>
        <button id="resetBtn" class="secondary">Restaurar</button>
      </div>
    `;

    this.setupEventListeners();
  }

  setupEventListeners() {
    // Toggle delivery
    const deliveryToggle = this.shadowRoot.getElementById("deliveryToggle");
    deliveryToggle?.addEventListener("click", () => {
      this.settings.delivery_enabled = !this.settings.delivery_enabled;
      this.render();
    });

    // Toggle pickup
    const pickupToggle = this.shadowRoot.getElementById("pickupToggle");
    pickupToggle?.addEventListener("click", () => {
      this.settings.pickup_enabled = !this.settings.pickup_enabled;
      this.render();
    });

    // Day toggles
    this.shadowRoot.querySelectorAll(".day-toggle").forEach(toggle => {
      toggle.addEventListener("click", () => {
        const type = toggle.dataset.type;
        const day = toggle.dataset.day;
        const currentSlot = this.getScheduleSlot(type, day);
        
        if (currentSlot) {
          // Desactivar día
          this.setScheduleSlot(type, day, null);
        } else {
          // Activar día con horarios default
          const defaultStart = type === "delivery" ? "09:00" : "08:00";
          const defaultEnd = type === "delivery" ? "18:00" : "20:00";
          this.setScheduleSlot(type, day, { start: defaultStart, end: defaultEnd });
        }
        this.render();
      });
    });

    // Hour inputs - update on blur
    this.shadowRoot.querySelectorAll(".hour-start, .hour-end").forEach(input => {
      input.addEventListener("blur", () => {
        const type = input.dataset.type;
        const day = input.dataset.day;
        const isStart = input.classList.contains("hour-start");
        
        const slot = this.getScheduleSlot(type, day);
        if (!slot) return;
        
        const value = input.value.trim();
        if (isStart) {
          slot.start = value || (type === "delivery" ? "09:00" : "08:00");
        } else {
          slot.end = value || (type === "delivery" ? "18:00" : "20:00");
        }
        this.setScheduleSlot(type, day, slot);
      });
    });

    // Save button
    this.shadowRoot.getElementById("saveBtn")?.addEventListener("click", () => this.save());

    // Reset button
    this.shadowRoot.getElementById("resetBtn")?.addEventListener("click", () => this.load());
  }

  collectScheduleFromInputs() {
    const schedule = { delivery: {}, pickup: {} };
    
    for (const type of ["delivery", "pickup"]) {
      this.shadowRoot.querySelectorAll(`.hour-start[data-type="${type}"]`).forEach(input => {
        const day = input.dataset.day;
        const endInput = this.shadowRoot.querySelector(`.hour-end[data-type="${type}"][data-day="${day}"]`);
        const toggle = this.shadowRoot.querySelector(`.day-toggle[data-type="${type}"][data-day="${day}"]`);
        
        if (toggle?.classList.contains("active")) {
          schedule[type][day] = {
            start: input.value.trim() || (type === "delivery" ? "09:00" : "08:00"),
            end: endInput?.value.trim() || (type === "delivery" ? "18:00" : "20:00"),
          };
        }
      });
    }
    
    return schedule;
  }

  async save() {
    // Collect schedule from inputs
    const schedule = this.collectScheduleFromInputs();
    
    const data = {
      store_name: this.shadowRoot.getElementById("storeName")?.value || "",
      bot_name: this.shadowRoot.getElementById("botName")?.value || "",
      store_address: this.shadowRoot.getElementById("storeAddress")?.value || "",
      store_phone: this.shadowRoot.getElementById("storePhone")?.value || "",
      delivery_enabled: this.settings.delivery_enabled,
      pickup_enabled: this.settings.pickup_enabled,
      delivery_min_order: parseFloat(this.shadowRoot.getElementById("deliveryMinOrder")?.value) || 0,
      schedule,
    };

    // Update settings with form values
    this.settings = { ...this.settings, ...data };
    
    this.saving = true;
    this.render();

    try {
      console.log("[settings-crud] Saving:", data);
      const result = await api.saveSettings(data);
      console.log("[settings-crud] Save result:", result);
      
      if (result.ok === false) {
        throw new Error(result.message || result.error || "Error desconocido");
      }
      
      this.settings = result.settings || data;
      this.saving = false;
      this.showSuccess(result.message || "Configuración guardada correctamente");
      this.render();
    } catch (e) {
      console.error("[settings-crud] Error saving settings:", e);
      this.saving = false;
      this.showError("Error guardando: " + (e.message || e));
      this.render();
    }
  }

  escapeHtml(str) {
    return (str || "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
  }

  showSuccess(msg) {
    const messages = this.shadowRoot.getElementById("messages");
    messages.innerHTML = `<div class="success-msg">${msg}</div>`;
    setTimeout(() => { messages.innerHTML = ""; }, 4000);
  }

  showError(msg) {
    const messages = this.shadowRoot.getElementById("messages");
    messages.innerHTML = `<div class="error-msg">${msg}</div>`;
    setTimeout(() => { messages.innerHTML = ""; }, 5000);
  }
}

customElements.define("settings-crud", SettingsCrud);