/* Peace Arch Park visit page — App */
const { useState, useEffect, useMemo, useRef } = React;

// ---------- Default tweak values ----------
const DEFAULT_TWEAKS = /*EDITMODE-BEGIN*/{
  "meetingDate": "",
  "meetingTime": "",
  "accent": "#B8962E"
}/*EDITMODE-END*/;

// ---------- Language detection ----------
function detectLang() {
  const urlLang = new URLSearchParams(window.location.search).get("l");
  if (urlLang && window.I18N[urlLang]) return urlLang;
  const saved = localStorage.getItem("pap_lang");
  if (saved && window.I18N[saved]) return saved;
  const navLang = (navigator.language || "en").toLowerCase();
  // direct match
  for (const code of window.LANG_ORDER) {
    if (navLang === code || navLang.startsWith(code + "-")) return code;
  }
  // common aliases
  if (navLang.startsWith("zh")) return "zh";
  return "en";
}

// ---------- Components ----------
function LangSwitcher({ lang, setLang, t }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    function onDoc(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, []);
  return (
    <div className="lang-switcher" ref={ref}>
      <button
        className="lang-button"
        onClick={() => setOpen(o => !o)}
        aria-haspopup="listbox"
        aria-expanded={open}
        aria-label={t.langLabel}
      >
        <i className="ph ph-globe" aria-hidden="true"></i>
        <span className="lang-current">{window.I18N[lang].name}</span>
        <i className="ph ph-caret-down lang-caret" aria-hidden="true"></i>
      </button>
      {open && (
        <ul className="lang-menu" role="listbox">
          {window.LANG_ORDER.map(code => (
            <li key={code}>
              <button
                className={"lang-menu-item" + (code === lang ? " is-active" : "")}
                onClick={() => { setLang(code); setOpen(false); }}
                role="option"
                aria-selected={code === lang}
              >
                <span>{window.I18N[code].name}</span>
                {code === lang && <i className="ph ph-check" aria-hidden="true"></i>}
              </button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

function Header({ lang, setLang, t }) {
  return (
    <header className="site-header">
      <div className="site-header-inner">
        <div className="brand">
          <img src="assets/logo.png" alt="" className="brand-logo" />
          <div className="brand-text">
            <div className="brand-name">{t.brand}</div>
            <div className="brand-sub">{t.brandSub}</div>
          </div>
        </div>
        <LangSwitcher lang={lang} setLang={setLang} t={t} />
      </div>
    </header>
  );
}

function WarningBanner({ t }) {
  return (
    <div className="warning-banner" role="alert">
      <div className="warning-banner-inner">
        <div className="warning-icon" aria-hidden="true">
          <i className="ph ph-warning"></i>
        </div>
        <div className="warning-content">
          <div className="warning-title">{t.warningTitle}</div>
          <p className="warning-body">{t.warningBody}</p>
        </div>
      </div>
    </div>
  );
}

function HeroMeeting({ t, dateOverride, timeOverride }) {
  const date = dateOverride && dateOverride.trim() ? dateOverride : t.meetingDateDefault;
  const time = timeOverride && timeOverride.trim() ? timeOverride : t.meetingTimeDefault;
  return (
    <section className="hero">
      <div className="container">
        <div className="overline">{t.headerNote}</div>
        <h1 className="hero-title">Peace Arch Park</h1>
        <div className="meeting-card">
          <div className="meeting-card-row">
            <div className="meeting-icon" aria-hidden="true">
              <i className="ph ph-calendar-check"></i>
            </div>
            <div className="meeting-text">
              <div className="meeting-label">{t.meetingLabel}</div>
              <div className="meeting-date">{date}</div>
              <div className="meeting-time">{time}</div>
            </div>
          </div>
          <p className="meeting-note">{t.queueNote}</p>
          <p className="meeting-note muted">{t.weatherNote}</p>
        </div>
      </div>
    </section>
  );
}

function Section({ id, eyebrow, title, children, dark }) {
  return (
    <section className={"section" + (dark ? " section-dark" : "")} id={id}>
      <div className="container">
        {eyebrow && <div className="overline">{eyebrow}</div>}
        {title && <h2 className="section-title">{title}</h2>}
        {children}
      </div>
    </section>
  );
}

function RouteSection({ t }) {
  const mapsUrl = "https://www.google.com/maps/search/?api=1&query=" + encodeURIComponent(t.address);
  return (
    <Section id="route" eyebrow="01" title={t.routeTitle}>
      <p className="lead">{t.routeIntro}</p>
      <div className="address-card">
        <div className="address-row">
          <i className="ph ph-map-pin address-icon" aria-hidden="true"></i>
          <div>
            <div className="address-label">{t.addressLabel}</div>
            <div className="address-value">{t.address}</div>
          </div>
        </div>
        <a className="btn btn-primary" href={mapsUrl} target="_blank" rel="noopener">
          <i className="ph ph-arrow-square-out" aria-hidden="true"></i>
          <span>{t.mapsButton}</span>
        </a>
      </div>
      <p className="caption-note">{t.mapsNote}</p>
    </Section>
  );
}

function VideoSection({ t }) {
  return (
    <Section id="video" eyebrow="02" title={t.videoTitle}>
      <div className="video-wrap">
        <iframe
          src="https://www.youtube.com/embed/oU4gVOo8mZA?start=20"
          title={t.videoTitle}
          frameBorder="0"
          allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowFullScreen
        ></iframe>
      </div>
      <p className="caption-note">{t.videoCaption}</p>
    </Section>
  );
}

function DrivingSection({ t }) {
  return (
    <Section id="driving" eyebrow="03" title={t.drivingTitle}>
      <ol className="numbered-list">
        {t.drivingTips.map((tip, i) => (
          <li key={i}>
            <span className="num">{String(i + 1).padStart(2, "0")}</span>
            <span className="num-text">{tip}</span>
          </li>
        ))}
      </ol>
    </Section>
  );
}

function ParkingSection({ t }) {
  return (
    <Section id="parking" eyebrow="04" title={t.parkingTitle}>
      <ol className="numbered-list">
        {t.parkingTips.map((tip, i) => (
          <li key={i}>
            <span className="num">{String(i + 1).padStart(2, "0")}</span>
            <span className="num-text">{tip}</span>
          </li>
        ))}
      </ol>
    </Section>
  );
}

function LostSection({ t }) {
  return (
    <Section id="lost" eyebrow="05" title={t.lostTitle}>
      <p className="lead">{t.lostBody}</p>
      <blockquote className="quote-card">
        <i className="ph ph-quotes quote-mark" aria-hidden="true"></i>
        <p>{t.lostQuote}</p>
      </blockquote>
    </Section>
  );
}

function ChecklistSection({ t }) {
  return (
    <Section id="checklist" eyebrow="06" title={t.checklistTitle}>
      <ul className="bring-list">
        {t.checklist.map((item, i) => (
          <li key={i}>
            <i className="ph ph-check-circle bring-icon" aria-hidden="true"></i>
            <div>
              <div className="bring-title">{item.t}</div>
              <div className="bring-desc">{item.d}</div>
            </div>
          </li>
        ))}
      </ul>

      <div className="leave-behind">
        <h3 className="leave-title">
          <i className="ph ph-x-circle" aria-hidden="true"></i>
          <span>{t.leaveBehindTitle}</span>
        </h3>
        <ul className="leave-list">
          {t.leaveBehindItems.map((item, i) => (
            <li key={i}>{item}</li>
          ))}
        </ul>
      </div>
    </Section>
  );
}

function CallSection({ t }) {
  return (
    <Section id="call" eyebrow="07" title={t.callTitle} dark>
      <p className="lead lead-on-dark">{t.callBody}</p>
      <a className="btn btn-accent btn-large" href="tel:+12063193543">
        <i className="ph ph-phone" aria-hidden="true"></i>
        <span>{t.callButton}</span>
      </a>
    </Section>
  );
}

const NOTARY_EMAIL = "notary@andrii.co";

function interacUrl(lang) {
  const seg = lang === "fr" ? "fr" : lang === "zh" ? "zh-hans" : "en";
  return `https://www.interac.ca/${seg}/how-to-use/interac-e-transfer/how-to-send-money-with-interac-e-transfer/`;
}

function CopyEmailButton({ email, t }) {
  const [copied, setCopied] = useState(false);
  async function onCopy() {
    try {
      await navigator.clipboard.writeText(email);
    } catch {
      const ta = document.createElement("textarea");
      ta.value = email;
      ta.style.position = "fixed";
      ta.style.opacity = "0";
      document.body.appendChild(ta);
      ta.select();
      try { document.execCommand("copy"); } catch {}
      document.body.removeChild(ta);
    }
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  }
  const label = copied ? t.copiedLabel : t.copyLabel;
  return (
    <button
      type="button"
      className={"copy-email" + (copied ? " is-copied" : "")}
      onClick={onCopy}
      aria-label={label}
      title={label}
    >
      <i className={"ph " + (copied ? "ph-check" : "ph-copy")} aria-hidden="true"></i>
    </button>
  );
}

function renderPayDesc(text, t) {
  const idx = text.indexOf(NOTARY_EMAIL);
  if (idx === -1) return text;
  return (
    <>
      {text.slice(0, idx)}
      <a href={`mailto:${NOTARY_EMAIL}`}>{NOTARY_EMAIL}</a>
      <CopyEmailButton email={NOTARY_EMAIL} t={t} />
      {text.slice(idx + NOTARY_EMAIL.length)}
    </>
  );
}

function PaymentSection({ t, lang }) {
  return (
    <Section id="payment" eyebrow="08" title={t.paymentTitle}>
      <div className="pay-grid">
        {t.paymentItems.map((p, i) => (
          <div className="pay-card" key={i}>
            <div className="pay-icon" aria-hidden="true">
              <i className={i === 0 ? "ph ph-credit-card" : "ph ph-paper-plane-tilt"}></i>
            </div>
            <div className="pay-title">{p.t}</div>
            <div className="pay-desc">
              {i === 1 ? renderPayDesc(p.d, t) : p.d}
            </div>
            {i === 0 && (
              <div className="pay-action">
                <stripe-buy-button
                  buy-button-id="buy_btn_1T6oJFCPcz2a2RFoJWKK1om9"
                  publishable-key="pk_live_tNFih7bhENvsVeJPcXovgGdi00W6JwuhOJ"
                ></stripe-buy-button>
              </div>
            )}
            {i === 1 && (
              <div className="pay-action">
                <a
                  className="btn btn-primary"
                  href={interacUrl(lang)}
                  target="_blank"
                  rel="noopener"
                >
                  <i className="ph ph-arrow-square-out" aria-hidden="true"></i>
                  <span>{t.payButton}</span>
                </a>
              </div>
            )}
          </div>
        ))}
      </div>
      <p className="payment-no-cash">
        <i className="ph ph-prohibit" aria-hidden="true"></i>
        <span>{t.paymentNoCash}</span>
      </p>

      <div className="delivery">
        <h3 className="delivery-title">{t.deliveryTitle}</h3>
        <p>{t.deliveryBody}</p>
      </div>
    </Section>
  );
}

function Footer({ t }) {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-quote">{t.footerNote}</div>
        <div className="footer-brand">
          <img src="assets/logo.png" alt="" className="footer-logo" />
          <span>{t.brand} · {t.brandSub}</span>
        </div>
      </div>
    </footer>
  );
}

// ---------- Tweaks panel ----------
function Tweaks() {
  const [t, setTweak] = window.useTweaks(DEFAULT_TWEAKS);
  // Apply accent live
  useEffect(() => {
    document.documentElement.style.setProperty("--accent-live", t.accent);
  }, [t.accent]);
  // Broadcast date/time so the App can read them
  useEffect(() => {
    window.__papDate = t.meetingDate;
    window.__papTime = t.meetingTime;
    window.dispatchEvent(new CustomEvent("pap-tweaks-change"));
  }, [t.meetingDate, t.meetingTime]);

  const TP = window.TweaksPanel;
  const TS = window.TweakSection;
  const TText = window.TweakText;
  const TColor = window.TweakColor;

  return (
    <TP title="Tweaks">
      <TS label="Meeting">
        <TText
          label="Date (override)"
          value={t.meetingDate}
          onChange={(v) => setTweak("meetingDate", v)}
          placeholder="(uses translated default)"
        />
        <TText
          label="Time (override)"
          value={t.meetingTime}
          onChange={(v) => setTweak("meetingTime", v)}
          placeholder="(uses translated default)"
        />
      </TS>
      <TS label="Style">
        <TColor
          label="Accent color"
          value={t.accent}
          onChange={(v) => setTweak("accent", v)}
        />
      </TS>
    </TP>
  );
}

// ---------- App ----------
function App() {
  const [lang, setLangState] = useState(() => detectLang());
  const [tweakBump, setTweakBump] = useState(0);
  useEffect(() => {
    function onChange() { setTweakBump(b => b + 1); }
    window.addEventListener("pap-tweaks-change", onChange);
    return () => window.removeEventListener("pap-tweaks-change", onChange);
  }, []);

  const t = window.I18N[lang];

  useEffect(() => {
    document.documentElement.lang = t.htmlLang;
    document.documentElement.dir = t.dir;
    document.title = `${t.brand} — Peace Arch Park`;
    localStorage.setItem("pap_lang", lang);
    const url = new URL(window.location.href);
    if (url.searchParams.get("l") !== lang) {
      url.searchParams.set("l", lang);
      window.history.replaceState({}, "", url);
    }
  }, [lang, t]);

  useEffect(() => {
    function onPop() {
      const urlLang = new URLSearchParams(window.location.search).get("l");
      if (urlLang && window.I18N[urlLang]) setLangState(urlLang);
    }
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);

  function setLang(code) { setLangState(code); }

  const dateOverride = window.__papDate || "";
  const timeOverride = window.__papTime || "";

  return (
    <div className="app">
      <Header lang={lang} setLang={setLang} t={t} />
      <WarningBanner t={t} />
      <main>
        <HeroMeeting t={t} dateOverride={dateOverride} timeOverride={timeOverride} />
        <RouteSection t={t} />
        <VideoSection t={t} />
        <DrivingSection t={t} />
        <ParkingSection t={t} />
        <LostSection t={t} />
        <ChecklistSection t={t} />
        <CallSection t={t} />
        <PaymentSection t={t} lang={lang} />
      </main>
      <Footer t={t} />
      <Tweaks />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);