import { useCallback, useMemo, useRef, useState } from "react";
import { App as ReactEditorApp, createUseEditor } from "@reacteditor/core";
import "@reacteditor/core/react-editor.css";
import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn";
import { mediaPlugin } from "@reacteditor/plugin-media";
import "@reacteditor/plugin-media/styles.css";
import { aiPlugin } from "@reacteditor/plugin-ai";
import "@reacteditor/plugin-ai/styles.css";
import { createConfig } from "@/react-editor.config";
import { ShopifyProvider } from "@/contexts/shopify-context";
import { frontendAiMediaAdapter } from "@/services/media-adapter";
import { Loader } from "@/components/ui/loader";
import schemaJson from "../app.schema.json";

const AI_API_KEY = (import.meta.env.VITE_API_KEY as string | undefined) ?? "";

type Pages = Record<string, { root: any; content: any[] }>;

const useEditor = createUseEditor();

const SHOPIFY_DOMAIN =
  (import.meta.env.VITE_SHOPIFY_DOMAIN as string | undefined) ?? "mock.shop";
const STOREFRONT_TOKEN =
  (import.meta.env.VITE_SHOPIFY_STOREFRONT_ACCESS_TOKEN as
    | string
    | undefined) ?? "";

function readPathname() {
  if (typeof window === "undefined") return "/";
  const p = window.location.pathname;
  return p === "" ? "/" : p;
}

export default function App() {
  const pages = schemaJson as Pages;
  const [currentPath, setCurrentPath] = useState<string>(readPathname);
  const [isPublishing, setIsPublishing] = useState(false);
  const latestDataRef = useRef<any>(null);

  const handleChange = useCallback((data: any) => {
    latestDataRef.current = data;
  }, []);

  const config = useMemo(
    () =>
      createConfig({
        domain: SHOPIFY_DOMAIN,
        token: STOREFRONT_TOKEN || null,
      }),
    [],
  );

  const handlePublish = useCallback((data: any, route?: string) => {
    console.log(data);
    setIsPublishing(true);
    if (typeof window !== "undefined" && window.parent !== window) {
      window.parent.postMessage(
        { type: "PUBLISH", data: { data, route } },
        "*",
      );
    }
    setTimeout(() => setIsPublishing(false), 1000);
  }, []);

  const plugins = useMemo(
    () => [createTailwindCdnPlugin()],
    [pages, currentPath, handlePublish],
  );

  return (
    <div className="h-screen w-screen">
      <ShopifyProvider domain={SHOPIFY_DOMAIN} token={STOREFRONT_TOKEN}>
        <ReactEditorApp
          config={config as any}
          pages={pages as any}
          currentPath={currentPath}
          plugins={plugins}
          iframe={{ enabled: true }}
          ui={{ navBarVisible: false, leftSideBarVisible: false }}
          onPublish={handlePublish}
          onChange={handleChange}
          overrides={{
            headerActions: () => {
              const appState = useEditor((s: any) => s.appState);
              return (
                <button
                  type="button"
                  disabled={isPublishing}
                  onClick={() => {
                    handlePublish(appState.data, currentPath);
                  }}
                  className="inline-flex items-center justify-center gap-2 rounded-md bg-black px-4 py-1.5 text-sm font-medium text-white hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-60"
                >
                  {isPublishing && <Loader size={14} />}
                  {isPublishing ? "Saving..." : "Save"}
                </button>
              );
            },
          }}
        />
      </ShopifyProvider>
      {isPublishing && (
        <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/30">
          <Loader size={32} />
        </div>
      )}
    </div>
  );
}
