import { Link } from 'react-router-dom';
import type { EditorialTileSectionPayload } from '@homaroma/types';
import { useTranslation } from 'react-i18next';
import { getLocalizedField } from '../utils/localization';

interface DynamicEditorialTileProps {
  payload: EditorialTileSectionPayload;
}

export default function DynamicEditorialTile({ payload }: DynamicEditorialTileProps) {
  const { i18n } = useTranslation();
  const lang = i18n.language;
  const {
    imageUrl,
    imagePosition = 'left',
    imageAspectRatio = 'square',
    buttonLink
  } = payload;
  const title = getLocalizedField(payload.title, lang);
  const description = getLocalizedField(payload.description, lang);
  const buttonText = getLocalizedField(payload.buttonText, lang);

  const getAspectClass = (ratio?: string) => {
    switch (ratio) {
      case 'portrait':
        return 'aspect-[3/4]';
      case 'tall':
        return 'aspect-[2/3]';
      case 'auto':
        return 'aspect-auto';
      case 'square':
      default:
        return 'aspect-square';
    }
  };

  const renderTitle = (text: string) => {
    if (!text) return null;
    return text.split('[').map((part, i) => {
      if (part.includes(']')) {
        const [accent, rest] = part.split(']');
        return (
          <span key={i}>
            <span className="text-pop-pink font-medium italic">
              {accent}
            </span>
            {rest}
          </span>
        );
      }
      return <span key={i}>{part}</span>;
    });
  };

  return (
    <section
      className="ui-section-band w-full overflow-hidden"
      style={{ backgroundColor: payload.backgroundColor, color: payload.textColor }}
    >
      <div className="ui-section-inner grid grid-cols-1 items-center gap-12 md:grid-cols-2 md:gap-20">
        <div className={`group relative ${getAspectClass(imageAspectRatio)} w-full overflow-hidden rounded-3xl shadow-xl ${
          imagePosition === 'left' ? 'md:order-1' : 'md:order-2'
        }`}>
          <img 
            src={imageUrl} 
            alt={title}
            className="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
            onError={(e) => {
              (e.target as HTMLImageElement).style.display = 'none';
            }}
          />
          <div className="absolute inset-0 bg-neutral-900/5 mix-blend-overlay"></div>
        </div>

        <div className={`flex flex-col justify-center space-y-6 md:space-y-8 ${
          imagePosition === 'left' ? 'md:order-2 md:pl-8' : 'md:order-1 md:pr-8'
        }`}>
          <h2 className="font-serif text-3xl font-light leading-tight tracking-wide md:text-5xl" style={{ color: payload.textColor }}>
            {renderTitle(title) || title}
          </h2>
          <div className="w-12 h-[1px] bg-pop-pink"></div>
          <p className="whitespace-pre-line text-sm font-light leading-relaxed opacity-90 md:text-base" style={{ color: payload.textColor }}>
            {description}
          </p>
          {buttonText && buttonLink && (
            <div className="pt-4">
              <Link
                to={buttonLink}
                className="ui-chip border-current px-8 py-3.5 hover:bg-pop-pink hover:border-pop-pink hover:text-pop-bg"
              >
                {buttonText}
              </Link>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}