import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { ToolRail, type TabId } from './ui/ToolRail';
import { ChipRow, SliderRow, type ChipDef, type SliderDef } from './ui/ChipColumn';
import { ImageStage } from './ui/ImageStage';
import { TopBar } from './ui/TopBar';
import { AuthModal } from './ui/AuthModal';
import { NameModal } from './ui/NameModal';
import { DeletePhotoModal } from './ui/DeletePhotoModal';
import { RecipeCreatePanel, type RecipeDraft } from './ui/RecipeCreatePanel';
import { useI18n } from './i18n/I18nProvider';
import { loadEngine } from './engine/assets';
import { renderPhoto, type RenderAssets } from './engine/exportEngine';
import { download, fileToBytes, readGps, readIso, resizedJpeg } from './engine/imageOps';
import { loadPhoto, loadState, savePhoto, saveState } from './engine/session';
import { api, type Photo, type SavedRecipe, type User } from './api';
import { TIERS } from './config/tiers';
import { DEFAULT_ADJUSTMENTS, DEFAULT_RECIPES, FILM_SIMS, filmSimToRecipe } from '../shared/utils/defaultRecipes';
import { PARAM_DEFS, type ContinuousParamDef } from '../shared/utils/paramDefs';
import { exportRecipeXml, importRecipeXml } from '../shared/utils/recipeShare';
import { writeJpegExif } from '../shared/utils/exifWrite';
import {
  CROP_W_H,
  DEFAULT_CROP_RECT,
  type CropRatio,
  type CropRect,
  type FrameId,
  type GPSInfo,
  type Recipe,
} from '../shared/types';
import type { MsgKey } from './i18n/vi';

// Mirrors the API's MAX_PHOTOS_PER_USER: shown on SAVE PHOTO, enforced there.
const MAX_PHOTOS = 12;
// Preview renders on a downscaled copy; export always re-renders the original
// bytes, so nothing shown here is baked into the file.
const PREVIEW_MAX = 1600;
// A committed crop keeps only a fraction of the photo, so the 1600px copy
// leaves too few pixels behind and the result reads as blocky once the stage
// scales it up. While a crop is live the source is re-derived larger, inverted
// by that fraction. The same ceiling bounds a zoomed-in stage, and 3200px is
// what the decode can afford: past it a wheel gesture stops keeping up.
const PREVIEW_HARD_MAX = 3200;
const CROP_PREVIEW_MIN_FRAC = 0.05;
// Zoom asks for a bigger copy; quantised so a smooth gesture does not re-cut it
// on every notch.
const PREVIEW_QUANTUM = 512;
const PREVIEW_DEBOUNCE_MS = 120;

const FRAMES: { id: FrameId; label: MsgKey }[] = [
  { id: 'none', label: 'frame.none' },
  { id: 'polaroid', label: 'frame.polaroid' },
  { id: 'classic-white', label: 'frame.classic' },
  { id: 'cinematic', label: 'frame.cinematic' },
  { id: 'wallframe', label: 'frame.wall' },
  { id: 'wallframe-landscape', label: 'frame.wallLand' },
];

// FREE draws the frame on the canvas and lets the user drag its corners, so
// every ratio is offered here — no ratio is applied until APPLY.
const CROPS: CropRatio[] = ['none', 'free', '1:1', '2:3', '3:2', '3:4', '4:3', '16:9'];
const TEMP_PRESETS: { label: string; kelvin: number }[] = [
  { label: 'AUTO', kelvin: 5500 },
  { label: 'DAYLIGHT', kelvin: 5600 },
  { label: 'DAYLIGHT -3R', kelvin: 5800 },
  { label: 'CLOUDY', kelvin: 6500 },
  { label: 'SHADE', kelvin: 7500 },
  { label: 'TUNGSTEN', kelvin: 3200 },
  { label: 'FLUOR', kelvin: 4000 },
];

// Kelvin -> sRGB (Tanner Helland's approximation, what every WB widget uses):
// 2500K reads warm orange, 5500K a near-neutral white, 10000K blue.
function kelvinToHex(k: number): string {
  const t = Math.min(40000, Math.max(1000, k)) / 100;
  const chan = (v: number) => Math.round(Math.min(255, Math.max(0, v))).toString(16).padStart(2, '0');
  const r = t <= 66 ? 255 : 329.698727446 * (t - 60) ** -0.1332047592;
  const g = t <= 66 ? 99.4708025861 * Math.log(t) - 161.1195681661 : 288.1221695283 * (t - 60) ** -0.0755148492;
  const b = t >= 66 ? 255 : t <= 19 ? 0 : 138.5177312231 * Math.log(t - 10) - 305.0447927307;
  return `#${chan(r)}${chan(g)}${chan(b)}`;
}

// HSL -> #rrggbb (CSS keeps hsl() opaque to a test, and the swatch prints its
// own hex, so the panel hands out one format).
function hslToHex(h: number, s: number, l: number): string {
  const k = (n: number) => (n + h / 30) % 12;
  const a = (s / 100) * Math.min(l / 100, 1 - l / 100);
  const chan = (n: number) =>
    Math.max(0, Math.min(255, Math.round(255 * (l / 100 - a * Math.max(-1, Math.min(k(n) - 3, 9 - k(n), 1))))))
      .toString(16)
      .padStart(2, '0');
  return `#${chan(0)}${chan(8)}${chan(4)}`;
}

// The knobs that drive a colour get a swatch under their ruler, so the hue is
// visible next to the number. TINT runs green (-10) through a neutral grey (0)
// to magenta (+10) — the axis every WB tool labels G..M.
const SLIDER_SWATCH: Partial<Record<string, (v: number) => string>> = {
  temperature: kelvinToHex,
  tint: (v) => hslToHex(140 + ((v + 10) / 20) * 160, Math.abs(v) * 7, 58 + (10 - Math.abs(v)) * 3),
};

// The option strips, one open at a time (phone's GroupKey set minus the groups
// the web engine has no knob for).
type GroupKey = 'cx' | 'cxb' | 'dr' | 'crop' | 'rotate' | 'style' | 'temp' | 'wm'
  | 'wmColor' | 'wmSize' | 'gpsColor' | 'gpsName' | 'gpsTime';
const WM_SUBGROUPS: GroupKey[] = ['wmColor', 'wmSize', 'gpsColor', 'gpsName', 'gpsTime'];
const isWmPanel = (g: GroupKey | null) => g === 'wm' || (g !== null && WM_SUBGROUPS.includes(g));
// A slider row opened from a strip returns to it with "<" (COLOR TEMP -> TEMP).
const PARAM_GROUP: Partial<Record<string, GroupKey>> = { temperature: 'temp' };

const CHROME_OPTIONS = [
  { v: 'none', d: 'OFF' },
  { v: 'weak', d: 'WEAK' },
  { v: 'strong', d: 'STRONG' },
];
const DR_OPTIONS = [
  { v: 'auto', d: 'AUTO' },
  { v: '100', d: 'DR100' },
  { v: '200', d: 'DR200' },
  { v: '400', d: 'DR400' },
];
const WM_COLORS = [
  { v: '#ffffff', d: 'WHITE' },
  { v: '#f59e0b', d: 'AMBER' },
  { v: '#000000', d: 'BLACK' },
];
const WM_SIZES = [
  { v: '1', d: '1x' },
  { v: '1.5', d: '1.5x' },
  { v: '2', d: '2x' },
];

interface LoadedSource {
  bytes: Uint8Array;
  name: string;
  url: string;
}

// Everything a single UNDO step puts back. The recipe alone was not enough:
// frame, crop, rotation, marks and geotag all change the photo too.
interface Look {
  recipe: Recipe;
  simId: string | null;
  frameId: FrameId;
  crop: CropRatio;
  cropRect: CropRect;
  cropApplied: boolean;
  rotation: 0 | 90 | 180 | 270;
  markOn: boolean;
  markText: string;
  markStyle: { color: string; size: number };
  useGeotag: boolean;
  gpsStyle: { color: string; showName: boolean; showTime: boolean };
}

export function Workspace() {
  const { t } = useI18n();

  // Session restore: read once, synchronously, so the first paint already holds
  // the user's own settings instead of a flash of the defaults. The photo comes
  // back from IndexedDB in the boot effect below.
  const session = useMemo(loadState, []);

  const [engine, setEngine] = useState<{ assets: RenderAssets; gpu: boolean } | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState<string | null>(null);

  const [source, setSource] = useState<LoadedSource | null>(null);
  const [previewBytes, setPreviewBytes] = useState<Uint8Array | null>(null);
  const [previewUrl, setPreviewUrl] = useState<string | null>(null);

  const [recipe, setRecipe] = useState<Recipe>(() => ({
    ...DEFAULT_RECIPES[0],
    id: 'web-current',
    name: DEFAULT_RECIPES[0]?.name ?? 'PROVIA',
    ...session.recipe,
  }));
  const [simId, setSimId] = useState<string | null>(() => session.simId ?? null);
  const [frameId, setFrameId] = useState<FrameId>(() => session.frameId ?? 'none');
  const [crop, setCrop] = useState<CropRatio>(() => session.crop ?? 'none');
  const [cropRect, setCropRect] = useState<CropRect>(() => session.cropRect ?? DEFAULT_CROP_RECT);
  const [cropApplied, setCropApplied] = useState(() => session.cropApplied ?? false);
  const [photoDims, setPhotoDims] = useState<{ w: number; h: number } | null>(null);
  const [rotation, setRotation] = useState<0 | 90 | 180 | 270>(() => session.rotation ?? 0);
  const [openParam, setOpenParam] = useState<string | null>(null);
  const [openGroup, setOpenGroup] = useState<GroupKey | null>(null);
  const [showRecipes, setShowRecipes] = useState(false);
  const [tab, setTab] = useState<TabId>('presets');
  const [peek, setPeek] = useState(false);

  const [gps, setGps] = useState<GPSInfo | null>(() => session.gps ?? null);
  // ISO off the loaded photo's EXIF; null means the strip prints AUTO.
  const [iso, setIso] = useState<number | null>(null);
  const [gpsManual, setGpsManual] = useState(() => session.gpsManual ?? { lat: '', lng: '' });
  const [place, setPlace] = useState(() => session.place ?? '');
  const [useGeotag, setUseGeotag] = useState(() => session.useGeotag ?? false);
  const [gpsStyle, setGpsStyle] = useState(
    () => session.gpsStyle ?? { color: '#f59e0b', showName: true, showTime: true }
  );
  const [markText, setMarkText] = useState(() => session.markText ?? '');
  const [markOn, setMarkOn] = useState(() => session.markOn ?? false);
  const [markStyle, setMarkStyle] = useState(() => session.markStyle ?? { color: '#ffffff', size: 1 });

  // Every knob the workspace holds, written back on change — the reload half of
  // the session. Small JSON, so no debounce is worth the risk of losing the last
  // edit; the photo has its own store (engine/session.ts).
  useEffect(() => {
    saveState({ recipe, simId, frameId, crop, cropRect, cropApplied, rotation, gps, gpsManual, place, useGeotag, gpsStyle, markText, markOn, markStyle });
  }, [recipe, simId, frameId, crop, cropRect, cropApplied, rotation, gps, gpsManual, place, useGeotag, gpsStyle, markText, markOn, markStyle]);

  // Crop has three states: none, framed-but-uncommitted (the frame is draggable
  // and the whole photo is shown), and applied (the crop alone is rendered).
  // What the stage says it is painting at; PREVIEW_MAX until it reports.
  const [zoomNeedPx, setZoomNeedPx] = useState(PREVIEW_MAX);
  const onStageZoom = useCallback((longDevicePx: number) => {
    setZoomNeedPx(
      Math.max(PREVIEW_MAX, Math.min(PREVIEW_HARD_MAX, Math.ceil(longDevicePx / PREVIEW_QUANTUM) * PREVIEW_QUANTUM))
    );
  }, []);
  const cropEditing = crop !== 'none' && !cropApplied;
  const cropLive = crop !== 'none' && cropApplied;
  const cropWH = crop !== 'none' && crop !== 'free' ? CROP_W_H[crop] : null;
  // A committed crop keeps only part of the photo, so the 1600px copy leaves
  // too few pixels behind and the stage shows a blocky upscale. While the crop
  // is live the source is re-derived larger — 1/f, where f is the crop's
  // longest side as a fraction of the photo's, capped so the decode stays
  // bounded. cropRect is in the rotated frame, so the shape is swapped first.
  const cropLongFrac = (() => {
    const d = photoDims;
    const turn = rotation % 180 !== 0;
    const f = Math.max(
      (turn ? d?.h ?? 0 : d?.w ?? 0) * cropRect.w,
      (turn ? d?.w ?? 0 : d?.h ?? 0) * cropRect.h
    );
    const long = Math.max(d?.w ?? 0, d?.h ?? 0);
    return long > 0 ? f / long : Math.min(cropRect.w, cropRect.h);
  })();
  const previewMax = Math.min(
    PREVIEW_HARD_MAX,
    Math.max(
      zoomNeedPx,
      cropLive
        ? Math.max(PREVIEW_MAX, Math.round(PREVIEW_MAX / Math.max(cropLongFrac, CROP_PREVIEW_MIN_FRAC)))
        : PREVIEW_MAX
    )
  );

  // --- undo / redo ----------------------------------------------------------
  // The stack holds whole looks. remember() reads a ref written during render,
  // so it is stable and always snapshots the state as of the last painted
  // frame — the same value the user is looking at when they press the button.
  // The floor is the look the session loaded with; REDO holds what UNDO walked
  // back over, up to the newest edit, and a fresh edit drops that branch.
  const [undo, setUndo] = useState<Look[]>([]);
  const [redo, setRedo] = useState<Look[]>([]);
  // Which look of the open frame's own history is standing on the stage, if one
  // was picked from its column; a fresh edit or another frame clears it.
  const [histPick, setHistPick] = useState<number | null>(null);
  // FX's MONOCHROME switch remembers what the photo was wearing, so flipping it
  // back returns that filter — and its sim name — instead of guessing PROVIA.
  const monoPrev = useRef<{ baseFilter: Recipe['baseFilter']; simId: string | null; name: string } | null>(null);
  const lookRef = useRef<Look | null>(null);
  lookRef.current = { recipe, simId, frameId, crop, cropRect, cropApplied, rotation, markOn, markText, markStyle, useGeotag, gpsStyle };
  // Twenty looks is enough to walk, but the oldest entry is the floor — the look
  // the session loaded with — and is never the one trimmed, so UNDO always
  // reaches the start of the session.
  const pushUndo = (snap: Look) =>
    setUndo((stack) => (stack.length > 19 ? [stack[0], ...stack.slice(-18), snap] : [...stack, snap]));
  const remember = useCallback(() => {
    const snap = lookRef.current;
    if (!snap) return;
    pushUndo(snap);
    setRedo([]);
    // The look on the stage is no longer the one that was picked, so the
    // history column drops its mark.
    setHistPick(null);
  }, []);

  const restoreLook = useCallback((l: Look) => {
    setRecipe(l.recipe);
    setSimId(l.simId);
    setFrameId(l.frameId);
    setCrop(l.crop);
    setCropRect(l.cropRect);
    setCropApplied(l.cropApplied);
    setRotation(l.rotation);
    setMarkOn(l.markOn);
    setMarkText(l.markText);
    setMarkStyle(l.markStyle);
    setUseGeotag(l.useGeotag);
    setGpsStyle(l.gpsStyle);
  }, []);

  const defaultLook = useCallback((): Look => {
    const provia = FILM_SIMS.find((f) => f.id === 'sim-provia');
    const cur = lookRef.current?.recipe ?? DEFAULT_RECIPES[0];
    return {
      recipe: { ...(provia ? filmSimToRecipe(provia) : cur), id: cur.id, name: cur.name, isCustom: true },
      simId: provia ? provia.id : null,
      frameId: 'none',
      crop: 'none',
      cropRect: DEFAULT_CROP_RECT,
      cropApplied: false,
      rotation: 0,
      markOn: false,
      markText: '',
      markStyle: { color: '#ffffff', size: 1 },
      useGeotag: false,
      gpsStyle: { color: '#f59e0b', showName: true, showTime: true },
    };
  }, []);
  const [exporting, setExporting] = useState(false);
  const [savingPhoto, setSavingPhoto] = useState(false);
  const [user, setUser] = useState<User | null>(null);
  const [saved, setSaved] = useState<SavedRecipe[]>([]);
  // Bumped by RESET while CREATE is open: the form above the button listens for
  // it and drops back to its defaults.
  const [createReset, setCreateReset] = useState(0);
  // This account's own folder. The list drives the MY PHOTOS tab, which reopens
  // a saved frame with the settings it was stored with; the count labels the
  // save button. The API is the real cap — this only labels the button.
  const [myPhotos, setMyPhotos] = useState<Photo[]>([]);
  // The saved photo standing on the stage, if any — its own consent chip shows.
  const [openPhotoId, setOpenPhotoId] = useState<number | null>(null);
  // Recipes made in this session, guest ones included. A guest's copy lives
  // here and nowhere else, so reloading the page is what deletes it.
  const [created, setCreated] = useState<Recipe[]>([]);
  // Which save flow is asking for a name, if any: `photo` on the first filing
  // of an uploaded frame, `recipe` on SAVE RECENT. One modal, two callers.
  const [naming, setNaming] = useState<'photo' | 'recipe' | null>(null);
  // The saved photo whose removal is being confirmed, if any — its own history
  // goes with it, so the dialog says so and offers a download first.
  const [removing, setRemoving] = useState<Photo | null>(null);
  // null = closed. /app?auth=1 opens the studio's dialog straight on the sign-in
  // tab (sign-in is the default; ?auth=signup asks for the other one); the
  // landing page runs the same dialog in place instead of linking here.
  const [authMode, setAuthMode] = useState<'login' | 'signup' | null>(() => {
    const asked = new URLSearchParams(window.location.search).get('auth');
    return asked ? (asked === 'signup' ? 'signup' : 'login') : null;
  });

  const renderToken = useRef(0);
  // Which previewMax the bytes in previewBytes were made at, so the upgrade
  // effect does not redo the load-time 1600px copy.
  const previewMaxRef = useRef(PREVIEW_MAX);
  const previewJobRef = useRef(0);

  // --- boot -----------------------------------------------------------------
  useEffect(() => {
    let alive = true;
    loadEngine()
      .then((loaded) => {
        if (!alive) return;
        setEngine(loaded);
        if (!loaded.gpu) setError(t('err.noWebgl'));
      })
      .catch((err) => alive && setError(String(err)));
    api
      .me()
      .then((r) => alive && setUser(r.user))
      .catch(() => undefined); // signed out is a valid state — the demo needs no account
    // ...and the photo half of the session, back out of IndexedDB.
    loadPhoto()
      .then((photo) => {
        if (!alive || !photo) return;
        return adoptPhoto(
          photo.bytes,
          photo.name,
          new Blob([photo.bytes as BlobPart], { type: 'image/jpeg' }),
          true
        );
      })
      .catch(() => undefined);
    return () => {
      alive = false;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    if (!user) {
      setSaved([]);
      setMyPhotos([]);
      return;
    }
    api.listRecipes().then((r) => setSaved(r.recipes)).catch(() => setSaved([]));
    api.listMyPhotos().then((r) => setMyPhotos(r.photos)).catch(() => setMyPhotos([]));
  }, [user]);

  // --- preview render -------------------------------------------------------
  useEffect(() => {
    if (!engine || !previewBytes) return;
    const token = ++renderToken.current;
    const timer = setTimeout(async () => {
      setBusy(t('act.exporting'));
      try {
        const out = await renderPhoto({
          source: previewBytes,
          recipe,
          // An uncommitted crop is framed on the bare photo, so the overlay
          // measures exactly what the engine will cut.
          frameId: cropEditing ? 'none' : frameId,
          useGeotag,
          gpsInfo: gps,
          assets: engine.assets,
          options: {
            wallframeLandscape: frameId === 'wallframe-landscape',
            sharpen: true,
            photoRotation: rotation,
            cropRect: cropLive ? cropRect : null,
            watermark: markOn && markText ? { text: markText, x: 0.5, y: 0.92, ...markStyle } : null,
            gpsWatermark: useGeotag && gps ? { x: 0.06, y: 0.7, size: 1.2, ...gpsStyle } : null,
          },
        });
        if (token !== renderToken.current) return;
        if (!out) throw new Error('render returned null');
        const url = URL.createObjectURL(new Blob([out.bytes as BlobPart], { type: 'image/jpeg' }));
        setPreviewUrl((prev) => {
          if (prev) URL.revokeObjectURL(prev);
          return url;
        });
      } catch (err) {
        if (token === renderToken.current) setError(t('err.generic', { msg: String(err) }));
      } finally {
        if (token === renderToken.current) setBusy(null);
      }
    }, PREVIEW_DEBOUNCE_MS);
    return () => clearTimeout(timer);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [engine, previewBytes, recipe, frameId, cropEditing, cropLive, cropRect, rotation, useGeotag, gps, gpsStyle, markOn, markText, markStyle]);

  // The source copy behind previewBytes, re-made only when previewMax moves:
  // applying a crop upgrades it, CANCEL/UNDO brings the 1600px one back.
  useEffect(() => {
    if (!source || previewMaxRef.current === previewMax) return;
    const job = ++previewJobRef.current;
    resizedJpeg(source.bytes, previewMax)
      .then((bytes) => {
        if (job !== previewJobRef.current) return;
        previewMaxRef.current = previewMax;
        setPreviewBytes(bytes);
      })
      .catch(() => undefined);
  }, [source, previewMax]);

  // --- input ---------------------------------------------------------------
  // One photo, two ways in: a drop/pick (which also stores it for the next
  // visit) and the session restore, whose params are already in state and so
  // must not be overwritten by the photo's own EXIF.
  // A frame arriving on the stage replaces whatever the preview was holding.
  // The old render is thrown away FIRST, so the new one can never be painted
  // over it: the buffer is empty before the load starts.
  const clearPreview = useCallback(() => {
    setPreviewUrl((prev) => {
      if (prev) URL.revokeObjectURL(prev);
      return null;
    });
  }, []);

  const adoptPhoto = useCallback(
    async (bytes: Uint8Array, name: string, blob: Blob, keepGeo = false) => {
      const preview = await resizedJpeg(bytes, PREVIEW_MAX);
      const found = await readGps(bytes);
      const foundIso = await readIso(bytes);
      // The photo's own shape drives the default crop frame. Read off the
      // downscaled copy — same aspect, a fraction of the decode cost.
      const dims = await createImageBitmap(new Blob([preview as BlobPart], { type: 'image/jpeg' }))
        .then((bmp) => {
          const d = { w: bmp.width, h: bmp.height };
          bmp.close();
          return d;
        })
        .catch(() => null);
      setPhotoDims(dims);
      setSource((prev) => {
        if (prev) URL.revokeObjectURL(prev.url);
        return { bytes, name, url: URL.createObjectURL(blob) };
      });
      // The new photo's copy is the 1600px one; a live crop or a zoomed stage
      // then upgrades it.
      previewMaxRef.current = PREVIEW_MAX;
      setZoomNeedPx(PREVIEW_MAX);
      previewJobRef.current++;
      setPreviewBytes(preview);
      setGps(found);
      setIso(foundIso);
      // A new photo starts a new history whose floor is the default look, so
      // UNDO walks all the way back and still leaves the photo loaded. REDO has
      // nothing to walk forward onto in a history that just began.
      setUndo([defaultLook()]);
      setRedo([]);
      if (keepGeo) return;
      setUseGeotag(!!found);
      if (!found) setGpsManual({ lat: '', lng: '' });
    },
    [defaultLook]
  );

  const loadFile = useCallback(
    async (file: File) => {
      setError(null);
      setBusy(t('auth.busy'));
      // A file from the disk is nobody's saved frame: SAVE PHOTO must add one,
      // not overwrite whichever of the folder's own was open before. Opening one
      // of those sets the id back, after this call.
      setOpenPhotoId(null);
      try {
        const bytes = await fileToBytes(file);
        await adoptPhoto(bytes, file.name, file);
        void savePhoto(file.name, bytes);
      } catch {
        setError(t('err.decode'));
      } finally {
        setBusy(null);
      }
    },
    [t, adoptPhoto]
  );

  useEffect(() => {
    const onPaste = (e: ClipboardEvent) => {
      const file = e.clipboardData?.files?.[0];
      if (file) void loadFile(file);
    };
    window.addEventListener('paste', onPaste);
    return () => window.removeEventListener('paste', onPaste);
  }, [loadFile]);

  // --- recipe edits ---------------------------------------------------------
  const applyRecipe = useCallback(
    (next: Recipe) => {
      remember();
      setRecipe(next);
      setSimId(next.isCustom ? null : next.id);
      // A recipe filed by SAVE RECENT carries the frame it was saved with;
      // a bundled preset carries none, and then the frame on the stage stays.
      const stored = (next as Recipe & { frameId?: FrameId }).frameId;
      if (stored) setFrameId(stored);
    },
    [remember]
  );

  const setAdjustment = useCallback(
    (patch: Partial<Recipe['adjustments']>) => {
      setRecipe((prev) => ({ ...prev, isCustom: true, adjustments: { ...prev.adjustments, ...patch } }));
    },
    []
  );

  // A slider drag is one edit, not one per pixel: the first move after the
  // ruler opened takes the snapshot, the rest ride on it.
  const sliderEditRef = useRef(false);
  useEffect(() => {
    sliderEditRef.current = false;
  }, [openParam]);
  const setAdjustmentOnce = useCallback(
    (patch: Partial<Recipe['adjustments']>) => {
      if (!sliderEditRef.current) {
        sliderEditRef.current = true;
        remember();
      }
      setAdjustment(patch);
    },
    [remember, setAdjustment]
  );

  // --- crop -----------------------------------------------------------------
  // Picking a ratio only opens the frame; the crop is committed by APPLY.
  const pickCrop = useCallback(
    (ratio: CropRatio) => {
      remember();
      setCrop(ratio);
      setCropApplied(false);
      if (ratio === 'none' || ratio === 'free' || !photoDims) return;
      // Largest centred rect of that shape the photo can hold. CROP_W_H is a
      // PIXEL aspect; in fractions (of the photo's width/height) it becomes
      // R = ratio / (w/h), so a 3:4 frame lands on a 3:4 photo and a square one
      // on anything else.
      const k = rotation % 180 === 0 ? photoDims.w / photoDims.h : photoDims.h / photoDims.w;
      const R = CROP_W_H[ratio] / k;
      const w = R >= 1 ? 1 : R;
      const h = R >= 1 ? 1 / R : 1;
      setCropRect({ x: (1 - w) / 2, y: (1 - h) / 2, w, h });
    },
    [remember, photoDims, rotation]
  );

  const applyCrop = useCallback(() => setCropApplied(true), []);

  // One step back: the look standing now goes onto REDO and the stack's top
  // comes back. CANCEL and the UNDO button are the same move.
  const stepBack = useCallback(() => {
    const last = undo[undo.length - 1];
    const cur = lookRef.current;
    if (!last || !cur) return;
    restoreLook(last);
    setUndo((stack) => stack.slice(0, -1));
    setRedo((stack) => [...stack.slice(-19), cur]);
  }, [undo, restoreLook]);

  // CANCEL throws the framing away — the pick pushed the look it replaced, so
  // one undo is exactly "never mind".
  const cancelCrop = useCallback(() => stepBack(), [stepBack]);

  const reset = useCallback(() => {
    remember();
    // Back to the startup look, exactly like the phone: the PROVIA sim, every
    // knob neutral, no frame/crop, no rotation, both marks off and restyled.
    restoreLook(defaultLook());
    setOpenParam(null);
    setOpenGroup(null);
    setShowRecipes(false);
  }, [remember, restoreLook, defaultLook]);

  // UNDO walks back to the look the session loaded with; REDO walks forward
  // again over exactly what it stepped past, up to the newest edit.
  const undoLast = useCallback(() => stepBack(), [stepBack]);

  const redoLast = useCallback(() => {
    const next = redo[redo.length - 1];
    const cur = lookRef.current;
    if (!next || !cur) return;
    restoreLook(next);
    setRedo((stack) => stack.slice(0, -1));
    setUndo((stack) => [...stack, cur]);
  }, [redo, restoreLook]);

  // SAVE RECENT — its own tab, not a corner of CREATE RECIPES. The look standing
  // on the stage (sim, WB, light, FX and the frame) is filed under a name this
  // account has not used; the frame rides in the recipe's own JSON, so applying
  // the entry puts the whole look back, frame included.
  const saveRecipeNamed = useCallback(
    async (name: string) => {
      try {
        const look: Recipe & { frameId?: FrameId } = { ...recipe, name, frameId: cropEditing ? 'none' : frameId };
        const { recipe: stored } = await api.createRecipe(name, look);
        setSaved((list) => [stored, ...list]);
        setRecipe((prev) => ({ ...prev, name }));
      } catch (err) {
        setError(t('err.generic', { msg: String(err) }));
      }
    },
    [recipe, frameId, cropEditing, t]
  );

  const saveRecipe = useCallback(() => {
    if (!user) {
      setAuthMode('login');
      return;
    }
    setNaming('recipe');
  }, [user]);

  // A recipe name is only free while this account has not spent it. Checked on
  // the field rather than at the store: the list is already here, whole.
  const recipeNameTaken = useCallback(
    (name: string): string | null =>
      saved.some((entry) => entry.name.trim().toLowerCase() === name.toLowerCase()) ? t('name.duplicate') : null,
    [saved, t]
  );

  const deleteRecipeEntry = useCallback(
    async (entry: SavedRecipe) => {
      try {
        await api.deleteRecipe(entry.id);
        setSaved((list) => list.filter((r) => r.id !== entry.id));
      } catch (err) {
        setError(t('err.generic', { msg: String(err) }));
      }
    },
    [t]
  );

  // FAVORITED holds the account's own recipes. `*`, or dragging a recipe chip
  // onto the star in the rail, files the look on the stage there; a guest is
  // asked to sign in first, like every other write in the studio.
  const favoriteRecipe = useCallback(
    async (entry: Recipe) => {
      if (!user) {
        setAuthMode('login');
        return;
      }
      try {
        const stored = await api.createRecipe(entry.name, { ...entry });
        setSaved((list) => [stored.recipe, ...list]);
        setTab('favorited');
      } catch (err) {
        setError(t('err.generic', { msg: String(err) }));
      }
    },
    [user, t]
  );

  // The star reads the id the dragged chip carried back to its recipe.
  const favoriteById = useCallback(
    (id: string) => {
      const entry = [...created, ...DEFAULT_RECIPES].find((r) => r.id === id);
      if (entry) void favoriteRecipe(entry);
    },
    [created, favoriteRecipe]
  );

  // `*` files the look on the stage without leaving the tab it was built in.
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key !== '*' || e.ctrlKey || e.metaKey || e.altKey) return;
      const el = e.target as HTMLElement | null;
      if (el && (/^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName) || el.isContentEditable)) return;
      e.preventDefault();
      void favoriteRecipe(recipe);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [favoriteRecipe, recipe]);

  // CREATE tab: a new recipe is applied at once and listed under RECIPES. A
  // signed-in account also stores it; a guest's copy stays in `created`, which
  // is exactly what "forgotten when you leave" means.
  const addCreatedRecipe = useCallback(
    async (draft: RecipeDraft) => {
      const entry: Recipe = { ...draft, id: `local-${Date.now()}`, isCustom: true };
      setCreated((list) => [entry, ...list]);
      applyRecipe(entry);
      if (!user) return;
      try {
        const stored = await api.createRecipe(entry.name, entry);
        setSaved((list) => [stored.recipe, ...list]);
      } catch (err) {
        setError(t('err.generic', { msg: String(err) }));
      }
    },
    [user, applyRecipe, t]
  );

  // CREATE edits the photo live: each knob lands on the render as it is typed so
  // the recipe can be judged before saving. No undo entry — this is a draft, and
  // SAVE/EXPORT is what commits it.
  const previewCreatedRecipe = useCallback((draft: Pick<Recipe, 'baseFilter' | 'adjustments'>) => {
    setRecipe((prev) => ({ ...prev, ...draft, isCustom: true }));
  }, []);

  // The phone's encrypted .recipe envelope (`shared/utils/recipeShare` is the
  // app's own file, byte-identical). Signed in only — a guest's recipe is never
  // written to disk.
  const exportRecipeFile = useCallback(
    (draft: RecipeDraft) => {
      if (!user) return;
      const xml = exportRecipeXml({ ...draft, id: 'share' });
      download(
        new TextEncoder().encode(xml),
        `${(draft.name || 'recipe').replace(/\W+/g, '-').toLowerCase()}.recipe`,
        'application/xml'
      );
    },
    [user]
  );

  // IMPORT is the other half of EXPORT: the phone's .recipe file, or one saved
  // from another account. `shared/utils/recipeShare` is the app's own parser, so
  // the look arrives intact — a guest gets it for the session, like CREATE.
  const importRecipeFile = useCallback(
    async (file: File) => {
      setError(null);
      try {
        const parsed = importRecipeXml(await file.text());
        const entry: Recipe = { ...parsed, id: `import-${Date.now()}`, isCustom: true };
        setCreated((list) => [entry, ...list]);
        applyRecipe(entry);
        setFrameId(parsed.frameId ?? 'none');
        setUseGeotag(!!parsed.useGeotag);
        setShowRecipes(true);
      } catch (err) {
        setError(t('err.generic', { msg: String(err) }));
      }
    },
    [applyRecipe, t]
  );

  // The picker is built on the spot: a second <input type=file> in the page
  // would compete with the stage's own for `input[type=file]`.
  const pickRecipeFile = useCallback(() => {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = '.recipe,application/xml,text/xml';
    input.onchange = () => {
      const file = input.files?.[0];
      if (file) void importRecipeFile(file);
    };
    input.click();
  }, [importRecipeFile]);

  // The strip this look shows — the tagline off the recipe name, and the
  // technical line off the camera (EXIF ISO, or AUTO) plus the recipe's own
  // grain, warmth and monochrome state. Metadata only: an exported file keeps
  // clean pixels (the strip rides EXIF), and a saved photo stores it so the
  // landing reel can frame it the same way.
  const strip = useMemo(() => {
    const name = (recipe.name || 'RECIPE').trim();
    const slug = name.replace(/[^\p{L}\p{N}]+/gu, '_').replace(/^_+|_+$/g, '').toUpperCase();
    const grain = Math.max(0, Math.round(recipe.adjustments.grain ?? 0));
    const warmth = Math.round((recipe.adjustments.temperature - 5500) / 250);
    const tail = recipe.baseFilter === 'monochrome' ? 'MONO' : `WARMTH ${warmth >= 0 ? '+' : ''}${warmth}`;
    return { tag: `#${slug || 'RECIPE'}`, title: name, meta: `ISO ${iso ?? 'AUTO'} · GRAIN ${grain} · ${tail}` };
  }, [recipe.name, recipe.adjustments, recipe.baseFilter, iso]);

  // Everything needed to put this photo back on the stage: the recipe plus the
  // frame and geotag the stage held. EXIF and a saved photo both carry it.
  const photoSettings = useMemo(
    () => ({ ...recipe, frameId: cropEditing ? 'none' : frameId, useGeotag }),
    [recipe, frameId, cropEditing, useGeotag]
  );

  const exportPhoto = useCallback(async () => {
    if (!engine || !source) return;
    setExporting(true);
    setError(null);
    try {
      const tier = TIERS[user ? 'user' : 'guest'];
      const src = tier.maxExportDim ? await resizedJpeg(source.bytes, tier.maxExportDim, 0.95) : source.bytes;
      const out = await renderPhoto({
        source: src,
        recipe,
        // The file is the preview: an uncommitted frame is not exported.
        frameId: cropEditing ? 'none' : frameId,
        useGeotag,
        gpsInfo: gps,
        assets: engine.assets,
        options: {
          wallframeLandscape: frameId === 'wallframe-landscape',
          dpi: 300,
          sharpen: true,
          photoRotation: rotation,
          cropRect: cropLive ? cropRect : null,
          watermark: markOn && markText
            ? { text: markText, x: 0.5, y: 0.92, ...markStyle }
            : tier.watermark
              ? { text: tier.watermark, x: 0.5, y: 0.94, color: '#ffffff', size: 1 }
              : null,
          gpsWatermark: useGeotag && gps ? { x: 0.06, y: 0.7, size: 1.2, ...gpsStyle } : null,
        },
      });
      if (!out) throw new Error('render returned null');

      // Encode → JFIF density 300 (inside renderPhoto) → EXIF rebuild, the same
      // order the app uses. The source photo donates its camera/lens tags; the
      // recipe is stamped as metadata, never burned into the pixels.
      const bytes = writeJpegExif(
        out.bytes,
        {
          dateTime: new Date(),
          gps: gps ? { latitude: gps.latitude, longitude: gps.longitude } : null,
          width: out.width,
          height: out.height,
          dpi: 300,
          locationName: place || gps?.locality || null,
          imageDescription: strip.tag,
          userComment: JSON.stringify(photoSettings),
        },
        source.bytes
      );
      const stamp = new Date().toISOString().replace(/[-:T]/g, '').slice(0, 14);
      download(bytes, `recipescam_${(recipe.name || 'photo').replace(/\W+/g, '-').toLowerCase()}_${stamp}.jpg`);
    } catch (err) {
      setError(t('err.generic', { msg: String(err) }));
    } finally {
      setExporting(false);
    }
  }, [engine, source, recipe, frameId, cropEditing, cropLive, cropRect, useGeotag, gps, gpsStyle, rotation, markOn, markText, markStyle, place, user, t, strip, photoSettings]);

  // SAVE PHOTO: the stage as it stands, uploaded to this account's own folder.
  // The upload is left clean (no burned strip) so the landing reel can draw its
  // own `.lp-shot` frame around it; the labels are stored alongside instead.
  // The 12-photo cap is the API's, mirrored here so the button can say no.
  const savePhotoToFolder = useCallback(async (photoName?: string) => {
    if (!user) {
      setAuthMode('login');
      return;
    }
    if (!engine || !source) {
      setError(t('save.photoNoSource'));
      return;
    }
    // Re-saving the frame already on the stage replaces its own row, so the cap
    // only stands in the way of a new one.
    const open = myPhotos.find((p) => p.id === openPhotoId);
    if (!open && myPhotos.length >= MAX_PHOTOS) {
      setError(t('save.photoFull', { max: MAX_PHOTOS }));
      return;
    }
    // A frame being filed for the first time is asked for a name — the folder
    // keeps it, and the landing reel draws it as the frame's title. A re-save
    // keeps the name it already has, so it never asks twice.
    if (!open && photoName === undefined) {
      setNaming('photo');
      return;
    }
    // A re-save keeps the name the frame already has — the folder's title, not
    // the recipe it happens to be standing in.
    const labels = { ...strip, title: open ? open.title ?? strip.title : (photoName ?? strip.title) };
    setSavingPhoto(true);
    setError(null);
    try {
      const src = TIERS.user.maxExportDim
        ? await resizedJpeg(source.bytes, TIERS.user.maxExportDim, 0.95)
        : source.bytes;
      const out = await renderPhoto({
        source: src,
        recipe,
        frameId: cropEditing ? 'none' : frameId,
        useGeotag,
        gpsInfo: gps,
        assets: engine.assets,
        options: {
          wallframeLandscape: frameId === 'wallframe-landscape',
          dpi: 300,
          sharpen: true,
          photoRotation: rotation,
          cropRect: cropLive ? cropRect : null,
          watermark: markOn && markText ? { text: markText, x: 0.5, y: 0.92, ...markStyle } : null,
          gpsWatermark: useGeotag && gps ? { x: 0.06, y: 0.7, size: 1.2, ...gpsStyle } : null,
        },
      });
      if (!out) throw new Error('render returned null');
      const file = new File([out.bytes as BlobPart], `${strip.tag.slice(1).toLowerCase() || 'photo'}.jpg`, {
        type: 'image/jpeg',
      });
      if (open) {
        // The frame on the stage is one of the folder's own: it keeps its id and
        // its place, and the look it carried before this save lands in history.
        // Its consent is the one it already had — a re-save is not a re-answer.
        const { photo } = await api.replacePhoto(open.id, file, labels, {
          recipe: photoSettings,
          consent: open.consent !== false,
        });
        setMyPhotos((prev) => prev.map((p) => (p.id === open.id ? { ...p, ...photo } : p)));
      } else {
        const { photo } = await api.uploadPhoto(file, labels, { recipe: photoSettings });
        // The list entry carries the recipe we just sent, so reopening works
        // before the next /photos/mine refresh.
        setMyPhotos((prev) => [{ ...photo, recipe: photoSettings }, ...prev]);
        setOpenPhotoId(photo.id);
      }
      // The stage now stands on the newest look of this frame, so no earlier
      // one in its history is the picked one.
      setHistPick(null);
    } catch (err) {
      setError(t('save.photoFailed', { msg: err instanceof Error ? err.message : String(err) }));
    } finally {
      setSavingPhoto(false);
    }
  }, [user, engine, source, myPhotos, openPhotoId, recipe, frameId, cropEditing, cropLive, cropRect, useGeotag, gps, gpsStyle, rotation, markOn, markText, markStyle, strip, photoSettings, t]);

  // Reopen one of this account's saved frames: the bytes come back as a File
  // through the same door an upload uses, then the stored look goes on top.
  const openMyPhoto = useCallback(
    async (photo: Photo) => {
      setBusy(t('auth.busy'));
      setError(null);
      // The stage is emptied before the fetch, not after it: the frame being
      // reopened must not land on top of the one already standing there.
      clearPreview();
      setHistPick(null);
      try {
        const res = await fetch(api.photoUrl(photo.id));
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const blob = await res.blob();
        await loadFile(new File([blob], `${photo.id}.jpg`, { type: blob.type || 'image/jpeg' }));
        const saved = photo.recipe as (Recipe & { frameId?: FrameId; useGeotag?: boolean }) | null;
        if (saved) {
          applyRecipe(saved);
          if (saved.frameId) setFrameId(saved.frameId);
          setUseGeotag(!!saved.useGeotag);
        }
        setOpenPhotoId(photo.id);
      } catch {
        setError(t('err.decode'));
      } finally {
        setBusy(null);
      }
    },
    [loadFile, applyRecipe, clearPreview, t]
  );

  // The saved frame's own switch. The reel reads `consent`, so the tick answers
  // the click at once; only the store's refusal (a failed call) takes it back.
  const togglePhotoConsent = useCallback(async (photo: Photo | undefined) => {
    if (!photo) return;
    const next = photo.consent === false;
    const mark = (value: boolean) =>
      setMyPhotos((prev) => prev.map((p) => (p.id === photo.id ? { ...p, consent: value } : p)));
    mark(next);
    try {
      await api.setPhotoConsent(photo.id, next);
    } catch {
      mark(!next);
    }
  }, []);

  // Removing a frame takes its row and the looks its history kept. Confirmed
  // first (ui/DeletePhotoModal), never on a single click.
  const removeMyPhoto = useCallback(
    async (photo: Photo) => {
      try {
        await api.deletePhoto(photo.id);
        setMyPhotos((prev) => prev.filter((p) => p.id !== photo.id));
        if (openPhotoId === photo.id) setOpenPhotoId(null);
      } catch (err) {
        setError(t('err.generic', { msg: err instanceof Error ? err.message : String(err) }));
      } finally {
        setRemoving(null);
      }
    },
    [openPhotoId, t]
  );

  // --- strips ---------------------------------------------------------------
  // The cascade: a chip opens the next column, and the column it came from stays
  // put (TEMP -> COLOR TEMP leaves TEMP visible with the ruler beside it). The
  // recipes list is the one exception — it belongs to PRESETS, not to a chip, so
  // anything else opening closes it.
  const toggleParam = useCallback(
    (key: string) => {
      const close = openParam === key;
      setOpenParam(close ? null : key);
      setShowRecipes(false);
      // Opening a ruler clears a strip from another branch; closing one leaves
      // its own strip standing, so the column the ruler came from is still there.
      if (!close) setOpenGroup(PARAM_GROUP[key] ?? null);
    },
    [openParam]
  );

  const toggleGroup = useCallback(
    (g: GroupKey) => {
      const next = openGroup === g ? null : g;
      if (next) {
        // A ruler only survives if it belongs to the strip being opened.
        if (PARAM_GROUP[openParam ?? ''] !== next) setOpenParam(null);
        setShowRecipes(false);
      }
      setOpenGroup(next);
    },
    [openGroup, openParam]
  );

  useEffect(() => {
    setOpenParam(null);
    setOpenGroup(null);
    setShowRecipes(false);
  }, [tab]);

  // Continuous parameter chips: label + live value; amber text when edited,
  // amber border while its ruler is open.
  const paramChips = (defs: ContinuousParamDef[]): ChipDef[] =>
    defs.map((def) => {
      const value = def.get(recipe.adjustments);
      return {
        key: def.key,
        label: def.label,
        value: def.display(value),
        active: openParam === def.key,
        amberValue: openParam !== def.key && value !== def.defaultValue,
        // The web build is the demo: HDF EFFECT is part of what it shows off,
        // so no knob is held back here. The PRO gate stays a phone-build rule.
        onClick: () => toggleParam(def.key),
      };
    });

  const slider: SliderDef | null = useMemo(() => {
    if (!openParam) return null;
    const all = [...PARAM_DEFS.iq, ...PARAM_DEFS.wb, ...PARAM_DEFS.filters];
    const def = all.find((d) => d.key === openParam);
    if (!def) return null;
    const value = def.get(recipe.adjustments);
    return {
      key: def.key,
      label: def.label,
      value,
      min: def.min,
      max: def.max,
      step: def.step,
      display: def.display(value),
      edited: value !== def.defaultValue,
      swatch: SLIDER_SWATCH[def.key]?.(value),
      onChange: (value) => setAdjustmentOnce(def.set(value)),
      onReset: () => setAdjustmentOnce(def.set(def.defaultValue)),
      // Back reopens the strip the row was launched from (COLOR TEMP -> TEMP).
      onBack: () => {
        const g = PARAM_GROUP[def.key];
        setOpenParam(null);
        if (g) setOpenGroup(g);
      },
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [openParam, recipe.adjustments, setAdjustmentOnce]);

  // Option strips: a chip opens one, each option picks a value. `off` is the
  // neutral value the chip glows amber against.
  const groupDefs: Record<Exclude<GroupKey, 'wm'>, {
    label: string;
    off: string;
    value: string;
    options: { v: string; d: string }[];
    onPick: (v: string) => void;
  }> = {
    cx: {
      label: 'COLOR CHROME', off: 'none', value: recipe.adjustments.colorChrome || 'none',
      options: CHROME_OPTIONS,
      onPick: (v) => {
        remember();
        setAdjustment({ colorChrome: v as Recipe['adjustments']['colorChrome'] });
      },
    },
    cxb: {
      label: 'CHROME BLUE', off: 'none', value: recipe.adjustments.colorChromeBlue || 'none',
      options: CHROME_OPTIONS,
      onPick: (v) => {
        remember();
        setAdjustment({ colorChromeBlue: v as Recipe['adjustments']['colorChromeBlue'] });
      },
    },
    dr: {
      label: 'D.RANGE', off: 'auto', value: String(recipe.adjustments.dynamicRange ?? 'auto'),
      options: DR_OPTIONS,
      onPick: (v) => {
        remember();
        setAdjustment({ dynamicRange: (v === 'auto' ? 'auto' : Number(v)) as Recipe['adjustments']['dynamicRange'] });
      },
    },
    // Picking a ratio frames it on the photo (drag the corners, then APPLY) —
    // nothing is cut until APPLY.
    crop: {
      label: 'CROP', off: 'none', value: crop,
      options: CROPS.map((c) => ({ v: c, d: c === 'none' ? 'NONE' : c.toUpperCase() })),
      onPick: (v) => pickCrop(v as CropRatio),
    },
    // ponytail: no STRAIGHTEN/AUTO — the web export carries photoRotation only.
    rotate: {
      label: 'ROTATE', off: '0', value: String(rotation),
      options: [
        { v: 'reset', d: 'RESET' },
        { v: '0', d: '0°' },
        { v: '90', d: '90°' },
        { v: '180', d: '180°' },
        { v: '270', d: '270°' },
      ],
      onPick: (v) => {
        remember();
        setRotation(v === 'reset' ? 0 : (Number(v) as 0 | 90 | 180 | 270));
      },
    },
    style: {
      label: 'PHOTO STYLE', off: 'sim-provia',
      value: simId && FILM_SIMS.some((s) => s.id === simId) ? simId : '',
      options: FILM_SIMS.map((s) => ({ v: s.id, d: s.name })),
      onPick: (v) => {
        const sim = FILM_SIMS.find((s) => s.id === v);
        if (!sim) return;
        setShowRecipes(false);
        applyRecipe(filmSimToRecipe(sim));
      },
    },
    // TEMP: the presets plus COLOR TEMP, which opens the ruler above instead
    // of picking a value.
    temp: {
      label: 'TEMP', off: 'auto', value: String(recipe.adjustments.temperature),
      options: [
        { v: 'color-temp', d: 'COLOR TEMP' },
        ...TEMP_PRESETS.map((p) => ({ v: String(p.kelvin), d: p.label })),
      ],
      onPick: (v) => {
        if (v !== 'color-temp') remember();
        return v === 'color-temp' ? toggleParam('temperature') : setAdjustment({ temperature: Number(v) });
      },
    },
    wmColor: {
      label: 'TEXT COLOR', off: '#ffffff', value: markStyle.color,
      options: WM_COLORS,
      onPick: (v) => {
        remember();
        setMarkStyle((prev) => ({ ...prev, color: v }));
      },
    },
    wmSize: {
      label: 'TEXT SIZE', off: '1', value: String(markStyle.size),
      options: WM_SIZES,
      onPick: (v) => {
        remember();
        setMarkStyle((prev) => ({ ...prev, size: Number(v) }));
      },
    },
    gpsColor: {
      label: 'COLOR', off: '#f59e0b', value: gpsStyle.color,
      options: WM_COLORS,
      onPick: (v) => {
        remember();
        setGpsStyle((prev) => ({ ...prev, color: v }));
      },
    },
    gpsName: {
      label: 'PLACE NAME', off: 'ON', value: gpsStyle.showName ? 'ON' : 'OFF',
      options: [{ v: 'on', d: 'ON' }, { v: 'off', d: 'OFF' }],
      onPick: (v) => {
        remember();
        setGpsStyle((prev) => ({ ...prev, showName: v === 'on' }));
      },
    },
    gpsTime: {
      label: 'TIME', off: 'ON', value: gpsStyle.showTime ? 'ON' : 'OFF',
      options: [{ v: 'on', d: 'ON' }, { v: 'off', d: 'OFF' }],
      onPick: (v) => {
        remember();
        setGpsStyle((prev) => ({ ...prev, showTime: v === 'on' }));
      },
    },
  };

  // A strip chip names its pick on the right edge, spelled the way the strip's
  // own option spells it. Still on its neutral value -> nothing to name.
  const groupChip = (g: Exclude<GroupKey, 'wm'>): ChipDef => {
    const { label, value, off, options } = groupDefs[g];
    const picked = options.find((o) => o.v === value);
    return {
      key: `grp-${g}`,
      label,
      value: value !== off ? picked?.d ?? value : undefined,
      active: openGroup === g,
      amberValue: openGroup !== g && value !== off,
      onClick: () => toggleGroup(g),
    };
  };

  const choiceChips = (
    prefix: string,
    options: { v: string; d: string }[],
    current: string,
    onPick: (v: string) => void
  ): ChipDef[] =>
    options.map((o) => ({
      key: `${prefix}:${o.v}`,
      label: o.d,
      active: current === o.v,
      onClick: () => onPick(o.v),
    }));

  const wmOn = useGeotag || markOn;
  const wmChips = (): ChipDef[] => [
    {
      key: 'gps',
      label: useGeotag ? 'GPS WATERMARK ON' : 'GPS WATERMARK OFF',
      active: useGeotag,
      disabled: !gps && !(gpsManual.lat && gpsManual.lng),
      onClick: () => {
        remember();
        setUseGeotag(!useGeotag);
      },
    },
    ...(useGeotag ? [groupChip('gpsColor'), groupChip('gpsName'), groupChip('gpsTime')] : []),
    {
      key: 'custom-wm',
      label: markOn ? 'CUSTOM WATERMARK ON' : 'CUSTOM WATERMARK OFF',
      active: markOn,
      onClick: () => {
        remember();
        setMarkOn(!markOn);
      },
    },
    ...(markOn ? [groupChip('wmColor'), groupChip('wmSize')] : []),
  ];

  // Every tab carries RESET, pinned outside the scrolling chips.
  // RESET lights up only while the look differs from what reset() puts back —
  // every clause has a matching setter there, or the star never goes out.
  const resetDirty = useMemo(() => {
    const a = recipe.adjustments;
    const tweaked = (Object.keys(DEFAULT_ADJUSTMENTS) as (keyof typeof DEFAULT_ADJUSTMENTS)[])
      .some((k) => a[k] !== DEFAULT_ADJUSTMENTS[k]);
    return tweaked
      || (simId ?? 'sim-provia') !== 'sim-provia'
      || frameId !== 'none' || crop !== 'none' || rotation !== 0
      || markOn || markText !== '' || markStyle.color !== '#ffffff' || markStyle.size !== 1
      || useGeotag || gpsStyle.color !== '#f59e0b' || !gpsStyle.showName || !gpsStyle.showTime;
  }, [recipe, simId, frameId, crop, rotation, markOn, markText, markStyle, useGeotag, gpsStyle]);

  const resetChip = (): ChipDef => ({
    key: 'reset-all',
    label: resetDirty ? 'RESET *' : 'RESET',
    amberValue: resetDirty,
    onClick: () => {
      setOpenParam(null);
      setOpenGroup(null);
      setShowRecipes(false);
      // Under CREATE the button belongs to the form above it: it clears the
      // draft, which live-previews its defaults straight onto the photo.
      if (tab === 'create') {
        setCreateReset((n) => n + 1);
        return;
      }
      reset();
    },
  });

  const framesRow = (): ChipDef[] => [
    ...FRAMES.map((frame) => ({
      key: `fr:${frame.id}`,
      label: t(frame.label),
      active: frameId === frame.id,
      onClick: () => {
        setOpenParam(null);
        setOpenGroup(null);
        remember();
        setFrameId(frame.id);
      },
    })),
    groupChip('crop'),
    {
      key: 'grp-rotate',
      label: 'ROTATE',
      value: `${rotation}°`,
      active: openGroup === 'rotate',
      amberValue: openGroup !== 'rotate' && rotation !== 0,
      onClick: () => toggleGroup('rotate'),
    },
    {
      key: 'grp-wm',
      label: wmOn ? 'WATERMARK ON' : 'WATERMARK',
      active: openGroup === 'wm',
      amberValue: openGroup !== 'wm' && wmOn,
      onClick: () => toggleGroup('wm'),
    },
  ];

  // The folder's frame standing on the stage, if any: its own column shows the
  // looks it carried before its last saves and its landing-strip consent.
  const openPhoto = myPhotos.find((p) => p.id === openPhotoId);

  // FX's MONOCHROME switch is not a look of its own: it swaps the base filter
  // for the mono stock and swaps right back. Adjustments are never touched, so
  // a knob moved while the switch is on survives the trip back.
  const monoOn = recipe.baseFilter === 'monochrome';
  const toggleMono = () => {
    remember();
    if (monoOn) {
      const back = monoPrev.current ?? { baseFilter: 'provia' as Recipe['baseFilter'], simId: 'sim-provia', name: 'PROVIPES' };
      setRecipe((prev) => ({ ...prev, baseFilter: back.baseFilter, name: back.name, isCustom: true }));
      setSimId(back.simId);
    } else {
      monoPrev.current = { baseFilter: recipe.baseFilter, simId, name: recipe.name };
      setRecipe((prev) => ({ ...prev, baseFilter: 'monochrome', name: 'MONOCHROME', isCustom: true }));
      setSimId(null);
    }
  };

  // The main chip row of the active tab, exactly the phone's per-tab sets.
  const chips: ChipDef[] = (() => {
    switch (tab) {
      case 'presets':
        return [
          groupChip('style'),
          {
            key: 'recipes-toggle',
            label: 'RECIPES',
            active: showRecipes,
            onClick: () => {
              setOpenGroup(null);
              setOpenParam(null);
              setShowRecipes((v) => !v);
            },
          },
          // ponytail: no CREATE chip — making a recipe and filing the look on
          // the stage are their own rail tabs (SAVE RECENT, CREATE RECIPES).
          // IMPORT is a chip inside the RECIPES strip.
        ];
      case 'favorited':
        return saved.length === 0
          ? [{ key: 'no-favorites', label: 'NO FAVORITES YET - TAP THE STAR ON A RECIPE', disabled: true, onClick: () => {} }]
          : saved.map((entry) => ({
              key: String(entry.id),
              label: entry.name,
              // The look on the stage came from this entry: its name turns
              // accent so the open recipe is visible in the list. A same-id
              // preset that was merely filed under a new name must not light up,
              // hence the name check too.
              active: recipe.id === (entry.recipe as Recipe)?.id && recipe.name === entry.name,
              onClick: () => applyRecipe({ ...(entry.recipe as Recipe), name: entry.name }),
            }));
      case 'photos': {
        // MY PHOTOS: the account's own saved frames, newest first. Opening one
        // reopens it for a further edit; that frame's own history, consent and
        // removal live in its own column (see the render). A save always joins
        // the landing strip — the owner takes it off again with that switch, or
        // the curator with the admin slot.
        const rows: ChipDef[] = [];
        if (myPhotos.length === 0) {
          rows.push({ key: 'no-photos', label: t('myp.empty'), disabled: true, onClick: () => {} });
        } else {
          rows.push(
            ...myPhotos.map((p) => ({
              key: `photo-${p.id}`,
              label: p.title ?? `#${p.id}`,
              active: p.id === openPhotoId,
              onClick: () => void openMyPhoto(p),
            }))
          );
        }
        return rows;
      }
      case 'light':
        return [...paramChips(PARAM_DEFS.iq), groupChip('dr')];
      case 'wb':
        return [
          {
            // TEMP is the one strip chip that names its value — nothing else
            // does.
            ...groupChip('temp'),
            label: 'TEMP',
            value: Math.round(recipe.adjustments.temperature) === 5500 ? 'AUTO' : `${recipe.adjustments.temperature}K`,
          },
          ...paramChips(PARAM_DEFS.wb.filter((p) => p.key !== 'temperature')),
          groupChip('cx'),
          groupChip('cxb'),
        ];
      case 'fx':
        return [
          { key: 'mono', label: 'MONOCHROME', active: monoOn, onClick: toggleMono },
          ...paramChips(PARAM_DEFS.filters),
        ];
      case 'frame':
        // WATERMARK is a chip like the rest: its own sub-panel opens as the next
        // column (see the wm column in the render), so the frame chips stay put.
        return framesRow();
      // SAVE RECENT draws its own button and list, CREATE its own form; they
      // are not chip rows like the rest.
      case 'save':
      case 'create':
        return [];
      default:
        return [];
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  })();

  const stripChips = (g: Exclude<GroupKey, 'wm'>): ChipDef[] => [
    { key: `hint-${g}`, label: groupDefs[g].label, disabled: true, onClick: () => {} },
    ...choiceChips(g, groupDefs[g].options, groupDefs[g].value, groupDefs[g].onPick),
    // The frame is on the photo but the crop is not in force until APPLY.
    ...(g === 'crop' && cropEditing
      ? [
          { key: 'crop-apply', label: t('crop.apply'), amberValue: true, onClick: applyCrop },
          { key: 'crop-cancel', label: t('crop.cancel'), onClick: cancelCrop },
        ]
      : []),
  ];

  // RECIPES = this account's own files (SAVE RECENT) + what this session made
  // but never filed + the bundled presets. A CREATE that a signed-in account
  // stored lands in `saved` too, so it is dropped from `created` by name here.
  // IMPORT takes the .recipe file the phone (or another account) exports — same
  // envelope, same parser, so a look crosses devices intact.
  const recipeStrip: ChipDef[] = [
    { key: 'recipes-import', label: 'IMPORT .RECIPE', onClick: pickRecipeFile },
    ...saved.map((entry) => ({
      key: `saved-${entry.id}`,
      label: entry.name,
      active: recipe.name === entry.name,
      onClick: () => applyRecipe({ ...(entry.recipe as Recipe), name: entry.name }),
    })),
    ...created
      .filter((entry) => !saved.some((s) => s.name.trim().toLowerCase() === entry.name.trim().toLowerCase()))
      .map((entry) => ({
        key: entry.id,
        label: entry.name,
        active: recipe.id === entry.id,
        drag: entry.id,
        onClick: () => applyRecipe(entry),
      })),
    ...DEFAULT_RECIPES.map((preset) => ({
      key: preset.id,
      label: preset.name,
      active: recipe.name === preset.name && !recipe.isCustom,
      drag: preset.id,
      onClick: () => applyRecipe({ ...preset }),
    })),
  ];

  // The panel is a cascade of columns (see styles/app.css): the tab's chips, the
  // open chip's own panel, the open group's options, the open ruler. Each level
  // is a column of its own, so a child never hides the column it came from.
  const wmOpen = isWmPanel(openGroup);
  const optGroup = openGroup && openGroup !== 'wm' ? openGroup : null;

  const status = busy;

  return (
    <div className="shell">
      <TopBar
        recipeName={recipe.name}
        user={user}
        exporting={exporting}
        savingPhoto={savingPhoto}
        canUndo={undo.length > 0}
        canRedo={redo.length > 0}
        onUndo={undoLast}
        onRedo={redoLast}
        onReset={reset}
        onSavePhoto={() => void savePhotoToFolder()}
        onExport={exportPhoto}
        photoCount={myPhotos.length}
        photoMax={MAX_PHOTOS}
        onAuth={() => setAuthMode('login')}
        onSignup={() => setAuthMode('signup')}
        onLogout={async () => {
          await api.logout().catch(() => undefined);
          setUser(null);
        }}
      />

      <div className="workspace">
        <ToolRail tab={tab} onTab={setTab} onDropRecipe={favoriteById} />

        <div className="chips">
          {/* column 1 — the tab's own chips, RESET ruled off at the foot */}
          <div className={`col col-main${tab === 'create' || tab === 'save' ? ' col-create' : ''}`} data-col="main">
            {tab === 'create' ? (
              <RecipeCreatePanel
                currentBase={recipe.baseFilter}
                current={recipe.adjustments}
                signedIn={!!user}
                resetToken={createReset}
                onPreview={previewCreatedRecipe}
                onSave={(draft) => void addCreatedRecipe(draft)}
                onExport={exportRecipeFile}
              />
            ) : tab === 'save' ? (
              <>
                {/* SAVE RECENT files the look standing on the stage — sim, WB,
                    light, FX and frame — as a recipe of this account's own. */}
                <button
                  type="button"
                  className="btn primary"
                  data-key="save-recent"
                  onClick={() => void saveRecipe()}
                >
                  {t('save.recent')}
                </button>
                <p className="hint">{t('save.recentHint')}</p>
                {saved.length === 0 ? (
                  <p className="hint">{t('save.recentEmpty')}</p>
                ) : (
                  <div className="saved-list">
                    {saved.map((entry) => (
                      <div className="saved-row" key={entry.id}>
                        <button
                          type="button"
                          className="chip"
                          data-key={`saved-${entry.id}`}
                          aria-pressed={recipe.name === entry.name}
                          onClick={() => applyRecipe({ ...(entry.recipe as Recipe), name: entry.name })}
                        >
                          {entry.name}
                        </button>
                        {/* Only this account can delete its own file — the API
                            scopes the delete by user, the button mirrors it. */}
                        <button
                          type="button"
                          className="chip"
                          data-key={`saved-del-${entry.id}`}
                          title={t('save.delete')}
                          aria-label={t('save.delete')}
                          onClick={() => void deleteRecipeEntry(entry)}
                        >
                          ✕
                        </button>
                      </div>
                    ))}
                  </div>
                )}
              </>
            ) : (
              <ChipRow chips={chips} />
            )}
            {tab === 'favorited' && saved.length === 0 ? <p className="hint">{t('sec.savedEmpty')}</p> : null}
            {/* RESET is the way out of an edit, not one more chip: it sits under
                a rule at the foot of the column so it reads as its own thing. */}
            <div className="reset-row">
              <ChipRow chips={[resetChip()]} />
            </div>
          </div>

          {/* column 2 — FRAME's WATERMARK chip opens the mark's own panel */}
          {wmOpen ? (
            <div className="col col-sub strip wm-extra" data-col="wm">
              <ChipRow
                chips={[
                  { key: 'wm-back', label: '< FRAME', onClick: () => setOpenGroup(null) },
                  ...wmChips(),
                ]}
              />
              {markOn ? (
                <input
                  className="field"
                  value={markText}
                  placeholder="TYPE WATERMARK TEXT"
                  maxLength={80}
                  onChange={(e) => setMarkText(e.target.value)}
                />
              ) : null}
              {useGeotag ? (
                <>
                  <input
                    className="field"
                    value={place}
                    placeholder={t('wm.placePh')}
                    onChange={(e) => setPlace(e.target.value)}
                  />
                  <p className="hint">{gps ? t('wm.hasExif') : t('wm.noExif')}</p>
                  {!gps ? (
                    <div className="chip-row">
                      <input
                        className="field"
                        style={{ width: '48%' }}
                        placeholder={t('wm.lat')}
                        value={gpsManual.lat}
                        onChange={(e) => setGpsManual((prev) => ({ ...prev, lat: e.target.value }))}
                        onBlur={() => {
                          const lat = Number(gpsManual.lat);
                          const lng = Number(gpsManual.lng);
                          if (Number.isFinite(lat) && Number.isFinite(lng) && gpsManual.lat && gpsManual.lng) {
                            setGps({ latitude: lat, longitude: lng, locality: place, timestamp: Date.now(), source: 'device' });
                            setUseGeotag(true);
                          }
                        }}
                      />
                      <input
                        className="field"
                        style={{ width: '48%' }}
                        placeholder={t('wm.lng')}
                        value={gpsManual.lng}
                        onChange={(e) => setGpsManual((prev) => ({ ...prev, lng: e.target.value }))}
                      />
                    </div>
                  ) : null}
                </>
              ) : null}
            </div>
          ) : null}

          {/* column 3 — the open chip's sub-chips, or PRESETS' RECIPES list */}
          {optGroup ? (
            <div className="col col-sub strip" data-col="options">
              <ChipRow chips={stripChips(optGroup)} />
            </div>
          ) : null}
          {tab === 'presets' && showRecipes ? (
            <div className="col col-sub strip" data-col="recipes">
              {recipeStrip.length === 1 ? <p className="hint">{t('sec.savedEmpty')}</p> : null}
              <ChipRow chips={recipeStrip} />
            </div>
          ) : null}

          {/* MY PHOTOS' own column, for the frame standing on the stage: the
              looks it carried before its last saves (newest first, three kept)
              and the switch that puts it on the landing film strip. */}
          {tab === 'photos' && openPhoto ? (
            <div className="col col-sub strip" data-col="history">
              {openPhoto.history?.length ? (
                <ChipRow
                  chips={[
                    { key: 'hist-title', label: t('myp.history'), disabled: true, onClick: () => {} },
                    ...openPhoto.history.map((look, i) => ({
                      key: `hist-${i}`,
                      label: look.name || `#${i + 1}`,
                      // The picked look is marked like the open recipe in the
                      // RECIPES list — accent, so it follows the theme.
                      active: histPick === i,
                      onClick: () => {
                        // An older look is loaded the same way a frame is: the
                        // preview goes first, then the look it names is painted.
                        clearPreview();
                        applyRecipe({ ...look });
                        setHistPick(i);
                      },
                    })),
                  ]}
                />
              ) : (
                <p className="hint">{t('myp.historyEmpty')}</p>
              )}
              <label className="consent">
                <input
                  type="checkbox"
                  data-key="strip-open"
                  checked={openPhoto.consent !== false}
                  onChange={() => void togglePhotoConsent(openPhoto)}
                />
                <span>{t('myp.consent')}</span>
              </label>
              {/* The frame's own removal. The row goes, and with it the looks
                  its history kept, so the dialog asks before it happens. */}
              <button
                type="button"
                className="btn adm-danger"
                data-key="photo-remove"
                onClick={() => setRemoving(openPhoto)}
              >
                {t('myp.remove')}
              </button>
            </div>
          ) : null}

          {/* column 4 — the open ruler, sliders stacked */}
          {slider ? (
            <div className="col col-slider" data-col="slider">
              <SliderRow slider={slider} />
            </div>
          ) : null}
        </div>

        <ImageStage
          previewUrl={previewUrl}
          originalUrl={source?.url ?? null}
          busy={status}
          error={error}
          peek={peek}
          onPeek={setPeek}
          onFile={(file) => void loadFile(file)}
          cropEditing={cropEditing}
          cropRect={cropRect}
          cropWH={cropWH}
          onCropRectChange={setCropRect}
          onStageZoom={onStageZoom}
          canCompare={crop === 'none'}
        />
      </div>

      {naming === 'recipe' ? (
        <NameModal
          title={t('name.recipeTitle')}
          label={t('name.recipeLabel')}
          initial={recipe.name}
          check={recipeNameTaken}
          onSubmit={(name) => {
            setNaming(null);
            void saveRecipeNamed(name);
          }}
          onClose={() => setNaming(null)}
        />
      ) : null}

      {naming === 'photo' ? (
        <NameModal
          title={t('name.photoTitle')}
          label={t('name.photoLabel')}
          initial={strip.title}
          onSubmit={(name) => {
            setNaming(null);
            void savePhotoToFolder(name);
          }}
          onClose={() => setNaming(null)}
        />
      ) : null}

      {removing ? (
        <DeletePhotoModal
          id={removing.id}
          name={removing.title ?? `#${removing.id}`}
          historyCount={removing.history?.length ?? 0}
          onConfirm={() => void removeMyPhoto(removing)}
          onClose={() => setRemoving(null)}
        />
      ) : null}

      {authMode ? (
        <AuthModal
          initialMode={authMode}
          onClose={() => setAuthMode(null)}
          onDone={async () => {
            setAuthMode(null);
            const me = await api.me().catch(() => null);
            if (me) setUser(me.user);
          }}
        />
      ) : null}
    </div>
  );
}