'use client';

import { useCallback } from 'react';
import Select, { StylesConfig, MultiValue } from 'react-select';
import VariationManager from '../components/VariationManager';
import type {
  Language,
  Attribute,
  ProductData,
  FormErrors,
  SelectOption,
} from '@/types/product.types';

const LABEL_STYLE = { color: 'var(--color-text-secondary)' } as const;

interface AttributesStepProps {
  formData: ProductData;
  updateFormData: <K extends keyof ProductData>(key: K, value: ProductData[K]) => void;
  attributes: Attribute[];
  languages: Language[];
  defaultLanguage: Language;
  errors: FormErrors;
}

export default function AttributesStep({
  formData,
  updateFormData,
  attributes,
  languages,
  defaultLanguage,
  errors,
}: AttributesStepProps) {
  const isVariable = formData.type === 'variable';

  const attributeOptions: SelectOption[] = attributes.map((attr) => ({
    value: attr.id,
    label: attr.default_name || 'Unnamed Attribute',
  }));

  const selectedAttributes = attributeOptions.filter((opt) =>
    formData.attribute_ids?.includes(opt.value),
  );

  const selectStyles: StylesConfig<SelectOption, true> = {
    control: (base, state) => ({
      ...base,
      background: 'var(--color-surface-alt)',
      border: `1px solid ${state.isFocused ? 'var(--color-cta)' : 'var(--color-border)'}`,
      borderRadius: '0.5rem',
      boxShadow: state.isFocused
        ? '0 0 0 2px color-mix(in srgb, var(--color-cta) 20%, transparent)'
        : 'none',
      minHeight: '42px',
    }),
    valueContainer: (base) => ({ ...base, padding: '2px 12px' }),
    multiValue: (base) => ({
      ...base,
      background: 'var(--color-cta-light)',
      borderRadius: '0.375rem',
    }),
    multiValueLabel: (base) => ({
      ...base,
      color: 'var(--color-cta)',
      fontSize: '0.875rem',
      padding: '2px 6px',
    }),
    multiValueRemove: (base) => ({
      ...base,
      color: 'var(--color-cta)',
      cursor: 'pointer',
      '&:hover': {
        background: 'var(--color-danger)',
        color: 'white',
        borderRadius: '0 0.375rem 0.375rem 0',
      },
    }),
    placeholder: (base) => ({
      ...base,
      color: 'var(--color-text-tertiary)',
      fontSize: '0.875rem',
    }),
    menu: (base) => ({
      ...base,
      background: 'var(--color-surface)',
      border: '1px solid var(--color-border)',
      borderRadius: '0.5rem',
      boxShadow: 'var(--shadow-card-md)',
      zIndex: 50,
    }),
    menuList: (base) => ({ ...base, padding: '4px' }),
    option: (base, state) => ({
      ...base,
      background: state.isSelected
        ? 'var(--color-cta)'
        : state.isFocused
        ? 'color-mix(in srgb, var(--color-cta) 10%, transparent)'
        : 'transparent',
      color: state.isSelected ? 'white' : 'var(--color-text)',
      fontSize: '0.875rem',
      borderRadius: '0.375rem',
      cursor: 'pointer',
      padding: '8px 12px',
    }),
    indicatorSeparator: (base) => ({ ...base, background: 'var(--color-border)' }),
    noOptionsMessage: (base) => ({
      ...base,
      color: 'var(--color-text-secondary)',
      fontSize: '0.875rem',
    }),
  };

  const handleAttributeChange = useCallback(
    (selected: MultiValue<SelectOption>) => {
      updateFormData(
        'attribute_ids',
        selected.map((opt) => opt.value),
      );
    },
    [updateFormData],
  );

  return (
    <div className="space-y-6">
      <h2 className="text-lg font-semibold" style={{ color: 'var(--color-text)' }}>
        Attributes &amp; Variations
      </h2>
      <p className="text-sm mb-4" style={{ color: 'var(--color-text-secondary)' }}>
        {isVariable
          ? 'Select attributes that will define product variations'
          : 'Select attributes for product description (display only)'}
      </p>

      <div>
        <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
          {isVariable ? 'Variation Attributes' : 'Product Attributes'}
        </label>
        <Select<SelectOption, true>
          instanceId="attribute-select"
          options={attributeOptions}
          value={selectedAttributes}
          onChange={handleAttributeChange}
          placeholder="Search or select attributes…"
          isMulti
          isSearchable
          styles={selectStyles}
          noOptionsMessage={() => 'No attributes found'}
        />
        <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
          {isVariable
            ? 'Selected attributes will be used to generate variations (e.g., Size, Color)'
            : 'Selected attributes will be displayed on product page for reference'}
        </p>
      </div>

      {isVariable && formData.attribute_ids && formData.attribute_ids.length > 0 && (
        <div className="mt-6">
          <VariationManager
            productId={(formData as ProductData & { id?: string }).id}
            attributeIds={formData.attribute_ids}
            attributes={attributes}
            variations={formData.variations}
            onVariationsChange={(variations) => updateFormData('variations', variations)}
            languages={languages}
            defaultLanguage={defaultLanguage}
          />
        </div>
      )}

      {isVariable && (!formData.attribute_ids || formData.attribute_ids.length === 0) && (
        <div
          className="p-4 rounded-lg text-center"
          style={{
            background: 'var(--color-warning-light)',
            border: '1px solid var(--color-warning)',
          }}
        >
          <p className="text-sm" style={{ color: 'var(--color-warning)' }}>
            ⚠️ Please select at least one attribute to generate variations
          </p>
        </div>
      )}

      {!isVariable && formData.attribute_ids && formData.attribute_ids.length > 0 && (
        <div
          className="p-4 rounded-lg"
          style={{
            background: 'var(--color-info-light)',
            border: '1px solid var(--color-info)',
          }}
        >
          <p className="text-sm" style={{ color: 'var(--color-info)' }}>
            ℹ️ {formData.attribute_ids.length} attribute(s) selected for display only
          </p>
        </div>
      )}
    </div>
  );
}