/* pages/shopify.jsx — full e-commerce funnel + product performance.
   Powered by Supabase via usePlatformData('shopify'). */

const { useMemo: useMemoShp } = React;

function ShopifyPage({ lang, client, dateRange, syncTick }) {
  const { money, NF } = window.MK_FMT;
  const accountId = (client.platforms.shopify && client.platforms.shopify.account_id) || "—";

  const { rows, status, error, refetch } = usePlatformData({
    table: 'shopify', client, dateRange, syncTick
  });

  const kpis     = useMemoShp(() => MakaliSel.shopifyKpis(rows),         [rows]);
  const funnel   = useMemoShp(() => MakaliSel.shopifyFunnel(rows, lang), [rows, lang]);
  const products = useMemoShp(() => MakaliSel.shopifyProducts(rows),     [rows]);
  const totalRevenue = products.reduce((s, p) => s + p.revenue, 0);

  const daily = useMemoShp(() => {
    const overall = rows.filter(r => !r.product_id);
    const filled  = MakaliAgg.fillDaily(overall, dateRange.from, dateRange.to, lang);
    return {
      labels:  filled.labels,
      revenue: MakaliAgg.dailySeries(overall, filled.dates, 'revenue')
    };
  }, [rows, dateRange.from, dateRange.to, lang]);

  // New / returning split for the small progress strip
  const newPct = (kpis.new_customers + (rows.filter(r => !r.product_id).reduce((s, r) => s + Number(r.returning_customers || 0), 0))) > 0
    ? (kpis.new_customers / (kpis.new_customers + rows.filter(r => !r.product_id).reduce((s, r) => s + Number(r.returning_customers || 0), 0))) * 100
    : 0;

  return (
    <div className="canvas">
      <section className="plat-head">
        <div className="plat-mark shopify">
          <svg viewBox="0 0 24 24" width="32" height="32"><path d="M14 4.5l-.4-.2c-.2 0-1.3-.1-1.3-.1s-.7-.7-.8-.8c-.1-.1-.3 0-.4 0l-.6.2c-.4-1.1-1-2.1-2.2-2.1L8 1.6c-.3-.4-.7-.6-1-.6-2.6.1-3.8 3.3-4.2 5C2 6.2 1 6.5.8 6.5L0 6.8 1.6 21l13 2.3V4.5h-.6zm-2.7-.7l-.8.3c0-.8-.2-1.8-.5-2.3.7.1 1.2 1.1 1.3 2zm-2 .6l-1.6.5C7.5 4.3 7.8 3 8.4 2.4l.3-.2c.5 0 1 .8 1.1 2.2zm-3-2.2c.1 0 .3.1.4.2-.7.4-1.1 1.4-1.3 2.4l-1.3.4c.4-1.2 1.2-3 2.2-3zm10 21.3l-3.3-.6V4.7l.5.4 2.8.4z" fill="#fff"/></svg>
        </div>
        <div>
          <h1 className="plat-head__title">SHOPIFY</h1>
          <div className="plat-head__sub">{accountId} · {lang === "pt" ? "Última sync há 2h" : "Last sync 2h ago"}</div>
        </div>
        <div className="plat-head__right">
          <div className="plat-account">
            <div className="plat-account__l">{t("store", lang)}</div>
            <div className="plat-account__v">{accountId}</div>
          </div>
          <button className="btn"><Icon name="external" size={12}/> Shopify</button>
        </div>
      </section>

      {status === 'loading' && <LoadingState lang={lang}/>}
      {status === 'error'   && <ErrorState   lang={lang} error={error} onRetry={refetch}/>}
      {status === 'empty'   && <EmptyState   lang={lang}/>}

      {status === 'ready' && (
        <>
          <section className="kpis">
            <KpiTile label={t("kpi.revenue", lang)} icon="wallet" value={money(kpis.revenue, {compact:true})} deltaCtx={t("vs.prior", lang)} sparkColor="#00E7FF"/>
            <KpiTile label={t("kpi.orders", lang)} icon="shopping" value={NF.num(kpis.orders)} deltaCtx={t("vs.prior", lang)} sparkColor="#2E79FF"/>
            <KpiTile label={t("kpi.aov", lang)} icon="credit-card" value={money(kpis.aov)} deltaCtx={t("vs.prior", lang)} sparkColor="#7600FF"/>
            <KpiTile label={t("kpi.conv-rate", lang)} icon="check" value={(lang === "pt" ? kpis.conversion_rate.toFixed(2).replace(".", ",") : kpis.conversion_rate.toFixed(2)) + "%"} deltaCtx={t("vs.prior", lang)} sparkColor="#CE3EBA"/>
            <KpiTile label={t("kpi.new-cust", lang)} icon="user-plus" value={NF.num(kpis.new_customers)} deltaCtx={t("vs.prior", lang)} sparkColor="#EF1166"/>
            <KpiTile label={t("kpi.repeat-rate", lang)} icon="sync" value={(lang === "pt" ? kpis.repeat_rate.toFixed(1).replace(".", ",") : kpis.repeat_rate.toFixed(1)) + "%"} deltaCtx={t("vs.prior", lang)}/>
          </section>

          <section className="row-2">
            <div className="panel">
              <div className="panel__head">
                <div className="panel__head-l">
                  <h3 className="panel__title">{t("p.funnel", lang)}</h3>
                  <p className="panel__sub">{lang === "pt" ? "Sessões → Compra" : "Sessions → Purchase"}</p>
                </div>
              </div>
              <FunnelChart
                lang={lang}
                stages={funnel}
                valueFormat={v => NF.num(v, {compact: v >= 100000})}
              />
            </div>

            <div className="panel">
              <div className="panel__head">
                <div className="panel__head-l">
                  <h3 className="panel__title">{lang === "pt" ? "Receita por dia" : "Revenue by day"}</h3>
                  <p className="panel__sub">{client.currency || "BRL"}</p>
                </div>
                <div className="panel__legend">
                  <div className="legend-item"><span className="sw sw--line" style={{background:"#00E7FF"}}/>{t("kpi.revenue", lang)}</div>
                </div>
              </div>
              <AreaChart
                data={daily.revenue}
                labels={daily.labels}
                color="#00E7FF"
                height={240}
                yFormat={v => money(v, {compact:true})}
              />

              <div className="shp-prog-grid">
                <div className="progress">
                  <div className="progress__head">
                    <span style={{fontSize: 10, color:"var(--fg-2)", letterSpacing: ".12em"}}>{lang === "pt" ? "NOVOS" : "NEW"}</span>
                    <span className="v" style={{color: "#00E7FF"}}>{newPct.toFixed(1)}%</span>
                  </div>
                  <div className="progress__bar">
                    <div className="progress__bar-fill" style={{width: newPct + "%", background: "#00E7FF"}}/>
                  </div>
                </div>
                <div className="progress">
                  <div className="progress__head">
                    <span style={{fontSize: 10, color:"var(--fg-2)", letterSpacing: ".12em"}}>{lang === "pt" ? "RECORRENTES" : "RETURN"}</span>
                    <span className="v" style={{color: "#7600FF"}}>{(100 - newPct).toFixed(1)}%</span>
                  </div>
                  <div className="progress__bar">
                    <div className="progress__bar-fill" style={{width: (100 - newPct) + "%", background: "#7600FF"}}/>
                  </div>
                </div>
                <div className="progress">
                  <div className="progress__head">
                    <span style={{fontSize: 10, color:"var(--fg-2)", letterSpacing: ".12em"}}>{lang === "pt" ? "TX. CONV" : "CONV"}</span>
                    <span className="v">{kpis.conversion_rate.toFixed(2)}%</span>
                  </div>
                  <div className="progress__bar">
                    <div className="progress__bar-fill" style={{width: Math.min(100, kpis.conversion_rate * 20) + "%", background: "var(--mk-gradient)"}}/>
                  </div>
                </div>
              </div>
            </div>
          </section>

          {products.length > 0 && (
            <section className="panel">
              <div className="panel__head">
                <div className="panel__head-l">
                  <h3 className="panel__title">{t("p.products", lang)}</h3>
                  <p className="panel__sub">{lang === "pt" ? "Ordenado por receita" : "Sorted by revenue"}</p>
                </div>
                <div style={{display:"flex", gap:8}}>
                  <button className="chip is-on">{t("th.revenue", lang)}</button>
                  <button className="chip">{t("th.units", lang)}</button>
                  <button className="chip">{t("kpi.aov", lang)}</button>
                </div>
              </div>
              <div className="tbl-scroll"><table className="tbl">
                <thead>
                  <tr>
                    <th>{t("th.product", lang)}</th>
                    <th className="num">{t("th.orders", lang)}</th>
                    <th className="num">{t("th.units", lang)}</th>
                    <th className="num">{t("th.aov", lang)}</th>
                    <th className="num">{t("th.revenue", lang)}</th>
                    <th>{lang === "pt" ? "Share" : "Share"}</th>
                    <th className="num">{t("th.delta", lang)}</th>
                  </tr>
                </thead>
                <tbody>
                  {products.slice(0, 12).map((p, i) => {
                    const share = totalRevenue > 0 ? (p.revenue / totalRevenue) * 100 : 0;
                    return (
                      <tr key={i}>
                        <td>
                          <div className="product">
                            <div className="product__img" style={{background: p.bg}}>
                              <span>{p.letter}</span>
                            </div>
                            <div>
                              <div className="product__name">{p.name}</div>
                              <div className="product__sku">{p.sku}</div>
                            </div>
                          </div>
                        </td>
                        <td className="num">{NF.num(p.orders)}</td>
                        <td className="num">{NF.num(p.units)}</td>
                        <td className="num">{money(p.aov)}</td>
                        <td className="num">{money(p.revenue, {compact: p.revenue >= 1000})}</td>
                        <td>
                          <span className="bar-cell">
                            <span className="bar-cell__fill" style={{width: Math.min(100, share*1.6) + "%"}}/>
                          </span>
                          <span style={{fontFamily:"var(--font-display)", fontWeight: 700, fontSize: 12.5}}>{share.toFixed(1)}%</span>
                        </td>
                        <td className={"delta " + p.dDir}>{p.delta}</td>
                      </tr>
                    );
                  })}
                </tbody>
              </table></div>
            </section>
          )}
        </>
      )}
    </div>
  );
}
window.ShopifyPage = ShopifyPage;