// Klientská sekce „Můj účet" — levá navigace + sekce (profil, adresy,
// objednávky, předobjednávky, oblíbené, hlídací psi, platby, heslo).
// Vizuální základ, který se natáhne na WooCommerce „Můj účet".
(function () {
  if (typeof React === "undefined") return;
  const DS = window.VElaStvNajmanDesignSystem_bc3fc2;
  const { Button, Input } = DS;
  const Icon = window.VNIcon;

  const SECTIONS = [
    { id: "profil", label: "Profil", icon: "user" },
    { id: "adresy", label: "Adresy", icon: "pin" },
    { id: "objednavky", label: "Historie objednávek", icon: "fileText" },
    { id: "predobjednavky", label: "Mé předobjednávky", icon: "spark" },
    { id: "upozorneni", label: "Hlídací psi", icon: "bell" },
    { id: "heslo", label: "Změna hesla", icon: "lock" },
  ];

  const ORDER_STATUS = {
    received: { label: "Přijatá", cls: "received" },
    shipped: { label: "Odeslaná", cls: "shipped" },
    delivered: { label: "Doručená", cls: "delivered" },
  };

  // ---- malý přepínač (toggle) ----
  function Switch({ checked, onChange, label }) {
    return (
      <button type="button" className="kit-switch" role="switch" aria-checked={checked}
        aria-label={label} data-on={checked} onClick={() => onChange(!checked)}>
        <span className="kit-switch__knob" />
      </button>
    );
  }

  function PanelHead({ title, desc }) {
    return (
      <header className="kit-acc-panel__head">
        <h2>{title}</h2>
        {desc && <p>{desc}</p>}
      </header>
    );
  }

  // ============================ PROFIL ============================
  function ProfilPanel({ user }) {
    const [name, setName] = React.useState(`${user.firstName} ${user.lastName}`);
    const [email, setEmail] = React.useState(user.email);
    const [phone, setPhone] = React.useState(user.phone);
    const [news, setNews] = React.useState(user.newsletter);
    return (
      <div className="kit-acc-panel">
        <PanelHead title="Profil" desc="Vaše kontaktní údaje. Používáme je při doručení a pro potvrzení objednávek." />
        <div className="kit-card kit-form">
          <Input label="Jméno a příjmení" value={name} onChange={(e) => setName(e.target.value)}
            icon={<Icon name="user" />} />
          <div className="kit-form__grid2">
            <Input label="E-mail" type="email" value={email} onChange={(e) => setEmail(e.target.value)}
              icon={<Icon name="mail" />} />
            <Input label="Telefon" type="tel" value={phone} onChange={(e) => setPhone(e.target.value)}
              icon={<Icon name="phone" />} />
          </div>
          <div className="kit-switchrow">
            <div>
              <span className="kit-switchrow__label">Odebírat newsletter</span>
              <span className="kit-switchrow__hint">Dáme vědět, jakmile otevřeme příjem objednávek nebo naskladníme volné matky.</span>
            </div>
            <Switch checked={news} onChange={setNews} label="Odebírat newsletter" />
          </div>
          <div className="kit-form__actions">
            <Button variant="primary" iconStart={<Icon name="check" size={17} />}>Uložit změny</Button>
          </div>
        </div>
      </div>
    );
  }

  // ============================ ADRESY ============================
  function AddressCard({ kind, addr }) {
    return (
      <div className="kit-card kit-addr">
        <div className="kit-addr__head">
          <span className="kit-addr__kind"><Icon name={kind === "shipping" ? "truck" : "fileText"} size={16} />{kind === "shipping" ? "Doručovací adresa" : "Fakturační adresa"}</span>
          <button className="kit-iconlink" aria-label="Upravit adresu"><Icon name="edit" size={16} /> Upravit</button>
        </div>
        <address className="kit-addr__body">
          <strong>{addr.name}</strong>
          {addr.street}<br />
          {addr.zip} {addr.city}<br />
          {addr.country}
        </address>
      </div>
    );
  }
  function AdresyPanel({ addresses }) {
    return (
      <div className="kit-acc-panel">
        <PanelHead title="Adresy" desc="Doručovací a fakturační adresa pro vaše objednávky." />
        <div className="kit-addr-grid">
          <AddressCard kind="shipping" addr={addresses.shipping} />
          <AddressCard kind="billing" addr={addresses.billing} />
        </div>
      </div>
    );
  }

  // ====================== HISTORIE OBJEDNÁVEK ======================
  function OrderRow({ order, products, onReorder, go }) {
    const items = order.items
      .map((it) => { const p = products.find((x) => x.id === it.id); return p ? `${p.name}${it.qty > 1 ? ` (${it.qty}×)` : ""}` : null; })
      .filter(Boolean).join(", ");
    const st = ORDER_STATUS[order.status] || ORDER_STATUS.received;
    return (
      <div className="kit-order">
        <div className="kit-order__top">
          <div className="kit-order__id">
            <span className="kit-order__num">Objednávka č. {order.number}</span>
            <span className="kit-order__date">{order.date}</span>
          </div>
          <span className={"kit-ostatus kit-ostatus--" + st.cls}><span className="kit-ostatus__dot" />{st.label}</span>
        </div>
        <p className="kit-order__items">{items}</p>
        <div className="kit-order__foot">
          <span className="kit-order__total">{order.total} Kč</span>
          <div className="kit-order__btns">
            <Button variant="secondary" size="sm" onClick={() => go && go("home")}>Detail</Button>
            <Button variant="primary" size="sm" iconStart={<Icon name="cart" size={15} />}
              onClick={() => onReorder && onReorder(order)}>Objednat znovu</Button>
          </div>
        </div>
      </div>
    );
  }
  function ObjednavkyPanel({ orders, products, onReorder, go }) {
    return (
      <div className="kit-acc-panel">
        <PanelHead title="Historie objednávek" desc="Přehled vašich objednávek a jejich stavu." />
        <div className="kit-stack">
          {orders.map((o) => <OrderRow key={o.number} order={o} products={products} onReorder={onReorder} go={go} />)}
        </div>
      </div>
    );
  }

  // ===================== MÉ PŘEDOBJEDNÁVKY =====================
  const PRE_STATUS = {
    preparing: "Přijato — připravujeme",
    fermenting: "Kvasí — dozrává",
  };
  function PredobjednavkyPanel({ preorders }) {
    return (
      <div className="kit-acc-panel">
        <PanelHead title="Mé předobjednávky" desc="Sezónní matky a oddělky, které jste si rezervovali. Dáme vědět hned, jak naskladníme." />
        {preorders.length === 0 ? (
          <EmptyState icon="spark" text="Zatím nemáte žádné předobjednávky." />
        ) : (
          <div className="kit-stack">
            {preorders.map((pre) => (
              <div className="kit-card kit-pre" key={pre.id}>
                <span className="kit-pre__icon"><Icon name="spark" size={20} /></span>
                <div className="kit-pre__main">
                  <div className="kit-pre__row">
                    <span className="kit-pre__name">{pre.name}</span>
                    <span className="kit-pre__weight">{pre.weight}</span>
                  </div>
                  <p className="kit-pre__note">{pre.note}</p>
                </div>
                <div className="kit-pre__side">
                  <span className="kit-chip kit-chip--gold"><span className="kit-ostatus__dot" />{PRE_STATUS[pre.status] || "Rezervováno"}</span>
                  <span className="kit-pre__eta">Naskladnění: <b>{pre.restock}</b></span>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    );
  }

  // ========================= OBLÍBENÉ =========================
  // Kompaktní mini-karta — malý náhled, název, cena, rychlé přidání.
  function FavCard({ p, onOpen, onAdd, onNotify, onPreorder, onRemove }) {
    const { Photo } = DS;
    const soldOut = p.stock === "out";
    const minPrice = p.variants && p.variants.length ? Math.min.apply(null, p.variants.map((v) => v.price)) : p.price;
    return (
      <article className="kit-favcard">
        <div className="kit-favcard__media" onClick={() => onOpen && onOpen(p)}>
          <Photo src={p.image} ratio="16 / 11" alt={p.name} label={p.weight} />
          <button className="kit-favcard__heart" aria-label={"Odebrat " + p.name + " z oblíbených"}
            title="Odebrat z oblíbených" onClick={(e) => { e.stopPropagation(); onRemove(); }}>
            <Icon name="heartFill" size={16} />
          </button>
        </div>
        <div className="kit-favcard__body">
          {p.region && <span className="kit-favcard__region">{p.region}</span>}
          <h3 className="kit-favcard__name" onClick={() => onOpen && onOpen(p)}>{p.name}</h3>
          <div className="kit-favcard__foot">
            <span className="kit-favcard__price">
              {p.variants && p.variants.length ? "od " : ""}{minPrice} Kč
            </span>
            {soldOut ? (
              p.restock ? (
                <button className="kit-favcard__add" onClick={() => onPreorder && onPreorder(p)} aria-label="Předobjednat">
                  <Icon name="check" size={16} />
                </button>
              ) : (
                <button className="kit-favcard__add kit-favcard__add--ghost" onClick={() => onNotify && onNotify(p)} aria-label="Upozornit, až naskladníme">
                  <Icon name="bell" size={16} />
                </button>
              )
            ) : (
              <button className="kit-favcard__add" onClick={onAdd} aria-label={"Přidat " + p.name + " do košíku"}>
                <Icon name="plus" size={16} />
              </button>
            )}
          </div>
        </div>
      </article>
    );
  }

  function OblibenePanel({ favorites, products, shared }) {
    const [favs, setFavs] = React.useState(favorites);
    const items = favs.map((id) => products.find((p) => p.id === id)).filter(Boolean);
    if (items.length === 0) return (
      <div className="kit-acc-panel">
        <PanelHead title="Oblíbené" />
        <EmptyState icon="heart" text="Zatím nemáte uložené žádné produkty. Klepněte na srdíčko u produktu." />
      </div>
    );
    return (
      <div className="kit-acc-panel">
        <PanelHead title="Oblíbené" desc="Produkty, které jste si uložili klepnutím na srdíčko." />
        <div className="kit-favcard-grid">
          {items.map((p) => (
            <FavCard key={p.id} p={p}
              onOpen={shared.onOpen} onAdd={() => shared.addToCart(p)}
              onNotify={shared.onNotify} onPreorder={shared.onPreorder}
              onRemove={() => setFavs((f) => f.filter((x) => x !== p.id))} />
          ))}
        </div>
      </div>
    );
  }

  // =================== HLÍDACÍ PSI / UPOZORNĚNÍ ===================
  function UpozorneniPanel({ watches }) {
    const [list, setList] = React.useState(watches);
    return (
      <div className="kit-acc-panel">
        <PanelHead title="Hlídací psi" desc="Produkty, u kterých vás upozorníme, jakmile je naskladníme." />
        {list.length === 0 ? (
          <EmptyState icon="bell" text="Nehlídáte žádné produkty. U vyprodaného produktu klepněte na „Upozornit”." />
        ) : (
          <div className="kit-stack">
            {list.map((w) => (
              <div className="kit-card kit-watch" key={w.id}>
                <span className="kit-watch__icon"><Icon name="bell" size={19} /></span>
                <div className="kit-watch__main">
                  <span className="kit-watch__name">{w.name}</span>
                  <span className="kit-watch__meta">{w.weight} · {w.restock ? <>očekáváme <b>{w.restock}</b></> : "termín upřesníme"}</span>
                </div>
                <button className="kit-iconlink kit-iconlink--danger" onClick={() => setList((l) => l.filter((x) => x.id !== w.id))}>
                  <Icon name="close" size={16} /> Zrušit
                </button>
              </div>
            ))}
          </div>
        )}
      </div>
    );
  }

  // ====================== PLATEBNÍ METODY ======================
  function PlatbyPanel({ paymentMethods, supportedMethods }) {
    const [cards, setCards] = React.useState(paymentMethods);
    const [gate, setGate] = React.useState(false);
    return (
      <div className="kit-acc-panel">
        <PanelHead title="Platební metody" desc="Uložené karty pro rychlejší platbu. Údaje o kartě nikdy neukládáme na našem webu — vše řeší zabezpečená platební brána." />

        <div className="kit-stack">
          {cards.map((c) => (
            <div className="kit-card kit-pm" key={c.id}>
              <span className="kit-pm__chip"><Icon name="creditCard" size={20} /></span>
              <div className="kit-pm__main">
                <span className="kit-pm__num">{c.brand} •••• {c.last4}</span>
                <span className="kit-pm__exp">platnost {c.exp}</span>
              </div>
              <button className="kit-iconlink kit-iconlink--danger" onClick={() => setCards((l) => l.filter((x) => x.id !== c.id))}>
                <Icon name="trash" size={16} /> Odebrat
              </button>
            </div>
          ))}
        </div>

        <div className="kit-form__actions" style={{ justifyContent: "flex-start", marginTop: 16 }}>
          <Button variant="secondary" iconStart={<Icon name="plus" size={17} />} onClick={() => setGate(true)}>Přidat kartu</Button>
        </div>

        <div className="kit-paysupport">
          <span className="vn-eyebrow"><Icon name="shield" size={14} /> Podporované způsoby platby</span>
          <div className="kit-paysupport__chips">
            {supportedMethods.map((m) => (
              <span className="kit-paychip" key={m.label}><Icon name={m.icon} size={16} />{m.label}</span>
            ))}
          </div>
        </div>

        {gate && (
          <div className="kit-gate" onClick={() => setGate(false)}>
            <div className="kit-gate__panel" onClick={(e) => e.stopPropagation()}>
              <span className="kit-gate__lock"><Icon name="lock" size={22} /></span>
              <h3>Zabezpečená platební brána</h3>
              <p>Tady se otevře brána (GoPay / Stripe), kde bezpečně zadáte údaje o kartě. Číslo karty nikdy neprochází naším webem.</p>
              <div className="kit-gate__skeleton">
                <span className="kit-gate__line" style={{ width: "100%" }} />
                <span className="kit-gate__line" style={{ width: "60%" }} />
                <span className="kit-gate__line" style={{ width: "80%" }} />
              </div>
              <Button variant="secondary" block onClick={() => setGate(false)}>Zavřít</Button>
            </div>
          </div>
        )}
      </div>
    );
  }

  // ======================== ZMĚNA HESLA ========================
  function HesloPanel() {
    return (
      <div className="kit-acc-panel">
        <PanelHead title="Změna hesla" desc="Pro vaši bezpečnost zadejte nejprve stávající heslo." />
        <div className="kit-card kit-form kit-form--narrow">
          <Input label="Stávající heslo" type="password" placeholder="••••••••" icon={<Icon name="lock" />} autoComplete="current-password" />
          <Input label="Nové heslo" type="password" placeholder="••••••••" icon={<Icon name="lock" />} autoComplete="new-password" hint="Alespoň 8 znaků." />
          <Input label="Potvrzení nového hesla" type="password" placeholder="••••••••" icon={<Icon name="lock" />} autoComplete="new-password" />
          <div className="kit-form__actions">
            <Button variant="primary" iconStart={<Icon name="check" size={17} />}>Změnit heslo</Button>
          </div>
        </div>
      </div>
    );
  }

  function EmptyState({ icon, text }) {
    return (
      <div className="kit-empty">
        <span className="kit-empty__icon"><Icon name={icon} size={26} /></span>
        <p>{text}</p>
      </div>
    );
  }

  // ============================ SHELL ============================
  function Account({ go, section, user, onLogout, addToCart, onQuickView, onNotify, onPreorder }) {
    const D = window.SHOP_DATA;
    const acc = D.account;
    const [active, setActive] = React.useState(section || "profil");
    React.useEffect(() => { if (section) setActive(section); }, [section]);
    const navRef = React.useRef(null);
    React.useEffect(() => {
      const nav = navRef.current;
      if (!nav || nav.scrollWidth <= nav.clientWidth + 4) return;
      const el = nav.querySelector('[aria-current="true"]');
      if (!el) return;
      const to = el.offsetLeft - nav.clientWidth / 2 + el.offsetWidth / 2;
      nav.scrollTo({ left: Math.max(0, to), behavior: "smooth" });
    }, [active]);

    const reorder = (order) => {
      order.items.forEach((it) => {
        const p = D.products.find((x) => x.id === it.id);
        if (p) addToCart(p, it.qty);
      });
    };
    const shared = { onOpen: (p) => go("product", p.id), addToCart, onQuickView, onNotify, onPreorder };

    let panel;
    switch (active) {
      case "adresy": panel = <AdresyPanel addresses={acc.addresses} />; break;
      case "objednavky": panel = <ObjednavkyPanel orders={acc.orders} products={D.products} onReorder={reorder} go={go} />; break;
      case "predobjednavky": panel = <PredobjednavkyPanel preorders={acc.preorders} />; break;
      case "upozorneni": panel = <UpozorneniPanel watches={acc.watches} />; break;
      case "heslo": panel = <HesloPanel />; break;
      default: panel = <ProfilPanel user={user || acc.user} />;
    }

    const u = user || acc.user;
    const initials = (u.firstName[0] || "") + (u.lastName[0] || "");

    return (
      <main className="kit kit-account">
        <div className="kit-shell">
          <nav className="kit-breadcrumb">
            <a href="#" onClick={(e) => { e.preventDefault(); go("home"); }}>Domů</a>
            <Icon name="chevronRight" size={13} /> <span>Můj účet</span>
          </nav>
          <header className="kit-account__hero">
            <span className="kit-account__avatar">{initials}</span>
            <div>
              <h1>Můj účet</h1>
              <p>Vítejte zpět, {u.firstName}. Spravujte své objednávky, adresy a oblíbené produkty.</p>
            </div>
          </header>

          <div className="kit-account__layout">
            <aside className="kit-acc-nav" aria-label="Sekce účtu" ref={navRef}>
              {SECTIONS.map((s) => (
                <button key={s.id} className="kit-acc-nav__item" aria-current={active === s.id ? "true" : undefined}
                  onClick={() => { setActive(s.id); go("account", s.id); }}>
                  <Icon name={s.icon} size={18} /> <span>{s.label}</span>
                </button>
              ))}
              <button className="kit-acc-nav__item kit-acc-nav__item--logout" onClick={onLogout}>
                <Icon name="logout" size={18} /> <span>Odhlásit</span>
              </button>
            </aside>

            <section className="kit-acc-content">{panel}</section>
          </div>
        </div>
      </main>
    );
  }

  window.VNAccount = Account;
})();