/**
 * GallerySectionStyleInputs
 *
 * Reusable component for gallery section style inputs.
 * Used in the CSS tab to configure wrapper, header, title, span, and card styles.
 */

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

interface GallerySectionStyleInputsProps {
  sectionLabel: string;
  prefix: string;
  values: Record<string, string | number>;
  onChange: (prop: string, value: string | number) => void;
  showFont?: boolean;
  showColumns?: boolean;
  showGap?: boolean;
  showBlur?: boolean;
  showTitleStyles?: boolean;
  showDimensions?: boolean;
  showAspectRatio?: boolean;
  showTextAlign?: boolean;
}

/**
 * Reusable inputs for gallery section styling
 */
const GallerySectionStyleInputs: React.FC<GallerySectionStyleInputsProps> = ({
  sectionLabel,
  prefix,
  values,
  onChange,
  showFont = false,
  showColumns = false,
  showGap = false,
  showBlur = false,
  showTitleStyles = false,
  showDimensions = false,
  showAspectRatio = false,
  showTextAlign = false,
}) => {
  return (
    <div className='rounded border border-gray-200 p-2 space-y-2'>
      <p className='text-[11px] font-semibold text-gray-700'>{sectionLabel}</p>

      <div className='grid grid-cols-2 gap-2'>
        {/* Background Color */}
        <div>
          <label className='mb-1 block text-[10px] text-gray-600'>
            BG color
          </label>
          <input
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={values[`${prefix}BackgroundColor`] || ''}
            onChange={(e) =>
              onChange(`${prefix}BackgroundColor`, e.target.value)
            }
            placeholder='rgba(0,0,0,0.6)'
          />
        </div>

        {/* Text Color (not for wrapper) */}
        {prefix !== 'galleryWrapper' && !showTitleStyles && (
          <div>
            <label className='mb-1 block text-[10px] text-gray-600'>
              Text color
            </label>
            <input
              className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
              value={values[`${prefix}Color`] || ''}
              onChange={(e) => onChange(`${prefix}Color`, e.target.value)}
              placeholder='#ffffff'
            />
          </div>
        )}

        {/* Padding */}
        <div>
          <label className='mb-1 block text-[10px] text-gray-600'>
            Padding
          </label>
          <input
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={values[`${prefix}Padding`] || ''}
            onChange={(e) => onChange(`${prefix}Padding`, e.target.value)}
            placeholder='0.75rem'
          />
        </div>

        {/* Border Radius */}
        <div>
          <label className='mb-1 block text-[10px] text-gray-600'>Radius</label>
          <input
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={values[`${prefix}BorderRadius`] || ''}
            onChange={(e) => onChange(`${prefix}BorderRadius`, e.target.value)}
            placeholder='0.75rem'
          />
        </div>

        {/* Border */}
        <div>
          <label className='mb-1 block text-[10px] text-gray-600'>Border</label>
          <input
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={values[`${prefix}Border`] || ''}
            onChange={(e) => onChange(`${prefix}Border`, e.target.value)}
            placeholder='1px solid #ccc'
          />
        </div>

        {/* Text Alignment (optional) */}
        {showTextAlign && (
          <div>
            <label className='mb-1 block text-[10px] text-gray-600'>
              Align
            </label>
            <select
              className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
              value={values[`${prefix}TextAlign`] || 'center'}
              onChange={(e) => onChange(`${prefix}TextAlign`, e.target.value)}
            >
              <option value='left'>Left</option>
              <option value='center'>Center</option>
              <option value='right'>Right</option>
            </select>
          </div>
        )}

        {/* Gap (optional) */}
        {showGap && (
          <div>
            <label className='mb-1 block text-[10px] text-gray-600'>Gap</label>
            <input
              className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
              value={values[`${prefix}Gap`] || ''}
              onChange={(e) => onChange(`${prefix}Gap`, e.target.value)}
              placeholder='0.5rem'
            />
          </div>
        )}

        {/* Backdrop Blur (wrapper only) */}
        {showBlur && (
          <div>
            <label className='mb-1 block text-[10px] text-gray-600'>Blur</label>
            <input
              className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
              value={values[`${prefix}BackdropBlur`] || ''}
              onChange={(e) =>
                onChange(`${prefix}BackdropBlur`, e.target.value)
              }
              placeholder='4px'
            />
          </div>
        )}

        {/* Grid Columns (optional) */}
        {showColumns && (
          <div>
            <label className='mb-1 block text-[10px] text-gray-600'>
              Columns
            </label>
            <input
              type='number'
              min='1'
              max='6'
              className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
              value={values[`${prefix}Columns`] || ''}
              onChange={(e) =>
                onChange(`${prefix}Columns`, parseInt(e.target.value) || 3)
              }
              placeholder='3'
            />
          </div>
        )}

        {/* Font Size (optional) */}
        {showFont && (
          <div>
            <label className='mb-1 block text-[10px] text-gray-600'>
              Font size
            </label>
            <input
              className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
              value={values[`${prefix}FontSize`] || ''}
              onChange={(e) => onChange(`${prefix}FontSize`, e.target.value)}
              placeholder='0.875rem'
            />
          </div>
        )}

        {/* Font Weight (optional) */}
        {showFont && (
          <div>
            <label className='mb-1 block text-[10px] text-gray-600'>
              Font weight
            </label>
            <input
              className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
              value={values[`${prefix}FontWeight`] || ''}
              onChange={(e) => onChange(`${prefix}FontWeight`, e.target.value)}
              placeholder='500'
            />
          </div>
        )}
      </div>

      {/* Font Family (optional - full width) */}
      {showFont && (
        <div>
          <label className='mb-1 block text-[10px] text-gray-600'>Font</label>
          <select
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={values[`${prefix}FontFamily`] || ''}
            onChange={(e) => onChange(`${prefix}FontFamily`, e.target.value)}
          >
            <option value=''>Not set</option>
            {FONT_OPTIONS.map((font) => (
              <option key={font.key} value={font.key}>
                {font.label}
              </option>
            ))}
          </select>
        </div>
      )}

      {/* Header Dimensions (header section only) */}
      {showDimensions && (
        <>
          <p className='text-[10px] text-gray-500 pt-1'>Dimensions:</p>
          <div className='grid grid-cols-2 gap-2'>
            <div>
              <label className='mb-1 block text-[10px] text-gray-600'>
                Width
              </label>
              <input
                className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
                value={values[`${prefix}Width`] || ''}
                onChange={(e) => onChange(`${prefix}Width`, e.target.value)}
                placeholder='100%, 300px'
              />
            </div>
            <div>
              <label className='mb-1 block text-[10px] text-gray-600'>
                Height
              </label>
              <input
                className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
                value={values[`${prefix}Height`] || ''}
                onChange={(e) => onChange(`${prefix}Height`, e.target.value)}
                placeholder='200px, auto'
              />
            </div>
            <div>
              <label className='mb-1 block text-[10px] text-gray-600'>
                Min Height
              </label>
              <input
                className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
                value={values[`${prefix}MinHeight`] || ''}
                onChange={(e) => onChange(`${prefix}MinHeight`, e.target.value)}
                placeholder='150px'
              />
            </div>
            <div>
              <label className='mb-1 block text-[10px] text-gray-600'>
                Max Height
              </label>
              <input
                className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
                value={values[`${prefix}MaxHeight`] || ''}
                onChange={(e) => onChange(`${prefix}MaxHeight`, e.target.value)}
                placeholder='400px, 50vh'
              />
            </div>
          </div>
        </>
      )}

      {/* Card Aspect Ratio and Min Height (cards only) */}
      {showAspectRatio && (
        <>
          <p className='text-[10px] text-gray-500 pt-1'>Card dimensions:</p>
          <div className='grid grid-cols-2 gap-2'>
            <div>
              <label className='mb-1 block text-[10px] text-gray-600'>
                Aspect Ratio
              </label>
              <select
                className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
                value={values[`${prefix}AspectRatio`] || ''}
                onChange={(e) =>
                  onChange(`${prefix}AspectRatio`, e.target.value)
                }
              >
                <option value=''>4:3 (Default)</option>
                <option value='16/9'>16:9 (Widescreen)</option>
                <option value='1/1'>1:1 (Square)</option>
                <option value='3/2'>3:2</option>
                <option value='auto'>Auto</option>
              </select>
            </div>
            <div>
              <label className='mb-1 block text-[10px] text-gray-600'>
                Min Height
              </label>
              <input
                className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
                value={values[`${prefix}MinHeight`] || ''}
                onChange={(e) => onChange(`${prefix}MinHeight`, e.target.value)}
                placeholder='150px'
              />
            </div>
          </div>
        </>
      )}

      {/* Card Title Styles (cards only) */}
      {showTitleStyles && (
        <>
          <p className='text-[10px] text-gray-500 pt-1'>Card title overlay:</p>
          <div className='grid grid-cols-2 gap-2'>
            <div>
              <label className='mb-1 block text-[10px] text-gray-600'>
                Title color
              </label>
              <input
                className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
                value={values.galleryCardTitleColor || ''}
                onChange={(e) =>
                  onChange('galleryCardTitleColor', e.target.value)
                }
                placeholder='#ffffff'
              />
            </div>
            <div>
              <label className='mb-1 block text-[10px] text-gray-600'>
                Title BG
              </label>
              <input
                className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
                value={values.galleryCardTitleBackgroundColor || ''}
                onChange={(e) =>
                  onChange('galleryCardTitleBackgroundColor', e.target.value)
                }
                placeholder='transparent'
              />
            </div>
            <div>
              <label className='mb-1 block text-[10px] text-gray-600'>
                Title size
              </label>
              <input
                className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
                value={values.galleryCardTitleFontSize || ''}
                onChange={(e) =>
                  onChange('galleryCardTitleFontSize', e.target.value)
                }
                placeholder='0.75rem'
              />
            </div>
            <div>
              <label className='mb-1 block text-[10px] text-gray-600'>
                Title weight
              </label>
              <input
                className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
                value={values.galleryCardTitleFontWeight || ''}
                onChange={(e) =>
                  onChange('galleryCardTitleFontWeight', e.target.value)
                }
                placeholder='700'
              />
            </div>
          </div>
          <div>
            <label className='mb-1 block text-[10px] text-gray-600'>
              Title shadow
            </label>
            <input
              className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
              value={values.galleryCardTitleShadow || ''}
              onChange={(e) =>
                onChange('galleryCardTitleShadow', e.target.value)
              }
              placeholder='0 1px 3px rgba(0,0,0,0.5)'
            />
          </div>
        </>
      )}
    </div>
  );
};

export default GallerySectionStyleInputs;
