/**
 * Email Customizer Sidebar
 * Contains all customization sections
 */

import { ScrollArea } from '@/components/ui/scroll-area';
import { Button } from '@/components/ui/button';
import { RotateCcw } from 'lucide-react';
import {
  ContentSection,
  BrandingSection,
  ColorsSection,
  TypographySection,
  LayoutSection,
  SenderSection,
  FooterSection,
  TableSection,
  ProductDisplaySection,
  PlaceholdersSection,
  CouponDisplaySection,
} from './sections';
import type { EmailCustomizerSettings } from './types';
import type { EmailContentSettings, PlaceholderConfig, PlaceholderCategoryLabel, ProductCardConfig, CouponDisplayConfig } from './sections';

interface CustomizerSidebarProps {
  settings: EmailCustomizerSettings;
  emailContent: EmailContentSettings;
  emailTypeLabel: string;
  onUpdateContent: (updates: Partial<EmailContentSettings>) => void;
  onUpdateLogo: (updates: Partial<EmailCustomizerSettings['logo']>) => void;
  onUpdateColors: (updates: Partial<EmailCustomizerSettings['colors']>) => void;
  onUpdateTypography: (updates: Partial<EmailCustomizerSettings['typography']>) => void;
  onUpdateLayout: (updates: Partial<EmailCustomizerSettings['layout']>) => void;
  onUpdateFooter: (updates: Partial<EmailCustomizerSettings['footer']>) => void;
  onUpdateSender: (updates: Partial<EmailCustomizerSettings['sender']>) => void;
  onUpdateTable: (updates: Partial<EmailCustomizerSettings['table']>) => void;
  onResetToDefaults: () => void;
  /** Optional hint shown under the subject field. */
  subjectPlaceholderHint?: string;
  /** Feature-specific placeholders. */
  placeholders?: PlaceholderConfig[];
  /** Feature-specific category label map. */
  placeholderCategories?: Record<string, PlaceholderCategoryLabel>;
  /** Optional product card config (for product-oriented emails). */
  productCard?: ProductCardConfig;
  /** Callback when product card settings change. */
  onUpdateProductCard?: (updates: Partial<ProductCardConfig>) => void;
  /** Optional coupon display config (for emails with coupons). */
  couponDisplay?: CouponDisplayConfig;
  /** Callback when coupon display settings change. */
  onUpdateCouponDisplay?: (updates: Partial<CouponDisplayConfig>) => void;
}

export function CustomizerSidebar({
  settings,
  emailContent,
  emailTypeLabel,
  onUpdateContent,
  onUpdateLogo,
  onUpdateColors,
  onUpdateTypography,
  onUpdateLayout,
  onUpdateFooter,
  onUpdateSender,
  onUpdateTable,
  onResetToDefaults,
  subjectPlaceholderHint,
  placeholders,
  placeholderCategories,
  productCard,
  onUpdateProductCard,
  couponDisplay,
  onUpdateCouponDisplay,
}: CustomizerSidebarProps) {
  return (
    <div className="flex flex-col h-full border-r">
      {/* Header */}
      <div className="p-4 border-b flex items-center justify-between">
        <h3 className="font-semibold">Customize Email</h3>
        <Button
          variant="ghost"
          size="sm"
          onClick={onResetToDefaults}
          className="text-muted-foreground hover:text-foreground"
        >
          <RotateCcw className="h-4 w-4 mr-1" />
          Reset
        </Button>
      </div>

      {/* Scrollable Sections */}
      <ScrollArea className="flex-1">
        <ContentSection
          content={emailContent}
          onUpdate={onUpdateContent}
          emailTypeLabel={emailTypeLabel}
          defaultOpen={true}
          subjectPlaceholderHint={subjectPlaceholderHint}
        />
        {productCard && onUpdateProductCard && (
          <ProductDisplaySection
            productCard={productCard}
            onUpdate={onUpdateProductCard}
          />
        )}
        {couponDisplay && onUpdateCouponDisplay && (
          <CouponDisplaySection
            config={couponDisplay}
            onUpdate={onUpdateCouponDisplay}
          />
        )}
        <PlaceholdersSection
          placeholders={placeholders}
          categoryLabels={placeholderCategories}
        />
        <BrandingSection logo={settings.logo} onUpdate={onUpdateLogo} />
        <ColorsSection colors={settings.colors} onUpdate={onUpdateColors} />
        <TypographySection
          typography={settings.typography}
          onUpdate={onUpdateTypography}
        />
        <LayoutSection layout={settings.layout} onUpdate={onUpdateLayout} />
        <SenderSection sender={settings.sender} onUpdate={onUpdateSender} />
        <TableSection table={settings.table} onUpdate={onUpdateTable} />
        <FooterSection footer={settings.footer} onUpdate={onUpdateFooter} />
      </ScrollArea>
    </div>
  );
}

export default CustomizerSidebar;