'use client';

import { useState } from 'react';
import dynamic from 'next/dynamic';
import Select, { StylesConfig, SingleValue } from 'react-select';
import { generateSlug } from '@/lib/slugify';
import type {
  Language,
  Category,
  ProductData,
  ProductTranslation,
  FormErrors,
  SelectOption,
} from '@/types/product.types';

const RichTextEditor = dynamic(
  () => import('@/components/admin/text-editor/RichTextEditor'),
  { ssr: false },
);

const INPUT_STYLE = {
  background: 'var(--color-surface-alt)',
  border: '1px solid var(--color-border)',
  color: 'var(--color-text)',
} as const;

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

interface BasicInfoStepProps {
  formData: ProductData;
  updateFormData: <K extends keyof ProductData>(key: K, value: ProductData[K]) => void;
  updateTranslation: (languageCode: string, field: keyof ProductTranslation, value: unknown) => void;
  languages: Language[];
  defaultLanguage: Language;
  categories: Category[];
  errors: FormErrors;
}

export default function BasicInfoStep({
  formData,
  updateFormData,
  updateTranslation,
  languages,
  defaultLanguage,
  categories,
  errors,
}: BasicInfoStepProps) {
  const [activeTab, setActiveTab] = useState<string>(
    defaultLanguage?.code ?? languages[0]?.code ?? 'en',
  );

  // Track which languages have had their slug manually edited.
  // For those, auto-generation from name is disabled.
  const [slugManuallyEdited] = useState<Set<string>>(
    () => new Set(
      formData.translations
        .filter((t) => t.slug.trim().length > 0)
        .map((t) => t.language_code),
    ),
  );

  const getTranslation = (langCode: string): ProductTranslation | undefined =>
    formData.translations.find((t) => t.language_code === langCode);

  // Category react-select
  const categoryOptions: SelectOption[] = categories.map((cat) => ({
    value: cat.id,
    label: cat.default_name || 'Unnamed Category',
  }));
  const selectedCategory =
    categoryOptions.find((o) => o.value === formData.category_id) ?? null;

  const selectStyles: StylesConfig<SelectOption, false> = {
    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' }),
    singleValue: (base) => ({ ...base, color: 'var(--color-text)', fontSize: '0.875rem' }),
    placeholder: (base) => ({ ...base, color: 'var(--color-text-tertiary)', fontSize: '0.875rem' }),
    input: (base) => ({ ...base, color: 'var(--color-text)', 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 isMultiLang = languages.length > 1;

  return (
    <div className="space-y-6">
      {/* SKU + Category */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
            SKU <span className="text-red-500">*</span>
          </label>
          <input
            type="text"
            value={formData.sku}
            onChange={(e) => updateFormData('sku', e.target.value)}
            placeholder="Enter product SKU (e.g., TSHIRT-001)"
            className="w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20"
            style={{
              ...INPUT_STYLE,
              border: errors['sku']
                ? '1px solid var(--color-danger)'
                : '1px solid var(--color-border)',
            }}
          />
          {errors['sku'] && (
            <p className="text-xs mt-1" style={ERROR_STYLE}>{errors['sku']}</p>
          )}
        </div>

        <div>
          <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
            Category
          </label>
          <Select<SelectOption, false>
            instanceId="category-select"
            options={categoryOptions}
            value={selectedCategory}
            onChange={(option: SingleValue<SelectOption>) =>
              updateFormData('category_id', option?.value ?? null)
            }
            placeholder="Search or select category…"
            isClearable
            isSearchable
            styles={selectStyles}
            noOptionsMessage={() => 'No categories found'}
          />
        </div>
      </div>

      {/* Product Type */}
      <div>
        <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
          Product Type
        </label>
        <div className="flex gap-4">
          {(['simple', 'variable'] as const).map((t) => (
            <button
              key={t}
              type="button"
              onClick={() => updateFormData('type', t)}
              className="px-4 py-2 rounded-lg text-sm font-medium transition-all"
              style={{
                background: formData.type === t ? 'var(--color-cta)' : 'var(--color-surface-alt)',
                color: formData.type === t ? 'white' : 'var(--color-text-secondary)',
                border: formData.type === t ? 'none' : '1px solid var(--color-border)',
              }}
            >
              {t === 'simple' ? 'Simple Product' : 'Variable Product'}
            </button>
          ))}
        </div>
        <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
          Simple: single price & stock. Variable: multiple variations (size, colour, etc.)
        </p>
      </div>

      {/* Status Toggles */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
            Active Status
          </label>
          <button
            type="button"
            onClick={() => updateFormData('is_active', !formData.is_active)}
            className="px-4 py-2 rounded-lg text-sm font-medium transition-all"
            style={{
              background: formData.is_active ? 'var(--color-success)' : 'var(--color-surface-alt)',
              color: formData.is_active ? 'white' : 'var(--color-text-secondary)',
              border: formData.is_active ? 'none' : '1px solid var(--color-border)',
            }}
          >
            {formData.is_active ? '✅ Active' : '❌ Inactive'}
          </button>
        </div>

        <div>
          <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
            Featured Product
          </label>
          <button
            type="button"
            onClick={() => updateFormData('is_featured', !formData.is_featured)}
            className="px-4 py-2 rounded-lg text-sm font-medium transition-all"
            style={{
              background: formData.is_featured ? 'var(--color-warning)' : 'var(--color-surface-alt)',
              color: formData.is_featured ? 'white' : 'var(--color-text-secondary)',
              border: formData.is_featured ? 'none' : '1px solid var(--color-border)',
            }}
          >
            {formData.is_featured ? '⭐ Featured' : 'Not Featured'}
          </button>
        </div>
      </div>

      {/* Translations */}
      <div>
        {/* Language tabs */}
        {isMultiLang && (
          <div
            className="flex flex-wrap gap-1 border-b mb-4"
            style={{ borderColor: 'var(--color-border)' }}
          >
            {languages.map((lang) => {
              const t = getTranslation(lang.code);
              const hasName = (t?.name ?? '').trim().length > 0;
              const isActive = activeTab === lang.code;
              return (
                <button
                  key={lang.code}
                  type="button"
                  onClick={() => setActiveTab(lang.code)}
                  className="px-4 py-2 text-sm font-medium transition-all whitespace-nowrap border-b-2"
                  style={{
                    color: isActive ? 'var(--color-cta)' : 'var(--color-text-secondary)',
                    borderColor: isActive ? 'var(--color-cta)' : 'transparent',
                    direction: lang.is_rtl ? 'rtl' : 'ltr',
                  }}
                >
                  <span className="flex items-center gap-1">
                    {lang.is_default ? '⭐ ' : ''}
                    {lang.name_native}
                    <span className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>
                      ({lang.code})
                    </span>
                    {hasName && <span className="text-xs text-green-500">✅</span>}
                  </span>
                </button>
              );
            })}
          </div>
        )}

        {/* Per-language panels */}
        {languages.map((lang) => {
          const isActive = activeTab === lang.code;
          const t        = getTranslation(lang.code);
          const isRTL    = lang.is_rtl;
          const dir      = isRTL ? 'rtl' : 'ltr';

          // Error keys for this language (index-based from Zod, or language_code-based from client)
          const langIdx = formData.translations.findIndex(
            (tr) => tr.language_code === lang.code,
          );
          const errName = errors[`translations.${langIdx}.name`];
          const errSlug = errors[`translations.${langIdx}.slug`] ??
                          errors[`translations.${lang.code}.slug`];

          return (
            <div key={lang.code} className={isActive ? 'block' : 'hidden'}>
              <div className="space-y-4" dir={dir}>
                {/* Name */}
                <div>
                  <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
                    Name <span className="text-red-500">*</span>
                  </label>
                  <input
                    type="text"
                    value={t?.name ?? ''}
                    onChange={(e) => {
                      const name = e.target.value;
                      updateTranslation(lang.code, 'name', name);
                      // Auto-generate slug on every keystroke unless user manually edited it
                      if (!slugManuallyEdited.has(lang.code)) {
                        updateTranslation(lang.code, 'slug', generateSlug(name));
                      }
                    }}
                    placeholder={
                      isMultiLang
                        ? `Enter product name in ${lang.name}`
                        : 'Enter product name'
                    }
                    className="w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20"
                    style={{
                      ...INPUT_STYLE,
                      direction: dir,
                      border: errName
                        ? '1px solid var(--color-danger)'
                        : '1px solid var(--color-border)',
                    }}
                  />
                  {errName && (
                    <p className="text-xs mt-1" style={ERROR_STYLE}>{errName}</p>
                  )}
                </div>

                {/* Slug */}
                <div>
                  <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
                    Slug
                  </label>
                  <input
                    type="text"
                    value={t?.slug ?? ''}
                    onChange={(e) => updateTranslation(lang.code, 'slug', e.target.value)}
                    placeholder={
                      isMultiLang ? `Enter slug in ${lang.name}` : 'Enter slug'
                    }
                    className="w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20"
                    style={{
                      ...INPUT_STYLE,
                      direction: dir,
                      border: errSlug
                        ? '1px solid var(--color-danger)'
                        : '1px solid var(--color-border)',
                    }}
                  />
                  {errSlug && (
                    <p className="text-xs mt-1" style={ERROR_STYLE}>{errSlug}</p>
                  )}
                  <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
                    URL-friendly name (auto-generated from name if left empty)
                  </p>
                </div>

                {/* Short Description */}
                <div>
                  <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
                    Short Description
                  </label>
                  <textarea
                    rows={3}
                    value={t?.short_description ?? ''}
                    onChange={(e) =>
                      updateTranslation(lang.code, 'short_description', e.target.value)
                    }
                    placeholder={
                      isMultiLang
                        ? `Enter short description in ${lang.name}`
                        : 'Enter short description'
                    }
                    className="w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20 resize-none"
                    style={{ ...INPUT_STYLE, direction: dir }}
                  />
                </div>

                {/* Description */}
                <div>
                  <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
                    Description
                  </label>
                  <RichTextEditor
                    content={t?.description ?? ''}
                    onChange={(html) => updateTranslation(lang.code, 'description', html)}
                    isRTL={isRTL}
                  />
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}