/**
 * ArtboardSetup — modal overlay for configuring the artboard when entering
 * the design canvas view.
 *
 * Props:
 *  - onConfirm(config: ArtboardConfig): called when the user clicks "Create"
 */

import { useState } from 'react';
import type { ArtboardConfig, ArtboardShape, ArtboardUnit } from '../../types/canvas';
import { ARTBOARD_PRESETS, artboardClipPath } from '../../utils/artboardShapes';

const SHAPES: ArtboardShape[] = [
  'rect', 'square', 'circle', 'oval', 'shield', 'pennant', 'custom',
];

const SHAPE_LABELS: Record<ArtboardShape, string> = {
  rect: 'Rectangle',
  square: 'Square',
  circle: 'Circle',
  oval: 'Oval',
  shield: 'Shield',
  pennant: 'Pennant',
  custom: 'Custom',
};

interface ArtboardSetupProps {
  onConfirm: (config: ArtboardConfig) => void;
}

export default function ArtboardSetup({ onConfirm }: ArtboardSetupProps) {
  const [shape, setShape] = useState<ArtboardShape>('rect');
  const [width, setWidth] = useState(ARTBOARD_PRESETS.rect.width);
  const [height, setHeight] = useState(ARTBOARD_PRESETS.rect.height);
  const [unit, setUnit] = useState<ArtboardUnit>('inches');

  const handleShapeChange = (s: ArtboardShape) => {
    setShape(s);
    const preset = ARTBOARD_PRESETS[s];
    setWidth(preset.width);
    setHeight(preset.height);
    // Square and circle enforce equal dimensions
    if (s === 'square' || s === 'circle') {
      setHeight(preset.width);
    }
  };

  const handleWidthChange = (v: number) => {
    setWidth(v);
    if (shape === 'square' || shape === 'circle') setHeight(v);
  };

  const handleHeightChange = (v: number) => {
    if (shape === 'square' || shape === 'circle') return;
    setHeight(v);
  };

  const handleConfirm = () => {
    const config: ArtboardConfig = { shape, width, height, unit };
    const clip = artboardClipPath(config);
    if (clip) config.clipPath = clip;
    onConfirm(config);
  };

  return (
    <div className="artboard-setup-overlay" data-testid="artboard-setup">
      <div className="artboard-setup-modal">
        <h2>Set Up Artboard</h2>

        {/* Shape picker */}
        <fieldset className="artboard-setup-shapes">
          <legend>Shape</legend>
          <div className="artboard-shape-grid">
            {SHAPES.map((s) => (
              <button
                key={s}
                type="button"
                className={`artboard-shape-btn${s === shape ? ' active' : ''}`}
                onClick={() => handleShapeChange(s)}
                aria-pressed={s === shape}
              >
                {SHAPE_LABELS[s]}
              </button>
            ))}
          </div>
        </fieldset>

        {/* Dimension inputs */}
        <div className="artboard-setup-dimensions">
          <label>
            Width
            <input
              type="number"
              min={0.5}
              step={0.25}
              value={width}
              onChange={(e) => handleWidthChange(Number(e.target.value))}
              data-testid="artboard-width"
            />
          </label>
          <label>
            Height
            <input
              type="number"
              min={0.5}
              step={0.25}
              value={height}
              onChange={(e) => handleHeightChange(Number(e.target.value))}
              disabled={shape === 'square' || shape === 'circle'}
              data-testid="artboard-height"
            />
          </label>
        </div>

        {/* Units toggle */}
        <fieldset className="artboard-setup-units">
          <legend>Units</legend>
          <label>
            <input
              type="radio"
              name="unit"
              value="inches"
              checked={unit === 'inches'}
              onChange={() => setUnit('inches')}
            />
            Inches
          </label>
          <label>
            <input
              type="radio"
              name="unit"
              value="mm"
              checked={unit === 'mm'}
              onChange={() => setUnit('mm')}
            />
            Millimeters
          </label>
        </fieldset>

        {/* Confirm */}
        <button
          type="button"
          className="artboard-setup-confirm"
          onClick={handleConfirm}
          data-testid="artboard-confirm"
        >
          Create Artboard
        </button>
      </div>
    </div>
  );
}
