/**
 * Element Section Component
 * Week 21 V2 - Visual Element Editor
 * 
 * A collapsible section for editing a specific chat element.
 * Contains subsections for different setting categories.
 */

import React, { useState } from 'react';
import { ChevronDown, ChevronUp } from 'lucide-react';
import { t } from '@/lib/i18n';

interface SubSectionProps {
    title: string;
    children: React.ReactNode;
}

interface ElementSectionProps {
    title: string;
    description?: string;
    icon?: React.ReactNode;
    defaultExpanded?: boolean;
    children: React.ReactNode;
    preview?: React.ReactNode;
}

/**
 * SubSection - A titled group within an ElementSection
 */
export const SubSection: React.FC<SubSectionProps> = ({ title, children }) => {
    return (
        <div className="space-y-4">
            <h5 className="text-sm font-medium text-gray-600 border-b border-gray-100 pb-2">
                {title}
            </h5>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {children}
            </div>
        </div>
    );
};

/**
 * ElementSection - Main container for element settings
 */
export const ElementSection: React.FC<ElementSectionProps> = ({
    title,
    description,
    icon,
    defaultExpanded = false,
    children,
    preview,
}) => {
    const [isExpanded, setIsExpanded] = useState(defaultExpanded);
    
    return (
        <div className="border border-gray-200 rounded-lg bg-white overflow-hidden">
            {/* Header - Clickable */}
            <button
                type="button"
                onClick={() => setIsExpanded(!isExpanded)}
                className="w-full px-5 py-4 flex items-center justify-between hover:bg-gray-50 transition-colors"
            >
                <div className="flex items-center gap-3">
                    {icon && (
                        <div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center text-primary">
                            {icon}
                        </div>
                    )}
                    <div className="text-right">
                        <h4 className="font-medium text-gray-900">{title}</h4>
                        {description && (
                            <p className="text-sm text-gray-500">{description}</p>
                        )}
                    </div>
                </div>
                
                <div className="flex items-center gap-3">
                    {/* Mini Preview when collapsed */}
                    {!isExpanded && preview && (
                        <div className="hidden md:block">
                            {preview}
                        </div>
                    )}
                    
                    {isExpanded ? (
                        <ChevronUp className="w-5 h-5 text-gray-400" />
                    ) : (
                        <ChevronDown className="w-5 h-5 text-gray-400" />
                    )}
                </div>
            </button>
            
            {/* Content - Collapsible */}
            {isExpanded && (
                <div className="px-5 pb-5 border-t border-gray-100">
                    <div className="grid grid-cols-1 xl:grid-cols-3 gap-6 pt-5">
                        {/* Settings */}
                        <div className="xl:col-span-2 space-y-6">
                            {children}
                        </div>
                        
                        {/* Preview */}
                        {preview && (
                            <div className="xl:col-span-1">
                                <div className="sticky top-4">
                                    <div className="text-xs font-medium text-gray-500 mb-2">{t('Preview')}</div>
                                    <div className="bg-gray-100 rounded-lg p-4">
                                        {preview}
                                    </div>
                                </div>
                            </div>
                        )}
                    </div>
                </div>
            )}
        </div>
    );
};

export default ElementSection;


