'use client';

import React, { useState } from 'react';
import { SliderEditorProvider, useSliderEditor } from './SliderEditorContext';
import SliderCarousel from './SliderCarousel';
import SliderFormSection from './SliderFormSection';
import SliderPreview from './SliderPreview';
import ConfirmDialog from './ConfirmDialog';
import Button from '@/components/ui/Button';
import styles from './SliderEditorModal.module.css';
import { SliderContent } from '@/types/slider';

interface SliderEditorModalProps {
  isOpen: boolean;
  onClose: () => void;
  dealerId: string;
  initialContent?: SliderContent;
}

interface SliderEditorModalContentProps {
  onClose: () => void;
}

function SliderEditorModalContent({ onClose }: SliderEditorModalContentProps) {
  const { formState, saveAndPublish, discardChanges } = useSliderEditor();
  const [showConfirm, setShowConfirm] = useState(false);
  const [confirmType, setConfirmType] = useState<'discard' | 'save'>('discard');
  const [formMouseOver, setFormMouseOver] = useState(false);

  const handleSaveClick = () => {
    setConfirmType('save');
    setShowConfirm(true);
  };

  const handleConfirmSave = async () => {
    await saveAndPublish();
    setShowConfirm(false);
    onClose();
  };

  const handleCancel = () => {
    if (formState.hasUnsavedChanges) {
      setConfirmType('discard');
      setShowConfirm(true);
    } else {
      onClose();
    }
  };

  const handleConfirmDiscard = () => {
    discardChanges();
    setShowConfirm(false);
    onClose();
  };

  // Calculate responsive widths
  const formWidth = formMouseOver ? '50%' : '40%';
  const previewWidth = formMouseOver ? '50%' : '60%';

  return (
    <div className={styles.modalOverlay}>
      <div className={styles.modalContent}>
        {/* Header */}
        <div className={styles.modalHeader}>
          <h2>Customize Your Hero Slider</h2>
          <Button variant="icon" onClick={handleCancel} aria-label="Close">
            Close
          </Button>
        </div>

        {/* Main Content Area */}
        <div className={styles.mainContent}>
          {/* Form Section */}
          <div
            className={styles.formSection}
            style={{ width: formWidth }}
            onMouseEnter={() => setFormMouseOver(true)}
            onMouseLeave={() => setFormMouseOver(false)}
          >
            <SliderFormSection />
          </div>

          {/* Preview Section */}
          <div className={styles.previewSection} style={{ width: previewWidth }}>
            <SliderPreview />
          </div>
        </div>

        {/* Slide Carousel */}
        <SliderCarousel />

        {/* Footer */}
        <div className={styles.modalFooter}>
          <Button variant="secondary" onClick={handleCancel}>
            Cancel
          </Button>
          <Button variant="primary" onClick={handleSaveClick}>
            Save Changes
          </Button>
        </div>
      </div>

      {/* Confirmation Dialog */}
      {showConfirm && (
        <ConfirmDialog
          title={confirmType === 'discard' ? 'Discard Changes' : 'Publish Changes'}
          message={
            confirmType === 'discard'
              ? 'All unsaved changes will be lost. Are you sure?'
              : 'These changes will be published to your dealer page. Continue?'
          }
          onConfirm={confirmType === 'discard' ? handleConfirmDiscard : handleConfirmSave}
          onCancel={() => setShowConfirm(false)}
        />
      )}
    </div>
  );
}

export default function SliderEditorModal({
  isOpen,
  onClose,
  // dealerId is passed but not currently used - kept for future implementation
  dealerId: _dealerId,
  initialContent,
}: SliderEditorModalProps) {
  if (!isOpen) return null;

  return (
    <SliderEditorProvider initialSliderContent={initialContent}>
      <SliderEditorModalContent onClose={onClose} />
    </SliderEditorProvider>
  );
}