import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react'; import { Link } from 'react-router-dom'; import { Line, Bar } from 'react-chartjs-2'; import { filterDataByDateRange, calculateMetrics, formatCurrency, formatNumber, getUniqueChannels, getUniqueMuseums, getUniqueDistricts, umrahData } from '../services/dataService'; import { chartColors, createBaseOptions } from '../config/chartConfig'; import type { MuseumRecord, Season } from '../types'; import { useLanguage } from '../contexts/LanguageContext'; interface Props { data: MuseumRecord[]; seasons: Season[]; includeVAT: boolean; allowedMuseums: string[] | null; allowedChannels: string[] | null; lang?: 'en' | 'ar'; } // ─── language config ────────────────────────────────────────────── interface LC { dir: 'ltr' | 'rtl'; fontImport: string; bodyFont: string; displayFont: string; monoFont: string; monthFull: string[]; monthShort: string[]; periods: Record; fullYearLabel: (y: number) => string; dateRangeSep: string; backLink: string; backTo: string; pageTitle: string; pageSub: string; currentRole: string; previousRole: string; currentHint: string; previousHint: string; changePeriod: string; close: string; vs: string; filter: string; allDistricts: string; allChannels: string; allMuseums: string; countDistricts: (n: number) => string; countChannels: (n: number) => string; countMuseums: (n: number) => string; reset: string; keyMetrics: string; revenue: string; visitors: string; tickets: string; avgRev: string; pilgrims: string; captureRate: string; trendTitle: string; museumTitle: string; daily: string; weekly: string; monthly: string; newLabel: string; clearSel: string; monthSection: string; periodSection: string; from: string; to: string; } const EN: LC = { dir: 'ltr', fontImport: `@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Outfit:wght@300;400;500;600;700&display=swap');`, bodyFont: "'Outfit', sans-serif", displayFont: "'DM Serif Display', serif", monoFont: "ui-monospace, 'Cascadia Code', monospace", monthFull: ['January','February','March','April','May','June','July','August','September','October','November','December'], monthShort: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], periods: { q1:'Q1', q2:'Q2', q3:'Q3', q4:'Q4', h1:'H1', h2:'H2', full:'Full Year' }, fullYearLabel: (y) => String(y), dateRangeSep: '→', backLink: '← Overview', backTo: '/', pageTitle: 'Period Comparison', pageSub: 'Compare any two periods side by side.', currentRole: 'This period', previousRole: 'Compared to', currentHint: 'primary', previousHint: 'auto year −1', changePeriod: 'Change period', close: 'Close', vs: 'vs', filter: 'Filter', allDistricts: 'All districts', allChannels: 'All channels', allMuseums: 'All museums', countDistricts: (n) => `${n} districts`, countChannels: (n) => `${n} channels`, countMuseums: (n) => `${n} museums`, reset: 'Reset', keyMetrics: 'Key Metrics', revenue: 'Revenue', visitors: 'Visitors', tickets: 'Tickets', avgRev: 'Avg Rev / Visitor', pilgrims: 'Pilgrims', captureRate: 'Capture Rate %', trendTitle: 'Trend over time', museumTitle: 'By museum', daily: 'Daily', weekly: 'Weekly', monthly: 'Monthly', newLabel: 'New', clearSel: 'Clear selection', monthSection: 'Month', periodSection: 'Quarter · Half · Year', from: 'From', to: 'To', }; const AR: LC = { dir: 'rtl', fontImport: `@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');`, bodyFont: "'IBM Plex Sans Arabic', sans-serif", displayFont: "'IBM Plex Sans Arabic', sans-serif", monoFont: "'IBM Plex Sans Arabic', sans-serif", monthFull: ['يناير','فبراير','مارس','أبريل','مايو','يونيو','يوليو','أغسطس','سبتمبر','أكتوبر','نوفمبر','ديسمبر'], monthShort: ['ينا','فبر','مار','أبر','ماي','يون','يول','أغس','سبت','أكت','نوف','ديس'], periods: { q1:'ر١', q2:'ر٢', q3:'ر٣', q4:'ر٤', h1:'ن١', h2:'ن٢', full:'السنة' }, fullYearLabel: (y) => `${y} كاملاً`, dateRangeSep: '–', backLink: '← نظرة عامة', backTo: '/ar', pageTitle: 'مقارنة الفترات', pageSub: 'قارن بين فترتين زمنيتين.', currentRole: 'الفترة الحالية', previousRole: 'مقارنةً بـ', currentHint: 'رئيسية', previousHint: 'تلقائياً −١ سنة', changePeriod: 'تغيير الفترة', close: 'إغلاق', vs: 'مقابل', filter: 'تصفية', allDistricts: 'كل المناطق', allChannels: 'كل القنوات', allMuseums: 'كل المتاحف', countDistricts: (n) => `${n} مناطق`, countChannels: (n) => `${n} قنوات`, countMuseums: (n) => `${n} متاحف`, reset: 'إعادة ضبط', keyMetrics: 'المؤشرات الرئيسية', revenue: 'الإيرادات', visitors: 'الزوار', tickets: 'التذاكر', avgRev: 'متوسط الإيراد / زائر', pilgrims: 'الحجاج والمعتمرون', captureRate: 'معدل الاستيعاب %', trendTitle: 'الاتجاه عبر الزمن', museumTitle: 'حسب المتحف', daily: 'يومي', weekly: 'أسبوعي', monthly: 'شهري', newLabel: 'جديد', clearSel: 'مسح التحديد', monthSection: 'الشهر', periodSection: 'ربع · نصف · سنة', from: 'من', to: 'إلى', }; // ─── date helpers ───────────────────────────────────────────────── const MONTH_KEYS = ['jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec']; function isLeap(y: number) { return (y%4===0 && y%100!==0) || y%400===0; } function makePresets(y: number): Record { const feb = isLeap(y) ? 29 : 28; return { jan:{start:`${y}-01-01`,end:`${y}-01-31`}, feb:{start:`${y}-02-01`,end:`${y}-02-${String(feb).padStart(2,'0')}`}, mar:{start:`${y}-03-01`,end:`${y}-03-31`}, apr:{start:`${y}-04-01`,end:`${y}-04-30`}, may:{start:`${y}-05-01`,end:`${y}-05-31`}, jun:{start:`${y}-06-01`,end:`${y}-06-30`}, jul:{start:`${y}-07-01`,end:`${y}-07-31`}, aug:{start:`${y}-08-01`,end:`${y}-08-31`}, sep:{start:`${y}-09-01`,end:`${y}-09-30`}, oct:{start:`${y}-10-01`,end:`${y}-10-31`}, nov:{start:`${y}-11-01`,end:`${y}-11-30`}, dec:{start:`${y}-12-01`,end:`${y}-12-31`}, q1:{start:`${y}-01-01`,end:`${y}-03-31`}, q2:{start:`${y}-04-01`,end:`${y}-06-30`}, q3:{start:`${y}-07-01`,end:`${y}-09-30`}, q4:{start:`${y}-10-01`,end:`${y}-12-31`}, h1:{start:`${y}-01-01`,end:`${y}-06-30`}, h2:{start:`${y}-07-01`,end:`${y}-12-31`}, full:{start:`${y}-01-01`,end:`${y}-12-31`}, }; } function guessPreset(start: string, end: string) { const year = parseInt(start.slice(0,4)); const presets = makePresets(year); for (const [key, r] of Object.entries(presets)) { if (r.start===start && r.end===end) return { key, year }; } return null; } function periodNameL(start: string, end: string, L: LC): string { const year = parseInt(start.slice(0,4)); const g = guessPreset(start, end); if (!g) { const fmt = (d: string) => { const [,m,day] = d.split('-'); return `${parseInt(day)} ${L.monthShort[parseInt(m)-1]}`; }; const ey = parseInt(end.slice(0,4)); return year===ey ? `${fmt(start)} – ${fmt(end)} ${year}` : `${fmt(start)} ${year} – ${fmt(end)} ${ey}`; } const mi = MONTH_KEYS.indexOf(g.key); if (mi >= 0) return `${L.monthFull[mi]} ${g.year}`; if (g.key==='full') return L.fullYearLabel(g.year); return `${L.periods[g.key]??g.key.toUpperCase()} ${g.year}`; } function dateRangeTextL(start: string, end: string, L: LC): string { const fmt = (d: string) => { const [y,m,day] = d.split('-'); return `${parseInt(day)} ${L.monthShort[parseInt(m)-1]} ${y}`; }; return `${fmt(start)} ${L.dateRangeSep} ${fmt(end)}`; } function currentMonth() { const now = new Date(); const y=now.getFullYear(), m=now.getMonth()+1; const p = (n: number) => String(n).padStart(2,'0'); return { start:`${y}-${p(m)}-01`, end:`${y}-${p(m)}-${p(new Date(y,m,0).getDate())}` }; } function shiftYear(s: string) { return s.replace(/^(\d{4})/, (_,y) => String(parseInt(y)-1)); } // ─── inline picker ──────────────────────────────────────────────── function InlinePicker({ start, end, onChange, availableYears, L }: { start: string; end: string; onChange: (s: string, e: string) => void; availableYears: number[]; L: LC; }) { const g = guessPreset(start, end); const [year, setYear] = useState(g?.year ?? parseInt(start.slice(0,4))); const [active, setActive] = useState(g?.key ?? null); const minY = Math.min(...availableYears), maxY = Math.max(...availableYears); const pick = (key: string) => { const r=makePresets(year)[key]; if(!r) return; setActive(key); onChange(r.start, r.end); }; const shift = (d: number) => { const ny=year+d; if(nymaxY) return; setYear(ny); if(active && makePresets(ny)[active]) onChange(makePresets(ny)[active].start, makePresets(ny)[active].end); }; return (
{year}

{L.monthSection}

{MONTH_KEYS.map((k,i) => ( ))}

{L.periodSection}

{['q1','q2','q3','q4','h1','h2'].map(k => ( ))}
{ setActive(null); onChange(e.target.value, end); }} />
{L.dateRangeSep}
{ setActive(null); onChange(start, e.target.value); }} />
); } // ─── period card ────────────────────────────────────────────────── function PeriodCard({ role, hint, start, end, variant, onChange, availableYears, L }: { role: string; hint: string; start: string; end: string; variant: 'current'|'previous'; onChange: (s: string, e: string) => void; availableYears: number[]; L: LC; }) { const [open, setOpen] = useState(false); const ref = useRef(null); useEffect(() => { if (!open) return; const onM = (e: MouseEvent) => { if(ref.current && !ref.current.contains(e.target as Node)) setOpen(false); }; const onK = (e: KeyboardEvent) => { if(e.key==='Escape') setOpen(false); }; document.addEventListener('mousedown', onM); document.addEventListener('keydown', onK); return () => { document.removeEventListener('mousedown', onM); document.removeEventListener('keydown', onK); }; }, [open]); return (
{role} {hint}
{periodNameL(start, end, L)}
{dateRangeTextL(start, end, L)}
{open && { onChange(s,e); setOpen(false); }} availableYears={availableYears} L={L} />}
); } // ─── multi-select ───────────────────────────────────────────────── function AltMultiSelect({ value, options, onChange, allLabel, countLabel, clearLabel }: { value: string[]; options: string[]; onChange: (vals: string[]) => void; allLabel: string; countLabel: (n: number) => string; clearLabel: string; }) { const [open, setOpen] = useState(false); const ref = useRef(null); useEffect(() => { if (!open) return; const h = (e: MouseEvent) => { if(ref.current && !ref.current.contains(e.target as Node)) setOpen(false); }; document.addEventListener('mousedown', h); return () => document.removeEventListener('mousedown', h); }, [open]); const toggle = (opt: string) => onChange(value.includes(opt) ? value.filter(v => v!==opt) : [...value, opt]); const label = value.length===0 ? allLabel : value.length===1 ? value[0] : countLabel(value.length); return (
{open && (
{options.map(opt => ( ))}
{value.length>0 && }
)}
); } // ─── metric card ────────────────────────────────────────────────── function MetricCard({ title, curr, prev, isCurrency, newLabel }: { title: string; curr: number; prev: number; isCurrency?: boolean; newLabel?: string; }) { const fmt = (n: number) => isCurrency ? formatCurrency(n) : formatNumber(n); const change = prev===0 ? (curr>0 ? Infinity : 0) : ((curr-prev)/prev*100); const isPos = change>0, isNeg = change<0; return (

{title}

{fmt(curr)}
{isFinite(change) ? {isPos?'▲':isNeg?'▼':'—'} {Math.abs(change).toFixed(1)}% : {newLabel??'New'}} {fmt(prev)}
); } // ─── main page ──────────────────────────────────────────────────── export default function PeriodSelectorDemo({ data, seasons, includeVAT, allowedMuseums, allowedChannels }: Props) { const { lang: activeLang, setLanguage } = useLanguage(); const L = activeLang === 'ar' ? AR : EN; const curr = currentMonth(); const [currStart, setCurrStart] = useState(curr.start); const [currEnd, setCurrEnd] = useState(curr.end); const [prevStart, setPrevStart] = useState(() => shiftYear(curr.start)); const [prevEnd, setPrevEnd] = useState(() => shiftYear(curr.end)); const [selDistricts, setSelDistricts] = useState([]); const [selChannels, setSelChannels] = useState([]); const [selMuseums, setSelMuseums] = useState([]); const [metric, setMetric] = useState('revenue'); const [gran, setGran] = useState('week'); const perm = useMemo(() => { if (!allowedMuseums || !allowedChannels) return []; let d = data; if (allowedMuseums.length) d = d.filter(r => allowedMuseums.includes(r.museum_name)); if (allowedChannels.length) d = d.filter(r => allowedChannels.includes(r.channel)); return d; }, [data, allowedMuseums, allowedChannels]); const availableYears = useMemo(() => { const s = new Set(); perm.forEach(r => r.date && s.add(parseInt(r.date.slice(0,4)))); const a = Array.from(s).sort((a,b) => b-a); return a.length ? a : [new Date().getFullYear()]; }, [perm]); const handleCurr = (s: string, e: string) => { setCurrStart(s); setCurrEnd(e); setPrevStart(shiftYear(s)); setPrevEnd(shiftYear(e)); }; const applyFilters = useCallback((rows: MuseumRecord[]) => { let d = rows; if (selChannels.length) d = d.filter(r => selChannels.includes(r.channel)); if (selMuseums.length) d = d.filter(r => selMuseums.includes(r.museum_name)); if (selDistricts.length) d = d.filter(r => selDistricts.includes(r.district)); return d; }, [selDistricts, selChannels, selMuseums]); const currData = useMemo(() => applyFilters(filterDataByDateRange(perm, currStart, currEnd, {})), [perm, currStart, currEnd, applyFilters]); const prevData = useMemo(() => applyFilters(filterDataByDateRange(perm, prevStart, prevEnd, {})), [perm, prevStart, prevEnd, applyFilters]); const currM = useMemo(() => calculateMetrics(currData, includeVAT), [currData, includeVAT]); const prevM = useMemo(() => calculateMetrics(prevData, includeVAT), [prevData, includeVAT]); const revenueField = includeVAT ? 'revenue_gross' : 'revenue_net'; const getVal = useCallback((rows: MuseumRecord[], m: string) => { if (m==='avgRevenue') { const rev = rows.reduce((s,r) => s + parseFloat(String((r as any)[revenueField]||0)), 0); const vis = rows.reduce((s,r) => s + parseInt(String(r.visits||0)), 0); return vis>0 ? rev/vis : 0; } const f: Record = { revenue:revenueField, visitors:'visits', tickets:'tickets' }; return rows.reduce((s,r) => s + parseFloat(String((r as any)[f[m]]||0)), 0); }, [revenueField]); const channels = useMemo(() => getUniqueChannels(perm), [perm]); const districts = useMemo(() => getUniqueDistricts(perm), [perm]); const museums = useMemo(() => getUniqueMuseums(perm), [perm]); const periodLabel = (s: string, e: string) => { const sy=s.slice(0,4), ey=e.slice(0,4); return sy===ey ? sy : `${L.monthShort[parseInt(s.slice(5,7))-1]} '${sy.slice(-2)}–${L.monthShort[parseInt(e.slice(5,7))-1]} '${ey.slice(-2)}`; }; const trendData = useMemo(() => { const group = (rows: MuseumRecord[], ps: string) => { const s=new Date(ps); const acc: Record = {}; rows.forEach(r => { if (!r.date) return; const diff = Math.floor((new Date(r.date).getTime() - s.getTime()) / 86400000); const key = gran==='month' ? Math.floor(diff/30)+1 : gran==='week' ? Math.floor(diff/7)+1 : diff+1; if (!acc[key]) acc[key]=[]; acc[key].push(r); }); const res: Record = {}; Object.entries(acc).forEach(([k,v]) => res[Number(k)] = getVal(v, metric)); return res; }; const pg = group(prevData, prevStart), cg = group(currData, currStart); const maxK = Math.max(...Object.keys(pg).map(Number), ...Object.keys(cg).map(Number), 1); const labels = Array.from({length:maxK}, (_,i) => gran==='week' ? `W${i+1}` : gran==='month' ? L.monthShort[(new Date(currStart).getMonth()+i)%12] : `D${i+1}` ); return { labels, datasets: [ { label:periodLabel(prevStart,prevEnd), data:labels.map((_,i) => pg[i+1]||0), borderColor:chartColors.muted, backgroundColor:'transparent', borderWidth:2, tension:0.4, pointRadius:gran==='week'?3:1, pointBackgroundColor:chartColors.muted }, { label:periodLabel(currStart,currEnd), data:labels.map((_,i) => cg[i+1]||0), borderColor:chartColors.primary, backgroundColor:chartColors.primary+'15', borderWidth:2, tension:0.4, fill:true, pointRadius:gran==='week'?4:2, pointBackgroundColor:chartColors.primary }, ] }; }, [prevData, currData, prevStart, currStart, prevEnd, currEnd, metric, gran, getVal, L]); const museumData = useMemo(() => { const all = [...new Set(data.map(r => r.museum_name))].filter(Boolean) as string[]; const pb: Record={}, cb: Record={}; all.forEach(m => { pb[m]=getVal(prevData.filter(r => r.museum_name===m), metric); cb[m]=getVal(currData.filter(r => r.museum_name===m), metric); }); const active = all.filter(m => pb[m]>0 || cb[m]>0); return { labels: active, datasets: [ { label:periodLabel(prevStart,prevEnd), data:active.map(m => pb[m]), backgroundColor:chartColors.muted+'cc', borderRadius:4 }, { label:periodLabel(currStart,currEnd), data:active.map(m => cb[m]), backgroundColor:chartColors.primary, borderRadius:4 }, ] }; }, [data, prevData, currData, prevStart, prevEnd, currStart, currEnd, metric, getVal]); const baseOpts = useMemo(() => createBaseOptions(false), []); const chartOpts: any = { ...baseOpts, plugins:{ ...baseOpts.plugins, legend:{ position:'top', align:'end', labels:{ boxWidth:12, padding:12 } } } }; const metricOpts = [ { value:'revenue', label:L.revenue }, { value:'visitors', label:L.visitors }, { value:'tickets', label:L.tickets }, { value:'avgRevenue', label:L.avgRev }, ]; const granOpts = [{ value:'day', label:L.daily }, { value:'week', label:L.weekly }, { value:'month', label:L.monthly }]; const estimatePilgrims = useCallback((s: string, e: string) => { const sd=new Date(s), ed=new Date(e); let total=0, has=false; for (let y=sd.getFullYear(); y<=ed.getFullYear(); y++) { for (let q=1; q<=4; q++) { const qs=new Date(y,(q-1)*3,1), qe=new Date(y,q*3,0); if (qeed) continue; const p=umrahData[y]?.[q]; if(!p) continue; const os=new Date(Math.max(qs.getTime(),sd.getTime())), oe=new Date(Math.min(qe.getTime(),ed.getTime())); total+=p*((oe.getTime()-os.getTime())/86400000+1)/((qe.getTime()-qs.getTime())/86400000+1); has=true; } } return has ? Math.round(total) : null; }, []); const currPilgrims = useMemo(() => estimatePilgrims(currStart, currEnd), [currStart, currEnd, estimatePilgrims]); const prevPilgrims = useMemo(() => estimatePilgrims(prevStart, prevEnd), [prevStart, prevEnd, estimatePilgrims]); const currCapture = currPilgrims ? currM.visitors/currPilgrims*100 : null; const prevCapture = prevPilgrims ? prevM.visitors/prevPilgrims*100 : null; const hasFilters = selDistricts.length>0 || selChannels.length>0 || selMuseums.length>0; return (
{L.backLink}

{L.pageTitle}

{L.pageSub}

{L.vs}
{ setPrevStart(s); setPrevEnd(e); }} availableYears={availableYears} L={L} />
{L.filter}
{hasFilters && }

{L.keyMetrics}

{currPilgrims!==null && prevPilgrims!==null && } {currCapture!==null && prevCapture!==null && }

{L.trendTitle}

{metricOpts.map(o => )}
{granOpts.map(o => )}

{L.museumTitle}

{metricOpts.map(o => )}
); }