igny8/frontend/src/components/sites/TemplateCustomizer.tsx

/**
 * Template Customizer
 * Phase 7: Layout & Template System
 * Component for customizing template settings and styles
 */
import React, { useState } from 'react';
import { SettingsIcon, PaletteIcon, TypeIcon, LayoutIcon } from 'lucide-react';
import { Card } from '../../ui/card';
import Label from '../../form/Label';
import SelectDropdown from '../../form/SelectDropdown';
import Button from '../../ui/button/Button';

export interface TemplateCustomization {
  layout: string;
  colorScheme: string;
  typography: string;
  spacing: string;
  headerStyle: string;
  footerStyle: string;
  sidebarPosition?: 'left' | 'right' | 'none';
  customStyles?: Record<string, any>;
}

interface TemplateCustomizerProps {
  templateId: string;
  templateName: string;
  customization: TemplateCustomization;
  onChange: (customization: TemplateCustomization) => void;
  onSave?: () => void;
  onReset?: () => void;
}

export default function TemplateCustomizer({
  templateId,
  templateName,
  customization,
  onChange,
  onSave,
  onReset,
}: TemplateCustomizerProps) {
  const [activeTab, setActiveTab] = useState<'layout' | 'colors' | 'typography' | 'spacing'>('layout');

  const updateCustomization = (updates: Partial<TemplateCustomization>) => {
    onChange({ ...customization, ...updates });
  };

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-xl font-bold text-gray-900 dark:text-white">Customize: {templateName}</h2>
          <p className="text-sm text-gray-600 dark:text-gray-400">Adjust template settings and styles</p>
        </div>
        <div className="flex gap-2">
          {onReset && (
            <Button variant="outline" onClick={onReset}>
              Reset
            </Button>
          )}
          {onSave && (
            <Button variant="primary" onClick={onSave}>
              Save Changes
            </Button>
          )}
        </div>
      </div>

      {/* Tabs */}
      <div className="border-b border-gray-200 dark:border-gray-700">
        <div className="flex gap-4">
          <button
            type="button"
            onClick={() => setActiveTab('layout')}
            className={`px-4 py-2 font-medium border-b-2 transition-colors ${
              activeTab === 'layout'
                ? 'border-brand-500 text-brand-600 dark:text-brand-400'
                : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
            }`}
          >
            <LayoutIcon className="w-4 h-4 inline mr-2" />
            Layout
          </button>
          <button
            type="button"
            onClick={() => setActiveTab('colors')}
            className={`px-4 py-2 font-medium border-b-2 transition-colors ${
              activeTab === 'colors'
                ? 'border-brand-500 text-brand-600 dark:text-brand-400'
                : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
            }`}
          >
            <PaletteIcon className="w-4 h-4 inline mr-2" />
            Colors
          </button>
          <button
            type="button"
            onClick={() => setActiveTab('typography')}
            className={`px-4 py-2 font-medium border-b-2 transition-colors ${
              activeTab === 'typography'
                ? 'border-brand-500 text-brand-600 dark:text-brand-400'
                : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
            }`}
          >
            <TypeIcon className="w-4 h-4 inline mr-2" />
            Typography
          </button>
          <button
            type="button"
            onClick={() => setActiveTab('spacing')}
            className={`px-4 py-2 font-medium border-b-2 transition-colors ${
              activeTab === 'spacing'
                ? 'border-brand-500 text-brand-600 dark:text-brand-400'
                : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
            }`}
          >
            <SettingsIcon className="w-4 h-4 inline mr-2" />
            Spacing
          </button>
        </div>
      </div>

      {/* Layout Tab */}
      {activeTab === 'layout' && (
        <Card className="p-6">
          <div className="space-y-4">
            <div>
              <Label>Layout Style</Label>
              <SelectDropdown
                options={[
                  { value: 'default', label: 'Default' },
                  { value: 'wide', label: 'Wide' },
                  { value: 'narrow', label: 'Narrow' },
                  { value: 'fullwidth', label: 'Full Width' },
                ]}
                value={customization.layout}
                onChange={(value) => updateCustomization({ layout: value })}
              />
            </div>

            <div>
              <Label>Header Style</Label>
              <SelectDropdown
                options={[
                  { value: 'default', label: 'Default' },
                  { value: 'sticky', label: 'Sticky' },
                  { value: 'transparent', label: 'Transparent' },
                  { value: 'minimal', label: 'Minimal' },
                ]}
                value={customization.headerStyle}
                onChange={(value) => updateCustomization({ headerStyle: value })}
              />
            </div>

            <div>
              <Label>Footer Style</Label>
              <SelectDropdown
                options={[
                  { value: 'default', label: 'Default' },
                  { value: 'minimal', label: 'Minimal' },
                  { value: 'extended', label: 'Extended' },
                  { value: 'none', label: 'No Footer' },
                ]}
                value={customization.footerStyle}
                onChange={(value) => updateCustomization({ footerStyle: value })}
              />
            </div>

            {customization.sidebarPosition !== undefined && (
              <div>
                <Label>Sidebar Position</Label>
                <SelectDropdown
                  options={[
                    { value: 'left', label: 'Left' },
                    { value: 'right', label: 'Right' },
                    { value: 'none', label: 'No Sidebar' },
                  ]}
                  value={customization.sidebarPosition}
                  onChange={(value) => updateCustomization({ sidebarPosition: value as 'left' | 'right' | 'none' })}
                />
              </div>
            )}
          </div>
        </Card>
      )}

      {/* Colors Tab */}
      {activeTab === 'colors' && (
        <Card className="p-6">
          <div className="space-y-4">
            <div>
              <Label>Color Scheme</Label>
              <SelectDropdown
                options={[
                  { value: 'light', label: 'Light' },
                  { value: 'dark', label: 'Dark' },
                  { value: 'auto', label: 'Auto (System)' },
                ]}
                value={customization.colorScheme}
                onChange={(value) => updateCustomization({ colorScheme: value })}
              />
            </div>

            <div>
              <Label>Primary Color</Label>
              <div className="flex gap-2 mt-1">
                <input
                  type="color"
                  value={customization.customStyles?.primaryColor || '#3b82f6'}
                  onChange={(e) =>
                    updateCustomization({
                      customStyles: { ...customization.customStyles, primaryColor: e.target.value },
                    })
                  }
                  className="w-16 h-10 rounded border border-gray-300 dark:border-gray-700 cursor-pointer"
                />
                <input
                  type="text"
                  value={customization.customStyles?.primaryColor || '#3b82f6'}
                  onChange={(e) =>
                    updateCustomization({
                      customStyles: { ...customization.customStyles, primaryColor: e.target.value },
                    })
                  }
                  placeholder="#3b82f6"
                  className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
                />
              </div>
            </div>

            <div>
              <Label>Background Color</Label>
              <div className="flex gap-2 mt-1">
                <input
                  type="color"
                  value={customization.customStyles?.backgroundColor || '#ffffff'}
                  onChange={(e) =>
                    updateCustomization({
                      customStyles: { ...customization.customStyles, backgroundColor: e.target.value },
                    })
                  }
                  className="w-16 h-10 rounded border border-gray-300 dark:border-gray-700 cursor-pointer"
                />
                <input
                  type="text"
                  value={customization.customStyles?.backgroundColor || '#ffffff'}
                  onChange={(e) =>
                    updateCustomization({
                      customStyles: { ...customization.customStyles, backgroundColor: e.target.value },
                    })
                  }
                  placeholder="#ffffff"
                  className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
                />
              </div>
            </div>
          </div>
        </Card>
      )}

      {/* Typography Tab */}
      {activeTab === 'typography' && (
        <Card className="p-6">
          <div className="space-y-4">
            <div>
              <Label>Typography Style</Label>
              <SelectDropdown
                options={[
                  { value: 'sans-serif', label: 'Sans Serif' },
                  { value: 'serif', label: 'Serif' },
                  { value: 'monospace', label: 'Monospace' },
                  { value: 'custom', label: 'Custom' },
                ]}
                value={customization.typography}
                onChange={(value) => updateCustomization({ typography: value })}
              />
            </div>

            <div>
              <Label>Heading Font Size</Label>
              <SelectDropdown
                options={[
                  { value: 'small', label: 'Small' },
                  { value: 'medium', label: 'Medium' },
                  { value: 'large', label: 'Large' },
                  { value: 'xlarge', label: 'Extra Large' },
                ]}
                value={customization.customStyles?.headingSize || 'medium'}
                onChange={(value) =>
                  updateCustomization({
                    customStyles: { ...customization.customStyles, headingSize: value },
                  })
                }
              />
            </div>

            <div>
              <Label>Body Font Size</Label>
              <SelectDropdown
                options={[
                  { value: 'small', label: 'Small (14px)' },
                  { value: 'medium', label: 'Medium (16px)' },
                  { value: 'large', label: 'Large (18px)' },
                ]}
                value={customization.customStyles?.bodySize || 'medium'}
                onChange={(value) =>
                  updateCustomization({
                    customStyles: { ...customization.customStyles, bodySize: value },
                  })
                }
              />
            </div>
          </div>
        </Card>
      )}

      {/* Spacing Tab */}
      {activeTab === 'spacing' && (
        <Card className="p-6">
          <div className="space-y-4">
            <div>
              <Label>Content Spacing</Label>
              <SelectDropdown
                options={[
                  { value: 'compact', label: 'Compact' },
                  { value: 'normal', label: 'Normal' },
                  { value: 'relaxed', label: 'Relaxed' },
                  { value: 'spacious', label: 'Spacious' },
                ]}
                value={customization.spacing}
                onChange={(value) => updateCustomization({ spacing: value })}
              />
            </div>

            <div>
              <Label>Section Padding</Label>
              <SelectDropdown
                options={[
                  { value: 'none', label: 'None' },
                  { value: 'small', label: 'Small' },
                  { value: 'medium', label: 'Medium' },
                  { value: 'large', label: 'Large' },
                ]}
                value={customization.customStyles?.sectionPadding || 'medium'}
                onChange={(value) =>
                  updateCustomization({
                    customStyles: { ...customization.customStyles, sectionPadding: value },
                  })
                }
              />
            </div>

            <div>
              <Label>Container Max Width</Label>
              <SelectDropdown
                options={[
                  { value: 'sm', label: 'Small (640px)' },
                  { value: 'md', label: 'Medium (768px)' },
                  { value: 'lg', label: 'Large (1024px)' },
                  { value: 'xl', label: 'Extra Large (1280px)' },
                  { value: 'full', label: 'Full Width' },
                ]}
                value={customization.customStyles?.containerWidth || 'lg'}
                onChange={(value) =>
                  updateCustomization({
                    customStyles: { ...customization.customStyles, containerWidth: value },
                  })
                }
              />
            </div>
          </div>
        </Card>
      )}
    </div>
  );
}