/* pages/meta.jsx — Meta Ads platform page.
   Now powered by Supabase via usePlatformData('meta_ads'). Existing UI
   preserved verbatim — only data sourcing has changed. */

const { useState: useStateM, useMemo: useMemoM } = React;

function MetaPage({ lang, client, dateRange, syncTick }) {
  const D = window.MK_DATA;
  const { money, NF } = window.MK_FMT;
  const isEcom = client.type === "ecom";
  const accountId = (client.platforms.meta && client.platforms.meta.account_id) || "—";

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

  /* ---- Selectors — turn raw rows into the shapes the existing UI uses ---- */
  const kpis      = useMemoM(() => MakaliSel.adsKpis(rows),       [rows]);
  const campaigns = useMemoM(() => MakaliSel.adsCampaigns(rows),  [rows]);
  const creatives = useMemoM(() => MakaliSel.adsCreatives(rows),  [rows]);

  /* ---- Daily series for the bar+line chart ---- */
  const daily = useMemoM(() => {
    const filled = MakaliAgg.fillDaily(rows, dateRange.from, dateRange.to, lang);
    return {
      labels:  filled.labels,
      spend:   MakaliAgg.dailySeries(rows, filled.dates, 'spend'),
      revenue: MakaliAgg.dailySeries(rows, filled.dates, 'revenue'),
      leads:   MakaliAgg.dailySeries(rows, filled.dates, 'leads')
    };
  }, [rows, dateRange.from, dateRange.to, lang]);

  /* ---- Local tag overrides (read-only persistence — writes are a later task) ---- */
  const initialCampaignTags = useMemoM(() => {
    const m = {};
    campaigns.forEach(c => { m[c.name_pt] = c.tags || []; });
    return m;
  }, [campaigns]);
  const [campTags, setCampTags] = useStateM(initialCampaignTags);
  React.useEffect(() => { setCampTags(initialCampaignTags); }, [initialCampaignTags]);

  const initialCreativeTags = useMemoM(() => {
    const m = {};
    creatives.forEach(c => { m[c.id] = c.tags || []; });
    return m;
  }, [creatives]);
  const [creativeTags, setCreativeTags] = useStateM(initialCreativeTags);
  React.useEffect(() => { setCreativeTags(initialCreativeTags); }, [initialCreativeTags]);

  const [campaignFilter, setCampaignFilter] = useStateM(null);
  const [creativeFilter, setCreativeFilter] = useStateM(null);

  const campaignsTagged = campaigns.map(c => ({ ...c, tags: campTags[c.name_pt] || [] }));
  const filteredCampaigns = applyTagFilter(campaignsTagged, campaignFilter);

  const creativesTagged = creatives.map(c => ({ ...c, tags: creativeTags[c.id] || [] }));
  const filteredCreatives = applyTagFilter(creativesTagged, creativeFilter);

  const updateCampaignTags = (name_pt, tags) =>
    setCampTags(prev => ({ ...prev, [name_pt]: tags }));
  const updateCreativeTags = (id, tags) =>
    setCreativeTags(prev => ({ ...prev, [id]: tags }));

  /* ---- Concept aggregation from current tags ---- */
  const conceptStats = useMemoM(() => {
    const map = new Map();
    creativesTagged.forEach(c => {
      const tagSet = c.tags && c.tags.length ? c.tags : ["__untagged__"];
      tagSet.forEach(tg => {
        if (!map.has(tg)) map.set(tg, { ads: 0, spend: 0, purchases: 0 });
        const m = map.get(tg);
        m.ads += 1;
        m.spend += parseFloat((c.spend.pt || "0").replace(/[^\d,]/g, "").replace(",", ".")) * (c.spend.pt.includes("k") ? 1000 : 1);
        m.purchases += c.purchases || 0;
      });
    });
    return map;
  }, [creativesTagged]);

  const conceptCards = D.META_CONCEPT_TAG_OPTIONS.map(o => {
    const s = conceptStats.get(o.id);
    if (!s) return null;
    return { ...o, ads: s.ads, spend: s.spend, purchases: s.purchases };
  }).filter(Boolean);

  const untaggedCount = creativesTagged.filter(c => !c.tags || c.tags.length === 0).length;

  /* =================================================================== */
  return (
    <div className="canvas">
      {/* Platform header — always visible, even during loading/empty */}
      <section className="plat-head">
        <div className="plat-mark meta">
          <svg viewBox="0 0 24 24" width="32" height="32"><path d="M3 12.6c0-4 2-7.4 5.4-7.4 2.2 0 4 1.5 5.6 4.4 1.5 2.8 3 4.4 4.6 4.4 1.4 0 2.2-1.4 2.2-3.2 0-1.9-.9-3.4-2.4-3.4-1.5 0-2.5 1.7-4 4.4-2.4 4.4-4 7-7.4 7-3.2 0-5.2-2.6-5.2-6.2z" fill="#fff" stroke="none"/></svg>
        </div>
        <div>
          <h1 className="plat-head__title">META ADS</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("ad-account", lang)}</div>
            <div className="plat-account__v">{accountId}</div>
          </div>
          <button className="btn"><Icon name="external" size={12}/> Meta Ads Manager</button>
        </div>
      </section>

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

      {status === 'ready' && (
        <>
          {/* KPI ROW — 6 tiles */}
          <section className="kpis">
            <KpiTile label={t("kpi.spend", lang)} icon="wallet" value={money(kpis.spend, {compact:true})}
              deltaCtx={t("vs.prior", lang)} sparkColor="#7600FF"/>
            {isEcom ? (
              <>
                <KpiTile label={t("kpi.revenue", lang)} icon="trend-up" value={money(kpis.revenue, {compact:true})}
                  deltaCtx={t("vs.prior", lang)} sparkColor="#7600FF"/>
                <KpiTile label="ROAS" icon="target" value={(lang === "pt" ? kpis.roas.toFixed(2).replace(".", ",") : kpis.roas.toFixed(2)) + "×"}
                  deltaCtx={t("vs.prior", lang)} sparkColor="#00E7FF"/>
              </>
            ) : (
              <>
                <KpiTile label={t("kpi.leads", lang)} icon="user-plus" value={NF.num(kpis.leads)}
                  deltaCtx={t("vs.prior", lang)} sparkColor="#7600FF"/>
                <KpiTile label="CPL" icon="tag" value={money(kpis.cpl)}
                  deltaCtx={t("vs.prior", lang)} sparkColor="#00E7FF"/>
              </>
            )}
            <KpiTile label="CTR" icon="mouse-pointer" value={(lang === "pt" ? kpis.ctr.toFixed(2).replace(".", ",") : kpis.ctr.toFixed(2)) + "%"}
              deltaCtx={t("vs.prior", lang)} sparkColor="#CE3EBA"/>
            <KpiTile label={t("kpi.frequency", lang)} icon="sync" value={(lang === "pt" ? kpis.frequency.toFixed(1).replace(".", ",") : kpis.frequency.toFixed(1))}
              deltaCtx={t("vs.prior", lang)} sparkColor="#FF7F00"/>
            <KpiTile label={t("kpi.reach", lang)} icon="users" value={NF.num(kpis.reach, {compact: true})}
              deltaCtx={t("vs.prior", lang)} sparkColor="#EF1166"/>
          </section>

          {/* Daily breakdown */}
          <section className="row-2">
            <div className="panel">
              <div className="panel__head">
                <div className="panel__head-l">
                  <h3 className="panel__title">{t("p.daily", lang)}</h3>
                  <p className="panel__sub">{lang === "pt" ? "Investimento Meta + receita atribuída" : "Meta spend + attributed revenue"}</p>
                </div>
                <div className="panel__legend">
                  <div className="legend-item"><span className="sw" style={{background:"#7600FF"}}/>Meta {t("kpi.spend", lang)}</div>
                  <div className="legend-item"><span className="sw sw--line" style={{background:"#00E7FF"}}/>{isEcom ? t("kpi.revenue", lang) : t("kpi.leads", lang)}</div>
                </div>
              </div>
              <StackedBarLine
                bars={[{ name: "Meta " + t("kpi.spend", lang), color: "#7600FF", data: daily.spend }]}
                line={{ name: isEcom ? t("kpi.revenue", lang) : t("kpi.leads", lang), color: "#00E7FF", data: isEcom ? daily.revenue : daily.leads }}
                labels={daily.labels}
                yFormatLeft={(v) => money(v, {compact: true})}
                yFormatRight={(v) => isEcom ? money(v, {compact:true}) : Math.round(v)}
                height={260}
              />
            </div>

            <div className="panel">
              <div className="panel__head">
                <div className="panel__head-l">
                  <h3 className="panel__title">{t(isEcom ? "p.funnel-meta" : "p.funnel-lead", lang)}</h3>
                  <p className="panel__sub">{lang === "pt" ? "Top → bottom funnel" : "Top → bottom funnel"}</p>
                </div>
              </div>
              <FunnelChart
                lang={lang}
                stages={isEcom ? [
                  { stage_pt: "Impressões",     stage_en: "Impressions",   value: kpis.impressions, rate: "100%" },
                  { stage_pt: "Cliques",        stage_en: "Clicks",        value: kpis.clicks,      rate: kpis.impressions > 0 ? (kpis.clicks / kpis.impressions * 100).toFixed(2).replace(".", ",") + "%" : "—", rate_en: kpis.impressions > 0 ? (kpis.clicks / kpis.impressions * 100).toFixed(2) + "%" : "—" },
                  { stage_pt: "Compras",        stage_en: "Purchases",     value: kpis.conversions, rate: kpis.clicks > 0 ? (kpis.conversions / kpis.clicks * 100).toFixed(2).replace(".", ",") + "%" : "—", rate_en: kpis.clicks > 0 ? (kpis.conversions / kpis.clicks * 100).toFixed(2) + "%" : "—" }
                ] : [
                  { stage_pt: "Impressões",     stage_en: "Impressions",   value: kpis.impressions, rate: "100%" },
                  { stage_pt: "Cliques",        stage_en: "Clicks",        value: kpis.clicks,      rate: kpis.impressions > 0 ? (kpis.clicks / kpis.impressions * 100).toFixed(2).replace(".", ",") + "%" : "—", rate_en: kpis.impressions > 0 ? (kpis.clicks / kpis.impressions * 100).toFixed(2) + "%" : "—" },
                  { stage_pt: "Leads",          stage_en: "Leads",         value: kpis.leads,       rate: kpis.clicks > 0 ? (kpis.leads / kpis.clicks * 100).toFixed(2).replace(".", ",") + "%" : "—", rate_en: kpis.clicks > 0 ? (kpis.leads / kpis.clicks * 100).toFixed(2) + "%" : "—" }
                ]}
                valueFormat={v => NF.num(v, {compact: v >= 100000})}
              />
            </div>
          </section>

          {/* Campaigns table */}
          <section className="panel">
            <div className="panel__head">
              <div className="panel__head-l">
                <h3 className="panel__title">{t("p.campaigns", lang)}</h3>
                <p className="panel__sub">
                  {lang === "pt" ? "Ordenado por investimento" : "Sorted by spend"}
                  {" · "}
                  {t("tag.note-campaigns", lang)}
                </p>
              </div>
            </div>

            <TagFilterStrip
              value={campaignFilter}
              onChange={setCampaignFilter}
              options={D.META_CAMPAIGN_TAG_OPTIONS}
              items={campaignsTagged}
              lang={lang}
            />

            <div className="tbl-scroll"><table className="tbl">
              <thead>
                <tr>
                  <th>{t("th.campaign", lang)}</th>
                  <th style={{minWidth: 180}}>Tags</th>
                  <th>{t("th.status", lang)}</th>
                  <th className="num">{t("th.spend", lang)}</th>
                  {isEcom ? <th className="num">{t("th.revenue", lang)}</th> : <th className="num">{t("th.leads", lang)}</th>}
                  {isEcom ? <th className="num">{t("th.roas", lang)}</th> : <th className="num">CPL</th>}
                  <th className="num">{t("th.ctr", lang)}</th>
                  <th className="num">{t("th.delta", lang)}</th>
                </tr>
              </thead>
              <tbody>
                {filteredCampaigns.map((c, i) => (
                  <tr key={i}>
                    <td>
                      <div className="ch">
                        <span className="sq" style={{background: "linear-gradient(135deg, #0866FF 0%, #7600FF 100%)"}}>
                          <Icon name="meta" size={12}/>
                        </span>
                        <div>
                          <div>{lang === "pt" ? c.name_pt : c.name_en}</div>
                          {c.sub && <div className="tbl__sub">{c.sub}</div>}
                        </div>
                      </div>
                    </td>
                    <td>
                      <TagPicker
                        tags={c.tags}
                        options={D.META_CAMPAIGN_TAG_OPTIONS}
                        onChange={(tags) => updateCampaignTags(c.name_pt, tags)}
                        lang={lang}
                        size="sm"
                      />
                    </td>
                    <td>
                      <span className={"status " + c.status}>
                        <span className="dot"/>
                        {t("st." + c.status, lang)}
                      </span>
                    </td>
                    <td className="num">{money(c.spend, {compact: c.spend >= 1000})}</td>
                    {isEcom ? (
                      <td className="num">{c.revenue > 0 ? money(c.revenue, {compact: c.revenue >= 1000}) : "—"}</td>
                    ) : (
                      <td className="num">{c.leads > 0 ? NF.num(c.leads) : "—"}</td>
                    )}
                    {isEcom ? (
                      <td className="num">{c.roas > 0 ? (lang === "pt" ? c.roas.toFixed(2).replace(".", ",") : c.roas.toFixed(2)) + "×" : "—"}</td>
                    ) : (
                      <td className="num">{c.cpl > 0 ? money(c.cpl) : "—"}</td>
                    )}
                    <td className="num">{c.ctr > 0 ? (lang === "pt" ? c.ctr.toFixed(2).replace(".", ",") : c.ctr.toFixed(2)) + "%" : "—"}</td>
                    <td className={"delta " + c.dDir}>{c.delta}</td>
                  </tr>
                ))}
                {filteredCampaigns.length === 0 && (
                  <tr><td colSpan={8} style={{textAlign:"center", color:"var(--fg-mute)", padding: 36}}>
                    {lang === "pt" ? "Nenhuma campanha com essa tag." : "No campaigns match this tag."}
                  </td></tr>
                )}
              </tbody>
            </table></div>
          </section>

          {/* CREATIVE LIBRARY */}
          {isEcom && creativesTagged.length > 0 && (
            <>
              <section>
                <div className="page-head" style={{display:"flex", justifyContent:"space-between", alignItems:"flex-end", marginBottom: 14}}>
                  <div>
                    <span className="page-head__eyebrow">{t("p.creative-lib", lang)}</span>
                    <h2 className="page-head__title" style={{fontSize: 28, marginTop:8}}>{t("p.concepts", lang)}</h2>
                    <p className="page-head__sub" style={{maxWidth: 580, marginTop: 8}}>
                      {t("tag.note-creatives", lang)}
                    </p>
                  </div>
                </div>
                <div className="concepts">
                  {conceptCards.map(c => (
                    <div key={c.id} className="concept">
                      <div className="concept__head">
                        <span className="concept__name" style={{display:"inline-flex", alignItems:"center", gap: 8}}>
                          <span style={{width: 8, height: 8, borderRadius: 999, background: c.color, boxShadow: `0 0 6px 0 ${c.color}`}}/>
                          {t(c.key, lang)}
                        </span>
                        <span className="concept__count">{c.ads} {t("ads-count", lang)}</span>
                      </div>
                      <div className="concept__roas">
                        {money(c.spend, {compact: c.spend >= 1000})}
                        <span style={{fontSize: 13, color: "var(--fg-2)", fontWeight: 700}}>{t("kpi.spend", lang).toLowerCase()}</span>
                      </div>
                      <div className="concept__foot">
                        <span>{lang === "pt" ? "Compras" : "Purchases"} <b>{c.purchases}</b></span>
                        <span>{lang === "pt" ? "Por anúncio" : "Per ad"} <b>{Math.round(c.purchases / c.ads)}</b></span>
                      </div>
                    </div>
                  ))}
                  {untaggedCount > 0 && (
                    <div className="concept" style={{
                      background: "rgba(255,127,0,.06)",
                      borderColor: "rgba(255,127,0,.32)"
                    }}>
                      <div className="concept__head">
                        <span className="concept__name" style={{color: "var(--mk-orange)", display:"inline-flex", alignItems:"center", gap:8}}>
                          <Icon name="alert" size={13}/>
                          {t("tag.untagged-ads", lang)}
                        </span>
                        <span className="concept__count" style={{color: "var(--mk-orange)"}}>
                          <b style={{color: "#fff"}}>{untaggedCount}</b>
                        </span>
                      </div>
                      <p style={{
                        fontSize: 12, color: "var(--fg-2)", lineHeight: 1.5, margin: 0,
                        flex: 1
                      }}>
                        {t("tag.untagged-count", lang)}
                      </p>
                      <button className="btn btn--gradient"
                        onClick={() => setCreativeFilter("__untagged__")}
                        style={{alignSelf: "flex-start", marginTop: 4}}>
                        {t("tag.tag-now", lang)} <Icon name="arrow-right" size={11}/>
                      </button>
                    </div>
                  )}
                </div>
              </section>

              <section>
                <div className="panel__head" style={{marginBottom: 18}}>
                  <div className="panel__head-l">
                    <h3 className="panel__title">
                      {lang === "pt" ? "Todos os anúncios" : "All ads"}
                      {" · "}
                      <span style={{color:"var(--fg-2)"}}>{filteredCreatives.length} {t("ads-count", lang)}</span>
                    </h3>
                    <p className="panel__sub">{lang === "pt" ? "Clique em um vídeo para tocar · marque conceitos abaixo de cada anúncio" : "Click any video to play · tag concepts under each ad"}</p>
                  </div>
                </div>

                <TagFilterStrip
                  value={creativeFilter}
                  onChange={setCreativeFilter}
                  options={D.META_CONCEPT_TAG_OPTIONS}
                  items={creativesTagged}
                  lang={lang}
                />

                <div style={{marginTop: 16}}>
                  <CreativeGrid
                    creatives={filteredCreatives}
                    lang={lang}
                    onTagsChange={updateCreativeTags}
                    tagOptions={D.META_CONCEPT_TAG_OPTIONS}
                  />
                </div>
              </section>
            </>
          )}
        </>
      )}
    </div>
  );
}
window.MetaPage = MetaPage;