'use client';

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@admin/components/ui/select';
import { cn } from '@admin/utils/common';
import { Controller, useFormContext } from 'react-hook-form';

export interface FontOption {
    value: string;
    label: string;
    disabled?: boolean;
}

interface FontSelectorProps {
    name: string;
    options: FontOption[];
    placeholder?: string;
    disabled?: boolean;
    className?: string;
    id?: string;
}

// Font family mapping for inline styles
const fontFamilyStyles: Record<string, string> = {
    Inter: '"Inter", ui-sans-serif, system-ui, sans-serif',
    Roboto: '"Roboto", ui-sans-serif, system-ui, sans-serif',
    'Open Sans': '"Open Sans", ui-sans-serif, system-ui, sans-serif',
    Helvetica: '"Helvetica Neue", "Helvetica", "Arial", ui-sans-serif, system-ui, sans-serif',
    Arial: '"Arial", ui-sans-serif, system-ui, sans-serif',
    'Times New Roman': '"Times New Roman", "Times", ui-serif, Georgia, serif',
    Georgia: '"Georgia", ui-serif, serif',
    'Courier New': '"Courier New", "Courier", ui-monospace, monospace',
};

export const FontSelector = ({ name, options, placeholder, disabled, className, id }: FontSelectorProps) => {
    const { control } = useFormContext();

    return (
        <Controller
            control={control}
            name={name}
            render={({ field }) => (
                <Select value={field.value || ''} onValueChange={field.onChange} disabled={disabled}>
                    <SelectTrigger id={id} className={cn(className)}>
                        <SelectValue
                            placeholder={placeholder || 'Select a font'}
                            style={{
                                fontFamily: field.value ? fontFamilyStyles[field.value] : undefined,
                            }}
                        />
                    </SelectTrigger>
                    <SelectContent>
                        {options.map((option) => (
                            <SelectItem
                                key={option.value}
                                value={option.value}
                                disabled={option.disabled}
                                style={{
                                    fontFamily: fontFamilyStyles[option.value] || 'inherit',
                                    fontSize: '14px',
                                    padding: '8px 12px',
                                }}
                                className="cursor-pointer hover:bg-accent hover:text-accent-foreground"
                            >
                                <div className="flex items-center gap-2">
                                    <span style={{ fontFamily: fontFamilyStyles[option.value] || 'inherit' }}>{option.label}</span>
                                    <span className="text-xs text-muted-foreground">Aa</span>
                                </div>
                            </SelectItem>
                        ))}
                    </SelectContent>
                </Select>
            )}
        />
    );
};