import React from 'react';
import { MmInput } from './A4Inspector';
import { FONT_FAMILIES } from './fonts';
import { PAGE } from './units';
import '../ObjectInspector.css';
import './A4Inspector.css';
import './A4PageSetup.css';

/**
 * Page setup panel: orientation, the four margins in mm, and the defaults new
 * elements inherit.
 *
 * Margins are NOT cosmetic. A band's x/width are derived from the content area
 * (A4Canvas `contentWidthOf`), so changing a margin has to reflow every existing
 * band — otherwise a band keeps the width it was created with and silently
 * overhangs the new margin. `A4ReportEditor.handlePageSetupChange` owns that
 * reflow; this panel only reports the new setup.
 *
 * Margins use MmInput for the same reason every other mm field does: a
 * `type="number"` input discards the intermediate "1." and the decimal point
 * appears not to type. Font size is pt with a 0.5 step, matching the inspector.
 */

const MARGIN_FIELDS = [
  { key: 'top', label: 'Top' },
  { key: 'right', label: 'Right' },
  { key: 'bottom', label: 'Bottom' },
  { key: 'left', label: 'Left' }
];

const FONT_SIZES = [6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48];

function A4PageSetup({ pageSetup, onChange, onClose }) {
  const setup = pageSetup || {};
  const margins = setup.margins || {};
  const orientation = setup.orientation === 'landscape' ? 'landscape' : 'portrait';
  const size = PAGE.A4[orientation];

  const handleMarginChange = (key, value) => {
    onChange({ ...setup, margins: { ...margins, [key]: value } });
  };

  return (
    <div className="a4-page-setup-overlay" onClick={onClose}>
      <div className="a4-page-setup" onClick={e => e.stopPropagation()}>
        <div className="a4-page-setup-header">
          <h2>Page Setup</h2>
          <button className="a4-page-setup-close" onClick={onClose} title="Close">×</button>
        </div>

        <div className="a4-page-setup-body a4-inspector">
          <div className="inspector-section">
            <div className="section-title">Page</div>
            <div className="property-row">
              <label>Orientation</label>
              <select
                value={orientation}
                onChange={e => onChange({ ...setup, orientation: e.target.value })}
              >
                <option value="portrait">Portrait</option>
                <option value="landscape">Landscape</option>
              </select>
            </div>
            <div className="a4-page-setup-dims">
              A4 {orientation} — {size.w} × {size.h} mm
            </div>
          </div>

          <div className="inspector-section">
            <div className="section-title">Margins (mm)</div>
            {MARGIN_FIELDS.map(({ key, label }) => (
              <MmInput
                key={key}
                label={label}
                value={margins[key] ?? 0}
                min={0}
                onCommit={(v) => handleMarginChange(key, v)}
              />
            ))}
            <div className="a4-page-setup-hint">
              Bands span the content width, so changing a side margin resizes
              every band in the report.
            </div>
          </div>

          <div className="inspector-section">
            <div className="section-title">Defaults for new elements</div>
            <div className="property-row">
              <label>Font</label>
              <select
                value={setup.defaultFont || 'Arial'}
                onChange={e => onChange({ ...setup, defaultFont: e.target.value })}
              >
                {FONT_FAMILIES.map(f => (
                  <option key={f} value={f}>{f}</option>
                ))}
              </select>
            </div>
            <div className="property-row">
              <label>Size (pt)</label>
              <select
                value={setup.defaultFontSize || 10}
                onChange={e => onChange({ ...setup, defaultFontSize: parseFloat(e.target.value) })}
              >
                {FONT_SIZES.map(s => (
                  <option key={s} value={s}>{s}</option>
                ))}
              </select>
            </div>
            <div className="a4-page-setup-hint">
              Applies to elements created from now on. Existing elements keep
              the font they were given.
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default A4PageSetup;