'use client';

import React, { useEffect, useState } from 'react';

import { useTranslations } from 'next-intl';
import Image from 'next/image';

import { FaEnvelope, FaFacebook, FaLink, FaShareNodes } from 'react-icons/fa6';

import { cn } from '@/lib/utils';

type ShareButtonVariant = 'outline' | 'filled';

interface ShareButtonsProps {
  url: string;
  title?: string;
  description?: string;
  // Google Calendar specific props
  eventTitle?: string;
  eventStartDate?: string; // ISO format: 2025-11-06T16:30:00.000Z
  eventEndDate?: string;
  eventLocation?: string | null;
  eventDescription?: string;
  className?: string;
  showFacebook?: boolean;
  showCopyLink?: boolean;
  showGoogleCalendar?: boolean;
  showEmail?: boolean;
  showNativeShare?: boolean;
  vertical?: boolean; // Vertical layout for modal
  styleVariant?: ShareButtonVariant;
  connected?: boolean;
}

const ShareButtons: React.FC<ShareButtonsProps> = ({
  url,
  title = '',
  description = '',
  eventTitle,
  eventStartDate,
  eventEndDate,
  eventLocation,
  eventDescription,
  className = '',
  showFacebook = true,
  showCopyLink = false,
  showGoogleCalendar = false,
  showEmail = true,
  showNativeShare = false,
  vertical = false,
  styleVariant = 'outline',
  connected = false,
}) => {
  const t = useTranslations('shareButtons');
  const [copied, setCopied] = useState(false);
  const [canNativeShare, setCanNativeShare] = useState(false);

  useEffect(() => {
    setCanNativeShare(typeof navigator !== 'undefined' && !!navigator.share);
  }, []);

  const buttonBaseClass = cn(
    'flex items-center justify-center transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#151720]/50 focus-visible:ring-offset-2',
    connected ? 'w-12 h-12 rounded-none' : 'w-10 h-10 rounded-md'
  );

  const connectedSeparatorClass = connected
    ? vertical
      ? 'border-b border-[#151720]/15 last:border-b-0'
      : 'border-r border-[#151720]/15 last:border-r-0'
    : '';

  const getButtonClass = (
    button: 'native' | 'copy' | 'email' | 'facebook' | 'google',
    isActive?: boolean
  ) => {
    const googleIconOnlyClass = cn(
      buttonBaseClass,
      connectedSeparatorClass,
      'bg-transparent border-0 shadow-none p-0 hover:opacity-85 focus-visible:ring-[#151720]/40'
    );

    const filledNeutralBase = connected
      ? cn(
          buttonBaseClass,
          connectedSeparatorClass,
          'bg-[#f5f6f8] text-[#1b2030] shadow-[inset_0_1px_0_rgba(255,255,255,0.78)] hover:bg-[#eceff4] hover:text-[#0f1422] active:bg-[#e4e8ef]'
        )
      : cn(
          buttonBaseClass,
          'border border-[#151720]/20 bg-[#f5f6f8] text-[#1b2030] shadow-[0_6px_18px_-14px_rgba(20,25,40,0.55),inset_0_1px_0_rgba(255,255,255,0.82)] hover:border-[#151720]/30 hover:bg-[#eceff4] hover:text-[#0f1422]'
        );

    if (styleVariant === 'filled') {
      switch (button) {
        case 'native':
          return cn(
            buttonBaseClass,
            connectedSeparatorClass,
            'bg-gradient-to-br from-[#5a4f48] via-[#4a403a] to-[#3a322e] text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.24)] hover:brightness-105'
          );
        case 'copy':
          return cn(
            filledNeutralBase,
            isActive
              ? connected
                ? 'bg-emerald-100 text-emerald-800 hover:bg-emerald-100'
                : 'border-emerald-300 bg-emerald-50 text-emerald-700 hover:bg-emerald-100'
              : ''
          );
        case 'email':
          return cn(
            buttonBaseClass,
            connectedSeparatorClass,
            'bg-gradient-to-br from-[#ff8462] via-[#f26b5f] to-[#df566a] text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.24)] hover:brightness-105'
          );
        case 'facebook':
          return cn(
            buttonBaseClass,
            connectedSeparatorClass,
            'bg-[#1877F2] text-white shadow-sm hover:bg-[#1664cf] focus-visible:ring-[#1877F2]/50'
          );
        case 'google':
          return googleIconOnlyClass;
        default:
          return buttonBaseClass;
      }
    }

    switch (button) {
      case 'native':
        return cn(
          buttonBaseClass,
          connectedSeparatorClass,
          'border border-[#4a403a] text-[#4a403a] hover:bg-[#4a403a] hover:text-white'
        );
      case 'copy':
      case 'email':
        return cn(
          buttonBaseClass,
          connectedSeparatorClass,
          'border border-[#e35d66] text-[#e35d66] hover:bg-[#e35d66] hover:text-white'
        );
      case 'facebook':
        return cn(
          buttonBaseClass,
          connectedSeparatorClass,
          'border border-[#1877F2] text-[#1877F2] hover:opacity-80'
        );
      case 'google':
        return googleIconOnlyClass;
      default:
        return buttonBaseClass;
    }
  };

  // Facebook share
  const handleFacebookShare = () => {
    const facebookUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;
    window.open(facebookUrl, '_blank', 'width=1024,height=768');
  };

  // Copy link to clipboard
  const handleCopyLink = async () => {
    try {
      await navigator.clipboard.writeText(url);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      console.error('Failed to copy:', err);
    }
  };

  // Email share
  const handleEmailShare = () => {
    const subject = encodeURIComponent(eventTitle || title);
    const body = encodeURIComponent(
      `${eventTitle || title}\n\n${eventDescription || description}\n\n${url}`
    );
    window.location.href = `mailto:?subject=${subject}&body=${body}`;
  };

  // Google Calendar add event
  const handleGoogleCalendar = () => {
    if (!eventStartDate) return;

    // Convert ISO string (with timezone) to Google Calendar UTC format (yyyyMMddTHHmmssZ)
    const formatDateForGoogle = (isoString: string) => {
      return new Date(isoString).toISOString().replace(/[-:]/g, '').split('.')[0] + 'Z';
    };

    const startFormatted = formatDateForGoogle(eventStartDate);
    const endFormatted = eventEndDate
      ? formatDateForGoogle(eventEndDate)
      : formatDateForGoogle(
          new Date(new Date(eventStartDate).getTime() + 2 * 60 * 60 * 1000).toISOString()
        ); // +2 hours default

    const params = new URLSearchParams({
      action: 'TEMPLATE',
      text: eventTitle || title,
      dates: `${startFormatted}/${endFormatted}`,
      details: eventDescription || description || '',
      location: eventLocation || '',
      trp: 'false', // Don't show event as busy
    });

    const googleCalendarUrl = `https://calendar.google.com/calendar/render?${params.toString()}`;
    window.open(googleCalendarUrl, '_blank');
  };

  const handleNativeShare = async () => {
    if (!canNativeShare) return;
    try {
      await navigator.share({
        title: eventTitle || title || undefined,
        text: eventDescription || description || undefined,
        url,
      });
    } catch (error) {
      // User cancelled share dialog; no further action needed.
      if (
        error &&
        typeof error === 'object' &&
        'name' in error &&
        (error as { name?: string }).name === 'AbortError'
      ) {
        return;
      }
      console.error('Native share failed:', error);
    }
  };

  return (
    <div
      className={cn(
        'flex items-center',
        vertical ? 'flex-col' : 'flex-row flex-wrap',
        connected ? 'gap-0' : 'gap-3',
        className
      )}
    >
      {/* Native Share */}
      {showNativeShare && canNativeShare && (
        <button
          onClick={handleNativeShare}
          className={getButtonClass('native')}
          aria-label={t('share')}
          title={t('share')}
        >
          <FaShareNodes size={18} />
        </button>
      )}

      {/* Facebook */}
      {showFacebook && (
        <button
          onClick={handleFacebookShare}
          className={getButtonClass('facebook')}
          aria-label={t('shareOnFacebook')}
          title={t('shareOnFacebook')}
        >
          <FaFacebook size={20} />
        </button>
      )}

      {/* Email */}
      {showEmail && (
        <button
          onClick={handleEmailShare}
          className={getButtonClass('email')}
          aria-label={t('sendEmail')}
          title={t('sendEmail')}
        >
          <FaEnvelope size={18} />
        </button>
      )}

      {/* Copy Link */}
      {showCopyLink && (
        <button
          onClick={handleCopyLink}
          className={getButtonClass('copy', copied)}
          aria-label={t('copyLink')}
          title={copied ? t('linkCopied') : t('copyLink')}
        >
          {copied ? <span className="text-sm font-semibold">OK</span> : <FaLink size={18} />}
        </button>
      )}

      {/* Google Calendar */}
      {showGoogleCalendar && eventStartDate && (
        <button
          onClick={handleGoogleCalendar}
          className={getButtonClass('google')}
          aria-label={t('addToGoogleCalendar')}
          title={t('addToGoogleCalendar')}
        >
          <Image
            src="/assets/images/google-cal.svg"
            alt="Google Calendar"
            width={connected ? 48 : 40}
            height={connected ? 48 : 40}
            className="block w-full h-full"
          />
        </button>
      )}
    </div>
  );
};

export default ShareButtons;