import React, { useState, useCallback, useEffect, useRef } from 'react';
import { createPortal } from 'react-dom';
import { TravelEnquiryFormProps, FormData } from './types';
import {
  FormOverlay,
  FormContainer,
  CloseButton,
  FormTitle,
  FormSubtitle,
  ButtonRow,
  NavButton,
  FormRequiredNote
} from './styles';
import { INITIAL_FORM_DATA } from './constants';
import { validateStep, trackEnquiryEvent } from './utils';
import { submitEnquiry, ApiError } from './submitEnquiry';
import { StepIndicator } from './StepIndicator';
import { PersonalDetailsStep } from './PersonalDetailsStep';
import { TripDetailsStep } from './TripDetailsStep';
import { BudgetExtrasStep } from './BudgetExtrasStep';
import { SuccessScreen } from './SuccessScreen';
import { InlineMessage } from './InlineMessage';

export const TravelEnquiryForm: React.FC<TravelEnquiryFormProps> = ({
  isApp,
  onClose
}) => {
  const [currentStep, setCurrentStep] = useState(1);
  const [formData, setFormData] = useState<FormData>(INITIAL_FORM_DATA);
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitSuccess, setSubmitSuccess] = useState(false);
  const [submitError, setSubmitError] = useState('');
  const visitedSteps = useRef(new Set([1]));
  const containerRef = useRef<HTMLDivElement>(null);
  const trackedSteps = useRef(new Set<number>());

  useEffect(() => {
    const originalOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';

    return () => {
      document.body.style.overflow = originalOverflow;
    };
  }, []);

  /* ---------- step view tracking ---------- */
  useEffect(
    () => {
      if (trackedSteps.current.has(currentStep)) {
        return;
      }
      trackedSteps.current.add(currentStep);
      trackEnquiryEvent(
        `enquiry form : step ${currentStep} : display`,
        'automated'
      );
    },
    [currentStep]
  );

  const updateField = useCallback(
    (field: keyof FormData, value: string | number | boolean) => {
      setFormData(prev => ({ ...prev, [field]: value }));
      setErrors(prev => {
        if (prev[field]) {
          const next = { ...prev };
          delete next[field];
          return next;
        }
        return prev;
      });
    },
    []
  );

  /* ---------- navigation ---------- */
  const scrollToTop = () => {
    if (containerRef.current && containerRef.current.scrollTo) {
      containerRef.current.scrollTo(0, 0);
    }
  };

  const handleNext = () => {
    const { isValid, errors: stepErrors } = validateStep(currentStep, formData);
    if (!isValid) {
      setErrors(stepErrors);
      Object.values(stepErrors).forEach(message => {
        trackEnquiryEvent(
          `enquiry form : step ${currentStep} : error message displayed`,
          'automated',
          message
        );
      });
      return;
    }
    trackEnquiryEvent(`enquiry form : step ${currentStep} : next`, 'click');
    setErrors({});
    const nextStep = Math.min(currentStep + 1, 3);
    const isFirstVisit = !visitedSteps.current.has(nextStep);
    visitedSteps.current.add(nextStep);
    setCurrentStep(nextStep);
    if (isFirstVisit) {
      scrollToTop();
    }
  };

  const handleBack = () => {
    trackEnquiryEvent(`enquiry form : step ${currentStep} : back`, 'click');
    setErrors({});
    setCurrentStep(prev => Math.max(prev - 1, 1));
  };

  /* ---------- submission ---------- */
  const handleSubmit = async () => {
    const { isValid, errors: stepErrors } = validateStep(3, formData);
    if (!isValid) {
      setErrors(stepErrors);
      Object.values(stepErrors).forEach(message => {
        trackEnquiryEvent(
          `enquiry form : step ${currentStep} : error message displayed`,
          'automated',
          message
        );
      });
      return;
    }

    trackEnquiryEvent(
      `enquiry form : step ${currentStep} : submit enquiry`,
      'click'
    );
    setIsSubmitting(true);
    setSubmitError('');

    try {
      await submitEnquiry(formData);
      trackEnquiryEvent('enquiry form : submitted', 'automated');
      setSubmitSuccess(true);
    } catch (error) {
      // tslint:disable-next-line:no-console
      console.error('Form submission error:', error);
      const errorMessage =
        error instanceof ApiError
          ? error.message
          : 'Please try again or call us on';
      trackEnquiryEvent(
        `enquiry form : step ${currentStep} : error message displayed`,
        'automated',
        'Something went wrong when submitting your enquiry'
      );
      setSubmitError(errorMessage);
    } finally {
      setIsSubmitting(false);
    }
  };

  /* ---------- enter key → next/submit ---------- */
  const handleFormSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (currentStep < 3) {
      handleNext();
    } else {
      handleSubmit();
    }
  };

  if (submitSuccess) {
    return <SuccessScreen isApp={isApp} onClose={onClose} />;
  }

  /* ---------- step props ---------- */
  const stepProps = { isApp, formData, errors, updateField };

  /* ---------- main form ---------- */
  return createPortal(
    <FormOverlay isApp={isApp} onClick={onClose}>
      <FormContainer
        ref={containerRef}
        isApp={isApp}
        onClick={e => e.stopPropagation()}
        data-testid="travel-enquiry-form"
      >
        <CloseButton onClick={onClose} aria-label="Close form">
          ✕
        </CloseButton>
        <form onSubmit={handleFormSubmit} noValidate>
          <FormTitle isApp={isApp}>Enquiry form</FormTitle>
          <FormSubtitle isApp={isApp}>
            Fill in the form below to describe what you want from your next
            trip. We'll get back to you as soon as possible.
          </FormSubtitle>
          <FormRequiredNote isApp={isApp}>* required field</FormRequiredNote>

          <StepIndicator currentStep={currentStep} />

          {currentStep === 1 && <PersonalDetailsStep {...stepProps} />}
          {currentStep === 2 && <TripDetailsStep {...stepProps} />}
          {currentStep === 3 && <BudgetExtrasStep {...stepProps} />}

          {submitError && (
            <InlineMessage
              headline="Something went wrong when submitting your enquiry"
              message={submitError}
              phoneNumber={
                submitError === 'Please try again or call us on'
                  ? '0800 1342945'
                  : undefined
              }
            />
          )}

          <ButtonRow>
            {currentStep > 1 ? (
              <NavButton
                $variant="secondary"
                isApp={isApp}
                onClick={handleBack}
                type="button"
              >
                Back
              </NavButton>
            ) : null}

            {currentStep < 3 ? (
              <NavButton $variant="primary" isApp={isApp} type="submit">
                Next
              </NavButton>
            ) : (
              <NavButton
                $variant="primary"
                isApp={isApp}
                type="submit"
                disabled={isSubmitting}
              >
                {isSubmitting ? 'Submitting...' : 'Submit enquiry'}
              </NavButton>
            )}
          </ButtonRow>
        </form>
      </FormContainer>
    </FormOverlay>,
    document.body
  );
};