/**
* ShareNewsToDiscussionButton Component
*
* Button that allows users to share a news article to the forum discussion.
* Shows a confirmation modal and navigates to the forum with the article data.
*/
'use client';
import { useState } from 'react';
import { MessageSquare, X, Loader2 } from 'lucide-react';
import { useRouter } from 'next/navigation';
import { useLocale } from 'next-intl';
import { useAuth } from '@/contexts/AuthContext';
export interface NewsArticleData {
id: string;
title: string;
url: string;
source: string;
sourceName: string;
imageUrl?: string;
summary?: string;
publishedAt?: string;
}
// Type for news article draft stored in sessionStorage
export interface NewsArticleDraft {
article: NewsArticleData;
timestamp: number;
}
interface ShareNewsToDiscussionButtonProps {
article: NewsArticleData;
size?: 'sm' | 'md';
className?: string;
}
export function ShareNewsToDiscussionButton({
article,
size = 'sm',
className = '',
}: ShareNewsToDiscussionButtonProps) {
const [isModalOpen, setIsModalOpen] = useState(false);
const [isNavigating, setIsNavigating] = useState(false);
const router = useRouter();
const locale = useLocale();
const { user } = useAuth();
const handleOpenModal = (e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();
setIsModalOpen(true);
};
const handleCloseModal = (e?: React.MouseEvent) => {
if (e) {
e.preventDefault();
e.stopPropagation();
}
if (!isNavigating) {
setIsModalOpen(false);
}
};
const handleShare = (e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();
setIsNavigating(true);
// Save the news article to sessionStorage (same pattern as chatbot sharing)
const draft: NewsArticleDraft = {
article,
timestamp: Date.now(),
};
sessionStorage.setItem('share_news_article_draft', JSON.stringify(draft));
// Navigate to the general discussion category
router.push(`/${locale}/forum/general`);
};
const iconSize = size === 'sm' ? 18 : 20;
return (
<>
{/* Share Button */}
<button
onClick={handleOpenModal}
className={`
rounded-lg border-2 border-border shadow-md transition-all
bg-bg-secondary/80 backdrop-blur-sm
text-text-primary hover:text-accent-red hover:border-accent-red hover:shadow-lg
${size === 'sm' ? 'p-2' : 'p-2.5'}
${className}
`}
title={locale === 'fr' ? 'Partager sur le forum' : 'Share to Discussion'}
>
<MessageSquare size={iconSize} />
</button>
{/* Confirmation Modal */}
{isModalOpen && (
<>
{/* Backdrop */}
<div
className="fixed inset-0 bg-black/90 z-50"
onClick={handleCloseModal}
/>
{/* Modal */}
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
<div
className="bg-slate-800 border-2 border-slate-600 rounded-xl max-w-lg w-full shadow-2xl"
onClick={(e) => e.stopPropagation()}
>
{/* Header */}
<div className="flex items-center justify-between p-4 border-b border-slate-600">
<div className="flex items-center gap-2">
<MessageSquare className="w-5 h-5 text-red-500" />
<h3 className="text-lg font-semibold text-white">
{locale === 'fr' ? 'Partager sur le forum' : 'Share to Discussion'}
</h3>
</div>
<button
onClick={handleCloseModal}
disabled={isNavigating}
className="p-1.5 hover:bg-slate-700 rounded-lg transition-colors disabled:opacity-50"
>
<X className="w-5 h-5 text-gray-400" />
</button>
</div>
{/* Article Preview */}
<div className="p-4">
<div className="bg-slate-900 border border-slate-600 rounded-lg overflow-hidden">
<div className="flex gap-3 p-3">
{article.imageUrl && (
<div className="flex-shrink-0 w-20 h-20 rounded-lg overflow-hidden bg-slate-700">
<img
src={article.imageUrl}
alt=""
className="w-full h-full object-cover"
onError={(e) => {
(e.target as HTMLImageElement).style.display = 'none';
}}
/>
</div>
)}
<div className="flex-1 min-w-0">
<p className="text-xs text-gray-400 mb-1">
{article.sourceName}
</p>
<h4 className="text-sm font-medium text-white line-clamp-2 mb-1">
{article.title}
</h4>
{article.summary && (
<p className="text-xs text-gray-300 line-clamp-2">
{article.summary}
</p>
)}
</div>
</div>
</div>
<p className="text-sm text-gray-300 mt-4">
{locale === 'fr'
? "Cet article sera joint à votre publication. Vous pourrez ajouter vos commentaires et réflexions."
: "This article will be attached to your post. You can add your comments and thoughts."}
</p>
{!user && (
<div className="mt-3 p-3 bg-amber-900/50 border border-amber-600 rounded-lg">
<p className="text-sm text-amber-300">
{locale === 'fr'
? 'Vous devez être connecté pour publier sur le forum.'
: 'You must be signed in to post on the forum.'}
</p>
</div>
)}
</div>
{/* Actions */}
<div className="flex gap-3 p-4 border-t border-slate-600">
<button
onClick={handleCloseModal}
disabled={isNavigating}
className="flex-1 px-4 py-2.5 bg-slate-700 hover:bg-slate-600 text-white font-medium rounded-lg transition-colors disabled:opacity-50"
>
{locale === 'fr' ? 'Annuler' : 'Cancel'}
</button>
<button
onClick={handleShare}
disabled={isNavigating}
className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-colors disabled:opacity-50"
>
{isNavigating ? (
<>
<Loader2 className="w-4 h-4 animate-spin" />
<span>{locale === 'fr' ? 'Redirection...' : 'Redirecting...'}</span>
</>
) : (
<>
<MessageSquare className="w-4 h-4" />
<span>{locale === 'fr' ? 'Créer une discussion' : 'Create Discussion'}</span>
</>
)}
</button>
</div>
</div>
</div>
</>
)}
</>
);
}
