// src/index.tsx
import { framer, CollectionItem } from "framer-plugin";

// Field IDs for your CMS collection
const TITLE_FIELD_ID = "titleField";
const CONTENT_FIELD_ID = "contentField";
const EXCERPT_FIELD_ID = "excerptField";
const PUBLISHED_AT_FIELD_ID = "publishedAtField";

/**
 * Configure fields for a Managed Collection.
 */
async function configureManagedCollection() {
  const collection = await framer.getManagedCollection();

  await collection.setFields([
    {
      id: TITLE_FIELD_ID,
      name: "Title",
      type: "string",
    },
    {
      id: CONTENT_FIELD_ID,
      name: "Content",
      type: "formattedText",
    },
    {
      id: EXCERPT_FIELD_ID,
      name: "Excerpt",
      type: "string",
      userEditable: true,
    },
    {
      id: PUBLISHED_AT_FIELD_ID,
      name: "Published At",
      type: "date",
    },
  ]);
}

/**
 * Sync optimized content from Wrodium into Framer CMS.
 */
async function syncManagedCollection() {
  const collection = await framer.getManagedCollection();

  // Get brand URL from plugin settings
  const brandUrl = await collection.getPluginData("brandUrl");
  const apiKey = await collection.getPluginData("apiKey");

  if (!brandUrl || !apiKey) {
    console.error("Missing Wrodium configuration");
    return;
  }

  // Fetch optimized articles from Wrodium
  const response = await fetch(
    `https://api.wrodium.com/framer/sync`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${apiKey}`,
      },
      body: JSON.stringify({ brandUrl }),
    }
  );

  if (!response.ok) {
    console.error("Wrodium sync failed", await response.text());
    return;
  }

  type WrodiumArticle = {
    id: string;
    slug: string;
    title: string;
    content_html: string;
    excerpt: string;
    published_at?: string;
  };

  const articles: WrodiumArticle[] = await response.json();

  // Transform to Framer CollectionItems
  const items: CollectionItem[] = articles.map((article) => ({
    id: article.id,
    slug: article.slug,
    fieldData: {
      [TITLE_FIELD_ID]: { value: article.title },
      [CONTENT_FIELD_ID]: { value: article.content_html },
      [EXCERPT_FIELD_ID]: { value: article.excerpt },
      [PUBLISHED_AT_FIELD_ID]: { 
        value: article.published_at ?? new Date().toISOString() 
      },
    },
  }));

  // Add/update items in the collection
  await collection.addItems(items);
}

/**
 * Plugin entry point
 */
export default async function run() {
  const mode = framer.mode;

  if (mode === "configureManagedCollection") {
    await configureManagedCollection();
    framer.showUI(); // Show config UI
  } else if (mode === "syncManagedCollection") {
    await syncManagedCollection();
    await framer.closePlugin();
  } else {
    await framer.closePlugin();
  }
}

// src/App.tsx
import { useState, useEffect } from "react";
import { framer } from "framer-plugin";

export function App() {
  const [brandUrl, setBrandUrl] = useState("");
  const [apiKey, setApiKey] = useState("");
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    // Load existing configuration
    async function loadConfig() {
      const collection = await framer.getManagedCollection();
      const savedBrandUrl = await collection.getPluginData("brandUrl");
      const savedApiKey = await collection.getPluginData("apiKey");
      if (savedBrandUrl) setBrandUrl(savedBrandUrl);
      if (savedApiKey) setApiKey(savedApiKey);
    }
    loadConfig();
  }, []);

  async function saveConfig() {
    setSaving(true);
    try {
      const collection = await framer.getManagedCollection();
      await collection.setPluginData("brandUrl", brandUrl);
      await collection.setPluginData("apiKey", apiKey);
      alert("Configuration saved!");
    } catch (err) {
      alert("Failed to save: " + err);
    }
    setSaving(false);
  }

  return (
    <div style={{ padding: 16 }}>
      <h2>Wrodium Configuration</h2>
      
      <label>
        Brand URL
        <input
          type="text"
          value={brandUrl}
          onChange={(e) => setBrandUrl(e.target.value)}
          placeholder="yourbrand"
        />
      </label>

      <label>
        API Key
        <input
          type="password"
          value={apiKey}
          onChange={(e) => setApiKey(e.target.value)}
          placeholder="wrod_..."
        />
      </label>

      <button onClick={saveConfig} disabled={saving}>
        {saving ? "Saving..." : "Save Configuration"}
      </button>
    </div>
  );
}