/* App.jsx — shell, nav, language */

const APP_ACCENT = "#C2613B";

function InfoView({ t, lang, onBack }) {
  const steps = [
    { ico: "map-pin",     title: t.info_step_loc,   desc: t.info_step_loc_desc },
    { ico: "grid-2x2",    title: t.info_step_cat,   desc: t.info_step_cat_desc },
    { ico: "clock",       title: t.info_step_when,  desc: t.info_step_when_desc },
    { ico: "camera",      title: t.info_step_proof, desc: t.info_step_proof_desc },
    { ico: "send",        title: t.info_step_send,  desc: t.info_step_send_desc },
  ];
  return (
    <div className="info-view">
      {onBack && (
        <button className="btn btn-ghost info-back" onClick={onBack}>
          <Ico name="arrow-left" size={15} /> {t.nav_report}
        </button>
      )}
      <div className="info-hero">
        <div className="eyebrow hero-eyebrow"><Ico name="info" size={13} /> {t.info_eyebrow}</div>
        <h1 className="display info-title">{t.info_title}</h1>
        <p className="info-lead">{t.info_lead}</p>
      </div>

      <div className="info-notices">
        <div className="notice notice-danger">
          <Ico name="triangle-alert" size={17} />
          <span><strong>{lang === "de" ? "Notruf 133 / 112" : "Emergency 133 / 112"} —</strong> {t.danger_note}</span>
        </div>
        <div className="notice notice-warn">
          <Ico name="file-text" size={17} />
          <span>{t.doc_note}</span>
        </div>
      </div>

      <section className="info-section">
        <h2 className="info-sec-title">{t.info_how}</h2>
        <div className="info-steps">
          {steps.map((s, i) => (
            <div key={i} className="info-step">
              <div className="info-step-num">{i + 1}</div>
              <div className="info-step-ico"><Ico name={s.ico} size={22} /></div>
              <div>
                <div className="info-step-title">{s.title}</div>
                <div className="info-step-desc">{s.desc}</div>
              </div>
            </div>
          ))}
        </div>
        <div className="notice notice-warn" style={{ marginTop: 16 }}>
          <Ico name="map" size={16} /> <span>{t.info_geo_note}</span>
        </div>
      </section>

      <section className="info-section">
        <h2 className="info-sec-title">{t.info_what}</h2>
        <div className="info-cat-grid">
          {window.MELD.categories.filter((c) => c.id !== "other").map((c) => (
            <div key={c.id} className="info-cat">
              <Ico name={c.icon} size={18} />
              <span>{c[lang]}</span>
            </div>
          ))}
        </div>
      </section>

      <section className="info-section">
        <h2 className="info-sec-title">{t.info_about}</h2>
        <p className="info-body">{t.info_about_body}</p>
        <div className="info-zones-row">
          <div className="info-zones-label"><Ico name="map-pin" size={14} /> {t.info_zones}</div>
          <div className="info-zone-list">
            {window.MELD.zones.map((z, i) => (
              <span key={i} className="info-zone">{z}</span>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function applyTheme() {
  const r = document.documentElement.style;
  r.setProperty("--accent", APP_ACCENT);
  r.setProperty("--accent-2", `color-mix(in oklab, ${APP_ACCENT}, #2a1208 16%)`);
  r.setProperty("--accent-soft", `color-mix(in oklab, ${APP_ACCENT}, var(--paper) 88%)`);
}

function Brand({ t }) {
  return (
    <div className="brand">
      <span className="brand-mark"><span className="brand-mark-i"></span></span>
      <div className="brand-text">
        <span className="brand-name">MELDEPUNKT</span>
        <span className="brand-sub">{t.brandSub}</span>
      </div>
    </div>
  );
}

function App() {
  const [lang, setLang] = React.useState(() => localStorage.getItem("meld_lang") || "de");
  const [view, setView] = React.useState("report");  // "report" | "info" | "admin"
  const t = window.I18N[lang];

  React.useEffect(() => { applyTheme(); }, []);
  React.useEffect(() => { localStorage.setItem("meld_lang", lang); }, [lang]);
  React.useEffect(() => {
    try { window.lucide && window.lucide.createIcons(); } catch (e) {}
  });

  // Allow /admin path to land on admin view
  React.useEffect(() => {
    if (window.location.pathname === "/admin" || window.location.hash === "#admin") {
      setView("admin");
    }
  }, []);

  return (
    <div className="app">
      <div className="topbar">
        <div className="topbar-in">
          <span className="emrg"><Ico name="phone" size={13} /> {t.emergency}</span>
          <div className="topbar-right">
            <button className="lang-toggle" onClick={() => setLang(lang === "de" ? "en" : "de")}>
              <Ico name="languages" size={14} />
              <span className={lang === "de" ? "on" : ""}>DE</span>
              <span className="lang-sep">/</span>
              <span className={lang === "en" ? "on" : ""}>EN</span>
            </button>
            <button
              className={"admin-lock" + (view === "admin" ? " on" : "")}
              onClick={() => setView(view === "admin" ? "report" : "admin")}
              title={t.nav_admin}
              aria-label={t.nav_admin}
            >
              <Ico name="lock" size={16} />
            </button>
          </div>
        </div>
      </div>

      <header className="header">
        <div className="header-in">
          <Brand t={t} />
          <nav className="nav">
            <button className={"nav-btn" + (view === "report" ? " on" : "")} onClick={() => setView("report")}>
              <Ico name="megaphone" size={16} /> <span className="nav-btn-label">{t.nav_report}</span>
            </button>
            <button className={"nav-btn" + (view === "info" ? " on" : "")} onClick={() => setView("info")}>
              <Ico name="info" size={16} /> <span className="nav-btn-label">{t.nav_info}</span>
            </button>
          </nav>
        </div>
      </header>

      <main className="main">
        <div className="report-view" style={{ display: view === "report" ? "" : "none" }}>
          <section className="hero">
            <div className="hero-text">
              <div className="eyebrow hero-eyebrow"><span className="pulse-dot"></span> {t.hero_eyebrow}</div>
              <div className="hero-title-row">
                <h1 className="display hero-title">{t.hero_title}</h1>
                <div className="hero-mobile-aside">
                  <img src="/naturschutzgebiet.png" alt="Naturschutzgebiet Rheindelta" className="hero-mobile-img" />
                  <a href="https://www.ris.bka.gv.at/GeltendeFassung.wxe?Abfrage=LrVbg&Gesetzesnummer=20001769"
                     target="_blank" rel="noopener noreferrer" className="hero-mobile-law">
                    <Ico name="file-text" size={11}/><span>{t.hero_info_law}</span>
                  </a>
                </div>
              </div>
              <p className="hero-lead">{t.hero_lead}</p>
            </div>
            <aside className="hero-aside">
              <div className="hero-info-card card">
                <img src="/naturschutzgebiet.png" alt="Naturschutzgebiet Rheindelta" className="hero-info-img" />
                <div className="hero-info-body">
                  <p className="hero-info-desc">{t.hero_info_desc}</p>
                  <div className="hero-info-links">
                    <a href="https://www.ris.bka.gv.at/GeltendeFassung.wxe?Abfrage=LrVbg&Gesetzesnummer=20001769"
                       target="_blank" rel="noopener noreferrer" className="hero-info-law">
                      <Ico name="file-text" size={14}/> {t.hero_info_law}
                    </a>
                    <button className="btn btn-ghost hero-info-btn" onClick={() => setView("info")}>
                      <Ico name="info" size={14}/> {t.nav_info}
                    </button>
                  </div>
                </div>
              </div>
            </aside>
          </section>

          <div className="form-card card">
            <ReportForm lang={lang} t={t} />
          </div>

          <footer className="footer">
            <span>Meldepunkt · BirdLife Vorarlberg</span>
            <span className="footer-links">
              <a href="/impressum.html">Impressum</a>
              <a href="/privacy.html">Datenschutz</a>
            </span>
          </footer>
        </div>

        <div className="report-view" style={{ display: view === "info" ? "" : "none" }}>
          <InfoView t={t} lang={lang} onBack={() => setView("report")} />
          <footer className="footer">
            <span>Meldepunkt · BirdLife Vorarlberg</span>
            <span className="footer-links">
              <a href="/impressum.html">Impressum</a>
              <a href="/privacy.html">Datenschutz</a>
            </span>
          </footer>
        </div>

        {view === "admin" && <AdminPanel lang={lang} t={t} />}
      </main>
    </div>
  );
}

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