/**
* SeatCountGuidancePanel Component
* Left panel showing seat count information and chatbot for desktop view
*/
'use client';
import React from 'react';
import { useLocale } from 'next-intl';
import { Info, Users, MapPin, Vote, Building } from 'lucide-react';
import { useSeatDataContext } from '@/contexts/SeatDataContext';
import { SeatCountChat } from './SeatCountChat';
// Total ridings in Canada (as of 2024 redistribution)
const TOTAL_RIDINGS = 343;
// Majority = floor(total/2) + 1
const MAJORITY_THRESHOLD = Math.floor(TOTAL_RIDINGS / 2) + 1;
const getInfoSections = (totalRidings: number, majorityThreshold: number) => ({
en: [
{
icon: <Users className="w-4 h-4" />,
title: 'House of Commons',
description: `${totalRidings} Members of Parliament (MPs) represent Canadians in the House of Commons.`,
},
{
icon: <MapPin className="w-4 h-4" />,
title: 'Ridings',
description: `Canada is divided into ${totalRidings} electoral districts (ridings). Each riding elects one MP.`,
},
{
icon: <Vote className="w-4 h-4" />,
title: 'First-Past-the-Post',
description: 'The candidate with the most votes wins, even without a majority.',
},
{
icon: <Building className="w-4 h-4" />,
title: 'Government Formation',
description: `The party with the most seats typically forms government. ${majorityThreshold} seats needed for majority.`,
},
],
fr: [
{
icon: <Users className="w-4 h-4" />,
title: 'Chambre des communes',
description: `${totalRidings} députés représentent les Canadiens à la Chambre des communes.`,
},
{
icon: <MapPin className="w-4 h-4" />,
title: 'Circonscriptions',
description: `Le Canada est divisé en ${totalRidings} circonscriptions électorales. Chacune élit un député.`,
},
{
icon: <Vote className="w-4 h-4" />,
title: 'Scrutin majoritaire',
description: 'Le candidat avec le plus de votes gagne, même sans majorité.',
},
{
icon: <Building className="w-4 h-4" />,
title: 'Formation du gouvernement',
description: `Le parti avec le plus de sièges forme habituellement le gouvernement. ${majorityThreshold} sièges pour une majorité.`,
},
],
});
export function SeatCountGuidancePanel() {
const locale = useLocale() as 'en' | 'fr';
const { totalSeats, nationalTotals } = useSeatDataContext();
// Find largest party
const sortedParties = Object.entries(nationalTotals)
.sort(([, a], [, b]) => b - a);
const [leadingParty, leadingSeats] = sortedParties[0] || ['', 0];
const hasMajority = leadingSeats >= MAJORITY_THRESHOLD;
const infoSections = getInfoSections(TOTAL_RIDINGS, MAJORITY_THRESHOLD);
const sections = infoSections[locale];
return (
<div className="flex flex-col h-full">
{/* Current Status */}
<div className="mb-4 p-3 bg-bg-elevated rounded-lg border border-border-subtle">
<div className="flex items-center gap-2 mb-2">
<Info className="w-4 h-4 text-accent-red" />
<span className="text-sm font-medium text-text-primary">
{locale === 'en' ? 'Current Standing' : 'Situation actuelle'}
</span>
</div>
<div className="text-xs text-text-secondary space-y-1">
<p>
{locale === 'en'
? `${totalSeats} of ${TOTAL_RIDINGS} seats filled`
: `${totalSeats} des ${TOTAL_RIDINGS} sièges pourvus`
}
</p>
{leadingParty && (
<p>
{locale === 'en'
? `${leadingParty}: ${leadingSeats} seats ${hasMajority ? '(majority)' : `(${MAJORITY_THRESHOLD - leadingSeats} short of majority)`}`
: `${leadingParty}: ${leadingSeats} sièges ${hasMajority ? '(majorité)' : `(${MAJORITY_THRESHOLD - leadingSeats} de moins pour majorité)`}`
}
</p>
)}
</div>
</div>
{/* Info Sections */}
<div className="space-y-2">
{sections.map((section, index) => (
<div
key={index}
className="p-3 bg-bg-elevated rounded-lg border border-border-subtle"
>
<div className="flex items-start gap-3">
<div className="flex-shrink-0 w-7 h-7 rounded-full bg-accent-red/10 text-accent-red flex items-center justify-center">
{section.icon}
</div>
<div className="flex-1 min-w-0">
<div className="text-sm font-medium text-text-primary">
{section.title}
</div>
<div className="text-xs text-text-tertiary mt-0.5">
{section.description}
</div>
</div>
</div>
</div>
))}
</div>
{/* Chat Section */}
<div className="mt-4 pt-4 border-t border-border-subtle">
<SeatCountChat />
</div>
</div>
);
}
