"use client";

import React, { useState, useEffect, useCallback, useDeferredValue, useRef, useMemo, memo } from "react";
import { Download, RotateCcw, Share2, Code2, Check, Plus, Settings, ChevronDown, Upload } from "lucide-react";
import {
  DitherPattern,
  DITHER_PRESETS,
  generateDitherSVG,
} from "@/components/backgrounds/dither-pattern/component";
import type {
  DitherPattern as DitherPatternType,
  GradientType,
  DitherStyle,
  DitherShape,
} from "@/components/backgrounds/dither-pattern/component";
import { MobileBottomSheet } from "@/components/vritti/mobile-bottom-sheet";
import { ToolExportPanel } from "@/components/tool-export-panel";
import { useToolUrlState } from "@/hooks/use-tool-url-state";
import { cn } from "@/lib/utils";

// ─── Constants ───────────────────────────────────────────────────────────────

const PATTERNS: { value: DitherPatternType; label: string }[] = [
  { value: "bayer2", label: "Bayer 2×2" },
  { value: "bayer4", label: "Bayer 4×4" },
  { value: "bayer8", label: "Bayer 8×8" },
  { value: "halftone", label: "Halftone" },
  { value: "lines", label: "Lines" },
  { value: "crosses", label: "Crosses" },
  { value: "dots", label: "Dots" },
  { value: "grid", label: "Grid" },
  { value: "scales", label: "Scales" },
];

const GRADIENT_TYPES: { value: GradientType; label: string }[] = [
  { value: "linear", label: "Linear" },
  { value: "radial", label: "Radial" },
  { value: "conic", label: "Conic" },
  { value: "noise", label: "Noise" },
];

const SHAPES: { value: DitherShape; label: string }[] = [
  { value: "circle", label: "Circle" },
  { value: "square", label: "Square" },
  { value: "diamond", label: "Diamond" },
];

const STYLES: { value: DitherStyle; label: string }[] = [
  { value: "threshold", label: "Threshold" },
  { value: "scaled", label: "Scaled" },
];

const PRESET_LIST = Object.entries(DITHER_PRESETS).map(([key, val]) => ({
  key,
  ...val,
}));

// ─── State type ──────────────────────────────────────────────────────────────

interface DitherState {
  pattern: DitherPatternType;
  gradientType: GradientType;
  ditherStyle: DitherStyle;
  shape: DitherShape;
  cellSize: number;
  angle: number;
  palette: string[];
  percentages: number[];
}

const DEFAULT_STATE: DitherState = {
  pattern: "bayer4",
  gradientType: "linear",
  ditherStyle: "threshold",
  shape: "circle",
  cellSize: 6,
  angle: 45,
  palette: ["#000000", "#ffffff"],
  percentages: [50, 50],
};

// ─── Code generator ──────────────────────────────────────────────────────────

function generateCode(state: DitherState): string {
  return `import { DitherPattern } from "@/components/vritti/dither-pattern";

export function Background() {
  return (
    <div className="relative w-full h-screen overflow-hidden">
      <DitherPattern
        pattern="${state.pattern}"
        gradientType="${state.gradientType}"
        style="${state.ditherStyle}"
        shape="${state.shape}"
        cellSize={${state.cellSize}}
        angle={${state.angle}}
        palette={${JSON.stringify(state.palette)}}
        percentages={${JSON.stringify(state.percentages)}}
        width={1200}
        height={800}
        className="absolute inset-0 w-full h-full"
      />
    </div>
  );
}`;
}

// ─── Helpers ─────────────────────────────────────────────────────────────────

function imageToLuminanceGrid(img: HTMLImageElement, cols: number, rows: number): number[][] {
  const canvas = document.createElement("canvas");
  canvas.width = cols;
  canvas.height = rows;
  const ctx = canvas.getContext("2d")!;
  ctx.drawImage(img, 0, 0, cols, rows);
  const data = ctx.getImageData(0, 0, cols, rows).data;
  const grid: number[][] = new Array(rows);
  for (let y = 0; y < rows; y++) {
    grid[y] = new Array(cols);
    for (let x = 0; x < cols; x++) {
      const i = (y * cols + x) * 4;
      grid[y][x] = (0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2]) / 255;
    }
  }
  return grid;
}

function downloadBlob(blob: Blob, name: string) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = name;
  a.click();
  URL.revokeObjectURL(url);
}

function downloadSVG(svgString: string) {
  downloadBlob(new Blob([svgString], { type: "image/svg+xml" }), "dither.svg");
}

function downloadPNG(svgString: string, width: number, height: number) {
  const img = new Image();
  const blob = new Blob([svgString], { type: "image/svg+xml" });
  const url = URL.createObjectURL(blob);
  img.onload = () => {
    const canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext("2d")!;
    ctx.drawImage(img, 0, 0, width, height);
    canvas.toBlob((b) => {
      if (b) downloadBlob(b, "dither.png");
      URL.revokeObjectURL(url);
    }, "image/png");
  };
  img.src = url;
}

// ─── Small controls ──────────────────────────────────────────────────────────

function SegmentedControl<T extends string>({ label, options, value, onChange }: {
  label: string; options: { value: T; label: string }[]; value: T; onChange: (v: T) => void;
}) {
  return (
    <div>
      <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider mb-2">{label}</p>
      <div className="flex flex-wrap gap-1">
        {options.map((opt) => (
          <button key={opt.value} onClick={() => onChange(opt.value)}
            className={cn(
              "px-2 py-1 text-xs rounded-md border transition-colors",
              value === opt.value
                ? "border-primary bg-primary text-primary-foreground"
                : "border-border bg-background text-muted-foreground hover:border-primary/50 hover:text-foreground"
            )}>
            {opt.label}
          </button>
        ))}
      </div>
    </div>
  );
}

function Slider({ label, value, min, max, step = 1, onChange }: {
  label: string; value: number; min: number; max: number; step?: number; onChange: (v: number) => void;
}) {
  return (
    <div className="flex flex-col gap-1.5">
      <div className="flex items-center justify-between">
        <span className="text-xs text-muted-foreground">{label}</span>
        <span className="text-xs font-mono text-foreground">{value}</span>
      </div>
      <input type="range" min={min} max={max} step={step} value={value}
        onChange={(e) => onChange(Number(e.target.value))}
        className="h-1.5 w-full cursor-pointer appearance-none rounded-full bg-border accent-primary" />
    </div>
  );
}

// ─── Preset thumbnail ────────────────────────────────────────────────────────

const PresetThumb = memo(function PresetThumb({ label, palette, percentages, active, onClick }: {
  label: string; palette: readonly string[]; percentages: readonly number[]; active: boolean; onClick: () => void;
}) {
  return (
    <button onClick={onClick}
      className={cn(
        "relative rounded-lg overflow-hidden border-2 transition-all w-full",
        active ? "border-primary scale-[0.97] shadow-lg" : "border-border hover:border-primary/50"
      )}>
      <div className="aspect-video">
        <DitherPattern
          pattern="bayer4" gradientType="linear"
          palette={[...palette] as string[]} percentages={[...percentages] as number[]}
          width={120} height={68} cellSize={6} angle={45}
        />
      </div>
      <div className="px-1.5 py-1 text-[10px] font-medium text-center bg-background/90 truncate">{label}</div>
    </button>
  );
});

// ─── Pattern label ───────────────────────────────────────────────────────────

function getPatternLabel(pattern: DitherPatternType): string {
  return PATTERNS.find((p) => p.value === pattern)?.label ?? pattern;
}

// ─── Controls ────────────────────────────────────────────────────────────────

interface DitherControlsProps {
  state: DitherState;
  activePreset: string | null;
  sourceType: "gradient" | "image";
  onUpdate: <K extends keyof DitherState>(key: K, value: DitherState[K]) => void;
  onApplyPreset: (key: string) => void;
  onAddColor: () => void;
  onRemoveColor: (idx: number) => void;
  onUpdatePaletteColor: (idx: number, color: string) => void;
  onSourceTypeChange: (type: "gradient" | "image") => void;
  onReset: () => void;
  onExportToggle: () => void;
  onShareUrl: () => void;
}

function DitherControls({
  state, activePreset, sourceType,
  onUpdate, onApplyPreset, onAddColor, onRemoveColor, onUpdatePaletteColor,
  onSourceTypeChange, onReset, onExportToggle, onShareUrl,
}: DitherControlsProps) {
  const [shareCopied, setShareCopied] = useState(false);

  const handleShare = () => {
    onShareUrl();
    setShareCopied(true);
    setTimeout(() => setShareCopied(false), 2000);
  };

  return (
    <div className="flex h-full flex-col overflow-hidden">
      {/* Presets */}
      <div className="shrink-0 border-b border-border px-4 py-4">
        <p className="mb-3 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">Presets</p>
        <div className="grid grid-cols-3 gap-1.5">
          {PRESET_LIST.map(({ key, label, palette, percentages }) => (
            <PresetThumb key={key} label={label} palette={palette} percentages={percentages}
              active={activePreset === key} onClick={() => onApplyPreset(key)} />
          ))}
        </div>
      </div>

      {/* Scrollable controls */}
      <div className="scrollbar-none flex-1 overflow-y-auto px-4 py-4">
        <div className="flex flex-col gap-4">
          {/* Source type */}
          <div>
            <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider mb-2">Source</p>
            <div className="flex gap-1">
              <button onClick={() => onSourceTypeChange("gradient")}
                className={cn("px-2.5 py-1 text-xs rounded-md border transition-colors",
                  sourceType === "gradient" ? "border-primary bg-primary text-primary-foreground" : "border-border text-muted-foreground hover:text-foreground"
                )}>Gradient</button>
              <button onClick={() => onSourceTypeChange("image")}
                className={cn("px-2.5 py-1 text-xs rounded-md border transition-colors",
                  sourceType === "image" ? "border-primary bg-primary text-primary-foreground" : "border-border text-muted-foreground hover:text-foreground"
                )}>Image</button>
            </div>
          </div>

          <SegmentedControl label="Pattern" options={PATTERNS} value={state.pattern} onChange={(v) => onUpdate("pattern", v)} />

          {sourceType === "gradient" && (
            <SegmentedControl label="Gradient" options={GRADIENT_TYPES} value={state.gradientType} onChange={(v) => onUpdate("gradientType", v)} />
          )}

          <div className="grid grid-cols-2 gap-3">
            <SegmentedControl label="Style" options={STYLES} value={state.ditherStyle} onChange={(v) => onUpdate("ditherStyle", v)} />
            <SegmentedControl label="Shape" options={SHAPES} value={state.shape} onChange={(v) => onUpdate("shape", v)} />
          </div>

          <Slider label="Cell Size" value={state.cellSize} min={2} max={32} onChange={(v) => onUpdate("cellSize", v)} />

          {sourceType === "gradient" && (state.gradientType === "linear" || state.gradientType === "conic") && (
            <Slider label="Angle" value={state.angle} min={0} max={360} onChange={(v) => onUpdate("angle", v)} />
          )}

          {/* Palette */}
          <div>
            <div className="flex items-center justify-between mb-2">
              <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider">
                Colors ({state.palette.length})
              </p>
              <button onClick={onAddColor} disabled={state.palette.length >= 8}
                className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground disabled:opacity-30 disabled:pointer-events-none transition-colors">
                <Plus className="h-3 w-3" />
                Add
              </button>
            </div>
            <div className="flex flex-wrap gap-2">
              {state.palette.map((color, idx) => (
                <div key={idx} className="flex flex-col items-center gap-1 relative group">
                  <label
                    className="relative w-8 h-8 rounded-lg border-2 border-border overflow-hidden cursor-pointer hover:border-primary/60 transition-colors"
                    style={{ backgroundColor: color }}>
                    <input type="color" value={color}
                      onChange={(e) => onUpdatePaletteColor(idx, e.target.value)}
                      className="absolute opacity-0 inset-0 w-full h-full cursor-pointer" />
                  </label>
                  {state.palette.length > 2 && idx < state.palette.length - 1 && (
                    <button onClick={() => onRemoveColor(idx)}
                      className="absolute -top-1.5 -right-1.5 w-4 h-4 rounded-full bg-destructive text-destructive-foreground text-[10px] leading-none flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">×</button>
                  )}
                  <span className="text-[9px] text-muted-foreground">
                    {idx === state.palette.length - 1 ? "bg" : `c${idx + 1}`}
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Actions */}
      <div className="shrink-0 border-t border-border px-4 pb-4 pt-4">
        <div className="flex flex-col gap-2">
          <button
            onClick={onExportToggle}
            className="flex items-center justify-center gap-2 rounded-lg bg-primary py-2.5 text-sm font-semibold text-primary-foreground hover:bg-primary/90 transition-colors"
          >
            <Code2 className="h-4 w-4" />
            Export Code
          </button>
          <div className="flex gap-2">
            <button
              onClick={onReset}
              className="flex flex-1 items-center justify-center gap-2 rounded-lg border border-border py-2 text-xs font-medium text-muted-foreground hover:border-foreground hover:text-foreground transition-colors"
            >
              <RotateCcw className="h-3.5 w-3.5" />
              Reset
            </button>
            <button
              onClick={handleShare}
              className="flex flex-1 items-center justify-center gap-2 rounded-lg border border-border py-2 text-xs font-medium text-muted-foreground hover:border-foreground hover:text-foreground transition-colors"
            >
              {shareCopied ? <Check className="h-3.5 w-3.5 text-green-500" /> : <Share2 className="h-3.5 w-3.5" />}
              {shareCopied ? "Copied!" : "Share URL"}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Main DitherStudio ───────────────────────────────────────────────────────

export interface DitherStudioProps {
  className?: string;
}

export function DitherStudio({ className }: DitherStudioProps) {
  const [isMobile, setIsMobile] = useState(false);
  const [mobileControlsOpen, setMobileControlsOpen] = useState(false);
  const [state, setState] = useState<DitherState>(DEFAULT_STATE);
  const [activePreset, setActivePreset] = useState<string | null>("bw");
  const [exportOpen, setExportOpen] = useState(false);
  const [previewSize, setPreviewSize] = useState({ width: 800, height: 533 });

  // Image source
  const [sourceType, setSourceType] = useState<"gradient" | "image">("gradient");
  const [uploadedImage, setUploadedImage] = useState<HTMLImageElement | null>(null);
  const [imageDisplaySize, setImageDisplaySize] = useState<{ width: number; height: number } | null>(null);
  const [imageLuminanceGrid, setImageLuminanceGrid] = useState<number[][] | null>(null);
  const [dragging, setDragging] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const previewContainerRef = useRef<HTMLDivElement>(null);

  const deferredState = useDeferredValue(state);
  const isPending = state !== deferredState;

  useEffect(() => {
    setIsMobile(window.innerWidth < 1024);
    const onResize = () => setIsMobile(window.innerWidth < 1024);
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);

  // Measure preview container
  useEffect(() => {
    const el = previewContainerRef.current;
    if (!el) return;
    const ro = new ResizeObserver((entries) => {
      const rect = entries[0]?.contentRect;
      if (rect && rect.width > 0 && rect.height > 0) {
        setPreviewSize({ width: Math.round(rect.width), height: Math.round(rect.height) });
      }
    });
    ro.observe(el);
    return () => ro.disconnect();
  }, []);

  // Recompute image display size
  useEffect(() => {
    if (!uploadedImage) { setImageDisplaySize(null); return; }
    const aspect = uploadedImage.naturalWidth / uploadedImage.naturalHeight;
    const w = previewSize.width;
    const h = Math.round(w / aspect);
    setImageDisplaySize({ width: w, height: h });
  }, [uploadedImage, previewSize.width]);

  // Recompute image luminance grid
  useEffect(() => {
    if (!uploadedImage || sourceType !== "image" || !imageDisplaySize) {
      setImageLuminanceGrid(null);
      return;
    }
    const { width, height } = imageDisplaySize;
    const cols = Math.ceil(width / state.cellSize);
    const rows = Math.ceil(height / state.cellSize);
    setImageLuminanceGrid(imageToLuminanceGrid(uploadedImage, cols, rows));
  }, [uploadedImage, sourceType, state.cellSize, imageDisplaySize]);

  const update = useCallback(
    <K extends keyof DitherState>(key: K, value: DitherState[K]) => {
      setState((s) => ({ ...s, [key]: value }));
      if (key !== "palette" && key !== "percentages") setActivePreset(null);
    },
    []
  );

  const applyPreset = useCallback((key: string) => {
    const preset = DITHER_PRESETS[key as keyof typeof DITHER_PRESETS];
    if (!preset) return;
    setState((s) => ({
      ...s,
      palette: [...preset.palette] as string[],
      percentages: [...preset.percentages] as number[],
    }));
    setActivePreset(key);
  }, []);

  const updatePaletteColor = useCallback((idx: number, color: string) => {
    setState((s) => {
      const palette = [...s.palette];
      palette[idx] = color;
      return { ...s, palette };
    });
    setActivePreset(null);
  }, []);

  const addColor = useCallback(() => {
    setState((s) => {
      if (s.palette.length >= 8) return s;
      const newPalette = [...s.palette];
      newPalette.splice(newPalette.length - 1, 0, "#888888");
      const even = 100 / newPalette.length;
      const newPercentages = newPalette.map(() => Math.round(even));
      newPercentages[newPercentages.length - 1] += 100 - newPercentages.reduce((a, b) => a + b, 0);
      return { ...s, palette: newPalette, percentages: newPercentages };
    });
    setActivePreset(null);
  }, []);

  const removeColor = useCallback((idx: number) => {
    setState((s) => {
      if (s.palette.length <= 2) return s;
      const newPalette = s.palette.filter((_, i) => i !== idx);
      const even = 100 / newPalette.length;
      const newPercentages = newPalette.map(() => Math.round(even));
      newPercentages[newPercentages.length - 1] += 100 - newPercentages.reduce((a, b) => a + b, 0);
      return { ...s, palette: newPalette, percentages: newPercentages };
    });
    setActivePreset(null);
  }, []);

  const resetState = useCallback(() => {
    setState(DEFAULT_STATE);
    setActivePreset("bw");
    setSourceType("gradient");
    setUploadedImage(null);
  }, []);

  // Image upload
  const handleImageFile = useCallback((file: File) => {
    if (!file.type.startsWith("image/")) return;
    const reader = new FileReader();
    reader.onload = () => {
      const img = new Image();
      img.onload = () => {
        setUploadedImage(img);
        setSourceType("image");
      };
      img.src = reader.result as string;
    };
    reader.readAsDataURL(file);
  }, []);

  const handleDrop = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    setDragging(false);
    const file = e.dataTransfer.files[0];
    if (file) handleImageFile(file);
  }, [handleImageFile]);

  // Download
  const handleDownload = useCallback((format: "svg" | "png") => {
    const width = 1200;
    const height = (sourceType === "image" && uploadedImage)
      ? Math.round(width / (uploadedImage.naturalWidth / uploadedImage.naturalHeight))
      : 800;
    const svg = generateDitherSVG({
      pattern: state.pattern,
      gradientType: state.gradientType,
      ditherStyle: state.ditherStyle,
      shape: state.shape,
      cellSize: state.cellSize,
      angle: state.angle,
      palette: state.palette,
      percentages: state.percentages,
      width,
      height,
      luminanceGrid: sourceType === "image" && uploadedImage
        ? imageToLuminanceGrid(uploadedImage, Math.ceil(width / state.cellSize), Math.ceil(height / state.cellSize))
        : undefined,
    });
    if (format === "svg") downloadSVG(svg);
    else downloadPNG(svg, width, height);
  }, [state, sourceType, uploadedImage]);

  const toggleExport = useCallback(() => setExportOpen((o) => !o), []);

  // URL state
  const urlState = useMemo(() => ({
    pattern: state.pattern,
    gradientType: state.gradientType,
    ditherStyle: state.ditherStyle,
    shape: state.shape,
    cellSize: state.cellSize,
    angle: state.angle,
    palette: state.palette,
    percentages: state.percentages,
  }), [state]);

  const { loadedState, generateShareableUrl } = useToolUrlState("s", urlState);

  useEffect(() => {
    if (loadedState) {
      const s = loadedState as Partial<DitherState>;
      setState((prev) => ({ ...prev, ...s }));
      setActivePreset(null);
    }
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  const handleShareUrl = useCallback(() => {
    const url = generateShareableUrl();
    if (url) navigator.clipboard.writeText(url);
  }, [generateShareableUrl]);

  const exportCode = useMemo(() => generateCode(state), [state]);

  const effectiveLuminanceGrid = sourceType === "image" ? imageLuminanceGrid ?? undefined : undefined;
  const activePreviewSize = (sourceType === "image" && imageDisplaySize) ? imageDisplaySize : previewSize;

  const controlsProps: DitherControlsProps = {
    state, activePreset, sourceType,
    onUpdate: update, onApplyPreset: applyPreset,
    onAddColor: addColor, onRemoveColor: removeColor,
    onUpdatePaletteColor: updatePaletteColor,
    onSourceTypeChange: setSourceType,
    onReset: resetState,
    onExportToggle: toggleExport,
    onShareUrl: handleShareUrl,
  };

  return (
    <div className={cn("flex w-full h-full gap-0 lg:gap-4 relative overflow-hidden", className)}>
      {/* Desktop sidebar */}
      <div className="hidden lg:flex w-[280px] xl:w-[320px] shrink-0 h-full overflow-hidden flex-col border-r border-border">
        <DitherControls {...controlsProps} />
      </div>

      {/* Right column: preview + export panel */}
      <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
        {/* Preview area */}
        <div
          ref={previewContainerRef}
          className="flex-1 relative rounded-lg lg:rounded-2xl overflow-hidden border border-border min-h-[300px] lg:min-h-0"
        >
          {isPending && (
            <div className="absolute top-3 right-3 z-10 bg-background/80 text-xs text-muted-foreground rounded-md px-2 py-1 backdrop-blur-sm">
              Rendering…
            </div>
          )}

          <DitherPattern
            pattern={deferredState.pattern}
            gradientType={deferredState.gradientType}
            style={deferredState.ditherStyle}
            shape={deferredState.shape}
            cellSize={deferredState.cellSize}
            angle={deferredState.angle}
            palette={deferredState.palette}
            percentages={deferredState.percentages}
            width={activePreviewSize.width}
            height={activePreviewSize.height}
            luminanceGrid={effectiveLuminanceGrid}
            className="w-full h-full"
          />

          {/* Background label */}
          <div className="absolute left-4 top-4 rounded-lg border border-border bg-background/90 px-3 py-1.5 text-xs font-medium text-muted-foreground backdrop-blur-sm">
            {getPatternLabel(state.pattern)}
          </div>

          {/* Image upload overlay (when in image mode) */}
          {sourceType === "image" && !uploadedImage && (
            <div
              onDragOver={(e) => { e.preventDefault(); setDragging(true); }}
              onDragLeave={() => setDragging(false)}
              onDrop={handleDrop}
              onClick={() => fileInputRef.current?.click()}
              className={cn(
                "absolute inset-0 z-20 flex flex-col items-center justify-center cursor-pointer transition-colors",
                dragging ? "bg-primary/10" : "bg-background/80 backdrop-blur-sm"
              )}
            >
              <input ref={fileInputRef} type="file" accept="image/*" className="hidden"
                onChange={(e) => { const f = e.target.files?.[0]; if (f) handleImageFile(f); }} />
              <Upload className="h-8 w-8 text-muted-foreground mb-2" />
              <p className="text-sm text-muted-foreground">Drop an image here or click to upload</p>
              <p className="text-xs text-muted-foreground/60 mt-1">JPEG, PNG, WebP</p>
            </div>
          )}

          {/* Replace image button */}
          {sourceType === "image" && uploadedImage && (
            <button
              onClick={() => fileInputRef.current?.click()}
              className="absolute top-4 right-4 z-10 flex items-center gap-2 rounded-lg border border-border bg-background/90 px-3 py-1.5 text-xs font-medium text-muted-foreground backdrop-blur-sm hover:bg-accent transition-colors"
            >
              <Upload className="h-3 w-3" />
              Replace
            </button>
          )}

          {/* Hidden file input for replacing images */}
          {sourceType === "image" && uploadedImage && (
            <input ref={fileInputRef} type="file" accept="image/*" className="hidden"
              onChange={(e) => { const f = e.target.files?.[0]; if (f) handleImageFile(f); }} />
          )}

          {/* Download buttons (desktop) */}
          <div className="absolute bottom-4 left-4 z-10 hidden gap-2 lg:flex">
            <button
              onClick={() => handleDownload("svg")}
              className="flex items-center gap-2 rounded-lg border border-border bg-background/90 px-3 py-2 text-xs font-medium text-muted-foreground backdrop-blur-sm transition-colors hover:bg-accent"
            >
              <Download className="h-3.5 w-3.5" />
              SVG
            </button>
            <button
              onClick={() => handleDownload("png")}
              className="flex items-center gap-2 rounded-lg border border-border bg-background/90 px-3 py-2 text-xs font-medium text-muted-foreground backdrop-blur-sm transition-colors hover:bg-accent"
            >
              <Download className="h-3.5 w-3.5" />
              PNG
            </button>
          </div>

          {/* Mobile controls trigger */}
          <button
            className="lg:hidden absolute bottom-6 right-4 flex items-center gap-2 bg-primary px-4 py-2.5 rounded-xl text-primary-foreground text-[13px] font-semibold shadow-[0_4px_20px_rgba(0,0,0,0.3)] active:scale-95 transition-transform z-10"
            onClick={() => setMobileControlsOpen(true)}
          >
            <Settings className="w-4 h-4" />
            Controls
          </button>
        </div>

        {/* Inline export panel */}
        <ToolExportPanel
          registryName="dither-pattern"
          code={exportCode}
          open={exportOpen}
          onToggle={toggleExport}
        />
      </div>

      {/* Mobile bottom sheet */}
      {isMobile && (
        <MobileBottomSheet open={mobileControlsOpen} onOpenChange={setMobileControlsOpen}>
          <DitherControls {...controlsProps} />
        </MobileBottomSheet>
      )}
    </div>
  );
}

export { DitherStudio };
Dither Studio

Installation
