/**
* BillDiscussionBySection - Discussion panel showing comments organized by bill section
*
* Displays comments in a scrollable panel organized by:
* 1. General Discussion (whole-bill comments)
* 2. Part/Section comments (in document order)
*
* Used in the right panel of BillSplitView.
*/
'use client';
import React, { useMemo } from 'react';
import { InlineSectionComments } from './InlineSectionComments';
import type { ForumPost } from '@/types/forum';
import { MessageSquare } from 'lucide-react';
interface BillSection {
anchorId: string; // e.g., "s2.1"
label: string; // e.g., "Section 2.1"
sequence: number; // For sorting
}
interface BillDiscussionBySectionProps {
billNumber: string;
session: string;
billTitle?: string;
locale: string;
commentsBySection: Record<string, ForumPost[]>;
onCommentCreated?: () => void;
/** Optional list of sections in document order (if not provided, uses keys from commentsBySection) */
sections?: BillSection[];
}
/**
* Extract section references from comments and create section list
*/
function extractSectionsFromComments(
commentsBySection: Record<string, ForumPost[]>
): BillSection[] {
const sections: BillSection[] = [];
Object.keys(commentsBySection).forEach(sectionRef => {
if (sectionRef === 'general') return; // Skip general, it's handled separately
// Try to extract section number from ref (e.g., "s2.1" -> "Section 2.1")
let label = sectionRef;
if (sectionRef.startsWith('s')) {
const num = sectionRef.slice(1);
label = `Section ${num}`;
} else if (sectionRef.startsWith('part-')) {
const num = sectionRef.replace('part-', '');
label = `Part ${num}`;
}
sections.push({
anchorId: sectionRef,
label,
sequence: sections.length, // Simple sequential order
});
});
// Sort by sequence (or could sort by section number if needed)
sections.sort((a, b) => a.sequence - b.sequence);
return sections;
}
export function BillDiscussionBySection({
billNumber,
session,
billTitle,
locale,
commentsBySection,
onCommentCreated,
sections,
}: BillDiscussionBySectionProps) {
// Extract sections from comments if not provided
const sectionList = useMemo(() => {
return sections || extractSectionsFromComments(commentsBySection);
}, [sections, commentsBySection]);
const generalComments = commentsBySection['general'] || [];
const totalComments = Object.values(commentsBySection).reduce(
(sum, comments) => sum + comments.length,
0
);
return (
<div className="h-full flex flex-col bg-slate-800 dark:bg-slate-900">
{/* Comment count badge - optional top indicator */}
{totalComments > 0 && (
<div className="flex-shrink-0 px-4 py-2 border-b border-slate-700 dark:border-slate-700 bg-slate-900 dark:bg-slate-900">
<span className="text-sm font-medium text-gray-100">
{totalComments} {locale === 'fr' ? 'commentaire' : 'comment'}{totalComments !== 1 ? 's' : ''}
</span>
</div>
)}
{/* Scrollable content */}
<div className="flex-1 overflow-y-auto px-4 py-4 space-y-6 bg-slate-800 dark:bg-slate-900">
{/* General Discussion - always at top */}
<InlineSectionComments
billNumber={billNumber}
session={session}
sectionRef={null}
sectionLabel={locale === 'fr' ? 'Discussion générale' : 'General Discussion'}
locale={locale}
billTitle={billTitle}
comments={generalComments}
defaultExpanded={generalComments.length > 0}
onCommentCreated={onCommentCreated}
/>
{/* Section-specific discussions */}
{sectionList.map(section => {
const comments = commentsBySection[section.anchorId] || [];
return (
<InlineSectionComments
key={section.anchorId}
billNumber={billNumber}
session={session}
sectionRef={section.anchorId}
sectionLabel={section.label}
locale={locale}
billTitle={billTitle}
comments={comments}
defaultExpanded={comments.length > 0}
onCommentCreated={onCommentCreated}
/>
);
})}
{/* Empty state if no sections with comments */}
{sectionList.length === 0 && generalComments.length === 0 && (
<div className="text-center py-12 text-text-tertiary">
<MessageSquare className="h-16 w-16 mx-auto mb-4 opacity-20" />
<p className="text-lg font-medium mb-2">
{locale === 'fr' ? 'Aucune discussion' : 'No discussions yet'}
</p>
<p className="text-sm">
{locale === 'fr'
? 'Commencez la discussion en ajoutant un commentaire'
: 'Start the conversation by adding a comment'}
</p>
</div>
)}
</div>
</div>
);
}
export default BillDiscussionBySection;
