
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';

const SOCIAL_CONNECTED_KEY = 'castad_social_connected';

interface ConnectedSocialAccount {
  platform: string;
  account_id: string;
  channel_name: string;
  profile_image: string | null;
  connected_at: string;
}

const SocialConnectSuccess: React.FC = () => {
  const { t } = useTranslation();
  const [countdown, setCountdown] = useState(3);

  const searchParams = new URLSearchParams(window.location.search);
  const platform = searchParams.get('platform') || 'unknown';
  const accountId = searchParams.get('account_id') || '';
  const channelName = searchParams.get('channel_name') || '';
  const profileImage = searchParams.get('profile_image') || null;

  const platformName = platform === 'youtube' ? 'YouTube' :
                       platform === 'instagram' ? 'Instagram' :
                       platform === 'facebook' ? 'Facebook' : platform;

  useEffect(() => {
    if (platform && accountId) {
      const connectedAccount: ConnectedSocialAccount = {
        platform,
        account_id: accountId,
        channel_name: channelName,
        profile_image: profileImage,
        connected_at: new Date().toISOString(),
      };
      localStorage.setItem(SOCIAL_CONNECTED_KEY, JSON.stringify(connectedAccount));
      console.log('[Social Connect] Account saved:', connectedAccount);
    }
  }, [platform, accountId, channelName, profileImage]);

  const navigateToHome = () => {
    window.location.href = '/';
  };

  useEffect(() => {
    const timer = setInterval(() => {
      setCountdown(prev => {
        if (prev <= 1) {
          clearInterval(timer);
          navigateToHome();
          return 0;
        }
        return prev - 1;
      });
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return (
    <div className="social-connect-page">
      <div className="social-connect-card success">
        {profileImage ? (
          <img
            src={profileImage}
            alt={channelName || platformName}
            className="social-connect-profile-image"
          />
        ) : (
          <div className="social-connect-icon success">
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
              <polyline points="22 4 12 14.01 9 11.01" />
            </svg>
          </div>
        )}

        <h1 className="social-connect-title">
          {t('social.connectSuccess.title', { name: channelName || platformName })}
        </h1>

        <p className="social-connect-message">
          {channelName
            ? t('social.connectSuccess.messageWithChannel', { platform: platformName })
            : t('social.connectSuccess.messageWithoutChannel')}
        </p>

        {channelName && (
          <div className="social-connect-account-info">
            <span className="social-connect-channel-badge">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <polyline points="20 6 9 17 4 12" />
              </svg>
              {t('social.connectSuccess.verified')}
            </span>
          </div>
        )}

        <p className="social-connect-countdown">
          {t('social.connectSuccess.countdown', { count: countdown })}
        </p>

        <button
          onClick={navigateToHome}
          className="social-connect-button"
        >
          {t('social.connectSuccess.goNow')}
        </button>
      </div>
    </div>
  );
};

export default SocialConnectSuccess;
