'use client';

import React, { useState, useEffect } from 'react';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/navigation';
import { SliderEditorProvider, useSliderEditor } from '@/app/components/SliderEditorContext';
import SliderCarousel from '@/app/components/SliderCarousel';
import SliderFormSection from '@/app/components/SliderFormSection';
import SliderPreview from '@/app/components/SliderPreview';
import ConfirmDialog from '@/app/components/ConfirmDialog';
import TierGate from '@/components/ui/TierGate';
import Button from '@/components/ui/Button';
import { getHeroSlider } from '@/app/actions/slider';
import { hasSliderEditorAccess } from '@/lib/cms/types';
import { SliderContent } from '@/types/slider';
import styles from './slider-editor.module.css';

interface SliderEditorPageContentProps {
  dealerId: string;
}

function SliderEditorPageContent({ dealerId }: SliderEditorPageContentProps) {
  const router = useRouter();
  const { formState, saveAndPublish, discardChanges, resetToDefault } = useSliderEditor();
  const [showConfirm, setShowConfirm] = useState(false);
  const [showResetConfirm, setShowResetConfirm] = useState(false);
  const [publishing, setPublishing] = useState(false);
  const [publishSuccess, setPublishSuccess] = useState(false);
  const [publishError, setPublishError] = useState<string | null>(null);

  const handleCancel = () => {
    if (formState.hasUnsavedChanges) {
      setShowConfirm(true);
    } else {
      router.push('/dashboard');
    }
  };

  const handleConfirmDiscard = () => {
    discardChanges();
    setShowConfirm(false);
    router.push('/dashboard');
  };

  const handleResetToDefault = () => {
    setShowResetConfirm(true);
  };

  const handleConfirmReset = () => {
    resetToDefault();
    setShowResetConfirm(false);
  };

  const handlePublish = async () => {
    if (publishing) return; // Guard against double-clicks
    setPublishing(true);
    setPublishError(null);
    setPublishSuccess(false);

    try {
      // Step 1: Save slider content
      await saveAndPublish();

      // Step 2: Publish the site
      const publishResponse = await fetch(`/api/dealers/${dealerId}/publish`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({}),
      });

      if (!publishResponse.ok) {
        const publishData = await publishResponse.json();
        throw new Error(publishData.error || 'Failed to publish site');
      }

      setPublishSuccess(true);
      setTimeout(() => setPublishSuccess(false), 3000);
    } catch (error) {
      console.error('Failed to publish:', error);
      setPublishError(error instanceof Error ? error.message : 'Failed to publish');
    } finally {
      setPublishing(false);
    }
  };

  return (
    <>
      <div className={styles.pageContainer}>
        {/* Header */}
        <div className={styles.pageHeader}>
          <button onClick={handleCancel} className={styles.backButton}>
            ← Back to Dashboard
          </button>
          <div className={styles.headerActions}>
            {publishSuccess && <span className={styles.successMessage}>Published!</span>}
            {publishError && <span className={styles.errorMessage}>{publishError}</span>}
            <button onClick={handleResetToDefault} className={styles.resetButton}>
              Reset to Default
            </button>
            <button onClick={handlePublish} disabled={publishing} className={styles.publishButton}>
              {publishing ? 'Publishing...' : 'Publish'}
            </button>
          </div>
        </div>

        {/* Main Content Area */}
        <div className={styles.mainContent}>
          {/* Form Section */}
          <div className={styles.formSection}>
            <SliderFormSection />
          </div>

          {/* Preview Section */}
          <div className={styles.previewSection}>
            <SliderPreview />
          </div>

          {/* Slide Carousel - Right Sidebar */}
          <div className={styles.carouselSection}>
            <SliderCarousel />
          </div>
        </div>
      </div>

      {/* Confirmation Dialog - Discard Changes */}
      {showConfirm && (
        <ConfirmDialog
          title="Discard Changes"
          message="All unsaved changes will be lost. Are you sure?"
          onConfirm={handleConfirmDiscard}
          onCancel={() => setShowConfirm(false)}
        />
      )}

      {/* Confirmation Dialog - Reset to Default */}
      {showResetConfirm && (
        <ConfirmDialog
          title="Reset to Default Slider"
          message="This will replace your current slider with the default AMSOIL-branded slider. You can customize it afterward and publish when ready."
          onConfirm={handleConfirmReset}
          onCancel={() => setShowResetConfirm(false)}
        />
      )}
    </>
  );
}

export default function SliderEditorPage() {
  const { data: session, status: sessionStatus } = useSession();
  const router = useRouter();
  const [sliderContent, setSliderContent] = useState<SliderContent | null>(null);
  const [dealerId, setDealerId] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [upgradeRequired, setUpgradeRequired] = useState(false);

  // Fetch existing slider content and dealer data on mount
  useEffect(() => {
    // Wait for session to finish loading before checking auth
    if (sessionStatus === 'loading') return;

    const fetchData = async () => {
      if (!session?.user?.id) {
        router.push('/dashboard');
        return;
      }

      try {
        // Fetch slider content and dealer data in parallel
        const [existingSlider, dealerResponse] = await Promise.all([
          getHeroSlider(session.user.id),
          fetch('/api/dealer'),
        ]);

        setSliderContent(existingSlider);

        if (dealerResponse.ok) {
          const dealerData = await dealerResponse.json();
          setDealerId(dealerData.id);

          // Check tier access
          if (!hasSliderEditorAccess(dealerData.subscriptionTier)) {
            setUpgradeRequired(true);
          }
        }
      } catch (error) {
        console.error('Failed to fetch data:', error);
        setSliderContent(null);
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();
  }, [session?.user?.id, sessionStatus, router]);

  if (isLoading || sessionStatus === 'loading') {
    return (
      <div className={styles.loadingContainer}>
        <p>Loading slider editor...</p>
      </div>
    );
  }

  if (upgradeRequired) {
    return (
      <TierGate
        title="Enhanced Tier Required"
        description="The Hero Slider Editor lets you create an engaging image carousel for your dealer site homepage."
        features={[
          'Add multiple hero slides with images',
          'Customize captions and call-to-action buttons',
          'Drag-and-drop slide reordering',
          'Live preview while editing',
          'Auto-publish changes to your site',
        ]}
        requiredTier="enhanced"
        backLink={{ href: '/dashboard', text: 'Back to Dashboard' }}
      />
    );
  }

  if (!dealerId) {
    return (
      <div className={styles.loadingContainer}>
        <p>Failed to load dealer data. Please try again.</p>
        <Button
          variant="primary"
          onClick={() => router.push('/dashboard')}
          style={{ marginTop: '1rem' }}
        >
          Return to Dashboard
        </Button>
      </div>
    );
  }

  return (
    <SliderEditorProvider initialSliderContent={sliderContent ?? undefined}>
      <SliderEditorPageContent dealerId={dealerId} />
    </SliderEditorProvider>
  );
}