import React from 'react';
import { cn } from '@/lib/utils';
import { __ } from '@/lib/i18n';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import {
    Accordion,
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
} from '@/components/ui/accordion';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Slider } from '@/components/ui/slider';
import {
    Settings,
    PanelRightClose,
    PanelRight,
    Trash2,
    ExternalLink,
    Palette,
    Type,
    Home
} from 'lucide-react';
import { InspectorField, SectionProp } from './InspectorField';
import { InspectorRepeater } from './InspectorRepeater';
import { MediaUploader } from '@/components/MediaUploader';
import { SectionStyles, ElementStyle, PageItem } from '../store/usePageEditorStore';

interface Section {
    id: string;
    type: string;
    layoutVariant?: string;
    colorScheme?: string;
    styles?: SectionStyles;
    elementStyles?: Record<string, ElementStyle>;
    props: Record<string, SectionProp>;
}

interface InspectorPanelProps {
    page: PageItem | null;
    selectedSection: Section | null;
    isCollapsed: boolean;
    isTemplate: boolean;
    availableSources: { value: string; label: string }[];
    onToggleCollapse: () => void;
    onSectionPropChange: (propName: string, value: SectionProp) => void;
    onLayoutChange: (layout: string) => void;
    onColorSchemeChange: (scheme: string) => void;
    onSectionStylesChange: (styles: Partial<SectionStyles>) => void;
    onElementStylesChange: (fieldName: string, styles: Partial<ElementStyle>) => void;
    onDeleteSection: () => void;
    onSetAsSpaLanding?: () => void;
    onUnsetSpaLanding?: () => void;
    onDeletePage?: () => void;
    onContainerWidthChange?: (width: 'boxed' | 'fullwidth') => void;
}

// Section field configurations
const SECTION_FIELDS: Record<string, { name: string; label: string; type: 'text' | 'textarea' | 'url' | 'image' | 'rte'; dynamic?: boolean }[]> = {
    hero: [
        { name: 'title', label: 'Title', type: 'text', dynamic: true },
        { name: 'subtitle', label: 'Subtitle', type: 'text', dynamic: true },
        { name: 'image', label: 'Image URL', type: 'url', dynamic: true },
        { name: 'cta_text', label: 'Button Text', type: 'text' },
        { name: 'cta_url', label: 'Button URL', type: 'url' },
    ],
    content: [
        { name: 'content', label: 'Content', type: 'rte', dynamic: true },
        { name: 'cta_text', label: 'Button Text', type: 'text' },
        { name: 'cta_url', label: 'Button URL', type: 'url' },
    ],
    'image-text': [
        { name: 'title', label: 'Title', type: 'text', dynamic: true },
        { name: 'text', label: 'Text', type: 'textarea', dynamic: true },
        { name: 'image', label: 'Image URL', type: 'url', dynamic: true },
        { name: 'cta_text', label: 'Button Text', type: 'text' },
        { name: 'cta_url', label: 'Button URL', type: 'url' },
    ],
    'feature-grid': [
        { name: 'heading', label: 'Heading', type: 'text' },
    ],
    'cta-banner': [
        { name: 'title', label: 'Title', type: 'text' },
        { name: 'text', label: 'Description', type: 'text' },
        { name: 'button_text', label: 'Button Text', type: 'text' },
        { name: 'button_url', label: 'Button URL', type: 'url' },
    ],
    'contact-form': [
        { name: 'title', label: 'Title', type: 'text' },
        { name: 'webhook_url', label: 'Webhook URL', type: 'url' },
        { name: 'redirect_url', label: 'Redirect URL', type: 'url' },
    ],
};

const LAYOUT_OPTIONS: Record<string, { value: string; label: string }[]> = {
    hero: [
        { value: 'default', label: 'Centered' },
        { value: 'hero-left-image', label: 'Image Left' },
        { value: 'hero-right-image', label: 'Image Right' },
    ],
    'image-text': [
        { value: 'image-left', label: 'Image Left' },
        { value: 'image-right', label: 'Image Right' },
    ],
    'feature-grid': [
        { value: 'grid-2', label: '2 Columns' },
        { value: 'grid-3', label: '3 Columns' },
        { value: 'grid-4', label: '4 Columns' },
    ],
    content: [
        { value: 'default', label: 'Full Width' },
        { value: 'narrow', label: 'Narrow' },
        { value: 'medium', label: 'Medium' },
    ],
};

const COLOR_SCHEMES = [
    { value: 'default', label: 'Default' },
    { value: 'primary', label: 'Primary' },
    { value: 'secondary', label: 'Secondary' },
    { value: 'muted', label: 'Muted' },
    { value: 'gradient', label: 'Gradient' },
];

const STYLABLE_ELEMENTS: Record<string, { name: string; label: string; type: 'text' | 'image' }[]> = {
    hero: [
        { name: 'title', label: 'Title', type: 'text' },
        { name: 'subtitle', label: 'Subtitle', type: 'text' },
        { name: 'image', label: 'Image', type: 'image' },
        { name: 'cta_text', label: 'Button', type: 'text' },
    ],
    content: [
        { name: 'heading', label: 'Headings', type: 'text' },
        { name: 'text', label: 'Body Text', type: 'text' },
        { name: 'link', label: 'Links', type: 'text' },
        { name: 'image', label: 'Images', type: 'image' },
        { name: 'button', label: 'Button', type: 'text' },
        { name: 'content', label: 'Container', type: 'text' }, // Keep for backward compat or wrapper style
    ],
    'image-text': [
        { name: 'title', label: 'Title', type: 'text' },
        { name: 'text', label: 'Text', type: 'text' },
        { name: 'image', label: 'Image', type: 'image' },
        { name: 'button', label: 'Button', type: 'text' },
    ],
    'feature-grid': [
        { name: 'heading', label: 'Heading', type: 'text' },
        { name: 'feature_item', label: 'Feature Item (Card)', type: 'text' },
    ],
    'cta-banner': [
        { name: 'title', label: 'Title', type: 'text' },
        { name: 'text', label: 'Description', type: 'text' },
        { name: 'button_text', label: 'Button', type: 'text' },
    ],
    'contact-form': [
        { name: 'title', label: 'Title', type: 'text' },
        { name: 'button', label: 'Button', type: 'text' },
        { name: 'fields', label: 'Input Fields', type: 'text' },
    ],
};

export function InspectorPanel({
    page,
    selectedSection,
    isCollapsed,
    isTemplate,
    availableSources,
    onToggleCollapse,
    onSectionPropChange,
    onLayoutChange,
    onColorSchemeChange,
    onSectionStylesChange,
    onElementStylesChange,
    onDeleteSection,
    onSetAsSpaLanding,
    onUnsetSpaLanding,
    onDeletePage,
    onContainerWidthChange,
}: InspectorPanelProps) {
    if (isCollapsed) {
        return (
            <div className="w-10 border-l bg-white flex flex-col items-center py-4">
                <Button variant="ghost" size="icon" onClick={onToggleCollapse} className="mb-4">
                    <PanelRight className="w-4 h-4" />
                </Button>
            </div>
        );
    }

    if (!selectedSection) {
        return (
            <div className="w-80 border-l bg-white flex flex-col h-full">
                <div className="flex items-center justify-between p-4 border-b shrink-0">
                    <h3 className="font-semibold text-sm">{__('Page Settings')}</h3>
                    <Button variant="ghost" size="icon" onClick={onToggleCollapse} className="h-8 w-8">
                        <PanelRightClose className="w-4 h-4" />
                    </Button>
                </div>
                <div className="p-4 space-y-4 overflow-y-auto">
                    <div className="flex items-center gap-2 text-sm font-medium text-gray-700">
                        <Settings className="w-4 h-4" />
                        {isTemplate ? __('Template Info') : __('Page Info')}
                    </div>
                    <div className="space-y-4 bg-gray-50 p-3 rounded-lg border">
                        <div>
                            <Label className="text-xs text-gray-500 uppercase tracking-wider">{__('Type')}</Label>
                            <p className="text-sm font-medium">
                                {isTemplate ? __('Template (Dynamic)') : __('Page (Structural)')}
                            </p>
                        </div>
                        {page?.title && (
                            <div>
                                <Label className="text-xs text-gray-500 uppercase tracking-wider">{__('Title')}</Label>
                                <p className="text-sm font-medium">{page.title}</p>
                            </div>
                        )}
                        {page?.url && (
                            <div>
                                <Label className="text-xs text-gray-500 uppercase tracking-wider">{__('URL')}</Label>
                                <a href={page.url} target="_blank" rel="noopener noreferrer" className="text-sm text-blue-600 hover:underline flex items-center gap-1 mt-1">
                                    {__('View Page')}
                                    <ExternalLink className="w-3 h-3" />
                                </a>
                            </div>
                        )}

                        {/* SPA Landing Settings - Only for Pages */}
                        {!isTemplate && page && (
                            <div className="pt-2 border-t mt-2">
                                <Label className="text-xs text-gray-500 uppercase tracking-wider block mb-2">{__('SPA Landing Page')}</Label>
                                {page.isSpaLanding ? (
                                    <div className="space-y-2">
                                        <div className="bg-green-50 text-green-700 px-3 py-2 rounded-md text-sm flex items-center gap-2 border border-green-100">
                                            <Home className="w-4 h-4" />
                                            <span className="font-medium">{__('This is your SPA Landing')}</span>
                                        </div>
                                        <Button
                                            variant="outline"
                                            size="sm"
                                            className="w-full text-red-600 hover:text-red-700 hover:bg-red-50 border-red-200"
                                            onClick={onUnsetSpaLanding}
                                        >
                                            <Trash2 className="w-4 h-4 mr-2" />
                                            {__('Unset Landing Page')}
                                        </Button>
                                    </div>
                                ) : (
                                    <Button
                                        variant="outline"
                                        size="sm"
                                        className="w-full justify-start"
                                        onClick={onSetAsSpaLanding}
                                    >
                                        <Home className="w-4 h-4 mr-2" />
                                        {__('Set as SPA Landing')}
                                    </Button>
                                )}
                            </div>
                        )}

                        {/* Container Width */}
                        {!isTemplate && page && onContainerWidthChange && (
                            <div className="pt-2 border-t mt-2">
                                <Label className="text-xs text-gray-500 uppercase tracking-wider block mb-2">{__('Container Width')}</Label>
                                <RadioGroup
                                    value={page.containerWidth || 'boxed'}
                                    onValueChange={(val: any) => onContainerWidthChange(val)}
                                    className="gap-2"
                                >
                                    <div className="flex items-center space-x-2">
                                        <RadioGroupItem value="boxed" id="cw-boxed" />
                                        <Label htmlFor="cw-boxed" className="text-sm font-normal cursor-pointer">{__('Boxed')}</Label>
                                    </div>
                                    <div className="flex items-center space-x-2">
                                        <RadioGroupItem value="fullwidth" id="cw-full" />
                                        <Label htmlFor="cw-full" className="text-sm font-normal cursor-pointer">{__('Full Width')}</Label>
                                    </div>
                                    <div className="flex items-center space-x-2">
                                        <RadioGroupItem value="default" id="cw-default" />
                                        <Label htmlFor="cw-default" className="text-sm font-normal cursor-pointer text-gray-500">{__('Default (SPA Settings)')}</Label>
                                    </div>
                                </RadioGroup>
                            </div>
                        )}

                        {/* Danger Zone */}
                        {!isTemplate && page && onDeletePage && (
                            <div className="pt-2 border-t mt-2">
                                <Label className="text-xs text-red-600 uppercase tracking-wider block mb-2">{__('Danger Zone')}</Label>
                                <Button
                                    variant="outline"
                                    size="sm"
                                    className="w-full justify-start text-red-600 hover:text-red-700 hover:bg-red-50 border-red-200"
                                    onClick={onDeletePage}
                                >
                                    <Trash2 className="w-4 h-4 mr-2" />
                                    {__('Delete This Page')}
                                </Button>
                            </div>
                        )}
                    </div>
                    <div className="bg-blue-50 text-blue-800 p-3 rounded text-xs leading-relaxed">
                        {__('Select any section on the canvas to edit its content and design.')}
                    </div>
                </div>
            </div >
        );
    }

    return (
        <div
            className={cn(
                "w-80 border-l bg-white flex flex-col transition-all duration-300 shadow-xl z-30",
                isCollapsed && "w-0 overflow-hidden border-none"
            )}
        >
            {/* Header */}
            <div className="h-14 border-b flex items-center justify-between px-4 shrink-0 bg-white">
                <span className="font-semibold text-sm truncate">
                    {SECTION_FIELDS[selectedSection.type]
                        ? (selectedSection.type.charAt(0).toUpperCase() + selectedSection.type.slice(1)).replace('-', ' ')
                        : 'Settings'}
                </span>
                <Button variant="ghost" size="icon" onClick={onToggleCollapse} className="h-8 w-8 hover:bg-gray-100">
                    <PanelRightClose className="h-4 w-4" />
                </Button>
            </div>

            {/* Content Tabs (Content vs Design) */}
            <Tabs defaultValue="content" className="flex-1 flex flex-col overflow-hidden">
                <div className="px-4 pt-4 shrink-0 bg-white">
                    <TabsList className="w-full grid grid-cols-2">
                        <TabsTrigger value="content">{__('Content')}</TabsTrigger>
                        <TabsTrigger value="design">{__('Design')}</TabsTrigger>
                    </TabsList>
                </div>

                <div className="flex-1 overflow-y-auto">
                    {/* Content Tab */}
                    <TabsContent value="content" className="p-4 space-y-6 m-0">
                        {/* Structure & Presets */}
                        <div className="space-y-4">
                            <h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">{__('Structure')}</h4>
                            {LAYOUT_OPTIONS[selectedSection.type] && (
                                <div className="space-y-2">
                                    <Label className="text-xs">{__('Layout Variant')}</Label>
                                    <Select
                                        value={selectedSection.layoutVariant || 'default'}
                                        onValueChange={onLayoutChange}
                                    >
                                        <SelectTrigger><SelectValue /></SelectTrigger>
                                        <SelectContent>
                                            {LAYOUT_OPTIONS[selectedSection.type].map((opt) => (
                                                <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                </div>
                            )}

                            <div className="space-y-2">
                                <Label className="text-xs">{__('Preset Scheme')}</Label>
                                <Select
                                    value={selectedSection.colorScheme || 'default'}
                                    onValueChange={onColorSchemeChange}
                                >
                                    <SelectTrigger><SelectValue /></SelectTrigger>
                                    <SelectContent>
                                        {COLOR_SCHEMES.map((opt) => (
                                            <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                            </div>
                        </div>

                        <div className="w-full h-px bg-gray-100" />

                        {/* Fields */}
                        <div className="space-y-4">
                            <h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">{__('Fields')}</h4>
                            {SECTION_FIELDS[selectedSection.type]?.map((field) => (
                                <React.Fragment key={field.name}>
                                    <InspectorField
                                        fieldName={field.name}
                                        fieldLabel={field.label}
                                        fieldType={field.type}
                                        value={selectedSection.props[field.name] || { type: 'static', value: '' }}
                                        onChange={(val) => onSectionPropChange(field.name, val)}
                                        supportsDynamic={field.dynamic && isTemplate}
                                        availableSources={availableSources}
                                    />
                                    {selectedSection.type === 'contact-form' && field.name === 'redirect_url' && (
                                        <p className="text-[10px] text-gray-500 mt-1 pl-1">
                                            Available shortcodes: {'{name}'}, {'{email}'}, {'{date}'}
                                        </p>
                                    )}
                                    {selectedSection.type === 'contact-form' && field.name === 'webhook_url' && (
                                        <Accordion type="single" collapsible className="w-full mt-1 border rounded-md">
                                            <AccordionItem value="payload" className="border-0">
                                                <AccordionTrigger className="text-[10px] py-1 px-2 hover:no-underline text-gray-500">
                                                    View Payload Example
                                                </AccordionTrigger>
                                                <AccordionContent className="px-2 pb-2">
                                                    <pre className="text-[10px] bg-gray-50 p-2 rounded overflow-x-auto">
                                                        {JSON.stringify({
                                                            "form_id": "contact_form_123",
                                                            "fields": {
                                                                "name": "John Doe",
                                                                "email": "john@example.com",
                                                                "message": "Hello world"
                                                            },
                                                            "meta": {
                                                                "url": "https://site.com/contact",
                                                                "timestamp": 1710000000
                                                            }
                                                        }, null, 2)}
                                                    </pre>
                                                </AccordionContent>
                                            </AccordionItem>
                                        </Accordion>
                                    )}
                                </React.Fragment>
                            ))}
                        </div>

                        {/* Feature Grid Repeater */}
                        {selectedSection.type === 'feature-grid' && (
                            <div className="pt-4 border-t">
                                <InspectorRepeater
                                    label={__('Features')}
                                    items={Array.isArray(selectedSection.props.features?.value) ? selectedSection.props.features.value : []}
                                    onChange={(items) => onSectionPropChange('features', { type: 'static', value: items })}
                                    fields={[
                                        { name: 'title', label: 'Title', type: 'text' },
                                        { name: 'description', label: 'Description', type: 'textarea' },
                                        { name: 'icon', label: 'Icon', type: 'icon' },
                                    ]}
                                    itemLabelKey="title"
                                />
                            </div>
                        )}
                    </TabsContent>

                    {/* Design Tab */}
                    <TabsContent value="design" className="p-4 space-y-6 m-0">
                        {/* Background */}
                        <div className="space-y-4">
                            <h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">{__('Background')}</h4>
                            <div className="space-y-2">
                                <Label className="text-xs">{__('Background Color')}</Label>
                                <div className="flex gap-2">
                                    <div className="relative w-8 h-8 rounded border shadow-sm shrink-0 overflow-hidden">
                                        <div className="absolute inset-0" style={{ backgroundColor: selectedSection.styles?.backgroundColor || 'transparent' }} />
                                        <input
                                            type="color"
                                            className="absolute inset-0 opacity-0 cursor-pointer w-full h-full p-0 border-0"
                                            value={selectedSection.styles?.backgroundColor || '#ffffff'}
                                            onChange={(e) => onSectionStylesChange({ backgroundColor: e.target.value })}
                                        />
                                    </div>
                                    <input
                                        type="text"
                                        placeholder="#FFFFFF"
                                        className="flex-1 h-8 rounded-md border border-input bg-background px-3 py-1 text-sm"
                                        value={selectedSection.styles?.backgroundColor || ''}
                                        onChange={(e) => onSectionStylesChange({ backgroundColor: e.target.value })}
                                    />
                                </div>
                            </div>

                            <div className="space-y-2">
                                <Label className="text-xs">{__('Background Image')}</Label>
                                <MediaUploader type="image" onSelect={(url) => onSectionStylesChange({ backgroundImage: url })}>
                                    {selectedSection.styles?.backgroundImage ? (
                                        <div className="relative group cursor-pointer border rounded overflow-hidden h-24 bg-gray-50">
                                            <img src={selectedSection.styles.backgroundImage} alt="Background" className="w-full h-full object-cover" />
                                            <div className="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                                                <span className="text-white text-xs font-medium">{__('Change')}</span>
                                            </div>
                                            <button
                                                onClick={(e) => { e.stopPropagation(); onSectionStylesChange({ backgroundImage: '' }); }}
                                                className="absolute top-1 right-1 bg-white/90 p-1 rounded-full text-gray-600 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity"
                                            >
                                                <Trash2 className="w-3 h-3" />
                                            </button>
                                        </div>
                                    ) : (
                                        <Button variant="outline" className="w-full h-24 border-dashed flex flex-row gap-2 text-gray-400 font-normal">
                                            <Palette className="w-6 h-6" />
                                            {__('Select Image')}
                                        </Button>
                                    )}
                                </MediaUploader>
                            </div>

                            <div className="space-y-3 pt-2">
                                <div className="flex items-center justify-between">
                                    <Label className="text-xs">{__('Overlay Opacity')}</Label>
                                    <span className="text-xs text-gray-500">{selectedSection.styles?.backgroundOverlay ?? 0}%</span>
                                </div>
                                <Slider
                                    value={[selectedSection.styles?.backgroundOverlay ?? 0]}
                                    max={100}
                                    step={5}
                                    onValueChange={(vals) => onSectionStylesChange({ backgroundOverlay: vals[0] })}
                                />
                            </div>

                            <div className="space-y-2 pt-2">
                                <Label className="text-xs">{__('Section Height')}</Label>
                                <Select
                                    value={selectedSection.styles?.heightPreset || 'default'}
                                    onValueChange={(val) => {
                                        // Map presets to padding values
                                        const paddingMap: Record<string, string> = {
                                            'default': '0',
                                            'small': '0',
                                            'medium': '0',
                                            'large': '0',
                                            'screen': '0',
                                        };
                                        const padding = paddingMap[val] || '4rem';

                                        // If screen, we might need a specific flag, but for now lets reuse paddingTop/Bottom or add a new prop.
                                        // To avoid breaking schema, let's use paddingTop as the "preset carrier" or add a new styles prop if possible.
                                        // Since styles key is SectionStyles, let's stick to modifying paddingTop/Bottom for now as a simple preset.

                                        onSectionStylesChange({
                                            paddingTop: padding,
                                            paddingBottom: padding,
                                            heightPreset: val // We'll add this to interface
                                        } as any);
                                    }}
                                >
                                    <SelectTrigger><SelectValue placeholder="Height" /></SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="default">Default</SelectItem>
                                        <SelectItem value="small">Small (Compact)</SelectItem>
                                        <SelectItem value="medium">Medium</SelectItem>
                                        <SelectItem value="large">Large (Spacious)</SelectItem>
                                        <SelectItem value="screen">Full Screen</SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>
                        </div>


                        <div className="w-full h-px bg-gray-100" />

                        {/* Element Styles */}
                        <div className="space-y-4">
                            <h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wider">{__('Element Styles')}</h4>

                            <Accordion type="single" collapsible className="w-full">
                                {(STYLABLE_ELEMENTS[selectedSection.type] || []).map((field) => {
                                    const styles = selectedSection.elementStyles?.[field.name] || {};
                                    const isImage = field.type === 'image';

                                    return (
                                        <AccordionItem key={field.name} value={field.name}>
                                            <AccordionTrigger className="text-xs hover:no-underline py-2">{field.label}</AccordionTrigger>
                                            <AccordionContent className="space-y-4 pt-2">
                                                {/* Common: Background Wrapper */}
                                                <div className="space-y-2">
                                                    <Label className="text-xs text-gray-500">{__('Background (Wrapper)')}</Label>
                                                    <div className="flex items-center gap-2">
                                                        <div className="relative w-6 h-6 rounded border shadow-sm shrink-0 overflow-hidden">
                                                            <div className="absolute inset-0" style={{ backgroundColor: styles.backgroundColor || 'transparent' }} />
                                                            <input
                                                                type="color"
                                                                className="absolute inset-0 opacity-0 cursor-pointer w-full h-full p-0 border-0"
                                                                value={styles.backgroundColor || '#ffffff'}
                                                                onChange={(e) => onElementStylesChange(field.name, { backgroundColor: e.target.value })}
                                                            />
                                                        </div>
                                                        <input
                                                            type="text"
                                                            placeholder="Color (#fff)"
                                                            className="flex-1 h-7 text-xs rounded border px-2"
                                                            value={styles.backgroundColor || ''}
                                                            onChange={(e) => onElementStylesChange(field.name, { backgroundColor: e.target.value })}
                                                        />
                                                    </div>
                                                </div>

                                                {!isImage ? (
                                                    <>
                                                        {/* Text Color */}
                                                        <div className="space-y-2">
                                                            <Label className="text-xs text-gray-500">{__('Text Color')}</Label>
                                                            <div className="flex items-center gap-2">
                                                                <div className="relative w-6 h-6 rounded border shadow-sm shrink-0 overflow-hidden">
                                                                    <div className="absolute inset-0" style={{ backgroundColor: styles.color || '#000000' }} />
                                                                    <input
                                                                        type="color"
                                                                        className="absolute inset-0 opacity-0 cursor-pointer w-full h-full p-0 border-0"
                                                                        value={styles.color || '#000000'}
                                                                        onChange={(e) => onElementStylesChange(field.name, { color: e.target.value })}
                                                                    />
                                                                </div>
                                                                <input
                                                                    type="text"
                                                                    placeholder="Color (#000)"
                                                                    className="flex-1 h-7 text-xs rounded border px-2"
                                                                    value={styles.color || ''}
                                                                    onChange={(e) => onElementStylesChange(field.name, { color: e.target.value })}
                                                                />
                                                            </div>
                                                        </div>

                                                        {/* Typography Group */}
                                                        <div className="space-y-2">
                                                            <Label className="text-xs text-gray-500">{__('Typography')}</Label>

                                                            <Select value={styles.fontFamily || 'default'} onValueChange={(val) => onElementStylesChange(field.name, { fontFamily: val === 'default' ? undefined : val as any })}>
                                                                <SelectTrigger className="h-7 text-xs"><SelectValue placeholder="Font Family" /></SelectTrigger>
                                                                <SelectContent>
                                                                    <SelectItem value="default">Default</SelectItem>
                                                                    <SelectItem value="primary">Primary (Headings)</SelectItem>
                                                                    <SelectItem value="secondary">Secondary (Body)</SelectItem>
                                                                </SelectContent>
                                                            </Select>

                                                            <div className="grid grid-cols-2 gap-2">
                                                                <Select value={styles.fontSize || 'default'} onValueChange={(val) => onElementStylesChange(field.name, { fontSize: val === 'default' ? undefined : val })}>
                                                                    <SelectTrigger className="h-7 text-xs"><SelectValue placeholder="Size" /></SelectTrigger>
                                                                    <SelectContent>
                                                                        <SelectItem value="default">Default Size</SelectItem>
                                                                        <SelectItem value="text-sm">Small</SelectItem>
                                                                        <SelectItem value="text-base">Base</SelectItem>
                                                                        <SelectItem value="text-lg">Large</SelectItem>
                                                                        <SelectItem value="text-xl">XL</SelectItem>
                                                                        <SelectItem value="text-2xl">2XL</SelectItem>
                                                                        <SelectItem value="text-3xl">3XL</SelectItem>
                                                                        <SelectItem value="text-4xl">4XL</SelectItem>
                                                                        <SelectItem value="text-5xl">5XL</SelectItem>
                                                                        <SelectItem value="text-6xl">6XL</SelectItem>
                                                                    </SelectContent>
                                                                </Select>

                                                                <Select value={styles.fontWeight || 'default'} onValueChange={(val) => onElementStylesChange(field.name, { fontWeight: val === 'default' ? undefined : val })}>
                                                                    <SelectTrigger className="h-7 text-xs"><SelectValue placeholder="Weight" /></SelectTrigger>
                                                                    <SelectContent>
                                                                        <SelectItem value="default">Default Weight</SelectItem>
                                                                        <SelectItem value="font-light">Light</SelectItem>
                                                                        <SelectItem value="font-normal">Normal</SelectItem>
                                                                        <SelectItem value="font-medium">Medium</SelectItem>
                                                                        <SelectItem value="font-semibold">Semibold</SelectItem>
                                                                        <SelectItem value="font-bold">Bold</SelectItem>
                                                                        <SelectItem value="font-extrabold">Extra Bold</SelectItem>
                                                                    </SelectContent>
                                                                </Select>
                                                            </div>

                                                            <Select value={styles.textAlign || 'default'} onValueChange={(val) => onElementStylesChange(field.name, { textAlign: val === 'default' ? undefined : val as any })}>
                                                                <SelectTrigger className="h-7 text-xs"><SelectValue placeholder="Alignment" /></SelectTrigger>
                                                                <SelectContent>
                                                                    <SelectItem value="default">Default Align</SelectItem>
                                                                    <SelectItem value="left">Left</SelectItem>
                                                                    <SelectItem value="center">Center</SelectItem>
                                                                    <SelectItem value="right">Right</SelectItem>
                                                                </SelectContent>
                                                            </Select>
                                                        </div>

                                                        {/* Link Specific Styles */}
                                                        {field.name === 'link' && (
                                                            <div className="space-y-2">
                                                                <Label className="text-xs text-gray-500">{__('Link Styles')}</Label>
                                                                <Select value={styles.textDecoration || 'default'} onValueChange={(val) => onElementStylesChange(field.name, { textDecoration: val === 'default' ? undefined : val as any })}>
                                                                    <SelectTrigger className="h-7 text-xs"><SelectValue placeholder="Decoration" /></SelectTrigger>
                                                                    <SelectContent>
                                                                        <SelectItem value="default">Default</SelectItem>
                                                                        <SelectItem value="none">None</SelectItem>
                                                                        <SelectItem value="underline">Underline</SelectItem>
                                                                    </SelectContent>
                                                                </Select>
                                                                <div className="space-y-1">
                                                                    <Label className="text-xs text-gray-400">{__('Hover Color')}</Label>
                                                                    <div className="flex items-center gap-2">
                                                                        <div className="relative w-6 h-6 rounded border shadow-sm shrink-0 overflow-hidden">
                                                                            <div className="absolute inset-0" style={{ backgroundColor: styles.hoverColor || 'transparent' }} />
                                                                            <input
                                                                                type="color"
                                                                                className="absolute inset-0 opacity-0 cursor-pointer w-full h-full p-0 border-0"
                                                                                value={styles.hoverColor || '#000000'}
                                                                                onChange={(e) => onElementStylesChange(field.name, { hoverColor: e.target.value })}
                                                                            />
                                                                        </div>
                                                                        <input
                                                                            type="text"
                                                                            placeholder="Hover Color"
                                                                            className="flex-1 h-7 text-xs rounded border px-2"
                                                                            value={styles.hoverColor || ''}
                                                                            onChange={(e) => onElementStylesChange(field.name, { hoverColor: e.target.value })}
                                                                        />
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        )}

                                                        {/* Button/Box Specific Styles */}
                                                        {field.name === 'button' && (
                                                            <div className="space-y-2">
                                                                <Label className="text-xs text-gray-500">{__('Box Styles')}</Label>
                                                                <div className="grid grid-cols-2 gap-2">
                                                                    <div className="space-y-1">
                                                                        <Label className="text-xs text-gray-400">{__('Border Color')}</Label>
                                                                        <div className="flex items-center gap-2 h-7">
                                                                            <div className="relative w-6 h-6 rounded border shadow-sm shrink-0 overflow-hidden">
                                                                                <div className="absolute inset-0" style={{ backgroundColor: styles.borderColor || 'transparent' }} />
                                                                                <input
                                                                                    type="color"
                                                                                    className="absolute inset-0 opacity-0 cursor-pointer w-full h-full p-0 border-0"
                                                                                    value={styles.borderColor || '#000000'}
                                                                                    onChange={(e) => onElementStylesChange(field.name, { borderColor: e.target.value })}
                                                                                />
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div className="space-y-1">
                                                                        <Label className="text-xs text-gray-400">{__('Border Width')}</Label>
                                                                        <input type="text" placeholder="e.g. 1px" className="w-full h-7 text-xs rounded border px-2" value={styles.borderWidth || ''} onChange={(e) => onElementStylesChange(field.name, { borderWidth: e.target.value })} />
                                                                    </div>
                                                                    <div className="space-y-1">
                                                                        <Label className="text-xs text-gray-400">{__('Radius')}</Label>
                                                                        <input type="text" placeholder="e.g. 4px" className="w-full h-7 text-xs rounded border px-2" value={styles.borderRadius || ''} onChange={(e) => onElementStylesChange(field.name, { borderRadius: e.target.value })} />
                                                                    </div>
                                                                    <div className="space-y-1">
                                                                        <Label className="text-xs text-gray-400">{__('Padding')}</Label>
                                                                        <input type="text" placeholder="e.g. 8px 16px" className="w-full h-7 text-xs rounded border px-2" value={styles.padding || ''} onChange={(e) => onElementStylesChange(field.name, { padding: e.target.value })} />
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        )}
                                                    </>
                                                ) : (
                                                    <>
                                                        {/* Image Settings */}
                                                        <div className="space-y-2">
                                                            <Label className="text-xs text-gray-500">{__('Image Fit')}</Label>
                                                            <Select value={styles.objectFit || 'default'} onValueChange={(val) => onElementStylesChange(field.name, { objectFit: val === 'default' ? undefined : val as any })}>
                                                                <SelectTrigger className="h-7 text-xs"><SelectValue placeholder="Object Fit" /></SelectTrigger>
                                                                <SelectContent>
                                                                    <SelectItem value="default">Default</SelectItem>
                                                                    <SelectItem value="cover">Cover</SelectItem>
                                                                    <SelectItem value="contain">Contain</SelectItem>
                                                                    <SelectItem value="fill">Fill</SelectItem>
                                                                </SelectContent>
                                                            </Select>
                                                        </div>

                                                        <div className="grid grid-cols-2 gap-2">
                                                            <div className="space-y-1">
                                                                <Label className="text-xs text-gray-500">{__('Width')}</Label>
                                                                <input type="text" placeholder="e.g. 100%" className="w-full h-7 text-xs rounded border px-2" value={styles.width || ''} onChange={(e) => onElementStylesChange(field.name, { width: e.target.value })} />
                                                            </div>
                                                            <div className="space-y-1">
                                                                <Label className="text-xs text-gray-500">{__('Height')}</Label>
                                                                <input type="text" placeholder="e.g. auto" className="w-full h-7 text-xs rounded border px-2" value={styles.height || ''} onChange={(e) => onElementStylesChange(field.name, { height: e.target.value })} />
                                                            </div>
                                                        </div>
                                                    </>
                                                )}
                                            </AccordionContent>
                                        </AccordionItem>
                                    );
                                })}
                            </Accordion>
                        </div>
                    </TabsContent>
                </div>

                {/* Footer - Delete Button */}
                {
                    selectedSection && (
                        <div className="p-4 border-t mt-auto shrink-0 bg-gray-50/50">
                            <Button variant="destructive" className="w-full" onClick={onDeleteSection}>
                                <Trash2 className="w-4 h-4 mr-2" />
                                {__('Delete Section')}
                            </Button>
                        </div>
                    )
                }
            </Tabs >
        </div >
    );
}