"use client";

import { useEffect, useMemo, useState } from "react";
import {
  buildWidgetQuery,
  patchWidgetConfig,
  WIDGET_DEFAULTS,
  type WidgetConfig,
} from "../../lib/config";
import { WidgetMenu } from "../../components/WidgetMenu";
import type { PresetsPayload } from "../../components/PresetsRow";
import { loadWidgetConfig, saveWidgetConfig } from "../widgetConfigStorage";

// The two wide presets exist because columns need width to be worth having —
// the original three are all narrower than two readable columns. `Viewport` is
// the one that isn't a pinned-window size: a fill row only shows what it does
// when the frame has a height to leave over, so arranging one at 200px tall
// would be arranging it blind.
const SIZE_PRESETS: {
  label: string;
  width: number;
  height: number;
  // CSS override for the iframe box, for a size that isn't a fixed pixel pair.
  css?: { width: string; height: string };
}[] = [
  { label: "Small", width: 320, height: 200 },
  { label: "Medium", width: 380, height: 320 },
  { label: "Tall", width: 360, height: 520 },
  { label: "Wide", width: 640, height: 260 },
  { label: "Panel", width: 720, height: 420 },
  {
    label: "Viewport",
    width: 720,
    height: 640,
    css: { width: "100%", height: "80vh" },
  },
];

// How long the preview waits before re-navigating. Changing an iframe's src is a
// full navigation, and a drag produces a change per pointer move — so the link
// field updates instantly and only the preview is debounced.
const PREVIEW_DEBOUNCE_MS = 250;

export function WidgetBuilder({
  initialPresets,
}: {
  initialPresets?: PresetsPayload;
}) {
  const [config, setConfig] = useState<WidgetConfig>(WIDGET_DEFAULTS);
  const [size, setSize] = useState(SIZE_PRESETS[0]);
  const [origin, setOrigin] = useState("");
  const [copied, setCopied] = useState(false);
  // Gate persistence until the stored config has loaded, so the initial
  // defaults render (SSR-stable) isn't written over the saved value.
  const [loaded, setLoaded] = useState(false);

  // Resolve the absolute origin on the client to avoid an SSR/CSR mismatch.
  useEffect(() => {
    setOrigin(window.location.origin);
  }, []);

  // Restore the last-used builder config from localStorage on mount (client
  // only — defaults render first on both server and client to avoid a hydration
  // mismatch, then this overlays the saved form state).
  useEffect(() => {
    setConfig(loadWidgetConfig());
    setLoaded(true);
  }, []);

  // Persist the form on every change once the saved value has been restored.
  useEffect(() => {
    if (loaded) saveWidgetConfig(config);
  }, [config, loaded]);

  const query = useMemo(() => buildWidgetQuery(config), [config]);
  const relativeUrl = query ? `/widget?${query}` : "/widget";
  const fullUrl = origin ? `${origin}${relativeUrl}` : relativeUrl;

  const [previewUrl, setPreviewUrl] = useState("/widget");
  useEffect(() => {
    const t = setTimeout(() => setPreviewUrl(relativeUrl), PREVIEW_DEBOUNCE_MS);
    return () => clearTimeout(t);
  }, [relativeUrl]);

  function patch(p: Partial<WidgetConfig>) {
    setConfig((c) => patchWidgetConfig(c, p));
    setCopied(false);
  }

  async function copy() {
    try {
      await navigator.clipboard.writeText(fullUrl);
      setCopied(true);
    } catch {
      // clipboard blocked — leave the field for manual copy
    }
  }

  function openPopup() {
    // `popup` asks the browser for a minimal, chromeless window (no tab strip,
    // toolbar, or menu) — ideal for a pinned always-on-top monitor. The named
    // target reuses the same window on repeat clicks instead of stacking.
    window.open(
      relativeUrl,
      "monitor-widget",
      `popup=yes,width=${size.width},height=${size.height}`,
    );
  }

  return (
    <div className="flex flex-col gap-6 xl:flex-row xl:items-start">
      <div className="flex min-w-0 flex-1 flex-col gap-4">
        <WidgetMenu
          config={config}
          onChange={patch}
          initialPresets={initialPresets}
          previewWidth={size.width}
        />
      </div>

      <div className="flex flex-col gap-3 xl:shrink-0">
        <div className="flex flex-col gap-1">
          <span className="text-sm font-medium">Widget link</span>
          <div className="flex gap-2">
            <input
              type="text"
              readOnly
              aria-label="widget URL"
              value={fullUrl}
              onFocus={(e) => e.currentTarget.select()}
              className="min-w-0 flex-1 rounded border border-border bg-muted px-2 py-1 font-mono text-xs"
            />
            <button
              type="button"
              onClick={copy}
              className="shrink-0 rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90"
            >
              {copied ? "Copied" : "Copy"}
            </button>
            <button
              type="button"
              onClick={openPopup}
              className="shrink-0 rounded-md border border-border px-3 py-1.5 text-sm font-medium hover:bg-muted"
            >
              Open popup
            </button>
          </div>
          <p className="max-w-prose text-xs text-muted-foreground">
            The link carries the whole floorplan, so the arrangement above is
            what a pinned window or an embedded{" "}
            <code className="font-mono">&lt;iframe&gt;</code> will show. Sections
            in the <strong>Off</strong> tray are simply absent from it — the link
            only names what is on, which is why an old link still works and still
            renders in the original order. A <strong>preset</strong> is just this
            link under a name, so loading one anywhere gives the same widget. The{" "}
            <strong>settings gear</strong> reopens these same controls inside the
            widget; turn it off for a locked-down link.{" "}
            <strong>Open popup</strong> launches a chromeless window at the
            selected preview size.
          </p>
        </div>

        <div className="flex flex-col gap-2">
          <div className="flex items-center gap-2">
            <span className="text-sm font-medium">Preview</span>
            <div className="flex flex-wrap gap-1">
              {SIZE_PRESETS.map((p) => (
                <button
                  key={p.label}
                  type="button"
                  onClick={() => setSize(p)}
                  aria-pressed={size.label === p.label}
                  className={`rounded border px-2 py-0.5 text-xs ${
                    size.label === p.label
                      ? "border-primary bg-primary text-primary-foreground"
                      : "border-border hover:bg-muted"
                  }`}
                >
                  {p.label}
                </button>
              ))}
            </div>
          </div>
          <div className="inline-block max-w-full overflow-auto rounded-lg border border-border bg-card shadow-sm">
            <iframe
              title="widget preview"
              src={previewUrl}
              width={size.width}
              height={size.height}
              style={size.css}
              className="block"
            />
          </div>
          <p className="text-xs text-muted-foreground">
            {size.css
              ? "Previewing at the width of this panel, 80% of the window's height — enough for a fill row to show what it does."
              : `Previewing at ${size.width}×${size.height}px.`}
          </p>
        </div>
      </div>
    </div>
  );
}