craft2prints/src/components/AdminDesignEditor.tsx

'use client';

import { useRef, useState, useEffect } from 'react';
import { Stage, Layer, Text, Image as KonvaImage, Transformer } from 'react-konva';
import type Konva from 'konva';
import type { DesignElement } from '@/lib/types';

interface AdminDesignEditorProps {
  designId: string;
  designJson: string;
  designPreviewUrl: string;
  placementPreviewUrl?: string | null;
  onSave: (designJson: string, previewUrl: string) => void;
}

export default function AdminDesignEditor({
  designId,
  designJson,
  designPreviewUrl,
  placementPreviewUrl,
  onSave,
}: AdminDesignEditorProps) {
  const stageRef = useRef<Konva.Stage | null>(null);
  const transformerRef = useRef<Konva.Transformer | null>(null);
  const nodeRefs = useRef<Map<string, Konva.Node>>(new Map());
  const [elements, setElements] = useState<DesignElement[]>([]);
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    try {
      const design = JSON.parse(designJson);
      setElements([...(design.front || []), ...(design.back || [])]);
    } catch (e) {
      console.error('Failed to parse design JSON:', e);
    }
  }, [designJson]);

  const handleDelete = () => {
    if (!selectedId) return;
    setElements((els) => els.filter((el) => el.id !== selectedId));
    setSelectedId(null);
  };

  const handleSave = async () => {
    setSaving(true);
    try {
      const stage = stageRef.current;
      if (!stage) return;

      const previewUrl = stage.toDataURL({ pixelRatio: 2 });

      await fetch(`/api/designs/${designId}/modify`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          designJson: JSON.stringify({ front: elements, back: [] }),
          designPreviewUrl: previewUrl,
        }),
      });

      onSave(JSON.stringify({ front: elements, back: [] }), previewUrl);
    } finally {
      setSaving(false);
    }
  };

  const DISPLAY = 560;

  return (
    <div className="space-y-4">
      <div className="flex gap-3">
        <button
          onClick={handleDelete}
          disabled={!selectedId}
          className="text-sm px-4 py-2 border border-splash-pink text-splash-pink hover:bg-splash-pink/10 disabled:opacity-50"
        >
          Delete selected
        </button>
        <button
          onClick={handleSave}
          disabled={saving}
          className="text-sm px-4 py-2 bg-clay text-paper hover:bg-clay-dark disabled:opacity-50"
        >
          {saving ? 'Saving…' : 'Save changes'}
        </button>
      </div>

      <div className="border border-line p-4 bg-surface overflow-auto" style={{ maxHeight: '600px' }}>
        <Stage
          ref={stageRef}
          width={DISPLAY}
          height={DISPLAY}
          onMouseDown={(e) => {
            if (e.target === e.target.getStage()) setSelectedId(null);
          }}
        >
          <Layer>
            {elements.map((el) => {
              if (el.type === 'text') {
                return (
                  <Text
                    key={el.id}
                    x={el.x}
                    y={el.y}
                    text={el.text}
                    fontSize={el.fontSize}
                    fontFamily={el.fontFamily}
                    fill={el.fill}
                    rotation={el.rotation}
                    draggable
                    selected={selectedId === el.id}
                    onClick={() => setSelectedId(el.id)}
                    onTap={() => setSelectedId(el.id)}
                    onDragEnd={(e) => {
                      const updated = elements.map((elem) =>
                        elem.id === el.id ? { ...elem, x: e.target.x(), y: e.target.y() } : elem
                      );
                      setElements(updated);
                    }}
                    onTransformEnd={() => {
                      const node = nodeRefs.current.get(el.id);
                      if (node instanceof Konva.Text) {
                        const updated = elements.map((elem) =>
                          elem.id === el.id
                            ? {
                                ...elem,
                                x: node.x(),
                                y: node.y(),
                                rotation: node.rotation(),
                              }
                            : elem
                        );
                        setElements(updated);
                      }
                    }}
                    ref={(node) => {
                      if (node) nodeRefs.current.set(el.id, node);
                    }}
                  />
                );
              }
              return null;
            })}

            {selectedId && (
              <Transformer
                ref={transformerRef}
                node={nodeRefs.current.get(selectedId) as any}
                boundBoxFunc={(oldBox, newBox) => newBox}
              />
            )}
          </Layer>
        </Stage>
      </div>

      {placementPreviewUrl && (
        <div>
          <p className="text-sm text-muted mb-2">Design on product:</p>
          <img
            src={placementPreviewUrl}
            alt="design on product"
            className="w-full max-w-xs border border-line"
          />
        </div>
      )}
    </div>
  );
}