'use client';

import { useRef, useState, useEffect, useLayoutEffect, useCallback } from 'react';
import { Stage, Layer, Text, Image as KonvaImage, Transformer, Rect } from 'react-konva';
import type Konva from 'konva';
import { v4 as uuid } from 'uuid';
import ProductMockup from './ProductMockup';
import Price from './Price';
import LoginPromptModal from './LoginPromptModal';
import { useCart } from '@/lib/cartStore';
import { getEffectivePrice } from '@/lib/pricing';
import { checkCustomerAuth } from '@/app/actions';
import type { DesignElement, PrintArea, ProductDTO } from '@/lib/types';

const DISPLAY = 560; // css px size the mockup + stage are rendered at
const CAPTURE_SCALE = 2; // matches pixelRatio used for exports, for crisp downloads

function loadImage(src: string): Promise<HTMLImageElement> {
  return new Promise((resolve, reject) => {
    const img = new window.Image();
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = src;
  });
}

// Draws `img` into the canvas region like CSS `object-fit: cover` would.
function drawCover(ctx: CanvasRenderingContext2D, img: HTMLImageElement, dw: number, dh: number) {
  const imgRatio = img.width / img.height;
  const boxRatio = dw / dh;
  let sx: number, sy: number, sw: number, sh: number;
  if (imgRatio > boxRatio) {
    sh = img.height;
    sw = sh * boxRatio;
    sx = (img.width - sw) / 2;
    sy = 0;
  } else {
    sw = img.width;
    sh = sw / boxRatio;
    sx = 0;
    sy = (img.height - sh) / 2;
  }
  ctx.drawImage(img, sx, sy, sw, sh, 0, 0, dw, dh);
}

// Builds a reference image showing the design placed on the actual product photo
// (garment + artwork composited together) — separate from the clean, print-ready,
// transparent-background export. Returns null if there's no real photo to composite
// onto (illustration-only products skip this; there's nothing photographic to show).
async function composePlacementImage(
  photoUrl: string,
  recolor: { tint: boolean; color: string } | null,
  stage: Konva.Stage,
  box: { left: number; top: number; w: number; h: number },
): Promise<string> {
  const canvas = document.createElement('canvas');
  canvas.width = DISPLAY * CAPTURE_SCALE;
  canvas.height = DISPLAY * CAPTURE_SCALE;
  const ctx = canvas.getContext('2d');
  if (!ctx) return '';

  const photoImg = await loadImage(photoUrl);

  if (recolor?.tint) {
    ctx.filter = 'grayscale(1) brightness(2.1) contrast(1.15)';
    drawCover(ctx, photoImg, canvas.width, canvas.height);
    ctx.filter = 'none';
    ctx.globalCompositeOperation = 'multiply';
    ctx.fillStyle = recolor.color;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.globalCompositeOperation = 'source-over';
  } else {
    drawCover(ctx, photoImg, canvas.width, canvas.height);
  }

  const designCanvas = stage.toCanvas({ pixelRatio: CAPTURE_SCALE });
  ctx.drawImage(
    designCanvas,
    box.left * CAPTURE_SCALE,
    box.top * CAPTURE_SCALE,
    box.w * CAPTURE_SCALE,
    box.h * CAPTURE_SCALE,
  );

  return canvas.toDataURL('image/png');
}

const FONTS = [
  'Inter',
  'Fraunces',
  'Caveat',
  'Playfair Display',
  'Oswald',
  'Bebas Neue',
  'Pacifico',
  'Permanent Marker',
  'JetBrains Mono',
  'Georgia',
  'Arial',
];

function UploadedImage({
  el,
  onSelect,
  onChange,
  shapeRef,
}: {
  el: Extract<DesignElement, { type: 'image' }>;
  onSelect: () => void;
  onChange: (attrs: Partial<DesignElement>) => void;
  shapeRef: (node: Konva.Image | null) => void;
}) {
  const [img, setImg] = useState<HTMLImageElement | null>(null);

  useEffect(() => {
    const image = new window.Image();
    image.src = el.src;
    image.onload = () => setImg(image);
  }, [el.src]);

  if (!img) return null;

  return (
    <KonvaImage
      ref={shapeRef}
      image={img}
      x={el.x}
      y={el.y}
      width={el.width}
      height={el.height}
      rotation={el.rotation}
      draggable
      listening={true}
      onClick={onSelect}
      onTap={onSelect}
      onDragEnd={(e) => onChange({ x: e.target.x(), y: e.target.y() })}
      onTransformEnd={(e) => {
        const node = e.target;
        onChange({
          x: node.x(),
          y: node.y(),
          rotation: node.rotation(),
          width: Math.max(10, node.width() * node.scaleX()),
          height: Math.max(10, node.height() * node.scaleY()),
        });
        node.scaleX(1);
        node.scaleY(1);
      }}
    />
  );
}

// One print surface (photo + the draggable design layer on top). Front and back
// each get their own instance, both always mounted (just shown/hidden with CSS)
// so their Konva stages stay exportable even when you're looking at the other side.
function PrintSurface({
  photo,
  printArea,
  elements,
  selectedId,
  setSelectedId,
  updateElement,
  nodeRefs,
  stageRef,
  transformerRef,
  visible,
  caption,
  onNodeReady,
  scale,
}: {
  photo: React.ReactNode;
  printArea: PrintArea;
  elements: DesignElement[];
  selectedId: string | null;
  setSelectedId: (id: string | null) => void;
  updateElement: (id: string, attrs: Partial<DesignElement>) => void;
  nodeRefs: React.MutableRefObject<Map<string, Konva.Node>>;
  stageRef: React.RefObject<Konva.Stage>;
  transformerRef: React.RefObject<Konva.Transformer>;
  visible: boolean;
  caption: string;
  onNodeReady: () => void;
  scale: number;
}) {
  const stageW = printArea.wPct * DISPLAY;
  const stageH = printArea.hPct * DISPLAY;
  const stageLeft = printArea.xPct * DISPLAY;
  const stageTop = printArea.yPct * DISPLAY;

  return (
    <div className={visible ? '' : 'hidden'}>
      {/* Konva's Stage stays a fixed 560x560 internally so element coordinates,
          print-area math, and export resolution never change — only the visual
          box shrinks via CSS transform to fit narrow viewports. */}
      <div style={{ width: DISPLAY * scale, height: DISPLAY * scale }}>
      <div
        className="relative border border-line bg-surface"
        style={{ width: DISPLAY, height: DISPLAY, transform: `scale(${scale})`, transformOrigin: 'top left' }}
      >
        <div className="pointer-events-none absolute inset-0" style={{ width: DISPLAY, height: DISPLAY }}>
          {photo}
        </div>
        <div className="absolute" style={{ left: stageLeft, top: stageTop, width: stageW, height: stageH }}>
          <Stage
            ref={stageRef}
            width={stageW}
            height={stageH}
            onMouseDown={(e) => {
              if (e.target === e.target.getStage()) setSelectedId(null);
            }}
          >
            <Layer>
              <Rect
                name="printGuide"
                x={0}
                y={0}
                width={stageW}
                height={stageH}
                stroke="#E5227E"
                dash={[10, 6]}
                strokeWidth={3}
                shadowColor="#E5227E"
                shadowBlur={12}
                shadowOpacity={0.5}
                listening={false}
              />
              <Rect
                name="printGuide"
                x={0}
                y={0}
                width={stageW}
                height={stageH}
                fill="#E5227E"
                opacity={0.07}
                listening={false}
              />
              {elements.map((el) =>
                el.type === 'text' ? (
                  <Text
                    key={el.id}
                    ref={(node) => {
                      if (node) nodeRefs.current.set(el.id, node);
                    }}
                    x={el.x}
                    y={el.y}
                    text={el.text}
                    fontFamily={el.fontFamily}
                    fontSize={el.fontSize}
                    fill={el.fill}
                    rotation={el.rotation}
                    draggable
                    listening={true}
                    onClick={() => setSelectedId(el.id)}
                    onTap={() => setSelectedId(el.id)}
                    onDragEnd={(e) => updateElement(el.id, { x: e.target.x(), y: e.target.y() })}
                    onTransformEnd={(e) => {
                      const node = e.target;
                      updateElement(el.id, {
                        x: node.x(),
                        y: node.y(),
                        rotation: node.rotation(),
                        fontSize: Math.max(8, el.fontSize * node.scaleX()),
                      });
                      node.scaleX(1);
                      node.scaleY(1);
                    }}
                  />
                ) : (
                  <UploadedImage
                    key={el.id}
                    el={el}
                    onSelect={() => setSelectedId(el.id)}
                    onChange={(attrs) => updateElement(el.id, attrs)}
                    shapeRef={(node) => {
                      if (node && nodeRefs.current.get(el.id) !== node) {
                        nodeRefs.current.set(el.id, node);
                        onNodeReady();
                      }
                    }}
                  />
                ),
              )}
              <Transformer
                ref={transformerRef}
                rotateEnabled
                flipEnabled={false}
                rotateAnchorOffset={30}
                anchorCornerRadius={4}
                anchorSize={8}
                borderStroke="#17181C"
                borderStrokeWidth={2}
                anchorStroke="#17181C"
                anchorFill="#FFF"
                boundBoxFunc={(oldBox, newBox) => (newBox.width < 8 || newBox.height < 8 ? oldBox : newBox)}
              />
            </Layer>
          </Stage>
        </div>
      </div>
      </div>
      <p className="tag-label mt-3">{caption}</p>
    </div>
  );
}

export default function DesignCanvas({ product }: { product: ProductDTO }) {
  const [color, setColor] = useState(product.colors[0]);
  const [size, setSize] = useState<string | null>(product.sizes[0] ?? null);
  const [view, setView] = useState<'front' | 'back'>('front');
  const [elementsFront, setElementsFront] = useState<DesignElement[]>([]);
  const [elementsBack, setElementsBack] = useState<DesignElement[]>([]);
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [quantity, setQuantity] = useState(1);
  const [justAdded, setJustAdded] = useState(false);
  const [showLoginPrompt, setShowLoginPrompt] = useState(false);
  const [nodeReadyTick, setNodeReadyTick] = useState(0);

  const stageFrontRef = useRef<Konva.Stage | null>(null);
  const stageBackRef = useRef<Konva.Stage | null>(null);
  const transformerFrontRef = useRef<Konva.Transformer | null>(null);
  const transformerBackRef = useRef<Konva.Transformer | null>(null);
  const nodeRefs = useRef<Map<string, Konva.Node>>(new Map());
  const fileInputRef = useRef<HTMLInputElement | null>(null);
  const canvasContainerRef = useRef<HTMLDivElement | null>(null);
  const [canvasScale, setCanvasScale] = useState(1);
  const addItem = useCart((s) => s.addItem);

  // Konva's Stage keeps a fixed 560x560 internal pixel size (element x/y,
  // print-area math, and export resolution all key off DISPLAY) — on narrow
  // viewports we shrink it purely visually via CSS transform instead of
  // touching that coordinate system. Konva reads the container's actual
  // rendered (post-transform) bounding box for pointer math, so clicks/drags
  // still line up correctly at any scale.
  useLayoutEffect(() => {
    const el = canvasContainerRef.current;
    if (!el) return;
    const update = () => setCanvasScale(Math.min(1, el.clientWidth / DISPLAY));
    update();
    const observer = new ResizeObserver(update);
    observer.observe(el);
    return () => observer.disconnect();
  }, []);

  const hasBack = Boolean(product.imageUrlBack);
  const canPersonalize = product.showOnPersonalised;
  const frontPrintArea = product.printArea;
  const backPrintArea = product.printAreaBack ?? product.printArea;
  const activePrintArea = view === 'front' ? frontPrintArea : backPrintArea;
  const activeStageW = activePrintArea.wPct * DISPLAY;
  const activeStageH = activePrintArea.hPct * DISPLAY;
  const setActiveElements = view === 'front' ? setElementsFront : setElementsBack;

  // Keep whichever transformer actually owns the selected element in sync, and
  // clear the other one — an id only ever lives in one of the two arrays.
  // nodeReadyTick re-runs this once an uploaded image's Konva node actually
  // mounts (it loads asynchronously, unlike text, so it isn't there yet on the
  // same render where it gets selected).
  useEffect(() => {
    const frontNode = selectedId && elementsFront.some((e) => e.id === selectedId) ? nodeRefs.current.get(selectedId) : null;
    const backNode = selectedId && elementsBack.some((e) => e.id === selectedId) ? nodeRefs.current.get(selectedId) : null;
    if (transformerFrontRef.current) {
      transformerFrontRef.current.nodes(frontNode ? [frontNode] : []);
      transformerFrontRef.current.getLayer()?.draw();
    }
    if (transformerBackRef.current) {
      transformerBackRef.current.nodes(backNode ? [backNode] : []);
      transformerBackRef.current.getLayer()?.draw();
    }
  }, [selectedId, elementsFront.length, elementsBack.length, nodeReadyTick]);

  // Canvas text can render with a fallback font if drawn before a web font finishes
  // loading — redraw once fonts are ready so custom font choices show up correctly.
  useEffect(() => {
    document.fonts?.ready.then(() => {
      stageFrontRef.current?.getLayers().forEach((layer) => layer.batchDraw());
      stageBackRef.current?.getLayers().forEach((layer) => layer.batchDraw());
    });
  }, []);

  const updateElement = useCallback((id: string, attrs: Partial<DesignElement>) => {
    setElementsFront((prev) =>
      prev.some((el) => el.id === id) ? prev.map((el) => (el.id === id ? ({ ...el, ...attrs } as DesignElement) : el)) : prev,
    );
    setElementsBack((prev) =>
      prev.some((el) => el.id === id) ? prev.map((el) => (el.id === id ? ({ ...el, ...attrs } as DesignElement) : el)) : prev,
    );
  }, []);

  const addText = () => {
    const id = uuid();
    setActiveElements((prev) => [
      ...prev,
      {
        id,
        type: 'text',
        x: activeStageW / 2 - 40,
        y: activeStageH / 2 - 10,
        rotation: 0,
        text: 'Your text',
        fontFamily: 'Fraunces',
        fontSize: 28,
        fill: '#17181C',
      },
    ]);
    setSelectedId(id);
  };

  const handleUploadClick = () => fileInputRef.current?.click();

  const handleFile = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = () => {
      const src = reader.result as string;
      const img = new window.Image();
      img.onload = () => {
        const maxDim = Math.min(activeStageW, activeStageH) * 0.7;
        const scale = Math.min(maxDim / img.width, maxDim / img.height, 1);
        const id = uuid();
        setActiveElements((prev) => [
          ...prev,
          {
            id,
            type: 'image',
            x: activeStageW / 2 - (img.width * scale) / 2,
            y: activeStageH / 2 - (img.height * scale) / 2,
            rotation: 0,
            width: img.width * scale,
            height: img.height * scale,
            src,
          },
        ]);
        setSelectedId(id);
      };
      img.src = src;
    };
    reader.readAsDataURL(file);
    e.target.value = '';
  };

  const deleteSelected = () => {
    if (!selectedId) return;
    setElementsFront((prev) => prev.filter((el) => el.id !== selectedId));
    setElementsBack((prev) => prev.filter((el) => el.id !== selectedId));
    setSelectedId(null);
  };

  const selected = elementsFront.find((el) => el.id === selectedId) ?? elementsBack.find((el) => el.id === selectedId);

  // Calculate the effective price for made-to-order items (use personalisedPrice if available)
  const effectivePriceForPersonalised = canPersonalize
    ? getEffectivePrice(
        {
          id: product.id,
          basePrice: product.basePrice,
          personalisedPrice: product.personalisedPrice,
          salePrice: product.onSale ? product.effectivePrice : null,
          saleStartsAt: null,
          saleEndsAt: null,
        },
        [],
        new Date(),
        true,
      ).price
    : product.effectivePrice;

  const handleAddToBag = async () => {
    const { isAuthenticated } = await checkCustomerAuth();
    if (!isAuthenticated) {
      setShowLoginPrompt(true);
    }

    if (!canPersonalize) {
      const flatPhoto = product.colorPhotos[color] ?? product.imageUrl ?? '';
      addItem({
        cartItemId: uuid(),
        productId: product.id,
        slug: product.slug,
        name: product.name,
        mockup: product.mockup,
        color,
        size,
        quantity,
        unitPrice: product.effectivePrice,
        designJson: { front: [], back: [] },
        designPreviewUrl: flatPhoto,
        designPreviewUrlBack: null,
        placementPreviewUrl: flatPhoto || null,
        placementPreviewUrlBack: product.imageUrlBack ?? null,
      });
      setJustAdded(true);
      setTimeout(() => setJustAdded(false), 2200);
      return;
    }

    setSelectedId(null); // clear transformer handles before export
    requestAnimationFrame(async () => {
      const frontStage = stageFrontRef.current;
      if (!frontStage) return;

      // Hide the dashed guide box + tint before exporting, so the saved PNG is
      // just the design itself — transparent background, no shirt, no guide
      // marks — ready to hand off for printing.
      const frontGuides = frontStage.find('.printGuide');
      frontGuides.forEach((g) => g.hide());
      const frontDataUrl = frontStage.toDataURL({ pixelRatio: 2 });

      const frontBox = {
        left: frontPrintArea.xPct * DISPLAY,
        top: frontPrintArea.yPct * DISPLAY,
        w: frontPrintArea.wPct * DISPLAY,
        h: frontPrintArea.hPct * DISPLAY,
      };
      const frontPhotoInfo = getPhotoInfo('front');
      const frontPlacementUrl = frontPhotoInfo
        ? await composePlacementImage(
            frontPhotoInfo.url,
            frontPhotoInfo.tint ? { tint: true, color } : null,
            frontStage,
            frontBox,
          ).catch(() => null)
        : null;
      frontGuides.forEach((g) => g.show());

      let backDataUrl: string | null = null;
      let backPlacementUrl: string | null = null;
      if (hasBack && stageBackRef.current) {
        const backStage = stageBackRef.current;
        const backGuides = backStage.find('.printGuide');
        backGuides.forEach((g) => g.hide());
        backDataUrl = backStage.toDataURL({ pixelRatio: 2 });

        const backBox = {
          left: backPrintArea.xPct * DISPLAY,
          top: backPrintArea.yPct * DISPLAY,
          w: backPrintArea.wPct * DISPLAY,
          h: backPrintArea.hPct * DISPLAY,
        };
        const backPhotoInfo = getPhotoInfo('back');
        backPlacementUrl = backPhotoInfo
          ? await composePlacementImage(
              backPhotoInfo.url,
              backPhotoInfo.tint ? { tint: true, color } : null,
              backStage,
              backBox,
            ).catch(() => null)
          : null;
        backGuides.forEach((g) => g.show());
      }

      addItem({
        cartItemId: uuid(),
        productId: product.id,
        slug: product.slug,
        name: product.name,
        mockup: product.mockup,
        color,
        size,
        quantity,
        unitPrice: effectivePriceForPersonalised,
        designJson: { front: elementsFront, back: elementsBack },
        designPreviewUrl: frontDataUrl,
        designPreviewUrlBack: backDataUrl,
        placementPreviewUrl: frontPlacementUrl ?? frontDataUrl,
        placementPreviewUrlBack: backPlacementUrl ?? backDataUrl,
      });
      setJustAdded(true);
      setTimeout(() => setJustAdded(false), 2200);
    });
  };

  function renderPhoto(v: 'front' | 'back') {
    const colorPhoto = v === 'front' ? product.colorPhotos[color] : product.colorPhotosBack[color];
    if (colorPhoto) {
      return <img src={colorPhoto} alt={`${product.name} in ${color}`} className="h-full w-full object-cover" />;
    }

    const activePhoto = v === 'front' ? product.imageUrl : product.imageUrlBack;
    if (!activePhoto) {
      return <ProductMockup mockup={product.mockup} color={color} />;
    }
    if (product.photoRecolorable) {
      return (
        <div className="relative h-full w-full">
          <img
            src={activePhoto}
            alt={product.name}
            className="h-full w-full object-cover"
            style={{ filter: 'grayscale(1) brightness(2.1) contrast(1.15)' }}
          />
          <div className="absolute inset-0" style={{ backgroundColor: color, mixBlendMode: 'multiply' }} />
        </div>
      );
    }
    return <img src={activePhoto} alt={product.name} className="h-full w-full object-cover" />;
  }

  // Same resolution logic as renderPhoto, but returns raw data instead of JSX —
  // used when compositing the placement-reference image for the order record.
  function getPhotoInfo(v: 'front' | 'back'): { url: string; tint: boolean } | null {
    const colorPhoto = v === 'front' ? product.colorPhotos[color] : product.colorPhotosBack[color];
    if (colorPhoto) return { url: colorPhoto, tint: false };

    const activePhoto = v === 'front' ? product.imageUrl : product.imageUrlBack;
    if (!activePhoto) return null; // illustration only — nothing photographic to composite onto

    return { url: activePhoto, tint: product.photoRecolorable };
  }

  return (
    <div className="grid grid-cols-1 gap-10 lg:grid-cols-[560px_1fr]">
      {/* Canvas */}
      <div ref={canvasContainerRef} className="w-full min-w-0 max-w-[560px]">
        {hasBack && (
          <div className="mb-3 inline-flex border border-line">
            <button
              onClick={() => setView('front')}
              className={`px-4 py-1.5 text-sm ${view === 'front' ? 'bg-ink text-paper' : 'hover:text-clay'}`}
            >
              Front
            </button>
            <button
              onClick={() => setView('back')}
              className={`px-4 py-1.5 text-sm ${view === 'back' ? 'bg-ink text-paper' : 'hover:text-clay'}`}
            >
              Back
            </button>
          </div>
        )}

        {canPersonalize ? (
          <>
            <PrintSurface
              photo={renderPhoto('front')}
              printArea={frontPrintArea}
              elements={elementsFront}
              selectedId={selectedId}
              setSelectedId={setSelectedId}
              updateElement={updateElement}
              nodeRefs={nodeRefs}
              stageRef={stageFrontRef}
              transformerRef={transformerFrontRef}
              visible={view === 'front'}
              caption="Dashed line marks the print area"
              onNodeReady={() => setNodeReadyTick((t) => t + 1)}
              scale={canvasScale}
            />

            {hasBack && (
              <PrintSurface
                photo={renderPhoto('back')}
                printArea={backPrintArea}
                elements={elementsBack}
                selectedId={selectedId}
                setSelectedId={setSelectedId}
                updateElement={updateElement}
                nodeRefs={nodeRefs}
                stageRef={stageBackRef}
                transformerRef={transformerBackRef}
                visible={view === 'back'}
                caption="Dashed line marks the print area (back)"
                onNodeReady={() => setNodeReadyTick((t) => t + 1)}
                scale={canvasScale}
              />
            )}
          </>
        ) : (
          <div className="relative aspect-square w-full max-w-[560px] border border-line bg-surface">
            {renderPhoto(view)}
          </div>
        )}
      </div>

      {/* Controls */}
      <div className="flex flex-col gap-8">
        <div>
          <h1 className="font-display text-4xl">{product.name}</h1>
          <p className="mt-2 text-muted">{product.description}</p>
          <div className="mt-4">
            <p className="flex items-baseline gap-2 font-mono text-lg">
              {(() => {
                const { onSale, price, originalPrice } = getEffectivePrice(
                  {
                    id: product.id,
                    basePrice: product.basePrice,
                    personalisedPrice: product.personalisedPrice,
                    salePrice: product.onSale ? product.effectivePrice : null,
                    saleStartsAt: null,
                    saleEndsAt: null,
                  },
                  [],
                  new Date(),
                  true,
                );
                return (
                  <>
                    {onSale && originalPrice != null && (
                      <Price cents={originalPrice} className="text-base text-muted line-through" />
                    )}
                    <Price cents={price} className={onSale ? 'text-splash-pink' : undefined} />
                  </>
                );
              })()}
            </p>
            <p className="text-xs text-muted">For personalized design</p>
          </div>
        </div>

        <div>
          <p className="tag-label mb-3">Color</p>
          <div className="flex flex-wrap gap-3">
            {product.colors.map((c) => (
              <button
                key={c}
                onClick={() => setColor(c)}
                aria-label={`Choose color ${c}`}
                className={`h-9 w-9 rounded-full border transition-transform ${
                  color === c ? 'scale-110 border-ink ring-2 ring-ink ring-offset-2 ring-offset-paper' : 'border-line'
                }`}
                style={{ backgroundColor: c }}
              />
            ))}
          </div>
          {product.imageUrl && !product.photoRecolorable && Object.keys(product.colorPhotos).length === 0 && (
            <p className="mt-2 text-xs text-muted">
              This product uses a real photo, so the picture won&apos;t change color — your pick is
              still saved with the order.
            </p>
          )}
        </div>

        {product.sizes.length > 0 && (
          <div>
            <p className="tag-label mb-3">Size</p>
            <div className="flex flex-wrap gap-2">
              {product.sizes.map((s) => (
                <button
                  key={s}
                  onClick={() => setSize(s)}
                  className={`min-w-[44px] border px-3 py-2 text-sm transition-colors ${
                    size === s
                      ? 'border-clay bg-clay text-paper'
                      : 'border-line text-ink hover:border-clay hover:text-clay'
                  }`}
                >
                  {s}
                </button>
              ))}
            </div>
          </div>
        )}

        {canPersonalize && (
        <div>
          <p className="tag-label mb-3">
            Your design {hasBack && <span className="normal-case text-muted">— editing the {view}</span>}
          </p>
          <div className="flex flex-wrap gap-3">
            <button onClick={addText} className="border border-ink px-4 py-2 text-sm hover:border-clay hover:bg-clay hover:text-paper">
              + Add text
            </button>
            <button
              onClick={handleUploadClick}
              className="border border-ink px-4 py-2 text-sm hover:border-clay hover:bg-clay hover:text-paper"
            >
              + Upload image
            </button>
            <input ref={fileInputRef} type="file" accept="image/*" className="hidden" onChange={handleFile} />
            {selected && (
              <button
                onClick={deleteSelected}
                className="border border-line px-4 py-2 text-sm text-muted hover:border-ink hover:text-ink"
              >
                Delete selected
              </button>
            )}
          </div>

          {selected?.type === 'text' && (
            <div className="mt-4 flex flex-wrap items-center gap-3 border border-line bg-surface p-4">
              <input
                value={selected.text}
                onChange={(e) => updateElement(selected.id, { text: e.target.value })}
                className="border border-line bg-paper px-2 py-1 text-sm text-ink placeholder:text-muted"
                placeholder="Text"
              />
              <select
                value={selected.fontFamily}
                onChange={(e) => updateElement(selected.id, { fontFamily: e.target.value })}
                className="border border-line bg-paper px-2 py-1 text-sm text-ink"
                style={{ fontFamily: selected.fontFamily }}
              >
                {FONTS.map((f) => (
                  <option key={f} value={f} style={{ fontFamily: f }}>
                    {f}
                  </option>
                ))}
              </select>
              <input
                type="color"
                value={selected.fill}
                onChange={(e) => updateElement(selected.id, { fill: e.target.value })}
                className="h-8 w-8 border border-line bg-paper p-0"
              />
              <label className="flex items-center gap-2 text-sm text-muted">
                Size
                <input
                  type="range"
                  min={10}
                  max={80}
                  value={selected.fontSize}
                  onChange={(e) => updateElement(selected.id, { fontSize: Number(e.target.value) })}
                />
              </label>
              <label className="flex items-center gap-2 text-sm text-muted">
                Angle
                <input
                  type="range"
                  min={0}
                  max={360}
                  value={selected.rotation || 0}
                  onChange={(e) => updateElement(selected.id, { rotation: Number(e.target.value) })}
                />
                <span className="w-10 text-right font-mono text-xs">{selected.rotation || 0}°</span>
              </label>
            </div>
          )}

          {selected?.type === 'image' && (
            <div className="mt-4 flex flex-wrap items-center gap-3 border border-line bg-surface p-4">
              <label className="flex items-center gap-2 text-sm text-muted">
                Angle
                <input
                  type="range"
                  min={0}
                  max={360}
                  value={selected.rotation || 0}
                  onChange={(e) => updateElement(selected.id, { rotation: Number(e.target.value) })}
                />
                <span className="w-10 text-right font-mono text-xs">{selected.rotation || 0}°</span>
              </label>
            </div>
          )}
        </div>
        )}

        <div className="flex items-center gap-4">
          <div className="flex items-center border border-ink">
            <button
              onClick={() => setQuantity((q) => Math.max(1, q - 1))}
              className="px-3 py-2 text-sm"
              aria-label="Decrease quantity"
            >
              −
            </button>
            <span className="w-10 text-center font-mono text-sm">{quantity}</span>
            <button
              onClick={() => setQuantity((q) => q + 1)}
              className="px-3 py-2 text-sm"
              aria-label="Increase quantity"
            >
              +
            </button>
          </div>
          <button
            onClick={handleAddToBag}
            className="flex-1 bg-clay px-6 py-3 text-sm font-medium text-paper transition-colors hover:bg-clay-dark"
          >
            Add to bag — <Price cents={(elements.length > 0 ? effectivePriceForPersonalised : product.effectivePrice) * quantity} />
          </button>
        </div>
        {justAdded && <p className="text-sm text-pine">Added to your bag.</p>}
      </div>

      <LoginPromptModal isOpen={showLoginPrompt} onClose={() => setShowLoginPrompt(false)} />
    </div>
  );
}