/**
 * StyleSettingsSectionCompact
 *
 * Compact CSS styling fields for the constructor sidebar.
 * Uses smaller inputs and labels to fit in the narrow sidebar.
 */

import React from 'react';
import type { StyleSettingsSectionProps } from './types';
import { FONT_OPTIONS } from '../../lib/fonts';

const StyleSettingsSectionCompact: React.FC<StyleSettingsSectionProps> = ({
  values,
  onChange,
}) => {
  return (
    <div className='space-y-2'>
      <p className='text-[10px] text-white/60'>
        Dimensions = % of canvas, border/radius = px
      </p>
      <div className='grid grid-cols-2 gap-2'>
        <div>
          <label className='mb-1 block text-[11px] font-semibold text-white/80'>
            Width (%)
          </label>
          <input
            type='number'
            step='0.1'
            min='0'
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={values.width || ''}
            onChange={(e) => onChange('width', e.target.value)}
            placeholder='e.g. 24'
          />
        </div>
        <div>
          <label className='mb-1 block text-[11px] font-semibold text-white/80'>
            Height (%)
          </label>
          <input
            type='number'
            step='0.1'
            min='0'
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={values.height || ''}
            onChange={(e) => onChange('height', e.target.value)}
            placeholder='e.g. 8'
          />
        </div>
        <div>
          <label className='mb-1 block text-[11px] font-semibold text-white/80'>
            Min W (%)
          </label>
          <input
            type='number'
            step='0.1'
            min='0'
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={values.minWidth || ''}
            onChange={(e) => onChange('minWidth', e.target.value)}
          />
        </div>
        <div>
          <label className='mb-1 block text-[11px] font-semibold text-white/80'>
            Max W (%)
          </label>
          <input
            type='number'
            step='0.1'
            min='0'
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={values.maxWidth || ''}
            onChange={(e) => onChange('maxWidth', e.target.value)}
          />
        </div>
        <div>
          <label className='mb-1 block text-[11px] font-semibold text-white/80'>
            Min H (%)
          </label>
          <input
            type='number'
            step='0.1'
            min='0'
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={values.minHeight || ''}
            onChange={(e) => onChange('minHeight', e.target.value)}
          />
        </div>
        <div>
          <label className='mb-1 block text-[11px] font-semibold text-white/80'>
            Max H (%)
          </label>
          <input
            type='number'
            step='0.1'
            min='0'
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={values.maxHeight || ''}
            onChange={(e) => onChange('maxHeight', e.target.value)}
          />
        </div>
        <div>
          <label className='mb-1 block text-[11px] font-semibold text-white/80'>
            Margin
          </label>
          <input
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={values.margin || ''}
            onChange={(e) => onChange('margin', e.target.value)}
            placeholder='0 auto'
          />
        </div>
        <div>
          <label className='mb-1 block text-[11px] font-semibold text-white/80'>
            Padding
          </label>
          <input
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={values.padding || ''}
            onChange={(e) => onChange('padding', e.target.value)}
            placeholder='0.5rem'
          />
        </div>
        <div>
          <label className='mb-1 block text-[11px] font-semibold text-white/80'>
            Gap (rem)
          </label>
          <input
            type='number'
            step='0.25'
            min='0'
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={values.gap || ''}
            onChange={(e) => onChange('gap', e.target.value)}
            placeholder='e.g. 1'
          />
        </div>
        <div>
          <label className='mb-1 block text-[11px] font-semibold text-white/80'>
            Font
          </label>
          <select
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={values.fontFamily || ''}
            onChange={(e) => onChange('fontFamily', e.target.value)}
          >
            <option value=''>Default</option>
            {FONT_OPTIONS.map((font) => (
              <option key={font.key} value={font.key}>
                {font.label}
              </option>
            ))}
          </select>
        </div>
        <div>
          <label className='mb-1 block text-[11px] font-semibold text-white/80'>
            Font size
          </label>
          <input
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={values.fontSize || ''}
            onChange={(e) => onChange('fontSize', e.target.value)}
            placeholder='0.875rem'
          />
        </div>
        <div>
          <label className='mb-1 block text-[11px] font-semibold text-white/80'>
            Line height
          </label>
          <input
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={values.lineHeight || ''}
            onChange={(e) => onChange('lineHeight', e.target.value)}
          />
        </div>
        <div>
          <label className='mb-1 block text-[11px] font-semibold text-white/80'>
            Font weight
          </label>
          <input
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={values.fontWeight || ''}
            onChange={(e) => onChange('fontWeight', e.target.value)}
            placeholder='500'
          />
        </div>
        <div>
          <label className='mb-1 block text-[11px] font-semibold text-white/80'>
            Border (px)
          </label>
          <input
            type='number'
            step='1'
            min='0'
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={values.border || ''}
            onChange={(e) => onChange('border', e.target.value)}
            placeholder='0'
          />
        </div>
        <div>
          <label className='mb-1 block text-[11px] font-semibold text-white/80'>
            Radius (px)
          </label>
          <input
            type='number'
            step='1'
            min='0'
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={values.borderRadius || ''}
            onChange={(e) => onChange('borderRadius', e.target.value)}
            placeholder='0'
          />
        </div>
        <div>
          <label className='mb-1 block text-[11px] font-semibold text-white/80'>
            Opacity
          </label>
          <input
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={values.opacity || ''}
            onChange={(e) => onChange('opacity', e.target.value)}
            placeholder='0..1'
          />
        </div>
        <div>
          <label className='mb-1 block text-[11px] font-semibold text-white/80'>
            z-index
          </label>
          <input
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={values.zIndex || ''}
            onChange={(e) => onChange('zIndex', e.target.value)}
            placeholder='1'
          />
        </div>
      </div>

      <div>
        <label className='mb-1 block text-[11px] font-semibold text-white/80'>
          Box shadow
        </label>
        <input
          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
          value={values.boxShadow || ''}
          onChange={(e) => onChange('boxShadow', e.target.value)}
          placeholder='0 4px 12px rgba(...)'
        />
      </div>

      <div className='grid grid-cols-2 gap-2'>
        <div>
          <label className='mb-1 block text-[11px] font-semibold text-white/80'>
            Display
          </label>
          <select
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={values.display || ''}
            onChange={(e) => onChange('display', e.target.value)}
          >
            <option value=''>Not set</option>
            <option value='block'>block</option>
            <option value='inline-block'>inline-block</option>
            <option value='flex'>flex</option>
            <option value='inline-flex'>inline-flex</option>
            <option value='grid'>grid</option>
            <option value='none'>none</option>
          </select>
        </div>
        <div>
          <label className='mb-1 block text-[11px] font-semibold text-white/80'>
            Position
          </label>
          <select
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={values.position || ''}
            onChange={(e) => onChange('position', e.target.value)}
          >
            <option value=''>Not set</option>
            <option value='static'>static</option>
            <option value='relative'>relative</option>
            <option value='absolute'>absolute</option>
            <option value='fixed'>fixed</option>
            <option value='sticky'>sticky</option>
          </select>
        </div>
        <div>
          <label className='mb-1 block text-[11px] font-semibold text-white/80'>
            Justify
          </label>
          <select
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={values.justifyContent || ''}
            onChange={(e) => onChange('justifyContent', e.target.value)}
          >
            <option value=''>Not set</option>
            <option value='flex-start'>start</option>
            <option value='center'>center</option>
            <option value='flex-end'>end</option>
            <option value='space-between'>between</option>
            <option value='space-around'>around</option>
            <option value='space-evenly'>evenly</option>
          </select>
        </div>
        <div>
          <label className='mb-1 block text-[11px] font-semibold text-white/80'>
            Align
          </label>
          <select
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={values.alignItems || ''}
            onChange={(e) => onChange('alignItems', e.target.value)}
          >
            <option value=''>Not set</option>
            <option value='stretch'>stretch</option>
            <option value='flex-start'>start</option>
            <option value='center'>center</option>
            <option value='flex-end'>end</option>
            <option value='baseline'>baseline</option>
          </select>
        </div>
        <div>
          <label className='mb-1 block text-[11px] font-semibold text-white/80'>
            Text align
          </label>
          <select
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={values.textAlign || ''}
            onChange={(e) => onChange('textAlign', e.target.value)}
          >
            <option value=''>Not set</option>
            <option value='left'>left</option>
            <option value='center'>center</option>
            <option value='right'>right</option>
            <option value='justify'>justify</option>
          </select>
        </div>
        <div>
          <label className='mb-1 block text-[11px] font-semibold text-white/80'>
            BG color
          </label>
          <input
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={values.backgroundColor || ''}
            onChange={(e) => onChange('backgroundColor', e.target.value)}
            placeholder='#E7DDB5'
          />
        </div>
        <div>
          <label className='mb-1 block text-[11px] font-semibold text-white/80'>
            Text color
          </label>
          <input
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={values.color || ''}
            onChange={(e) => onChange('color', e.target.value)}
            placeholder='#131C22'
          />
        </div>
      </div>
    </div>
  );
};

export default StyleSettingsSectionCompact;