'use client';

import { useState } from 'react';
import SchemaEditor from '@/components/ui/SchemaEditor';
import type {
  Language,
  ProductData,
  ProductTranslation,
} from '@/types/product.types';

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;

interface SeoStepProps {
  formData: ProductData;
  updateTranslation: (
    languageCode: string,
    field: keyof ProductTranslation,
    value: unknown,
  ) => void;
  languages: Language[];
  defaultLanguage: Language;
}

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

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

  const isMultiLang = languages.length > 1;

  // ─── Render ──────────────────────────────────────────────────────────────

  return (
    <div className="space-y-6">
      <h2 className="text-lg font-semibold" style={{ color: 'var(--color-text)' }}>
        SEO
      </h2>

      {/* ── SEO ──────────────────────────────────────────────────────────── */}
      <div>
        <h3 className="text-sm font-medium mb-4" style={LABEL_STYLE}>SEO Settings</h3>

        {/* Language tabs */}
        {isMultiLang && (
          <div
            className="flex flex-wrap gap-1 border-b mb-4"
            style={{ borderColor: 'var(--color-border)' }}
          >
            {languages.map((lang) => {
              const isActive = activeTab === lang.code;
              return (
                <button
                  key={lang.code}
                  type="button"
                  onClick={() => setActiveTab(lang.code)}
                  className="px-3 py-1.5 text-xs font-medium transition-all border-b-2"
                  style={{
                    color: isActive ? 'var(--color-cta)' : 'var(--color-text-secondary)',
                    borderColor: isActive ? 'var(--color-cta)' : 'transparent',
                  }}
                >
                  {lang.name_native} ({lang.code})
                </button>
              );
            })}
          </div>
        )}

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

          return (
            <div key={lang.code} className={isActive ? 'block' : 'hidden'}>
              <div className="space-y-4" dir={dir}>
                {/* Meta Title */}
                <div>
                  <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
                    Meta Title
                  </label>
                  <input
                    type="text"
                    value={t?.meta_title ?? ''}
                    onChange={(e) =>
                      updateTranslation(lang.code, 'meta_title', e.target.value)
                    }
                    maxLength={160}
                    placeholder={
                      isMultiLang
                        ? `Enter meta title in ${lang.name}`
                        : 'Enter meta title'
                    }
                    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 }}
                  />
                  <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
                    {(t?.meta_title ?? '').length}/160 characters
                  </p>
                </div>

                {/* Meta Description */}
                <div>
                  <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
                    Meta Description
                  </label>
                  <textarea
                    rows={2}
                    value={t?.meta_description ?? ''}
                    onChange={(e) =>
                      updateTranslation(lang.code, 'meta_description', e.target.value)
                    }
                    maxLength={320}
                    placeholder={
                      isMultiLang
                        ? `Enter meta description in ${lang.name}`
                        : 'Enter meta 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 }}
                  />
                  <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
                    {(t?.meta_description ?? '').length}/320 characters
                  </p>
                </div>

                {/* Meta Keywords */}
                <div>
                  <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
                    Meta Keywords
                  </label>
                  <input
                    type="text"
                    value={t?.meta_keywords ?? ''}
                    onChange={(e) =>
                      updateTranslation(lang.code, 'meta_keywords', e.target.value)
                    }
                    placeholder={
                      isMultiLang
                        ? `Enter meta keywords in ${lang.name}`
                        : 'Enter meta keywords'
                    }
                    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 }}
                  />
                  <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
                    Comma-separated keywords for SEO
                  </p>
                </div>

                {/* ── Schema Markup ──────────────────────────────────── */}
                <div className="pt-2 border-t" style={{ borderColor: 'var(--color-border)' }}>
                  <SchemaEditor
                    value={t?.product_schemas ?? {}}
                    onChange={(schemas) =>
                      updateTranslation(lang.code, 'product_schemas', schemas)
                    }
                    label={`Schema Markup (JSON-LD) — ${lang.name_native}`}
                    placeholder='{"@context":"https://schema.org","@type":"Product",...}'
                    isRTL={isRTL}
                  />
                </div>
              </div>

              {/* SEO preview (direction intentionally ltr for readability) */}
              {t?.meta_title && (
                <div
                  className="mt-4 p-4 rounded-lg"
                  style={{
                    background: 'var(--color-surface-alt)',
                    border: '1px solid var(--color-border)',
                  }}
                >
                  <p className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>
                    Search Engine Preview
                  </p>
                  <p className="text-sm font-medium text-blue-600 truncate">{t.meta_title}</p>
                  <p className="text-xs text-gray-500 truncate">{t.meta_description}</p>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}