/* global wp */
/**
 * Social Tab Content Component
 *
 * @package
 */

import { __ } from '@wordpress/i18n';
import {
  TextControl,
  TextareaControl,
  SelectControl,
  Button,
  Spinner,
} from '@wordpress/components';
import apiFetch from '@wordpress/api-fetch';
/* eslint-disable @wordpress/no-unsafe-wp-apis */
import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
import { useState, useEffect, useCallback, useMemo, useRef } from '@wordpress/element';
import { fetchMeta, invalidateMeta } from './metaStore';

// Access lodash from WordPress global
const { debounce } = window.lodash || { debounce: (fn) => fn };

// Import components
import SocialPreview, { getCharacterLimit } from './components/SocialPreview';
import CharacterCounter from './components/CharacterCounter';

// Only card types with full field support; legacy app/player values display as summary.
const SUPPORTED_CARD_TYPES = ['summary', 'summary_large_image'];

const SocialTabContent = ({ postId }) => {
  // State for Open Graph fields
  const [ogTitle, setOgTitle] = useState('');
  const [ogDescription, setOgDescription] = useState('');
  const [ogImageId, setOgImageId] = useState(0);
  const [ogImageUrl, setOgImageUrl] = useState('');

  // State for Twitter fields
  const [twitterTitle, setTwitterTitle] = useState('');
  const [twitterDescription, setTwitterDescription] = useState('');
  const [twitterImageId, setTwitterImageId] = useState(0);
  const [twitterImageUrl, setTwitterImageUrl] = useState('');
  const [twitterCardType, setTwitterCardType] = useState('summary');

  // State for UI
  const [isLoading, setIsLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);
  const [saveError, setSaveError] = useState(null);
  const [defaults, setDefaults] = useState({ title: '', description: '', imageUrl: '', url: '' });
  const [editorTitle, setEditorTitle] = useState('');

  // Fetch existing social data on mount
  useEffect(() => {
    if (!postId) {
      setIsLoading(false);
      return;
    }

    setIsLoading(true);

    fetchMeta(postId)
      .then((response) => {
        if (response.success && response.data) {
          // Set OG fields
          setOgTitle(response.data.og_title || '');
          setOgDescription(response.data.og_description || '');
          setOgImageId(response.data.og_image_id || 0);
          setOgImageUrl(response.data.og_image_url || '');

          // Set Twitter fields
          setTwitterTitle(response.data.twitter_title || '');
          setTwitterDescription(response.data.twitter_description || '');
          setTwitterImageId(response.data.twitter_image_id || 0);
          setTwitterImageUrl(response.data.twitter_image_url || '');
          // Normalize legacy app/player values for display only — nothing is
          // written back until the user actually changes a field.
          const savedCardType = response.data.twitter_card_type || 'summary';
          setTwitterCardType(SUPPORTED_CARD_TYPES.includes(savedCardType) ? savedCardType : 'summary');

          // Set defaults from meta tab
          setDefaults({
            title: response.data.seo_title || response.data.defaults?.title || '',
            description: response.data.seo_description || '',
            imageUrl: response.data.featured_image_url || '',
            url: response.data.defaults?.url || '',
          });
        }
      })
      .catch(() => {
        setSaveError(__('Failed to load social data.', 'prorank-seo'));
      })
      .finally(() => {
        setIsLoading(false);
      });
  }, [postId]);

  useEffect(() => {
    const getEditorTitle = () => {
      const editor = window.wp?.data?.select?.('core/editor');
      if (editor) {
        return editor.getEditedPostAttribute('title') || defaults.title || '';
      }

      const titleInput = document.querySelector('#title');
      return titleInput?.value || defaults.title || '';
    };

    const applyTitle = () => {
      const nextTitle = getEditorTitle();
      setEditorTitle((prev) => (prev === nextTitle ? prev : nextTitle));
    };

    applyTitle();

    let unsubscribe = null;
    let intervalId = null;

    if (window.wp?.data?.subscribe && window.wp?.data?.select?.('core/editor')) {
      unsubscribe = window.wp.data.subscribe(applyTitle);
    } else {
      intervalId = window.setInterval(applyTitle, 1000);
    }

    return () => {
      if (typeof unsubscribe === 'function') {
        unsubscribe();
      }
      if (intervalId) {
        window.clearInterval(intervalId);
      }
    };
  }, [defaults.title]);

  const previewTitle = editorTitle || defaults.title;

  // Ref keeps latest field values so the debounced save never fires stale data.
  const socialStateRef = useRef({});
  socialStateRef.current = {
    ogTitle,
    ogDescription,
    ogImageId,
    twitterTitle,
    twitterDescription,
    twitterImageId,
    twitterCardType,
  };

  // Create save function — reads from ref, so callback is stable (postId-only dep).
  const saveSocialDataImpl = useCallback((data) => {
    if (!postId) return;

    setIsSaving(true);
    setSaveError(null);

    const s = socialStateRef.current;
    apiFetch({
      path: `/prorank-seo/v1/meta/${postId}`,
      method: 'POST',
      data: {
        og_title: s.ogTitle,
        og_description: s.ogDescription,
        og_image_id: s.ogImageId,
        twitter_title: s.twitterTitle,
        twitter_description: s.twitterDescription,
        twitter_image_id: s.twitterImageId,
        twitter_card_type: s.twitterCardType,
        ...data,
      },
    })
      .then((response) => {
        if (!response.success) {
          throw new Error(response.message || __('Save failed', 'prorank-seo'));
        }
        // Drop the shared cache so other tabs refetch fresh data.
        invalidateMeta(postId);
      })
      .catch((error) => {
        setSaveError(error.message || __('Failed to save changes.', 'prorank-seo'));
      })
      .finally(() => {
        setIsSaving(false);
      });
  }, [postId]);

  // Stable debounced save — created once per postId, pending edits flushed on unmount
  // so a change made just before switching tabs is never silently dropped.
  const saveSocialData = useMemo(() => debounce(saveSocialDataImpl, 500), [saveSocialDataImpl]);
  useEffect(() => () => { if (saveSocialData.flush) saveSocialData.flush(); }, [saveSocialData]);

  // Handle field changes
  const handleOgTitleChange = (value) => {
    setOgTitle(value);
    saveSocialData({ og_title: value });
  };

  const handleOgDescriptionChange = (value) => {
    setOgDescription(value);
    saveSocialData({ og_description: value });
  };

  const handleOgImageSelect = (media) => {
    setOgImageId(media.id);
    setOgImageUrl(media.url);
    saveSocialData({ og_image_id: media.id });
  };

  const handleOgImageRemove = () => {
    setOgImageId(0);
    setOgImageUrl('');
    saveSocialData({ og_image_id: 0 });
  };

  const handleTwitterTitleChange = (value) => {
    setTwitterTitle(value);
    saveSocialData({ twitter_title: value });
  };

  const handleTwitterDescriptionChange = (value) => {
    setTwitterDescription(value);
    saveSocialData({ twitter_description: value });
  };

  const handleTwitterImageSelect = (media) => {
    setTwitterImageId(media.id);
    setTwitterImageUrl(media.url);
    saveSocialData({ twitter_image_id: media.id });
  };

  const handleTwitterImageRemove = () => {
    setTwitterImageId(0);
    setTwitterImageUrl('');
    saveSocialData({ twitter_image_id: 0 });
  };

  const handleTwitterCardTypeChange = (value) => {
    setTwitterCardType(value);
    saveSocialData({ twitter_card_type: value });
  };

  if (isLoading) {
    return (
      <div className="prorank-social-tab-loading">
        <Spinner />
        <span>{__('Loading social data…', 'prorank-seo')}</span>
      </div>
    );
  }

  return (
    <div className="prorank-social-tab-content">
      {/* Open Graph Section */}
      <div className="prorank-social-section">
        <h3>{__('Open Graph (Facebook)', 'prorank-seo')}</h3>
        <p className="description">
          {__(
            'Customize how your content appears when shared on Facebook and other platforms that support Open Graph.',
            'prorank-seo'
          )}
        </p>

        <div className="prorank-field-group">
          <TextControl
            label={__('Facebook Title', 'prorank-seo')}
            value={ogTitle}
            onChange={handleOgTitleChange}
            placeholder={previewTitle || __('Enter Facebook title…', 'prorank-seo')}
            help={__('Leave empty to use SEO title.', 'prorank-seo')}
            __nextHasNoMarginBottom={true}
            __next40pxDefaultSize={true}
          />
          <CharacterCounter
            value={ogTitle || previewTitle || ''}
            recommended={getCharacterLimit('facebook', 'title')}
            type="title"
            showPixels={false}
            fallbackNote={ogTitle ? null : __('Falls back to SEO title', 'prorank-seo')}
          />
        </div>

        <div className="prorank-field-group">
          <TextareaControl
            label={__('Facebook Description', 'prorank-seo')}
            value={ogDescription}
            onChange={handleOgDescriptionChange}
            placeholder={defaults.description || __('Enter Facebook description…', 'prorank-seo')}
            help={__('Leave empty to use meta description.', 'prorank-seo')}
            rows={3}
            __nextHasNoMarginBottom={true}
          />
          <CharacterCounter
            value={ogDescription || defaults.description || ''}
            recommended={getCharacterLimit('facebook', 'description')}
            type="description"
            showPixels={false}
            fallbackNote={ogDescription ? null : __('Falls back to meta description', 'prorank-seo')}
          />
        </div>

        <div className="prorank-field-group">
          {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
          <label className="components-base-control__label" id="og-image-label">
            {__('Facebook Image', 'prorank-seo')}
          </label>
          <MediaUploadCheck>
            <div className="prorank-media-upload" aria-labelledby="og-image-label">
              {ogImageUrl ? (
                <div className="prorank-media-preview">
                  <img src={ogImageUrl} alt={__('Facebook image preview', 'prorank-seo')} />
                  <Button isDestructive variant="secondary" onClick={handleOgImageRemove}>
                    {__('Remove Image', 'prorank-seo')}
                  </Button>
                </div>
              ) : (
                <MediaUpload
                  onSelect={handleOgImageSelect}
                  allowedTypes={['image']}
                  value={ogImageId}
                  render={({ open }) => (
                    <Button variant="secondary" onClick={open}>
                      {__('Select Image', 'prorank-seo')}
                    </Button>
                  )}
                />
              )}
            </div>
          </MediaUploadCheck>
          <p className="description">
            {__(
              'Recommended size: 1200 x 630 pixels. Leave empty to use featured image.',
              'prorank-seo'
            )}
          </p>
        </div>

        <div className="prorank-field-group">
          <SocialPreview
            platform="facebook"
            title={ogTitle || previewTitle}
            description={ogDescription || defaults.description}
            imageUrl={ogImageUrl || defaults.imageUrl}
            url={defaults.url}
          />
        </div>
      </div>

      <hr className="prorank-section-divider" />

      {/* Twitter/X Section */}
      <div className="prorank-social-section">
        <h3>{__('X (Twitter) Card', 'prorank-seo')}</h3>
        <p className="description">
          {__(
            'Customize how your content appears when shared on X (formerly Twitter).',
            'prorank-seo'
          )}
        </p>

        <div className="prorank-field-group">
          <SelectControl
            label={__('Card Type', 'prorank-seo')}
            value={twitterCardType}
            onChange={handleTwitterCardTypeChange}
            options={[
              { label: __('Summary', 'prorank-seo'), value: 'summary' },
              {
                label: __('Summary with Large Image', 'prorank-seo'),
                value: 'summary_large_image',
              },
            ]}
            __nextHasNoMarginBottom={true}
            __next40pxDefaultSize={true}
          />
        </div>

        <div className="prorank-field-group">
          <TextControl
            label={__('X Title', 'prorank-seo')}
            value={twitterTitle}
            onChange={handleTwitterTitleChange}
            placeholder={ogTitle || previewTitle || __('Enter X title…', 'prorank-seo')}
            help={__('Leave empty to use Facebook title or SEO title.', 'prorank-seo')}
            __nextHasNoMarginBottom={true}
            __next40pxDefaultSize={true}
          />
          <CharacterCounter
            value={twitterTitle || ogTitle || previewTitle || ''}
            recommended={getCharacterLimit('twitter', 'title')}
            type="title"
            showPixels={false}
            fallbackNote={twitterTitle ? null : __('Falls back to Facebook title or SEO title', 'prorank-seo')}
          />
        </div>

        <div className="prorank-field-group">
          <TextareaControl
            label={__('X Description', 'prorank-seo')}
            value={twitterDescription}
            onChange={handleTwitterDescriptionChange}
            placeholder={
              ogDescription || defaults.description || __('Enter X description…', 'prorank-seo')
            }
            help={__('Leave empty to use Facebook description or meta description.', 'prorank-seo')}
            rows={2}
            __nextHasNoMarginBottom={true}
          />
          <CharacterCounter
            value={twitterDescription || ogDescription || defaults.description || ''}
            recommended={getCharacterLimit('twitter', 'description', twitterCardType)}
            type="description"
            showPixels={false}
            fallbackNote={twitterDescription ? null : __('Falls back to Facebook description or meta description', 'prorank-seo')}
          />
        </div>

        <div className="prorank-field-group">
          {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
          <label className="components-base-control__label" id="twitter-image-label">
            {__('X Image', 'prorank-seo')}
          </label>
          <MediaUploadCheck>
            <div className="prorank-media-upload" aria-labelledby="twitter-image-label">
              {twitterImageUrl ? (
                <div className="prorank-media-preview">
                  <img src={twitterImageUrl} alt={__('X image preview', 'prorank-seo')} />
                  <Button isDestructive variant="secondary" onClick={handleTwitterImageRemove}>
                    {__('Remove Image', 'prorank-seo')}
                  </Button>
                </div>
              ) : (
                <MediaUpload
                  onSelect={handleTwitterImageSelect}
                  allowedTypes={['image']}
                  value={twitterImageId}
                  render={({ open }) => (
                    <Button variant="secondary" onClick={open}>
                      {__('Select Image', 'prorank-seo')}
                    </Button>
                  )}
                />
              )}
            </div>
          </MediaUploadCheck>
          <p className="description">
            {twitterCardType === 'summary_large_image'
              ? __(
                  'Recommended size: 1200 x 675 pixels. Leave empty to use Facebook image or the featured image.',
                  'prorank-seo'
                )
              : __(
                  'Recommended square image: 1200 x 1200 pixels. Leave empty to use Facebook image or the featured image.',
                  'prorank-seo'
                )}
          </p>
        </div>

        <div className="prorank-field-group">
          <SocialPreview
            platform="twitter"
            cardType={twitterCardType}
            title={twitterTitle || ogTitle || previewTitle}
            description={twitterDescription || ogDescription || defaults.description}
            imageUrl={twitterImageUrl || ogImageUrl || defaults.imageUrl}
            url={defaults.url}
          />
        </div>
      </div>

      <hr className="prorank-section-divider" />

      {/* LinkedIn Section — reuses Open Graph metadata (no separate fields) */}
      <div className="prorank-social-section prorank-social-section--linkedin">
        <h3>{__('LinkedIn', 'prorank-seo')}</h3>

        <div className="prorank-field-group">
          <SocialPreview
            platform="linkedin"
            title={ogTitle || previewTitle}
            description={ogDescription || defaults.description}
            imageUrl={ogImageUrl || defaults.imageUrl}
            url={defaults.url}
          />
        </div>
      </div>

      {/* Save Status */}
      {isSaving === true && (
        <div className="prorank-save-status prorank-save-status--saving">
          <Spinner />
          <span>{__('Saving…', 'prorank-seo')}</span>
        </div>
      )}

      {saveError && (
        <div className="prorank-save-status prorank-save-status--error">
          <span className="dashicons dashicons-warning"></span>
          <span>{saveError}</span>
        </div>
      )}
    </div>
  );
};

export default SocialTabContent;