/**
 * Email Customizer - Main Component
 * Full-screen email customization interface with live preview
 */

import { useState, useEffect, useCallback } from 'react';
import { Button } from '@/components/ui/button';
import { Loader2, Save, X, Undo2, Redo2 } from 'lucide-react';
import { toast } from 'sonner';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { CustomizerSidebar } from './customizer-sidebar';
import { CustomizerPreview } from './customizer-preview';
import { useEmailCustomizer } from './hooks/use-email-customizer';
import type { EmailContentSettings, PlaceholderConfig, PlaceholderCategoryLabel, ProductCardConfig, CouponDisplayConfig } from './sections';

// Hide body scrollbar when customizer is open
function useBodyScrollLock() {
  useEffect(() => {
    const originalStyle = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.body.style.overflow = originalStyle;
    };
  }, []);
}

interface EmailTypeInfo {
  id: string;
  label: string;
  defaultContent: EmailContentSettings;
}

interface EmailCustomizerProps {
  onClose: () => void;
  emailType: EmailTypeInfo;
  initialContent: EmailContentSettings;
  onSaveContent: (content: EmailContentSettings) => void;
  /** Feature-specific placeholders (defaults to subscription set). */
  placeholders?: PlaceholderConfig[];
  /** Feature-specific category labels. */
  placeholderCategories?: Record<string, PlaceholderCategoryLabel>;
  /** Hint shown under the subject field. */
  subjectPlaceholderHint?: string;
  /** Optional product card config for product-oriented emails (e.g. Back In Stock). */
  productCard?: ProductCardConfig;
  /** Callback to persist product card changes back to feature settings. */
  onSaveProductCard?: (card: ProductCardConfig) => void;
  /** Optional coupon display config for emails with coupons. */
  couponDisplay?: CouponDisplayConfig;
  /** Callback to persist coupon display changes back to feature settings. */
  onSaveCouponDisplay?: (config: CouponDisplayConfig) => void;
}

export function EmailCustomizer({
  onClose,
  emailType,
  initialContent,
  onSaveContent,
  placeholders,
  placeholderCategories,
  subjectPlaceholderHint,
  productCard: initialProductCard,
  onSaveProductCard,
  couponDisplay: initialCouponDisplay,
  onSaveCouponDisplay,
}: EmailCustomizerProps) {
  // Lock body scroll when customizer is open
  useBodyScrollLock();

  const {
    settings,
    updateNestedSettings,
    devicePreview,
    setDevicePreview,
    darkModePreview,
    setDarkModePreview,
    isLoading,
    isSaving,
    saveSettings,
    resetToDefaults,
    sendTestEmail,
    isSendingTest,
    hasChanges: hasDesignChanges,
    undo,
    redo,
    canUndo,
    canRedo,
  } = useEmailCustomizer();

  // Local state for email content
  const [emailContent, setEmailContent] = useState<EmailContentSettings>(initialContent);
  const [hasContentChanges, setHasContentChanges] = useState(false);

  // Local state for product card (only used by product-oriented emails)
  const [productCard, setProductCard] = useState<ProductCardConfig | undefined>(initialProductCard);

  // Local state for coupon display (only used by emails with coupons)
  const [couponDisplay, setCouponDisplay] = useState<CouponDisplayConfig | undefined>(initialCouponDisplay);

  // Reset content state when email type changes
  useEffect(() => {
    setEmailContent(initialContent);
    setHasContentChanges(false);
  }, [emailType.id, initialContent]);

  useEffect(() => {
    setProductCard(initialProductCard);
  }, [emailType.id, initialProductCard]);

  useEffect(() => {
    setCouponDisplay(initialCouponDisplay);
  }, [emailType.id, initialCouponDisplay]);

  const updateEmailContent = useCallback((updates: Partial<EmailContentSettings>) => {
    setEmailContent((prev) => ({ ...prev, ...updates }));
    setHasContentChanges(true);
  }, []);

  const updateProductCard = useCallback((updates: Partial<ProductCardConfig>) => {
    setProductCard((prev) => prev ? { ...prev, ...updates } : prev);
    setHasContentChanges(true);
  }, []);

  const updateCouponDisplay = useCallback((updates: Partial<CouponDisplayConfig>) => {
    setCouponDisplay((prev) => prev ? { ...prev, ...updates } : prev);
    setHasContentChanges(true);
  }, []);

  const hasChanges = hasDesignChanges || hasContentChanges;

  const handleSave = async () => {
    try {
      // Save design settings
      await saveSettings();
      // Save content via callback (parent handles persisting to subscription settings)
      onSaveContent(emailContent);
      // Save product card if present
      if (productCard && onSaveProductCard) {
        onSaveProductCard(productCard);
      }
      // Save coupon display if present
      if (couponDisplay && onSaveCouponDisplay) {
        onSaveCouponDisplay(couponDisplay);
      }
      setHasContentChanges(false);
      toast.success('Your email customization settings have been saved.');
    } catch {
      toast.error('Failed to save settings. Please try again.');
    }
  };

  const handleSendTestEmail = async (email: string, emailTypeId: string) => {
    try {
      await sendTestEmail(email, emailTypeId);
      toast.success(`A test email has been sent to ${email}.`);
    } catch {
      toast.error('Failed to send test email. Please try again.');
      throw new Error('Failed to send test email');
    }
  };

  const handleClose = () => {
    if (hasChanges) {
      if (window.confirm('You have unsaved changes. Are you sure you want to close?')) {
        onClose();
      }
    } else {
      onClose();
    }
  };

  // Keyboard shortcuts for undo/redo
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if ((e.ctrlKey || e.metaKey) && e.key === 'z') {
        if (e.shiftKey) {
          e.preventDefault();
          redo();
        } else {
          e.preventDefault();
          undo();
        }
      }
      if ((e.ctrlKey || e.metaKey) && e.key === 'y') {
        e.preventDefault();
        redo();
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [undo, redo]);

  if (isLoading) {
    return (
      <div className="fixed inset-0 z-50 bg-background flex items-center justify-center">
        <div className="flex flex-col items-center gap-4">
          <Loader2 className="h-8 w-8 animate-spin text-primary" />
          <p className="text-muted-foreground">Loading customizer...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="fixed inset-0 z-50 bg-background flex flex-col">
      {/* Top Bar */}
      <div className="flex items-center justify-between px-4 py-3 border-b bg-background">
        <div className="flex items-center gap-4">
          <Button variant="ghost" size="icon" onClick={handleClose}>
            <X className="h-5 w-5" />
          </Button>
          <div>
            <h2 className="font-semibold">Customize: {emailType.label}</h2>
            <p className="text-sm text-muted-foreground">
              Edit content and design for this email
            </p>
          </div>
          
          {/* Undo/Redo Buttons */}
          <div className="flex items-center gap-1 ml-4 border-l pl-4">
            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={undo}
                    disabled={!canUndo}
                    className="h-8 w-8"
                  >
                    <Undo2 className="h-4 w-4" />
                  </Button>
                </TooltipTrigger>
                <TooltipContent>
                  <p>Undo (Ctrl+Z)</p>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>
            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={redo}
                    disabled={!canRedo}
                    className="h-8 w-8"
                  >
                    <Redo2 className="h-4 w-4" />
                  </Button>
                </TooltipTrigger>
                <TooltipContent>
                  <p>Redo (Ctrl+Y)</p>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>
          </div>
        </div>

        <div className="flex items-center gap-2">
          {hasChanges && (
            <span className="text-sm text-amber-600 mr-2">Unsaved changes</span>
          )}
          <Button variant="outline" onClick={handleClose}>
            Cancel
          </Button>
          <Button onClick={handleSave} disabled={isSaving || !hasChanges}>
            {isSaving ? (
              <>
                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                Saving...
              </>
            ) : (
              <>
                <Save className="h-4 w-4 mr-2" />
                Save Changes
              </>
            )}
          </Button>
        </div>
      </div>

      {/* Main Content */}
      <div className="flex-1 flex overflow-hidden">
        {/* Sidebar - Customization Options */}
        <div className="w-80 flex-shrink-0">
          <CustomizerSidebar
            settings={settings}
            emailContent={emailContent}
            emailTypeLabel={emailType.label}
            onUpdateContent={updateEmailContent}
            onUpdateLogo={(updates) => updateNestedSettings('logo', updates)}
            onUpdateColors={(updates) => updateNestedSettings('colors', updates)}
            onUpdateTypography={(updates) =>
              updateNestedSettings('typography', updates)
            }
            onUpdateLayout={(updates) => updateNestedSettings('layout', updates)}
            onUpdateSender={(updates) => updateNestedSettings('sender', updates)}
            onUpdateTable={(updates) => updateNestedSettings('table', updates)}
            onUpdateFooter={(updates) => updateNestedSettings('footer', updates)}
            onResetToDefaults={resetToDefaults}
            subjectPlaceholderHint={subjectPlaceholderHint}
            placeholders={placeholders}
            placeholderCategories={placeholderCategories}
            productCard={productCard}
            onUpdateProductCard={updateProductCard}
            couponDisplay={couponDisplay}
            onUpdateCouponDisplay={updateCouponDisplay}
          />
        </div>

        {/* Preview Panel */}
        <div className="flex-1">
          <CustomizerPreview
            settings={settings}
            devicePreview={devicePreview}
            onDeviceChange={setDevicePreview}
            darkModePreview={darkModePreview}
            onDarkModeChange={setDarkModePreview}
            onSendTestEmail={handleSendTestEmail}
            isSendingTest={isSendingTest}
            selectedEmailType={emailType.id}
            emailHeading={emailContent.heading}
            emailBody={emailContent.body}
            emailAdditionalContent={emailContent.additionalContent}
            emailPreheaderText={emailContent.preheaderText}
            productCard={productCard}
            couponDisplay={couponDisplay}
          />
        </div>
      </div>
    </div>
  );
}

export default EmailCustomizer;