import { useCallback, useEffect, useRef, useState } from "react";
import { cn } from "./lib/cn";
import { useEditor } from "./hooks/useEditor";
import type { ExportResult } from "./types";
import { buildFilename, isImageFile, loadImage, triggerDownload, type LoadedImage } from "./lib/image";
import { exportImage } from "./lib/exportClient";
import { TopBar } from "./components/TopBar";
import { Dropzone } from "./components/Dropzone";
import { EditorCanvas } from "./components/EditorCanvas";
import { TemplatePicker } from "./components/TemplatePicker";
import { Footer } from "./components/footer";
import { ToastContainer, toast } from "./components/toast";
import { DownloadIcon, SlidersIcon } from "./components/icons";
import { AdjustPanel, CropPanel, EffectsPanel, ExportPanel, TransformPanel } from "./components/panels";

export default function App() {
  const [state, dispatch] = useEditor();
  const [image, setImage] = useState<LoadedImage | null>(null);
  const [loading, setLoading] = useState(false);
  const [loadError, setLoadError] = useState<string | null>(null);

  const [exporting, setExporting] = useState(false);
  const [result, setResult] = useState<ExportResult | null>(null);
  const [resultUrl, setResultUrl] = useState<string | null>(null);
  const [exportError, setExportError] = useState<string | null>(null);

  // Which side drawer is open on small screens ('none' on desktop — trays are inline).
  const [tray, setTray] = useState<"none" | "tools" | "export">("none");

  // Track the live object URL outside the render cycle so revocation is
  // StrictMode-safe (we only revoke the previous image when a new one loads).
  const urlRef = useRef<string | null>(null);

  // The export-preview object URL is owned here so it can be revoked when the
  // result is replaced or cleared (object URLs are an external resource).
  const resultUrlRef = useRef<string | null>(null);
  const clearPreview = useCallback(() => {
    if (resultUrlRef.current) URL.revokeObjectURL(resultUrlRef.current);
    resultUrlRef.current = null;
    setResultUrl(null);
  }, []);
  useEffect(
    () => () => {
      if (resultUrlRef.current) URL.revokeObjectURL(resultUrlRef.current);
    },
    [],
  );

  const handleFile = useCallback(
    async (file: File) => {
      setLoading(true);
      setLoadError(null);
      try {
        if (!isImageFile(file)) {
          throw new Error("That file doesn’t look like a supported image.");
        }
        const loaded = await loadImage(file);
        if (urlRef.current) URL.revokeObjectURL(urlRef.current);
        urlRef.current = loaded.url;
        setImage(loaded);
        setResult(null);
        clearPreview();
        setExportError(null);
        dispatch({ type: "resetEdits" });
      } catch (err) {
        setLoadError(err instanceof Error ? err.message : "Could not load that image.");
      } finally {
        setLoading(false);
      }
    },
    [dispatch, clearPreview],
  );

  const handleClose = useCallback(() => {
    if (urlRef.current) URL.revokeObjectURL(urlRef.current);
    urlRef.current = null;
    setImage(null);
    setResult(null);
    clearPreview();
    setExportError(null);
    setLoadError(null);
    dispatch({ type: "resetEdits" });
  }, [dispatch, clearPreview]);

  async function handleExport() {
    if (!image || !state.croppedAreaPixels) return;
    setExporting(true);
    setExportError(null);
    try {
      const bytes = await image.file.arrayBuffer();
      const res = await exportImage({
        bytes,
        mime: image.file.type,
        crop: state.croppedAreaPixels,
        rotation: state.rotation,
        flipH: state.flipH,
        flipV: state.flipV,
        adjustments: state.adjustments,
        output: state.output,
        maxEdge: state.maxEdge,
        format: state.format,
        quality: state.quality,
      });
      setResult(res);
      if (resultUrlRef.current) URL.revokeObjectURL(resultUrlRef.current);
      const previewUrl = URL.createObjectURL(res.blob);
      resultUrlRef.current = previewUrl;
      setResultUrl(previewUrl);
      triggerDownload(res.blob, buildFilename(image.file.name, state.templateId, state.format));
      toast.success("Image exported");
    } catch (err) {
      setExportError(err instanceof Error ? err.message : "Export failed.");
    } finally {
      setExporting(false);
    }
  }

  // Keep a stable handle to the latest export fn for the keyboard shortcut,
  // updated in an effect so the keydown listener never needs to re-subscribe.
  const exportRef = useRef(handleExport);
  useEffect(() => {
    exportRef.current = handleExport;
  });

  // Paste an image from the clipboard at any time.
  useEffect(() => {
    const onPaste = (e: ClipboardEvent) => {
      const items = e.clipboardData?.items;
      if (!items) return;
      for (let i = 0; i < items.length; i++) {
        const item = items[i];
        if (item.type.startsWith("image/")) {
          const file = item.getAsFile();
          if (file) {
            void handleFile(file);
            break;
          }
        }
      }
    };
    window.addEventListener("paste", onPaste);
    return () => window.removeEventListener("paste", onPaste);
  }, [handleFile]);

  // While editing, dropping a file anywhere replaces the current image
  // (and we stop the browser from navigating away to the dropped file).
  useEffect(() => {
    if (!image) return;
    const onDragOver = (e: DragEvent) => e.preventDefault();
    const onDrop = (e: DragEvent) => {
      e.preventDefault();
      const file = e.dataTransfer?.files?.[0];
      if (file) void handleFile(file);
    };
    window.addEventListener("dragover", onDragOver);
    window.addEventListener("drop", onDrop);
    return () => {
      window.removeEventListener("dragover", onDragOver);
      window.removeEventListener("drop", onDrop);
    };
  }, [image, handleFile]);

  // Keyboard shortcuts: [ ] rotate · h/v flip · 0 reset view · Cmd/Ctrl+S export.
  useEffect(() => {
    if (!image) return;
    const onKey = (e: KeyboardEvent) => {
      const t = e.target as HTMLElement | null;
      if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) return;
      if (e.metaKey || e.ctrlKey) {
        if (e.key.toLowerCase() === "s") {
          e.preventDefault();
          void exportRef.current();
        }
        return;
      }
      switch (e.key) {
        case "[":
          dispatch({ type: "rotateBy", delta: -90 });
          break;
        case "]":
          dispatch({ type: "rotateBy", delta: 90 });
          break;
        case "h":
        case "H":
          dispatch({ type: "toggleFlipH" });
          break;
        case "v":
        case "V":
          dispatch({ type: "toggleFlipV" });
          break;
        case "0":
          dispatch({ type: "setZoom", zoom: 1 });
          dispatch({ type: "setCrop", crop: { x: 0, y: 0 } });
          break;
        default:
          return;
      }
      e.preventDefault();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [image, dispatch]);

  return (
    <div className="flex h-screen flex-col overflow-hidden bg-canvas text-zinc-100">
      <a
        href="#main-content"
        className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[200] focus:rounded-lg focus:bg-zinc-800 focus:px-4 focus:py-2 focus:text-accent-400 focus:ring-2 focus:ring-accent-500/50"
      >
        Skip to content
      </a>
      <TopBar
        hasImage={!!image}
        onFile={handleFile}
        onResetEdits={() => dispatch({ type: "resetEdits" })}
        onClose={handleClose}
      />

      {image ? (
        <main id="main-content" tabIndex={-1} className="relative flex min-h-0 flex-1 outline-none">
          <aside
            className={cn(
              "flex w-72 shrink-0 flex-col overflow-y-auto border-r border-zinc-800/60 bg-zinc-900",
              "transition-transform duration-200 lg:translate-x-0",
              "max-lg:fixed max-lg:bottom-0 max-lg:left-0 max-lg:top-14 max-lg:z-30 max-lg:w-[min(20rem,85vw)] max-lg:shadow-2xl max-lg:shadow-black/50",
              tray === "tools" ? "max-lg:translate-x-0" : "max-lg:-translate-x-full",
            )}
          >
            <div className="border-b border-zinc-800/60 p-4">
              <p className="mb-2 text-[0.7rem] font-semibold uppercase tracking-wider text-zinc-400">Template</p>
              <TemplatePicker
                currentId={state.templateId}
                onSelect={(template) => dispatch({ type: "selectTemplate", template })}
              />
            </div>
            <CropPanel state={state} dispatch={dispatch} />
            <TransformPanel state={state} dispatch={dispatch} />
            <EffectsPanel state={state} dispatch={dispatch} />
            <AdjustPanel state={state} dispatch={dispatch} />
          </aside>

          <section className="relative min-w-0 flex-1">
            <EditorCanvas image={image} state={state} dispatch={dispatch} />
          </section>

          <aside
            className={cn(
              "flex w-72 shrink-0 flex-col overflow-y-auto border-l border-zinc-800/60 bg-zinc-900",
              "transition-transform duration-200 lg:translate-x-0",
              "max-lg:fixed max-lg:bottom-0 max-lg:right-0 max-lg:top-14 max-lg:z-30 max-lg:w-[min(20rem,85vw)] max-lg:shadow-2xl max-lg:shadow-black/50",
              tray === "export" ? "max-lg:translate-x-0" : "max-lg:translate-x-full",
            )}
          >
            <ExportPanel
              state={state}
              dispatch={dispatch}
              image={image}
              onExport={handleExport}
              exporting={exporting}
              result={result}
              resultUrl={resultUrl}
              error={exportError}
            />
          </aside>

          {/* Mobile drawer backdrop */}
          {tray !== "none" && (
            <div
              className="fixed inset-x-0 bottom-0 top-14 z-20 bg-black/50 lg:hidden"
              onClick={() => setTray("none")}
              aria-hidden="true"
            />
          )}

          {/* Mobile tray toggles (hidden while a drawer is open; backdrop closes it) */}
          {tray === "none" && (
            <div className="fixed bottom-4 left-1/2 z-40 flex -translate-x-1/2 gap-1 rounded-full border border-zinc-800/60 bg-zinc-900/95 p-1 shadow-2xl shadow-black/40 backdrop-blur-sm lg:hidden">
              <button
                onClick={() => setTray("tools")}
                aria-label="Toggle editing tools"
                className="flex items-center gap-1.5 rounded-full px-4 py-2 text-xs font-medium text-zinc-100"
              >
                <SlidersIcon className="size-4" /> Edit
              </button>
              <button
                onClick={() => setTray("export")}
                aria-label="Toggle export panel"
                className="flex items-center gap-1.5 rounded-full bg-accent-600 px-4 py-2 text-xs font-medium text-white"
              >
                <DownloadIcon className="size-4" /> Export
              </button>
            </div>
          )}
        </main>
      ) : (
        <>
          <main id="main-content" tabIndex={-1} className="min-h-0 flex-1 outline-none">
            <Dropzone onFile={handleFile} loading={loading} error={loadError} />
          </main>
          <Footer />
        </>
      )}

      <ToastContainer />
    </div>
  );
}