'use client';

import React from 'react';
import { useSliderEditor } from './SliderEditorContext';
import { BRAND_COLORS, BrandColor } from '@/types/slider';
import SliderImagePicker from './SliderImagePicker';
import { AlignLeft, AlignRight, EyeOff } from 'lucide-react';
import styles from './SliderFormSection.module.css';

export default function SliderFormSection() {
  const { sliderContent, formState, updateSlide, deleteSlide } = useSliderEditor();

  const currentSlide = sliderContent.slides[formState.currentSlideIndex];
  if (!currentSlide) return null;

  const handleHeadlineChange = (text: string) => {
    updateSlide(formState.currentSlideIndex, {
      headline: text,
    });
  };

  const handleSubheadingChange = (text: string) => {
    updateSlide(formState.currentSlideIndex, {
      subheading: text,
    });
  };

  const handleButtonTextChange = (text: string) => {
    updateSlide(formState.currentSlideIndex, {
      button: {
        ...currentSlide.button,
        text,
      },
    });
  };

  const handleButtonUrlChange = (url: string) => {
    updateSlide(formState.currentSlideIndex, {
      button: {
        ...currentSlide.button,
        url,
      },
    });
  };

  const handleTextColorChange = (colorKey: BrandColor, type: 'headline' | 'subheading') => {
    if (type === 'headline') {
      updateSlide(formState.currentSlideIndex, {
        headlineFormatting: {
          ...currentSlide.headlineFormatting,
          color: BRAND_COLORS[colorKey],
        },
      });
    } else {
      updateSlide(formState.currentSlideIndex, {
        subheadingFormatting: {
          ...currentSlide.subheadingFormatting,
          color: BRAND_COLORS[colorKey],
        },
      });
    }
  };

  const toggleBold = (type: 'headline' | 'subheading') => {
    if (type === 'headline') {
      updateSlide(formState.currentSlideIndex, {
        headlineFormatting: {
          ...currentSlide.headlineFormatting,
          bold: !currentSlide.headlineFormatting.bold,
        },
      });
    } else {
      updateSlide(formState.currentSlideIndex, {
        subheadingFormatting: {
          ...currentSlide.subheadingFormatting,
          bold: !currentSlide.subheadingFormatting.bold,
        },
      });
    }
  };

  const toggleItalic = (type: 'headline' | 'subheading') => {
    if (type === 'headline') {
      updateSlide(formState.currentSlideIndex, {
        headlineFormatting: {
          ...currentSlide.headlineFormatting,
          italic: !currentSlide.headlineFormatting.italic,
        },
      });
    } else {
      updateSlide(formState.currentSlideIndex, {
        subheadingFormatting: {
          ...currentSlide.subheadingFormatting,
          italic: !currentSlide.subheadingFormatting.italic,
        },
      });
    }
  };

  const setAlignment = (align: 'left' | 'right') => {
    updateSlide(formState.currentSlideIndex, {
      alignment: align,
    });
  };

  const handleDeleteSlide = () => {
    if (confirm('Are you sure you want to delete this slide?')) {
      deleteSlide(formState.currentSlideIndex);
    }
  };

  return (
    <div className={styles.formSection}>
      {/* Slide Counter */}
      <div className={styles.slideCounter}>
        Slide {formState.currentSlideIndex + 1} of {sliderContent.slides.length}
      </div>

      {/* Active Toggle */}
      <div className={styles.activeToggleRow}>
        <label className={styles.label}>Active</label>
        <button
          type="button"
          role="switch"
          aria-checked={currentSlide.active !== false}
          className={`${styles.toggleSwitch} ${currentSlide.active !== false ? styles.toggleOn : ''}`}
          onClick={() =>
            updateSlide(formState.currentSlideIndex, {
              active: currentSlide.active === false,
            })
          }
        >
          <span className={styles.toggleKnob} />
        </button>
      </div>

      {currentSlide.active === false && (
        <div className={styles.inactiveBanner}>
          <EyeOff size={14} />
          <span>This slide is hidden from your landing page</span>
        </div>
      )}

      {/* Image Section */}
      <div className={styles.formGroup}>
        <label className={styles.label}>Image</label>
        <SliderImagePicker />
      </div>

      {/* Text Alignment */}
      <div className={styles.formGroup}>
        <label className={styles.label}>Text Alignment</label>
        <div className={styles.alignmentButtons}>
          <button
            className={`${styles.formatButton} ${currentSlide.alignment === 'left' ? styles.active : ''}`}
            onClick={() => setAlignment('left')}
            title="Align Left"
          >
            <AlignLeft size={14} />
            <span style={{ marginLeft: '6px' }}>Left</span>
          </button>
          <button
            className={`${styles.formatButton} ${currentSlide.alignment === 'right' ? styles.active : ''}`}
            onClick={() => setAlignment('right')}
            title="Align Right"
          >
            <AlignRight size={14} />
            <span style={{ marginLeft: '6px' }}>Right</span>
          </button>
        </div>
      </div>

      {/* Headline Section */}
      <div className={styles.formGroup}>
        <div className={styles.labelRow}>
          <label className={styles.label}>Headline</label>
        </div>
        <textarea
          value={currentSlide.headline}
          onChange={(e) => handleHeadlineChange(e.target.value)}
          placeholder="Enter headline text"
          className={styles.textarea}
          rows={2}
        />
        <div className={styles.formatToolbar}>
          <button
            className={`${styles.formatButton} ${currentSlide.headlineFormatting.bold ? styles.active : ''}`}
            onClick={() => toggleBold('headline')}
            title="Bold"
          >
            <strong>B</strong>
          </button>
          <button
            className={`${styles.formatButton} ${currentSlide.headlineFormatting.italic ? styles.active : ''}`}
            onClick={() => toggleItalic('headline')}
            title="Italic"
          >
            <em>I</em>
          </button>
          <div className={styles.colorPicker}>
            {(Object.keys(BRAND_COLORS) as BrandColor[]).map((colorKey) => (
              <button
                key={colorKey}
                className={styles.colorButton}
                style={{ backgroundColor: BRAND_COLORS[colorKey] }}
                onClick={() => handleTextColorChange(colorKey, 'headline')}
                title={colorKey}
              />
            ))}
          </div>
        </div>
      </div>

      {/* Subheading Section */}
      <div className={styles.formGroup}>
        <div className={styles.labelRow}>
          <label className={styles.label}>Subheading</label>
        </div>
        <textarea
          value={currentSlide.subheading}
          onChange={(e) => handleSubheadingChange(e.target.value)}
          placeholder="Enter subheading text"
          className={styles.textarea}
          rows={3}
        />
        <div className={styles.formatToolbar}>
          <button
            className={`${styles.formatButton} ${currentSlide.subheadingFormatting.bold ? styles.active : ''}`}
            onClick={() => toggleBold('subheading')}
            title="Bold"
          >
            <strong>B</strong>
          </button>
          <button
            className={`${styles.formatButton} ${currentSlide.subheadingFormatting.italic ? styles.active : ''}`}
            onClick={() => toggleItalic('subheading')}
            title="Italic"
          >
            <em>I</em>
          </button>
          <div className={styles.colorPicker}>
            {(Object.keys(BRAND_COLORS) as BrandColor[]).map((colorKey) => (
              <button
                key={colorKey}
                className={styles.colorButton}
                style={{ backgroundColor: BRAND_COLORS[colorKey] }}
                onClick={() => handleTextColorChange(colorKey, 'subheading')}
                title={colorKey}
              />
            ))}
          </div>
        </div>
      </div>

      {/* Button Text Section */}
      <div className={styles.formGroup}>
        <label className={styles.label}>Button Text</label>
        <input
          type="text"
          value={currentSlide.button.text}
          onChange={(e) => handleButtonTextChange(e.target.value)}
          placeholder="e.g., Learn More, Buy Now"
          className={styles.input}
        />
      </div>

      {/* Button URL Section */}
      <div className={styles.formGroup}>
        <label className={styles.label}>Button URL</label>
        <input
          type="url"
          value={currentSlide.button.url}
          onChange={(e) => handleButtonUrlChange(e.target.value)}
          placeholder="e.g., https://example.com"
          className={styles.input}
        />
      </div>

      {/* Delete Button */}
      {sliderContent.slides.length > 1 && (
        <button className={styles.deleteButton} onClick={handleDeleteSlide}>
          Delete Slide
        </button>
      )}
    </div>
  );
}