import React from 'react';
import { cn } from '@/lib/utils';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';
import { Button } from '@/components/ui/button';
import { __ } from '@/lib/i18n';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { MediaUploader } from '@/components/MediaUploader';
import { Image as ImageIcon } from 'lucide-react';

import { RichTextEditor } from '@/components/ui/rich-text-editor';

export interface SectionProp {
    type: 'static' | 'dynamic';
    value?: any;
    source?: string;
}

interface InspectorFieldProps {
    fieldName: string;
    fieldLabel: string;
    fieldType: 'text' | 'textarea' | 'url' | 'image' | 'rte';
    value: SectionProp;
    onChange: (value: SectionProp) => void;
    supportsDynamic?: boolean;
    availableSources?: { value: string; label: string }[];
}

export function InspectorField({
    fieldName,
    fieldLabel,
    fieldType,
    value,
    onChange,
    supportsDynamic = false,
    availableSources = [],
}: InspectorFieldProps) {
    const isDynamic = value.type === 'dynamic';
    const currentValue = isDynamic ? (value.source || '') : (value.value || '');

    const handleValueChange = (newValue: string) => {
        if (isDynamic) {
            onChange({ type: 'dynamic', source: newValue });
        } else {
            onChange({ type: 'static', value: newValue });
        }
    };

    const handleSelectChange = (val: string) => {
        onChange({ type: 'dynamic', source: val });
    };

    const handleTypeToggle = (dynamic: boolean) => {
        if (dynamic) {
            onChange({ type: 'dynamic', source: availableSources[0]?.value || 'post_title' });
        } else {
            onChange({ type: 'static', value: '' });
        }
    };

    return (
        <div className="space-y-2">
            <div className="flex items-center justify-between">
                <Label htmlFor={fieldName} className="text-sm font-medium">
                    {fieldLabel}
                </Label>
                {supportsDynamic && availableSources.length > 0 && (
                    <div className="flex items-center gap-2">
                        <span className={cn(
                            'text-xs',
                            isDynamic ? 'text-orange-500 font-medium' : 'text-gray-400'
                        )}>
                            {isDynamic ? '◆ Dynamic' : 'Static'}
                        </span>
                        <Switch
                            checked={isDynamic}
                            onCheckedChange={handleTypeToggle}
                        />
                    </div>
                )}
            </div>

            {isDynamic && supportsDynamic ? (
                <div className="space-y-2">
                    <Select value={currentValue} onValueChange={handleSelectChange}>
                        <SelectTrigger className="w-full">
                            <SelectValue placeholder="Select data source" />
                        </SelectTrigger>
                        <SelectContent>
                            {availableSources.map((source) => (
                                <SelectItem key={source.value} value={source.value}>
                                    {source.label}
                                </SelectItem>
                            ))}
                        </SelectContent>
                    </Select>
                </div>
            ) : fieldType === 'rte' ? (
                <RichTextEditor
                    content={currentValue}
                    onChange={handleValueChange}
                    placeholder={`Enter ${fieldLabel.toLowerCase()}...`}
                />
            ) : fieldType === 'textarea' ? (
                <Textarea
                    id={fieldName}
                    value={currentValue}
                    onChange={(e) => handleValueChange(e.target.value)}
                    rows={4}
                    className="resize-none"
                />
            ) : (
                <div className="flex gap-2">
                    <Input
                        id={fieldName}
                        type={fieldType === 'url' ? 'url' : 'text'}
                        value={currentValue}
                        onChange={(e) => handleValueChange(e.target.value)}
                        placeholder={fieldType === 'url' ? 'https://' : `Enter ${fieldLabel.toLowerCase()}`}
                        className="flex-1"
                    />
                    {(fieldType === 'url' || fieldType === 'image') && (
                        <MediaUploader
                            onSelect={(url) => handleValueChange(url)}
                            type="image"
                            className="shrink-0"
                        >
                            <Button variant="outline" size="icon" title={__('Select Image')}>
                                <ImageIcon className="w-4 h-4" />
                            </Button>
                        </MediaUploader>
                    )}
                </div>
            )}
        </div>
    );
}
