/* global React, Icon, Wordmark, T, fetchSubscription, createCheckout, openPortal, fetchAnalytics, fetchMenu, buildReport, fmtHour,
   InsightsTab, AnalyticsTab, PricingTab, MenuTab, Paywall, TrialBanner, BillingTab */
const { useState: useStateD, useEffect: useEffectD, useCallback: useCallbackD } = React;

const Dashboard = ({ navigate }) => {
  const [lang, setLang] = useStateD("en");
  const [period, setPeriod] = useStateD("7d");
  const [tab, setTab] = useStateD("insights");

  const [acct, setAcct] = useStateD(undefined);   // undefined=loading, null=error, object=ok
  const [acctErr, setAcctErr] = useStateD("");

  const [agg, setAgg] = useStateD(null);
  const [loading, setLoading] = useStateD(true);
  const [error, setError] = useStateD("");
  const [menu, setMenu] = useStateD([]);
  const [report, setReport] = useStateD([]);

  const [busyTier, setBusyTier] = useStateD("");
  const [manageBusy, setManageBusy] = useStateD(false);
  const [billingErr, setBillingErr] = useStateD("");

  const t = T[lang];

  // ---- account / subscription --------------------------------------------
  const loadAccount = useCallbackD(async () => {
    setAcctErr("");
    try { setAcct(await fetchSubscription()); }
    catch (e) {
      if (e.status === 401) { await window.Supa.signOut(); navigate("/signin"); return; }
      setAcct(null); setAcctErr(e.message || "Could not load your account.");
    }
  }, []);
  useEffectD(() => { loadAccount(); }, [loadAccount]);

  const restaurant = acct && acct.restaurant;
  const slug = restaurant && restaurant.slug;
  const access = acct && acct.access;
  const active = !!(access && access.active);

  // Returning from Stripe Checkout: poll a few times while the webhook lands.
  useEffectD(() => {
    if (!/checkout=success/.test(window.location.hash)) return;
    setTab("billing");
    let tries = 0;
    const iv = setInterval(() => { loadAccount(); if (++tries >= 4) clearInterval(iv); }, 1500);
    return () => clearInterval(iv);
  }, [loadAccount]);

  // ---- analytics (only when access is active) ----------------------------
  const loadAnalytics = useCallbackD(async () => {
    if (!acct || !active) { setLoading(false); return; }
    setLoading(true); setError("");
    try { setAgg(await fetchAnalytics(period)); }
    catch (e) {
      if (e.status === 402) { loadAccount(); return; }
      setError(e.message || "Could not load analytics."); setAgg(null);
    } finally { setLoading(false); }
  }, [acct, active, period]);
  useEffectD(() => { loadAnalytics(); }, [loadAnalytics]);

  // ---- published menu -----------------------------------------------------
  useEffectD(() => {
    if (!slug) return;
    let alive = true;
    fetchMenu(slug).then((res) => { if (alive) setMenu(res.items || []); });
    return () => { alive = false; };
  }, [slug]);

  // ---- billing actions ----------------------------------------------------
  const pickPlan = async (tier) => {
    setBusyTier(tier); setBillingErr("");
    try { const r = await createCheckout(tier); if (r.url) window.location.href = r.url; }
    catch (e) { setBillingErr(e.message || "Could not start checkout."); setBusyTier(""); }
  };
  const manageBilling = async () => {
    setManageBusy(true); setBillingErr("");
    try { const r = await openPortal(); if (r.url) window.location.href = r.url; }
    catch (e) { setBillingErr(e.message || "Could not open billing portal."); setManageBusy(false); }
  };

  const generate = () => setReport(buildReport(agg, lang));
  const signOut = async () => { await window.Supa.signOut(); navigate("/"); };

  // ---- shell --------------------------------------------------------------
  const Shell = ({ children, head }) => (
    <div className="app-shell">
      <div className="app-nav">
        <div className="app-nav-inner">
          <a href="#/" onClick={(e)=>{e.preventDefault(); navigate("/");}}><Wordmark size={20}/></a>
          <div className="app-user">
            {restaurant && <span><strong>{restaurant.name}</strong>{restaurant.email ? " · " + restaurant.email : ""}</span>}
            <button className="btn btn-ghost" onClick={signOut}>{t.signOut}</button>
          </div>
        </div>
      </div>
      <div className="app-body">{head}{children}</div>
    </div>
  );

  // loading
  if (acct === undefined) return (
    <Shell>
      <div className="panel loading-panel" style={{marginTop:40}}>{lang==="es"?"Cargando tu cuenta…":"Loading your account…"}</div>
    </Shell>
  );

  // account load failed (e.g. backend not connected)
  if (acct === null) return (
    <Shell>
      <div className="data-banner error" style={{marginTop:40}}>
        <strong>{lang==="es"?"No se pudo cargar tu cuenta.":"Couldn’t load your account."}</strong> {acctErr}
        <button className="sim-btn" onClick={loadAccount} style={{marginLeft:10}}>{lang==="es"?"Reintentar":"Retry"}</button>
      </div>
    </Shell>
  );

  const langToggle = (
    <div className="toggle-group">
      {[["en","EN"],["es","ES"]].map(([k,l]) => (
        <button key={k} className={lang===k?"active":""} onClick={()=>{setLang(k); if(report.length) setReport(buildReport(agg, k));}}>{l}</button>
      ))}
    </div>
  );

  const head = (
    <div className="app-head">
      <div>
        <div className="app-title">{restaurant.name}</div>
        <div className="app-live">
          <span className={`live-dot ${loading && active ? "loading" : ""}`}/> {active ? t.liveDashboard : (lang==="es"?"Cuenta":"Account")}
        </div>
      </div>
      <div style={{display:"flex", gap:12, flexWrap:"wrap"}}>
        {active && (
          <div className="toggle-group">
            {["7d","14d","30d"].map(p => (<button key={p} className={period===p?"active":""} onClick={()=>setPeriod(p)}>{p}</button>))}
          </div>
        )}
        {langToggle}
        {active && (tab==="insights"||tab==="analytics") && (
          <button className="btn btn-ghost" title="Refresh" onClick={loadAnalytics} style={{padding:"0 14px"}}>↻</button>
        )}
      </div>
    </div>
  );

  // LOCKED — trial expired / past due / canceled: paywall only
  if (!active) return (
    <Shell head={head}>
      {billingErr && <div className="data-banner error">{billingErr}</div>}
      <Paywall acct={acct} lang={lang} busyTier={busyTier} manageBusy={manageBusy} onPick={pickPlan} onManage={manageBilling}/>
    </Shell>
  );

  // ACTIVE / TRIAL — full dashboard
  const tabs = [["insights", t.weeklyInsights], ["analytics", t.analytics], ["pricing", t.pricing],
    ["menu", lang === "es" ? "Menú & QR" : "Menu & QR"], ["billing", lang === "es" ? "Facturación" : "Billing"]];

  return (
    <Shell head={head}>
      {access.state === "trial" && <TrialBanner access={access} lang={lang} onSubscribe={()=>setTab("billing")}/>}

      <div className="app-tabs">
        {tabs.map(([k, label]) => (
          <button key={k} className={`app-tab ${tab===k?"active":""}`} onClick={()=>setTab(k)}>{label}</button>
        ))}
      </div>

      {billingErr && tab==="billing" && <div className="data-banner error">{billingErr}</div>}
      {error && (tab==="insights"||tab==="analytics"||tab==="pricing") && (
        <div className="data-banner error">
          <strong>{lang==="es"?"No se pudieron cargar los datos.":"Couldn’t load data."}</strong> {error}
          <button className="sim-btn" onClick={loadAnalytics} style={{marginLeft:10}}>{lang==="es"?"Reintentar":"Retry"}</button>
        </div>
      )}

      {tab === "insights" && <InsightsTab agg={agg} loading={loading} lang={lang} report={report} onGenerate={generate} fmtHour={fmtHour}/>}
      {tab === "analytics" && <AnalyticsTab agg={agg} loading={loading} lang={lang} fmtHour={fmtHour}/>}
      {tab === "pricing" && <PricingTab lang={lang} agg={agg} menu={menu}/>}
      {tab === "menu" && <MenuTab lang={lang} restaurantName={restaurant.name} slug={slug} initialMenu={menu} onPublished={setMenu}/>}
      {tab === "billing" && <BillingTab acct={acct} lang={lang} busyTier={busyTier} manageBusy={manageBusy} onPick={pickPlan} onManage={manageBilling}/>}
    </Shell>
  );
};

Object.assign(window, { Dashboard });