/**
* NewsSourcesGuidancePanel Component
* Left panel explaining the news sources customization feature
*/
'use client';
import React from 'react';
import { useLocale } from 'next-intl';
import { Newspaper, MapPin, Lock, Filter, Check } from 'lucide-react';
import { useNewsSourcesData } from '@/contexts/NewsSourcesDataContext';
const getInfoSections = () => ({
en: [
{
icon: <Newspaper className="w-4 h-4" />,
title: 'Customize Your Feed',
description: 'Choose which news sources appear in your activity feed. Toggle sources on or off based on your preferences.',
},
{
icon: <MapPin className="w-4 h-4" />,
title: 'Regional Focus',
description: 'Click provinces on the map to enable or disable regional news sources from those areas.',
},
{
icon: <Filter className="w-4 h-4" />,
title: 'Source Quality',
description: 'Sources are organized by credibility tier: premium (established media), standard (recognized outlets), and aggregators.',
},
{
icon: <Lock className="w-4 h-4" />,
title: 'Paywall Management',
description: 'PRO subscribers can mark sources they subscribe to. This hides the paywall badge in your feed.',
},
],
fr: [
{
icon: <Newspaper className="w-4 h-4" />,
title: 'Personnalisez votre fil',
description: 'Choisissez quelles sources d\'actualités apparaissent dans votre fil d\'activité. Activez ou désactivez les sources selon vos préférences.',
},
{
icon: <MapPin className="w-4 h-4" />,
title: 'Focus régional',
description: 'Cliquez sur les provinces de la carte pour activer ou désactiver les sources régionales de ces zones.',
},
{
icon: <Filter className="w-4 h-4" />,
title: 'Qualité des sources',
description: 'Les sources sont organisées par niveau de crédibilité: premium (médias établis), standard (médias reconnus) et agrégateurs.',
},
{
icon: <Lock className="w-4 h-4" />,
title: 'Gestion des paywalls',
description: 'Les abonnés PRO peuvent marquer leurs abonnements. Cela masque le badge paywall dans votre fil.',
},
],
});
export function NewsSourcesGuidancePanel() {
const locale = useLocale() as 'en' | 'fr';
const { enabledSources, enabledRegions, sources, hasUnsavedChanges, savePreferences, loading } = useNewsSourcesData();
const sections = getInfoSections()[locale];
const handleSave = async () => {
try {
await savePreferences();
} catch (err) {
console.error('Failed to save preferences:', err);
}
};
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">
<Newspaper className="w-4 h-4 text-accent-red" />
<span className="text-sm font-medium text-text-primary">
{locale === 'en' ? 'Your Settings' : 'Vos paramètres'}
</span>
</div>
<div className="text-xs text-text-secondary space-y-1">
<p>
{locale === 'en'
? `${enabledSources.length} of ${sources.length} sources enabled`
: `${enabledSources.length} des ${sources.length} sources activées`
}
</p>
<p>
{locale === 'en'
? `${enabledRegions.length} regions active`
: `${enabledRegions.length} régions actives`
}
</p>
</div>
</div>
{/* Info Sections */}
<div className="space-y-2 flex-1">
{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>
{/* Save Button */}
{hasUnsavedChanges && (
<div className="mt-4 pt-4 border-t border-border-subtle">
<button
onClick={handleSave}
disabled={loading}
className="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-accent-red text-white rounded-lg font-medium text-sm hover:bg-accent-red/90 transition-colors disabled:opacity-50"
>
<Check className="w-4 h-4" />
{locale === 'en' ? 'Save Changes' : 'Enregistrer'}
</button>
</div>
)}
</div>
);
}
