/**
* BillDiscussionCard Component
*
* Displayed after chatbot discusses a bill, offering options to:
* - Share the conversation exchange to the bill's discussion forum
* - View existing discussions for the bill
* - Navigate to the bill page
*
* When shared, others can "fork" the conversation to continue with context.
*/
'use client';
import React, { useState } from 'react';
import { MessageSquare, Share2, ExternalLink, X, Loader2, Users, GitFork } from 'lucide-react';
import { Link, useRouter } from '@/i18n/navigation';
import { useLocale } from 'next-intl';
interface BillDiscussionCardProps {
billNumber: string;
session: string;
billTitle?: string;
userQuestion: string;
aiResponse: string;
conversationId: string;
onDismiss: () => void;
}
export function BillDiscussionCard({
billNumber,
session,
billTitle,
userQuestion,
aiResponse,
conversationId,
onDismiss,
}: BillDiscussionCardProps) {
const router = useRouter();
const locale = useLocale();
const [isSharing, setIsSharing] = useState(false);
const [shareError, setShareError] = useState<string | null>(null);
const [shareSuccess, setShareSuccess] = useState(false);
// Truncate content for preview
const truncate = (text: string, maxLength: number) => {
if (text.length <= maxLength) return text;
return text.slice(0, maxLength).trim() + '...';
};
const handleShareToDiscussion = async () => {
setIsSharing(true);
setShareError(null);
try {
const response = await fetch('/api/chat/share-to-forum', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
billNumber,
session,
billTitle,
userQuestion,
aiResponse,
conversationId,
}),
});
if (!response.ok) {
const data = await response.json();
throw new Error(data.error || 'Failed to share');
}
const data = await response.json();
setShareSuccess(true);
// Navigate to the bill discussion after a short delay
setTimeout(() => {
router.push(`/bills/${session}/${billNumber}#discussions` as any);
}, 1500);
} catch (error) {
setShareError(error instanceof Error ? error.message : 'Failed to share');
} finally {
setIsSharing(false);
}
};
const handleViewDiscussions = () => {
router.push(`/bills/${session}/${billNumber}#discussions` as any);
};
const billUrl = `/${locale}/bills/${session}/${billNumber}`;
return (
<div className="mt-4 p-4 bg-gray-800/50 border border-gray-700 rounded-lg">
{/* Header */}
<div className="flex items-start justify-between mb-3">
<div className="flex items-center gap-2">
<MessageSquare className="w-5 h-5 text-accent-red" />
<div>
<h3 className="text-sm font-semibold text-white">
Share This Analysis
</h3>
<p className="text-xs text-gray-400 mt-0.5">
Bill {billNumber} ({session})
{billTitle && ` • ${truncate(billTitle, 40)}`}
</p>
</div>
</div>
<button
onClick={onDismiss}
className="p-1 hover:bg-gray-700 rounded transition-colors"
title="Dismiss"
>
<X className="w-4 h-4 text-gray-400" />
</button>
</div>
{/* Exchange Preview */}
<div className="mb-3 p-3 bg-gray-900/50 border border-gray-700 rounded-md text-xs">
<div className="mb-2">
<span className="text-gray-500">You:</span>
<p className="text-gray-300 mt-0.5">{truncate(userQuestion, 100)}</p>
</div>
<div>
<span className="text-gray-500">Gordie:</span>
<p className="text-gray-300 mt-0.5">{truncate(aiResponse, 150)}</p>
</div>
</div>
{/* Description */}
<p className="text-sm text-gray-300 mb-3">
Share this conversation with other Canadians. They can{' '}
<span className="inline-flex items-center gap-1 text-accent-red">
<GitFork className="w-3 h-3" />
fork
</span>{' '}
it to continue the discussion with full context.
</p>
{/* Status Messages */}
{shareError && (
<div className="mb-3 p-2 bg-red-900/30 border border-red-700 rounded text-xs text-red-300">
{shareError}
</div>
)}
{shareSuccess && (
<div className="mb-3 p-2 bg-green-900/30 border border-green-700 rounded text-xs text-green-300">
Shared successfully! Redirecting to discussion...
</div>
)}
{/* Action Buttons */}
<div className="flex flex-wrap gap-2">
<button
onClick={handleShareToDiscussion}
disabled={isSharing || shareSuccess}
className="inline-flex items-center gap-2 px-4 py-2 bg-accent-red hover:bg-accent-red/90 text-white rounded-lg text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
{isSharing ? (
<>
<Loader2 className="w-4 h-4 animate-spin" />
<span>Sharing...</span>
</>
) : shareSuccess ? (
<>
<Share2 className="w-4 h-4" />
<span>Shared!</span>
</>
) : (
<>
<Share2 className="w-4 h-4" />
<span>Share to Discussion</span>
</>
)}
</button>
<button
onClick={handleViewDiscussions}
className="inline-flex items-center gap-2 px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg text-sm font-medium transition-colors"
>
<Users className="w-4 h-4" />
<span>View Discussions</span>
</button>
<Link
href={billUrl as any}
target="_blank"
className="inline-flex items-center gap-2 px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg text-sm font-medium transition-colors border border-gray-600"
>
<ExternalLink className="w-4 h-4" />
<span>View Bill</span>
</Link>
</div>
</div>
);
}
