// ═══════════════════════════════════════════════════════════════
// Pau Fit — "Tu semana" compartible (formato historia 1080×1920)
//
// Genera una tarjeta con las stats REALES de los últimos 7 días
// (entrenos, racha, puntos, comidas) dibujada en canvas y la
// comparte con el share nativo (o descarga si no hay share).
// Growth loop: la usuaria la sube a Instagram → sus amigas ven la app.
// ═══════════════════════════════════════════════════════════════

const useWkState = React.useState;
const useWkEffect = React.useEffect;

async function loadWeekStats() {
  const sb = window.__PAU_SUPABASE;
  if (!sb) return null;
  const { data: { user } } = await sb.auth.getUser();
  if (!user) return null;
  const from = new Date(Date.now() - 7 * 86400000).toISOString();

  // Entrenos = fechas únicas con algo completado (retos + programas)
  const dates = new Set();
  try {
    const { data: dc } = await sb.from('day_completions')
      .select('completed_at').eq('user_id', user.id).gte('completed_at', from);
    (dc || []).forEach(d => dates.add(new Date(d.completed_at).toLocaleDateString('en-CA')));
  } catch {}
  try {
    const { data: pc } = await sb.from('programa_completions')
      .select('completed_at').eq('user_id', user.id).gte('completed_at', from);
    (pc || []).forEach(d => dates.add(new Date(d.completed_at).toLocaleDateString('en-CA')));
  } catch {}

  // Puntos ganados esta semana
  let puntos = 0;
  try {
    const { data: pl } = await sb.from('points_log')
      .select('amount').eq('user_id', user.id).gte('created_at', from);
    (pl || []).forEach(p => { puntos += p.amount || 0; });
  } catch {}

  // Comidas registradas
  let comidas = 0;
  try {
    const { count } = await sb.from('meal_logs')
      .select('id', { count: 'exact', head: true })
      .eq('user_id', user.id).gte('logged_at', from);
    comidas = count || 0;
  } catch {}

  const cache = window.__pauCache || {};
  return {
    entrenos: dates.size,
    racha: (cache.stats && cache.stats.streak) || 0,
    puntos,
    comidas,
    username: (cache.profile && cache.profile.username) || '',
  };
}

// Dibuja la historia 1080×1920 — minimal, marca Pau Fit
function drawWeekCard(canvas, s, T) {
  const W = 1080, H = 1920;
  canvas.width = W; canvas.height = H;
  const ctx = canvas.getContext('2d');

  // Fondo crema de la marca
  ctx.fillStyle = '#FCEBEC';
  ctx.fillRect(0, 0, W, H);

  const accent = '#E15577';
  const ink = '#2D2A2E';
  const muted = '#A89AA0';

  ctx.textAlign = 'center';

  // Wordmark
  ctx.fillStyle = accent;
  ctx.font = '800 64px Poppins, sans-serif';
  ctx.fillText('PAU FIT', W / 2, 220);

  // Rango de la semana
  const hoy = new Date();
  const hace7 = new Date(Date.now() - 6 * 86400000);
  const fmt = (d) => d.toLocaleDateString('es', { day: 'numeric', month: 'short' }).replace('.', '');
  ctx.fillStyle = muted;
  ctx.font = '600 40px Poppins, sans-serif';
  ctx.fillText(`MI SEMANA · ${fmt(hace7).toUpperCase()} – ${fmt(hoy).toUpperCase()}`, W / 2, 300);

  // Número gigante: entrenos
  ctx.fillStyle = ink;
  ctx.font = '800 420px Poppins, sans-serif';
  ctx.fillText(String(s.entrenos), W / 2, 860);
  ctx.fillStyle = accent;
  ctx.font = '700 66px Poppins, sans-serif';
  ctx.fillText(s.entrenos === 1 ? 'ENTRENO ESTA SEMANA' : 'ENTRENOS ESTA SEMANA', W / 2, 970);

  // Tres stats en fila — card blanca redondeada
  const cardY = 1120, cardH = 380, cardX = 90, cardW = W - 180, r = 48;
  ctx.fillStyle = '#FFFFFF';
  ctx.beginPath();
  ctx.moveTo(cardX + r, cardY);
  ctx.arcTo(cardX + cardW, cardY, cardX + cardW, cardY + cardH, r);
  ctx.arcTo(cardX + cardW, cardY + cardH, cardX, cardY + cardH, r);
  ctx.arcTo(cardX, cardY + cardH, cardX, cardY, r);
  ctx.arcTo(cardX, cardY, cardX + cardW, cardY, r);
  ctx.closePath();
  ctx.fill();

  const cols = [
    { v: `${s.racha}`, l: 'DÍAS DE RACHA', emoji: '🔥' },
    { v: `${s.puntos}`, l: 'PUNTOS', emoji: '⭐' },
    { v: `${s.comidas}`, l: 'COMIDAS', emoji: '🍽️' },
  ];
  cols.forEach((c, i) => {
    const cx = cardX + cardW / 6 + (i * cardW) / 3;
    ctx.font = '80px sans-serif';
    ctx.fillText(c.emoji, cx, cardY + 130);
    ctx.fillStyle = ink;
    ctx.font = '800 104px Poppins, sans-serif';
    ctx.fillText(c.v, cx, cardY + 250);
    ctx.fillStyle = muted;
    ctx.font = '700 30px Poppins, sans-serif';
    ctx.fillText(c.l, cx, cardY + 310);
  });

  // Pie: usuaria + web
  ctx.fillStyle = ink;
  ctx.font = '700 44px Poppins, sans-serif';
  ctx.fillText(s.username ? `@${s.username}` : '#YoSiemprePuedo', W / 2, 1700);
  ctx.fillStyle = muted;
  ctx.font = '600 36px Poppins, sans-serif';
  ctx.fillText('app.paufit.co', W / 2, 1770);
}

function WeeklyRecapSheet({ T, nav, onClose }) {
  const [stats, setStats] = useWkState(null);
  const [imgUrl, setImgUrl] = useWkState(null);
  const [sharing, setSharing] = useWkState(false);
  const canvasRef = React.useRef(null);

  useWkEffect(() => {
    (async () => {
      try {
        // Asegurar que Poppins esté lista antes de dibujar
        try { await document.fonts.load('800 100px Poppins'); } catch {}
        const s = await loadWeekStats();
        if (!s) { nav.toast('Tu sesión expiró — vuelve a entrar', { icon: '🔒' }); onClose(); return; }
        setStats(s);
        const canvas = document.createElement('canvas');
        canvasRef.current = canvas;
        drawWeekCard(canvas, s, T);
        setImgUrl(canvas.toDataURL('image/png'));
      } catch (e) {
        console.warn('[semana]', e?.message || e);
        nav.toast('No se pudo generar tu resumen', { icon: '⚠️' });
        onClose();
      }
    })();
  }, []);

  async function compartir() {
    const canvas = canvasRef.current;
    if (!canvas) return;
    setSharing(true);
    try {
      const blob = await new Promise(res => canvas.toBlob(res, 'image/png'));
      const file = new File([blob], 'mi-semana-pau-fit.png', { type: 'image/png' });
      if (navigator.canShare && navigator.canShare({ files: [file] })) {
        await navigator.share({ files: [file], text: 'Mi semana en Pau Fit 💗 app.paufit.co' });
      } else {
        // Fallback: descargar
        const a = document.createElement('a');
        a.href = canvas.toDataURL('image/png');
        a.download = 'mi-semana-pau-fit.png';
        a.click();
        nav.toast('Imagen descargada 💗', { icon: '📥' });
      }
    } catch (e) {
      if (e && e.name !== 'AbortError') nav.toast('No se pudo compartir', { icon: '⚠️' });
    }
    setSharing(false);
  }

  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 9999,
      background: 'rgba(0,0,0,0.55)',
      display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
      animation: 'fade-in 220ms ease',
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        width: '100%', maxWidth: 480,
        background: T.bg, color: T.text,
        borderTopLeftRadius: 28, borderTopRightRadius: 28,
        padding: '14px 22px calc(24px + env(safe-area-inset-bottom))',
        animation: 'slide-up 380ms cubic-bezier(.34,1.56,.64,1)',
        maxHeight: '90dvh', overflowY: 'auto',
      }}>
        <div style={{ width: 38, height: 4, borderRadius: 2, background: T.muted, opacity: 0.3, margin: '0 auto 14px' }}/>
        <div className="pf-display" style={{ fontSize: 24, fontWeight: 800, color: T.text, letterSpacing: -0.6, textAlign: 'center' }}>
          Tu semana
        </div>
        <div style={{ fontSize: 12, color: T.muted, marginTop: 4, textAlign: 'center' }}>
          Compártela en tus historias 💗
        </div>

        {!imgUrl ? (
          <div style={{ padding: '60px 0', textAlign: 'center' }}>
            <div style={{
              width: 32, height: 32, margin: '0 auto', borderRadius: 50,
              border: `2.5px solid ${T.subtle}`, borderTopColor: T.accent,
              animation: 'spin 800ms linear infinite',
            }}/>
          </div>
        ) : (
          <img src={imgUrl} alt="Tu semana en Pau Fit" style={{
            display: 'block', margin: '16px auto 0',
            maxHeight: '52dvh', maxWidth: '78%',
            borderRadius: 20, boxShadow: '0 12px 32px rgba(0,0,0,0.18)',
          }}/>
        )}

        <button onClick={compartir} disabled={!imgUrl || sharing} style={{
          marginTop: 18, width: '100%', padding: '15px',
          border: 'none', borderRadius: 999, cursor: imgUrl ? 'pointer' : 'default',
          background: T.accent, color: '#fff',
          fontSize: 14, fontWeight: 700, letterSpacing: -0.1, fontFamily: 'inherit',
          opacity: !imgUrl || sharing ? 0.6 : 1,
        }}>
          {sharing ? 'Compartiendo…' : 'Compartir'}
        </button>
        <button onClick={onClose} style={{
          marginTop: 8, width: '100%', padding: '12px',
          border: 'none', background: 'transparent', cursor: 'pointer',
          color: T.muted, fontSize: 13, fontWeight: 600, fontFamily: 'inherit',
        }}>Cerrar</button>
      </div>
    </div>
  );
}

Object.assign(window, { WeeklyRecapSheet });