/**
 * NavigationSettingsSectionCompact
 *
 * Compact navigation element settings for constructor sidebar.
 * Includes type, button text, icon, target page, and transition settings.
 */

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

type NavigationElementType = Extract<
  CanvasElementType,
  'navigation_next' | 'navigation_prev'
>;

interface NavigationSettingsSectionCompactProps {
  type: NavigationElementType;
  navType?: NavigationButtonKind;
  navLabel: string;
  navLabelFontFamily: string;
  navDisabled: boolean;
  iconUrl: string;
  targetPageSlug: string;
  transitionVideoUrl: string;
  transitionReverseMode: 'auto_reverse' | 'separate_video';
  reverseVideoUrl: string;
  allowedNavigationTypes: NavigationElementType[];
  iconAssetOptions: AssetOption[];
  transitionVideoOptions: AssetOption[];
  pages: Array<{ id: string; slug?: string; name?: string }>;
  activePageId: string;
  selectedMediaDurationNote?: string;
  selectedTransitionDurationNote?: string;
  onChange: (
    prop: string,
    value:
      | string
      | boolean
      | number
      | Partial<{
          type: NavigationElementType;
          navType: NavigationButtonKind;
          label?: string;
          navLabel?: string;
        }>,
  ) => void;
  onPreviewTransition?: (direction: 'forward' | 'back') => void;
}

const NavigationSettingsSectionCompact: React.FC<
  NavigationSettingsSectionCompactProps
> = ({
  type,
  navType,
  navLabel,
  navLabelFontFamily,
  navDisabled,
  iconUrl,
  targetPageSlug,
  transitionVideoUrl,
  transitionReverseMode,
  reverseVideoUrl,
  allowedNavigationTypes,
  iconAssetOptions,
  transitionVideoOptions,
  pages,
  activePageId,
  selectedMediaDurationNote,
  selectedTransitionDurationNote,
  onChange,
  onPreviewTransition,
}) => {
  const currentKind: NavigationButtonKind =
    navType || (type === 'navigation_prev' ? 'back' : 'forward');

  return (
    <div className='space-y-2'>
      <div>
        <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
          Type
        </label>
        <select
          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
          value={currentKind}
          onChange={(event) => {
            const requestedKind: NavigationButtonKind =
              event.target.value === 'back' ? 'back' : 'forward';
            const requestedType: NavigationElementType =
              requestedKind === 'back' ? 'navigation_prev' : 'navigation_next';
            const nextType = allowedNavigationTypes.includes(requestedType)
              ? requestedType
              : allowedNavigationTypes[0];
            onChange('type', nextType);
          }}
        >
          <option
            value='forward'
            disabled={!allowedNavigationTypes.includes('navigation_next')}
          >
            Forward
          </option>
          <option
            value='back'
            disabled={!allowedNavigationTypes.includes('navigation_prev')}
          >
            Back
          </option>
        </select>
      </div>

      <div>
        <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
          Button text
        </label>
        <input
          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
          value={navLabel}
          onChange={(event) => onChange('navLabel', event.target.value)}
        />
      </div>

      <div>
        <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
          Label font
        </label>
        <select
          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
          value={navLabelFontFamily}
          onChange={(event) => onChange('navLabelFontFamily', 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='flex items-center gap-2 text-[11px] font-semibold text-gray-600'>
          <input
            type='checkbox'
            checked={navDisabled}
            onChange={(event) => onChange('navDisabled', event.target.checked)}
          />
          Disabled
        </label>
      </div>

      <div>
        <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
          Icon
        </label>
        <select
          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
          value={iconUrl}
          onChange={(event) => onChange('iconUrl', event.target.value)}
        >
          <option value=''>Not selected</option>
          {addFallbackAssetOption(
            iconAssetOptions,
            iconUrl,
            `Current icon · ${iconUrl}`,
          ).map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
        {selectedMediaDurationNote && (
          <p className='mt-1 text-[11px] text-gray-500'>
            {selectedMediaDurationNote}
          </p>
        )}
      </div>

      <div>
        <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
          Target page
        </label>
        <select
          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
          value={targetPageSlug}
          onChange={(event) => {
            onChange('targetPageSlug', event.target.value);
            onChange('targetPageId', ''); // Clear legacy ID
          }}
        >
          <option value=''>Not selected</option>
          {pages
            .filter((page) => page.id !== activePageId)
            .map((page, index) => (
              <option key={page.id} value={page.slug || ''}>
                {page.name || `Page ${index + 1}`}
              </option>
            ))}
        </select>
      </div>

      <div>
        <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
          Transition video asset
        </label>
        <select
          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
          value={transitionVideoUrl}
          onChange={(event) => {
            onChange('transitionVideoUrl', event.target.value);
          }}
        >
          <option value=''>Not selected</option>
          {addFallbackAssetOption(
            transitionVideoOptions,
            transitionVideoUrl,
            `Current video · ${transitionVideoUrl}`,
          ).map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
        {selectedTransitionDurationNote && (
          <p className='mt-1 text-[11px] text-gray-500'>
            {selectedTransitionDurationNote}
          </p>
        )}
      </div>

      <div>
        <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
          Back transition mode
        </label>
        <select
          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
          value={transitionReverseMode}
          onChange={(event) =>
            onChange(
              'transitionReverseMode',
              event.target.value === 'separate_video'
                ? 'separate_video'
                : 'auto_reverse',
            )
          }
        >
          <option value='auto_reverse'>Auto reverse transition video</option>
          <option value='separate_video'>
            Use separate back-transition video
          </option>
        </select>
      </div>

      {transitionReverseMode === 'separate_video' && (
        <div>
          <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
            Back transition video asset
          </label>
          <select
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={reverseVideoUrl}
            onChange={(event) =>
              onChange('reverseVideoUrl', event.target.value)
            }
          >
            <option value=''>Not selected</option>
            {addFallbackAssetOption(
              transitionVideoOptions,
              reverseVideoUrl,
              `Current back video · ${reverseVideoUrl}`,
            ).map((option) => (
              <option key={option.value} value={option.value}>
                {option.label}
              </option>
            ))}
          </select>
        </div>
      )}

      <p className='text-[11px] text-gray-500'>
        Transition duration is set automatically from the selected video.
      </p>

      {onPreviewTransition && (
        <div className='flex gap-2 pt-1'>
          <BaseButton
            small
            color='lightDark'
            label='Preview Forward'
            onClick={() => onPreviewTransition('forward')}
          />
          <BaseButton
            small
            color='lightDark'
            label='Preview Back'
            onClick={() => onPreviewTransition('back')}
          />
        </div>
      )}
    </div>
  );
};

export default NavigationSettingsSectionCompact;
