/* ============================================================
   OmahCitra Store - Aplikasi (jQuery)
   Fitur: Katalog, Keranjang, Checkout, Pengiriman, Pembayaran
   ============================================================ */
$(function () {
  "use strict";

  // ---------- State ----------
  const cart = {};                       // { id: qty }
  let activeCat = "Semua";
  let searchTerm = "";
  let selectedCourier = null;
  let selectedPayment = null;

  // ---------- Helpers ----------
  const rupiah = (n) => "Rp" + Number(n).toLocaleString("id-ID");
  const $view = (name) => {
    $(".view").removeClass("active");
    $("#view-" + name).addClass("active");
    window.scrollTo(0, 0);
  };
  const toast = (msg) => {
    const $t = $("#toast").text(msg).addClass("show");
    clearTimeout(toast._t);
    toast._t = setTimeout(() => $t.removeClass("show"), 1800);
  };

  // ---------- Category nav ----------
  function buildCats() {
    const cats = ["Semua", ...new Set(PRODUCTS.map(p => p.category))];
    const $nav = $("#catNav").empty();
    cats.forEach(c => {
      $("<div>")
        .addClass("cat-pill" + (c === activeCat ? " active" : ""))
        .text(c)
        .on("click", function () {
          activeCat = c;
          buildCats();
          renderCatalog();
        })
        .appendTo($nav);
    });
  }

  // ---------- Catalog ----------
  function renderCatalog() {
    const grid = $("#productGrid").empty();
    const term = searchTerm.toLowerCase();
    const list = PRODUCTS.filter(p => {
      const okCat = activeCat === "Semua" || p.category === activeCat;
      const okSearch = !term ||
        p.name.toLowerCase().includes(term) ||
        p.category.toLowerCase().includes(term) ||
        p.desc.toLowerCase().includes(term);
      return okCat && okSearch;
    });

    $("#emptyNote").toggle(list.length === 0);

    list.forEach(p => {
      const card = $(`
        <div class="product-card">
          <div class="pc-thumb">${p.emoji}</div>
          <div class="pc-body">
            <span class="pc-cat">${p.category}${p.badge ? `<span class="pc-badge">${p.badge}</span>` : ""}</span>
            <div class="pc-name">${p.name}</div>
            <div class="pc-rating">★ ${p.rating} · ${p.sold.toLocaleString("id-ID")} terjual</div>
            <div class="pc-price">${rupiah(p.price)}</div>
            <button class="pc-btn" data-id="${p.id}">+ Keranjang</button>
          </div>
        </div>`);
      card.find(".pc-btn").on("click", () => addToCart(p.id));
      card.appendTo(grid);
    });
  }

  // ---------- Cart ops ----------
  function addToCart(id) {
    cart[id] = (cart[id] || 0) + 1;
    updateCartCount();
    toast("Ditambahkan ke keranjang");
  }
  function setQty(id, qty) {
    if (qty <= 0) delete cart[id];
    else cart[id] = qty;
    updateCartCount();
    renderCart();
  }
  function updateCartCount() {
    const n = Object.values(cart).reduce((a, b) => a + b, 0);
    $("#cartCount").text(n);
  }
  function cartSubtotal() {
    return Object.entries(cart).reduce((sum, [id, q]) => {
      const p = PRODUCTS.find(x => x.id === id);
      return sum + (p ? p.price * q : 0);
    }, 0);
  }

  // ---------- Render cart ----------
  function renderCart() {
    const $list = $("#cartItems").empty();
    const ids = Object.keys(cart);

    if (ids.length === 0) {
      $("#cartEmpty").show();
      $("#cartSummary").hide();
      return;
    }
    $("#cartEmpty").hide();
    $("#cartSummary").show();

    ids.forEach(id => {
      const p = PRODUCTS.find(x => x.id === id);
      const qty = cart[id];
      const row = $(`
        <div class="cart-row">
          <div class="cart-emoji">${p.emoji}</div>
          <div class="cart-info">
            <h4>${p.name}</h4>
            <small>${rupiah(p.price)} / pcs</small>
          </div>
          <div class="qty">
            <button class="dec">−</button>
            <span>${qty}</span>
            <button class="inc">+</button>
          </div>
          <div class="price">${rupiah(p.price * qty)}</div>
          <button class="rm" title="Hapus">🗑️</button>
        </div>`);
      row.find(".inc").on("click", () => setQty(id, qty + 1));
      row.find(".dec").on("click", () => setQty(id, qty - 1));
      row.find(".rm").on("click", () => { delete cart[id]; updateCartCount(); renderCart(); toast("Dihapus"); });
      row.appendTo($list);
    });

    $("#sumSubtotal").text(rupiah(cartSubtotal()));
  }

  // ---------- Checkout ----------
  function buildCheckout() {
    // couriers
    const $c = $("#courierOptions").empty();
    COURIERS.forEach(co => {
      const opt = $(`
        <label class="opt">
          <input type="radio" name="courier" value="${co.id}">
          <span>${co.name} · ${rupiah(co.fee)}</span>
          <small>(${co.etd})</small>
        </label>`);
      opt.find("input").on("change", () => {
        selectedCourier = co;
        $(".opt", $c).removeClass("selected");
        opt.addClass("selected");
        updateOrderSummary();
      });
      opt.appendTo($c);
    });

    // payments
    const $p = $("#paymentOptions").empty();
    PAYMENTS.forEach(pm => {
      const opt = $(`
        <label class="opt">
          <input type="radio" name="payment" value="${pm.id}">
          <span>${pm.name}</span>
        </label>`);
      opt.find("input").on("change", () => {
        selectedPayment = pm;
        $(".opt", $p).removeClass("selected");
        opt.addClass("selected");
      });
      opt.appendTo($p);
    });

    renderOrderItems();
    updateOrderSummary();
  }

  function renderOrderItems() {
    const $o = $("#orderItems").empty();
    Object.entries(cart).forEach(([id, q]) => {
      const p = PRODUCTS.find(x => x.id === id);
      $(`<div class="order-item"><span>${p.emoji} ${p.name} ×${q}</span><span>${rupiah(p.price * q)}</span></div>`).appendTo($o);
    });
  }

  function updateOrderSummary() {
    const sub = cartSubtotal();
    const ship = selectedCourier ? selectedCourier.fee : 0;
    $("#coSubtotal").text(rupiah(sub));
    $("#coShipping").text(selectedCourier ? rupiah(ship) : "Pilih kurir");
    $("#coTotal").text(rupiah(sub + ship));
  }

  // ---------- Place order ----------
  function placeOrder() {
    if (Object.keys(cart).length === 0) { toast("Keranjang kosong"); return; }
    const name = $("#custName").val().trim();
    const addr = $("#custAddr").val().trim();
    const phone = $("#custPhone").val().trim();
    if (!name || !addr || !phone) { toast("Lengkapi data penerima"); return; }
    if (!selectedCourier) { toast("Pilih kurir pengiriman"); return; }
    if (!selectedPayment) { toast("Pilih metode pembayaran"); return; }

    const orderNo = "OC" + Date.now().toString().slice(-8);
    const sub = cartSubtotal();
    const total = sub + selectedCourier.fee;

    $("#orderNo").text(orderNo);
    $("#doneDetail").html(`
      <div><strong>Nama:</strong> ${name}</div>
      <div><strong>Alamat:</strong> ${addr}</div>
      <div><strong>HP:</strong> ${phone}</div>
      <div><strong>Kurir:</strong> ${selectedCourier.name} (${selectedCourier.etd})</div>
      <div><strong>Pembayaran:</strong> ${selectedPayment.name}</div>
      <div><strong>Total:</strong> ${rupiah(total)}</div>
    `);

    // reset
    for (const k in cart) delete cart[k];
    updateCartCount();
    selectedCourier = null; selectedPayment = null;
    $("#custName,#custAddr,#custPhone").val("");
    $view("done");
  }

  // ---------- Events ----------
  $("#cartBtn").on("click", () => { renderCart(); $view("cart"); });
  $("#toCheckout").on("click", () => {
    if (Object.keys(cart).length === 0) { toast("Keranjang kosong"); return; }
    buildCheckout(); $view("checkout");
  });
  $("#placeOrder").on("click", placeOrder);
  $("#searchInput").on("input", function () { searchTerm = $(this).val(); renderCatalog(); });

  // navigasi via data-view (brand & tombol)
  $(document).on("click", "[data-view]", function (e) {
    e.preventDefault();
    const v = $(this).data("view");
    if (v === "cart") renderCart();
    if (v === "checkout") buildCheckout();
    $view(v);
  });

  // ---------- Init ----------
  buildCats();
  renderCatalog();
  updateCartCount();
});