/**
* SeatCountChat Component
* Quick action buttons for the seat count visualizer that open the floating chatbot
*/
'use client';
import React from 'react';
import { useLocale } from 'next-intl';
import { MessageSquare } from 'lucide-react';
import { useChatStore, useChatContext } from '@/lib/stores/chatStore';
import { useVisualizerStore } from '@/hooks/useVisualizerStore';
import { useAuth } from '@/contexts/AuthContext';
const suggestedQuestions = {
en: [
'Why does Ontario have 122 seats?',
'How are seat numbers determined?',
'What is the representation formula?',
'Which provinces are over/under-represented?',
'When did seat distribution last change?',
],
fr: [
'Pourquoi l\'Ontario a-t-il 122 sièges?',
'Comment le nombre de sièges est-il déterminé?',
'Quelle est la formule de représentation?',
'Quelles provinces sont sur/sous-représentées?',
'Quand la répartition des sièges a-t-elle changé?',
],
};
export function SeatCountChat() {
const locale = useLocale() as 'en' | 'fr';
const { user } = useAuth();
const { visualizationType, selectedProvince } = useVisualizerStore();
const { setContext } = useChatContext();
const { isLoading, sendMessage, conversation, createConversation, toggleOpen, isOpen } = useChatStore();
const handleQuestionClick = async (question: string) => {
if (isLoading) return;
// Set the visualizer context
setContext('visualizer', undefined, {
view: visualizationType,
selectedProvince,
});
// Create conversation if needed
if (!conversation) {
await createConversation({
type: 'visualizer',
data: {
view: visualizationType,
selectedProvince,
name: locale === 'en' ? 'Seat Count Explorer' : 'Explorateur des sièges',
},
});
}
// Open the floating chatbot if not already open
if (!isOpen) {
toggleOpen();
}
// Send the message to the floating chatbot
await sendMessage(question);
};
const currentQuestions = suggestedQuestions[locale];
// Show sign-in prompt for non-authenticated users
if (!user) {
return (
<div className="border border-border-subtle rounded-lg p-4 bg-bg-elevated">
<div className="flex items-center gap-2 text-text-secondary mb-2">
<MessageSquare className="w-4 h-4" />
<span className="text-sm font-medium">
{locale === 'en' ? 'Ask Gordie' : 'Demandez à Gordie'}
</span>
</div>
<p className="text-xs text-text-tertiary mb-3">
{locale === 'en'
? 'Sign in to ask questions about seat distribution'
: 'Connectez-vous pour poser des questions sur la répartition des sièges'}
</p>
<a
href={`/${locale}/signin`}
className="block w-full text-center py-2 px-3 text-sm font-medium bg-accent-red text-white rounded-lg hover:bg-accent-red/90 transition-colors"
>
{locale === 'en' ? 'Sign In' : 'Connexion'}
</a>
</div>
);
}
return (
<div className="border border-border-subtle rounded-lg overflow-hidden bg-bg-elevated">
{/* Header */}
<div className="flex items-center gap-2 p-3">
<MessageSquare className="w-4 h-4 text-accent-red" />
<span className="text-sm font-medium text-text-primary">
{locale === 'en' ? 'Ask Gordie' : 'Demandez à Gordie'}
</span>
</div>
{/* Quick action buttons */}
<div className="p-3 pt-0 space-y-1.5">
{currentQuestions.slice(0, 3).map((q, i) => (
<button
key={i}
onClick={() => handleQuestionClick(q)}
disabled={isLoading}
className="w-full text-left text-xs p-2 rounded bg-bg-secondary hover:bg-bg-primary text-text-secondary hover:text-text-primary transition-colors disabled:opacity-50"
>
{q}
</button>
))}
</div>
</div>
);
}
