/**
 * Social Preview Component
 *
 * Shows a preview of how content will appear on social media platforms.
 *
 * @package
 */

import { __ } from '@wordpress/i18n';

const platformLimits = {
  facebook: {
    title: 80,
    description: 200,
  },
  twitter: {
    title: 70,
    description: (cardType) => ('summary_large_image' === cardType ? 200 : 125),
  },
  // LinkedIn reads Open Graph tags; numbers reflect feed truncation, not API maxima.
  linkedin: {
    title: 150,
    description: 300,
  },
};

export const getCharacterLimit = (platform, type, cardType) => {
  const limits = platformLimits[platform];
  if (!limits) {
    return 'title' === type ? 70 : 160;
  }

  const limit = limits[type];
  return 'function' === typeof limit ? limit(cardType) : limit;
};

const normalizeCardType = (cardType) => (
  ['summary', 'summary_large_image'].includes(cardType) ? cardType : 'summary'
);

const getPreviewLocation = (url) => {
  try {
    const parsed = new URL(url || window.location.href);
    const host = parsed.hostname.replace(/^www\./i, '').toLowerCase();
    const path = parsed.pathname && parsed.pathname !== '/' ? parsed.pathname.replace(/\/$/, '') : '';

    return path ? `${host}${path}` : host;
  } catch (error) {
    return window.location.hostname.replace(/^www\./i, '').toLowerCase();
  }
};

const SocialPreview = ({ platform, cardType = 'summary', title, description, imageUrl, url }) => {
  const previewCardType = normalizeCardType(cardType);
  const displayLocation = getPreviewLocation(url);

  // Truncate text based on platform limits
  const truncateText = (text, maxLength) => {
    if (!text || text.length <= maxLength) {
      return text;
    }
    return text.substring(0, maxLength - 3) + '…';
  };

  const displayTitle = truncateText(
    title || __('Page Title', 'prorank-seo'),
    getCharacterLimit(platform, 'title', previewCardType)
  );

  const displayDescription = truncateText(
    description ||
      __('Add a description to see how your content will appear on social media.', 'prorank-seo'),
    getCharacterLimit(platform, 'description', previewCardType)
  );

  // Facebook Preview
  if ('facebook' === platform) {
    return (
      <div className="prorank-social-preview prorank-social-preview--facebook">
        <div className="prorank-social-preview__badge prorank-social-preview__badge--facebook">
          {__('Facebook Preview', 'prorank-seo')}
        </div>
        <div className="prorank-social-preview__container">
          {imageUrl && (
            <div className="prorank-social-preview__image">
              <img src={imageUrl} alt={__('Facebook preview', 'prorank-seo')} />
            </div>
          )}
          <div className="prorank-social-preview__content">
            <div className="prorank-social-preview__domain">{displayLocation}</div>
            <h3 className="prorank-social-preview__title">{displayTitle}</h3>
            <p className="prorank-social-preview__description">{displayDescription}</p>
          </div>
        </div>
      </div>
    );
  }

  // LinkedIn Preview — reads from Open Graph; no separate metadata fields.
  if ('linkedin' === platform) {
    return (
      <div className="prorank-social-preview prorank-social-preview--linkedin">
        <div className="prorank-social-preview__badge prorank-social-preview__badge--linkedin">
          {__('LinkedIn Preview', 'prorank-seo')}
        </div>
        <div className="prorank-social-preview__container">
          <div className="prorank-social-preview__image">
            {imageUrl ? (
              <img src={imageUrl} alt={__('LinkedIn preview', 'prorank-seo')} />
            ) : (
              <span className="prorank-social-preview__image-placeholder">
                {__('No Open Graph image', 'prorank-seo')}
              </span>
            )}
          </div>
          <div className="prorank-social-preview__content">
            <h3 className="prorank-social-preview__title">{displayTitle}</h3>
            <p className="prorank-social-preview__description">{displayDescription}</p>
            <div className="prorank-social-preview__domain">{displayLocation}</div>
          </div>
        </div>
      </div>
    );
  }

  // Twitter/X Preview
  if ('twitter' === platform) {
    return (
      <div
        className={`prorank-social-preview prorank-social-preview--twitter prorank-social-preview--twitter-${previewCardType}`}
      >
        <div className="prorank-social-preview__badge prorank-social-preview__badge--twitter">
          {__('X Preview', 'prorank-seo')}
        </div>
        <div className="prorank-social-preview__container">
          {imageUrl && (
            <div className="prorank-social-preview__image">
              <img src={imageUrl} alt={__('X preview', 'prorank-seo')} />
            </div>
          )}
          <div className="prorank-social-preview__content">
            <h3 className="prorank-social-preview__title">{displayTitle}</h3>
            <p className="prorank-social-preview__description">{displayDescription}</p>
            <div className="prorank-social-preview__domain">{displayLocation}</div>
          </div>
        </div>
      </div>
    );
  }

  return null;
};

export default SocialPreview;