'use client';
import { FontPicker } from '@/components/typography/FontPicker';
import { SliderWithInput } from '@/components/common/SliderWithInput';
import { Label } from '@/components/ui/label';
import { Separator } from '@/components/ui/separator';
import { loadGoogleFont } from '@/src/lib/typography';
import { ComponentStylerProps } from '@/src/types/builder';
import { PortfolioElement } from '@/src/types/portfolio';
import { createColorHandlers, updateStyling } from '@/utils/stylingHelpers';
import { FONT_WEIGHTS } from '@/utils/typography';
import { LuPaintbrush, LuType, LuRuler } from 'react-icons/lu';
import { AlignmentControl } from './AlignmentControl';
import { ColorPickerControl } from './ColorPickerControl';
import { PaddingControl } from './PaddingControl';
import { TextStyleControl } from './TextStyleControl';
import { SearchableSelect } from '@/components/ui/searchable-select';

export function ComponentStyler({
  styling = { padding: { top: 20, bottom: 20, left: 10, right: 10 } },
  onStylingChange,
  enabledOptions = { textColor: true, padding: true, alignment: true, backgroundColor: true },
}: ComponentStylerProps) {
  const textColorHandlers = createColorHandlers(styling, onStylingChange, 'textColor');
  const backgroundColorHandlers = createColorHandlers(styling, onStylingChange, 'backgroundColor');
  const colorHandlers = createColorHandlers(styling, onStylingChange, 'color');

  const handleStylingChange = (newValues: PortfolioElement['styling']) => {
    onStylingChange({ ...styling, ...newValues });
  };

  const hasTypographyOptions =
    enabledOptions.fontSize ||
    enabledOptions.fontFamily ||
    enabledOptions.fontWeight ||
    enabledOptions.textDecoration ||
    enabledOptions.fontStyle;
  const hasColorOptions = enabledOptions.textColor || enabledOptions.backgroundColor || enabledOptions.color;
  const hasSizeOptions = enabledOptions.width || enabledOptions.height;

  return (
    <div className='space-y-6'>
      {enabledOptions.alignment && <AlignmentControl styling={styling} onStylingChange={handleStylingChange} />}
      {enabledOptions.padding && <PaddingControl styling={styling} onStylingChange={handleStylingChange} />}

      {hasSizeOptions && (
        <>
          <Separator className='bg-neutral-700' />
          <div className='space-y-4'>
            <h3 className='text-sm font-medium text-neutral-300 flex items-center gap-2'>
              <LuRuler className='h-4 w-4' />
              Size
            </h3>

            {enabledOptions.width && (
              <SliderWithInput
                label='Width'
                value={
                  styling?.width ??
                  (typeof enabledOptions.width === 'object' ? (enabledOptions.width.defaultValue ?? 500) : 500)
                }
                onChange={(value) => onStylingChange(updateStyling(styling, 'width', value))}
                min={typeof enabledOptions.width === 'object' ? (enabledOptions.width.min ?? 100) : 100}
                max={typeof enabledOptions.width === 'object' ? (enabledOptions.width.max ?? 1366) : 1366}
                step={1}
                unit='px'
              />
            )}

            {enabledOptions.height && (
              <SliderWithInput
                label='Height'
                value={
                  styling?.height ??
                  (typeof enabledOptions.height === 'object' ? (enabledOptions.height.defaultValue ?? 300) : 300)
                }
                onChange={(value) => onStylingChange(updateStyling(styling, 'height', value))}
                min={typeof enabledOptions.height === 'object' ? (enabledOptions.height.min ?? 50) : 50}
                max={typeof enabledOptions.height === 'object' ? (enabledOptions.height.max ?? 800) : 800}
                step={1}
                unit='px'
              />
            )}
          </div>
        </>
      )}

      <Separator className='bg-neutral-700' />

      {hasColorOptions && (
        <div className='space-y-4'>
          <h3 className='text-sm font-medium text-neutral-300 flex items-center gap-2'>Colors</h3>

          {enabledOptions.textColor && (
            <ColorPickerControl
              label='Text Color'
              icon={<LuType className='h-4 w-4' />}
              value={styling?.textColor}
              {...textColorHandlers}
            />
          )}

          {enabledOptions.color && (
            <ColorPickerControl
              label='Color'
              icon={<LuPaintbrush className='h-4 w-4' />}
              value={styling?.color}
              {...colorHandlers}
            />
          )}

          {enabledOptions.backgroundColor && (
            <ColorPickerControl
              label='Background Color'
              icon={<LuPaintbrush className='h-4 w-4' />}
              value={styling?.backgroundColor}
              {...backgroundColorHandlers}
            />
          )}
        </div>
      )}

      {hasTypographyOptions && (
        <>
          <Separator className='bg-neutral-700' />
          <div className='space-y-4'>
            <h3 className='text-sm font-medium text-neutral-300 flex items-center gap-2'>
              <LuType className='h-4 w-4' />
              Typography
            </h3>

            {enabledOptions.fontSize && (
              <SliderWithInput
                label='Font Size'
                value={styling?.fontSize ?? 16}
                onChange={(value) => onStylingChange(updateStyling(styling, 'fontSize', value))}
                min={12}
                max={96}
                step={2}
                unit='px'
              />
            )}

            {enabledOptions.fontFamily && (
              <FontPicker
                value={styling?.fontFamily ?? ''}
                onValueChange={(value) => {
                  onStylingChange(updateStyling(styling, 'fontFamily', value as string));
                  loadGoogleFont(value as string);
                }}
                isClearable={true}
              />
            )}

            {enabledOptions.fontWeight && (
              <div className='space-y-2'>
                <Label className='text-xs text-neutral-400'>Font Weight</Label>
                <SearchableSelect
                  options={Object.entries(FONT_WEIGHTS).map(([weight, label]) => ({
                    label,
                    value: weight,
                  }))}
                  value={styling?.fontWeight ?? '400'}
                  onChange={(value) => onStylingChange(updateStyling(styling, 'fontWeight', value as string))}
                  isClearable
                />
              </div>
            )}

            {(enabledOptions.textDecoration || enabledOptions.fontStyle) && (
              <TextStyleControl
                styling={styling}
                onStylingChange={onStylingChange}
                enabledOptions={{
                  fontStyle: enabledOptions.fontStyle,
                  textDecoration: enabledOptions.textDecoration,
                }}
              />
            )}
          </div>
        </>
      )}
    </div>
  );
}
