/**
 * GallerySettingsSectionCompact
 *
 * Compact gallery element settings for constructor sidebar.
 * Header image, title, info spans, and card management.
 */

import React from 'react';
import type {
  GalleryCard,
  GalleryInfoSpan,
  AssetOption,
} from '../../types/constructor';
import { addFallbackAssetOption } from '../../lib/constructorHelpers';
import { FONT_OPTIONS } from '../../lib/fonts';

interface GallerySettingsSectionCompactProps {
  // Header settings
  galleryHeaderImageUrl: string;
  galleryTitle: string;
  galleryInfoSpans: GalleryInfoSpan[];
  galleryColumns: number;
  // Font settings
  galleryTitleFontFamily: string;
  galleryTextFontFamily: string;
  // Cards
  galleryCards: GalleryCard[];
  imageAssetOptions: AssetOption[];
  // Header handlers
  onUpdateHeader: (patch: {
    galleryHeaderImageUrl?: string;
    galleryTitle?: string;
    galleryColumns?: number;
    galleryTitleFontFamily?: string;
    galleryTextFontFamily?: string;
  }) => void;
  onAddInfoSpan: () => void;
  onUpdateInfoSpan: (spanId: string, text: string) => void;
  onRemoveInfoSpan: (spanId: string) => void;
  // Card handlers
  onAddCard: () => void;
  onUpdateCard: (cardId: string, patch: Partial<GalleryCard>) => void;
  onRemoveCard: (cardId: string) => void;
}

const GallerySettingsSectionCompact: React.FC<
  GallerySettingsSectionCompactProps
> = ({
  galleryHeaderImageUrl,
  galleryTitle,
  galleryInfoSpans,
  galleryColumns,
  galleryTitleFontFamily,
  galleryTextFontFamily,
  galleryCards,
  imageAssetOptions,
  onUpdateHeader,
  onAddInfoSpan,
  onUpdateInfoSpan,
  onRemoveInfoSpan,
  onAddCard,
  onUpdateCard,
  onRemoveCard,
}) => {
  return (
    <div className='space-y-3'>
      {/* Header Settings */}
      <div className='rounded border border-gray-200 p-2 space-y-2'>
        <p className='text-[11px] font-semibold text-gray-700'>Gallery header</p>

        <select
          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
          value={galleryHeaderImageUrl}
          onChange={(event) =>
            onUpdateHeader({ galleryHeaderImageUrl: event.target.value })
          }
        >
          <option value=''>Header image</option>
          {addFallbackAssetOption(
            imageAssetOptions,
            galleryHeaderImageUrl,
            `Current header`,
          ).map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>

        <input
          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
          placeholder='Title (location note)'
          value={galleryTitle}
          onChange={(event) =>
            onUpdateHeader({ galleryTitle: event.target.value })
          }
        />

        <div className='flex items-center gap-2'>
          <label className='text-[10px] text-gray-600'>Grid columns:</label>
          <input
            type='number'
            min='1'
            max='6'
            className='w-16 rounded border border-gray-300 px-2 py-1 text-xs'
            value={galleryColumns}
            onChange={(event) =>
              onUpdateHeader({
                galleryColumns: Math.max(1, Math.min(6, parseInt(event.target.value) || 3)),
              })
            }
          />
        </div>

        <div>
          <label className='text-[10px] text-gray-600'>Title font:</label>
          <select
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={galleryTitleFontFamily}
            onChange={(event) =>
              onUpdateHeader({ galleryTitleFontFamily: event.target.value })
            }
          >
            <option value=''>Not set</option>
            {FONT_OPTIONS.map((font) => (
              <option key={font.key} value={font.key}>
                {font.label}
              </option>
            ))}
          </select>
        </div>

        <div>
          <label className='text-[10px] text-gray-600'>Text font:</label>
          <select
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={galleryTextFontFamily}
            onChange={(event) =>
              onUpdateHeader({ galleryTextFontFamily: event.target.value })
            }
          >
            <option value=''>Not set</option>
            {FONT_OPTIONS.map((font) => (
              <option key={font.key} value={font.key}>
                {font.label}
              </option>
            ))}
          </select>
        </div>
      </div>

      {/* Info Spans */}
      <div className='rounded border border-gray-200 p-2 space-y-2'>
        <div className='flex items-center justify-between'>
          <p className='text-[11px] font-semibold text-gray-700'>Info spans</p>
          <button
            type='button'
            className='text-xs text-blue-700 hover:underline'
            onClick={onAddInfoSpan}
          >
            + Add span
          </button>
        </div>

        {galleryInfoSpans.map((span, index) => (
          <div key={span.id} className='flex items-center gap-1'>
            <input
              className='flex-1 rounded border border-gray-300 px-2 py-1 text-xs'
              placeholder={`Span ${index + 1}`}
              value={span.text}
              onChange={(event) => onUpdateInfoSpan(span.id, event.target.value)}
            />
            <button
              type='button'
              className='text-xs text-red-600 hover:underline px-1'
              onClick={() => onRemoveInfoSpan(span.id)}
            >
              ×
            </button>
          </div>
        ))}

        {galleryInfoSpans.length === 0 && (
          <p className='text-[10px] text-gray-500'>
            Add spans for brief notes (capacity, price, etc.)
          </p>
        )}
      </div>

      {/* Gallery Cards */}
      <div className='flex items-center justify-between'>
        <p className='text-[11px] font-semibold text-gray-600'>Gallery cards</p>
        <button
          type='button'
          className='text-xs text-blue-700 hover:underline'
          onClick={onAddCard}
        >
          + Add card
        </button>
      </div>

      {galleryCards.map((card, index) => (
        <div
          key={card.id}
          className='rounded border border-gray-200 p-2 space-y-2'
        >
          <div className='flex items-center justify-between'>
            <p className='text-[11px] font-semibold text-gray-700'>
              Card {index + 1}
            </p>
            <button
              type='button'
              className='text-xs text-red-600 hover:underline'
              onClick={() => onRemoveCard(card.id)}
            >
              Remove
            </button>
          </div>

          <select
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={card.imageUrl}
            onChange={(event) =>
              onUpdateCard(card.id, { imageUrl: event.target.value })
            }
          >
            <option value=''>Image asset</option>
            {addFallbackAssetOption(
              imageAssetOptions,
              card.imageUrl,
              `Current image · ${card.imageUrl}`,
            ).map((option) => (
              <option key={option.value} value={option.value}>
                {option.label}
              </option>
            ))}
          </select>

          <input
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            placeholder='Title'
            value={card.title}
            onChange={(event) =>
              onUpdateCard(card.id, { title: event.target.value })
            }
          />

          <textarea
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            placeholder='Description'
            rows={3}
            value={card.description}
            onChange={(event) =>
              onUpdateCard(card.id, { description: event.target.value })
            }
          />
        </div>
      ))}

      {galleryCards.length === 0 && (
        <p className='text-[11px] text-gray-500'>
          No cards yet. Click &quot;+ Add card&quot; to create one.
        </p>
      )}
    </div>
  );
};

export default GallerySettingsSectionCompact;
