import Sequenzy from "sequenzy";

const client = new Sequenzy(process.env.SEQUENZY_API_KEY);

app.post("/api/preferences-token", async (req, res) => {
  const userEmail = req.user.email;

  const { data, error } = await client.widgets.preferences.generateToken({
    email: userEmail,
  });

  if (error) {
    return res.status(400).json({ error: error.message });
  }

  res.json({ token: data.token });
});

"use client";

import { useState, useEffect } from "react";

export function EmailPreferences() {
  const [token, setToken] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchToken() {
      const res = await fetch("/api/preferences-token", { method: "POST" });
      const data = await res.json();
      setToken(data.token);
      setLoading(false);
    }
    fetchToken();
  }, []);

  useEffect(() => {
    // Handle iframe resize messages
    const handleMessage = (e: MessageEvent) => {
      if (e.data.type === "sequenzy-preferences-resize") {
        const iframe = document.getElementById(
          "sequenzy-preferences"
        ) as HTMLIFrameElement;
        if (iframe) iframe.style.height = e.data.height + "px";
      }
    };
    window.addEventListener("message", handleMessage);
    return () => window.removeEventListener("message", handleMessage);
  }, []);

  if (loading) return <div>Loading preferences...</div>;
  if (!token) return <div>Unable to load preferences</div>;

  return (
    <iframe
      id="sequenzy-preferences"
      src={`https://sequenzy.com/embed/preferences?token=${token}`}
      width="100%"
      height="400"
      frameBorder="0"
      style={{ border: "none", maxWidth: "500px" }}
    />
  );
}