import { useEditorStore } from "@/stores/editorStore";
import { renderMicron } from "./micronRenderer";
import { cn } from "@/lib/utils";

type PreviewMode = "micron" | "raw" | "script";

export default function PreviewPane() {
  const previewMode = useEditorStore((s) => s.previewMode);
  const setPreviewMode = useEditorStore((s) => s.setPreviewMode);
  const compiledMicron = useEditorStore((s) => s.compiledMicron);
  const compiledScript = useEditorStore((s) => s.compiledScript);
  const isDynamic = useEditorStore((s) => s.isDynamic);
  const isCompiling = useEditorStore((s) => s.isCompiling);
  const compileError = useEditorStore((s) => s.compileError);

  const tabs: { value: PreviewMode; label: string; show: boolean }[] = [
    { value: "micron", label: "Micron", show: true },
    { value: "raw", label: "Raw", show: true },
    { value: "script", label: "Script", show: isDynamic },
  ];

  return (
    <div className="flex flex-col h-full">
      <div className="flex items-center px-4 py-2 border-b-2 border-border shrink-0 gap-2">
        <span className="font-medium text-foreground flex-1">
          Preview
          {isDynamic && (
            <span className="ml-1.5 text-primary/60 text-[10px]" title="Dynamic page">⚡</span>
          )}
          {isCompiling && (
            <span className="ml-1 text-primary/40 text-[10px] animate-pulse">…</span>
          )}
          {compileError && (
            <span className="ml-1 text-red-400 text-[10px]" title={compileError}>✗</span>
          )}
        </span>
        <div className="flex items-center">
          {tabs
            .filter((t) => t.show)
            .map((tab, i, arr) => (
              <span key={tab.value} className="flex items-center">
                <button
                  onClick={() => setPreviewMode(tab.value)}
                  className={cn(
                    "text-[10px] uppercase tracking-wider transition-colors cursor-pointer px-1.5",
                    previewMode === tab.value
                      ? "text-foreground font-bold"
                      : "text-muted-foreground hover:text-foreground",
                  )}
                >
                  {tab.label}
                </button>
                {i < arr.length - 1 && (
                  <span className="text-muted-foreground text-[8px]">·</span>
                )}
              </span>
            ))}
        </div>
      </div>
      <div className="flex-1 bg-background overflow-auto min-h-0">
        {previewMode === "micron" ? (
          compiledMicron ? (
            <div
              className="p-2 font-mono text-[11px] whitespace-pre leading-tight"
              dangerouslySetInnerHTML={{
                __html: renderMicron(compiledMicron),
              }}
            />
          ) : (
            <div className="p-4">
              <span className="text-muted-foreground text-sm">
                Micron preview will appear here…
              </span>
            </div>
          )
        ) : previewMode === "script" ? (
          <pre className="p-4 font-mono text-xs whitespace-pre-wrap break-words text-amber-200/80 leading-relaxed">
            {compiledScript || "No dynamic script generated."}
          </pre>
        ) : (
          <pre className="p-4 font-mono text-xs whitespace-pre-wrap break-words text-muted-foreground">
            {compiledMicron || "Raw Micron output will appear here…"}
          </pre>
        )}
      </div>
    </div>
  );
}
