import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
import { Link } from 'react-router-dom';
import { Line, Bar, Pie } from 'react-chartjs-2';
import {
  filterDataByDateRange, calculateMetrics, formatCurrency, formatNumber,
  getUniqueChannels, getUniqueMuseums, getUniqueDistricts,
  groupByMuseum, groupByChannel, groupByDistrict,
  umrahData,
} from '../services/dataService';
import { chartColors, chartPalette, createBaseOptions } from '../config/chartConfig';
import type { MuseumRecord, Season } from '../types';
import { useLanguage } from '../contexts/LanguageContext';

interface Props {
  data: MuseumRecord[];
  seasons: Season[];
  includeVAT: boolean;
  setIncludeVAT: (v: boolean) => void;
  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<string, string>;
  fullYearLabel: (y: number) => string;
  dateRangeSep: string;
  backLink: string;
  backTo: string;
  pageTitle: string;
  pageSub: string;
  changePeriod: string;
  close: string;
  apply: string;
  filter: string;
  allDistricts: string; allChannels: string; allMuseums: string;
  countDistricts: (n: number) => string;
  countChannels:  (n: number) => string;
  countMuseums:   (n: number) => string;
  reset: string;
  exclVAT: string; inclVAT: string;
  keyMetrics: string;
  revenue: string; visitors: string; tickets: string; avgRev: string;
  pilgrims: string; captureRate: string;
  charts: string;
  trendTitle: string; museumTitle: string; channelTitle: string; districtTitle: string;
  daily: string; weekly: string; monthly: string;
  newLabel: string;
  clearSel: string;
  monthSection: string; periodSection: string;
  from: string; to: string;
  vsLabel: string;
  barLabel: string; pieLabel: string;
  absLabel: string; pctLabel: 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: 'Back to Dashboard', backTo: '/',
  pageTitle: 'Overview', pageSub: 'Museum performance at a glance.',
  changePeriod: 'Change period', close: 'Cancel', apply: 'Apply',
  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', exclVAT: 'Excl. VAT', inclVAT: 'Incl. VAT',
  keyMetrics: 'Key Metrics',
  revenue: 'Revenue', visitors: 'Visitors', tickets: 'Tickets',
  avgRev: 'Avg Rev / Visitor', pilgrims: 'Pilgrims', captureRate: 'Capture Rate %',
  charts: 'Charts',
  trendTitle: 'Trend over time', museumTitle: 'By museum',
  channelTitle: 'By channel', districtTitle: 'By district',
  daily: 'Daily', weekly: 'Weekly', monthly: 'Monthly',
  newLabel: 'New', clearSel: 'Clear selection',
  monthSection: 'Month', periodSection: 'Quarter · Half · Year',
  from: 'From', to: 'To', vsLabel: 'vs',
  barLabel: 'Bar', pieLabel: 'Pie', absLabel: '#', pctLabel: '%',
};

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: 'أداء المتاحف في لمحة.',
  changePeriod: 'تغيير الفترة', close: 'إلغاء', apply: 'تطبيق',
  filter: 'تصفية',
  allDistricts: 'كل المناطق', allChannels: 'كل القنوات', allMuseums: 'كل المتاحف',
  countDistricts: (n) => `${n} مناطق`,
  countChannels:  (n) => `${n} قنوات`,
  countMuseums:   (n) => `${n} متاحف`,
  reset: 'إعادة ضبط', exclVAT: 'بدون ضريبة', inclVAT: 'مع ضريبة',
  keyMetrics: 'المؤشرات الرئيسية',
  revenue: 'الإيرادات', visitors: 'الزوار', tickets: 'التذاكر',
  avgRev: 'متوسط الإيراد / زائر', pilgrims: 'الحجاج والمعتمرون', captureRate: 'معدل الاستيعاب %',
  charts: 'المخططات',
  trendTitle: 'الاتجاه عبر الزمن', museumTitle: 'حسب المتحف',
  channelTitle: 'حسب القناة', districtTitle: 'حسب المنطقة',
  daily: 'يومي', weekly: 'أسبوعي', monthly: 'شهري',
  newLabel: 'جديد', clearSel: 'مسح التحديد',
  monthSection: 'الشهر', periodSection: 'ربع · نصف · سنة',
  from: 'من', to: 'إلى', vsLabel: 'مقابل',
  barLabel: 'أعمدة', pieLabel: 'دائرة', absLabel: '#', pctLabel: '%',
};

// ─── 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<string, { start: string; end: string }> {
  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, onClose, availableYears, L }: {
  start: string; end: string; onChange: (s: string, e: string) => void;
  onClose: () => 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<string|null>(g?.key ?? null);
  const [draftStart, setDraftStart] = useState(start);
  const [draftEnd, setDraftEnd] = useState(end);
  const minY = Math.min(...availableYears), maxY = Math.max(...availableYears);

  const pick = (key: string) => { const r = makePresets(year)[key]; if (!r) return; setActive(key); setDraftStart(r.start); setDraftEnd(r.end); };
  const shift = (d: number) => {
    const ny = year+d; if (ny < minY || ny > maxY) return; setYear(ny);
    if (active && makePresets(ny)[active]) { setDraftStart(makePresets(ny)[active].start); setDraftEnd(makePresets(ny)[active].end); }
  };

  return (
    <div className="alt-picker">
      <div className="alt-picker-year">
        <button type="button" onClick={() => shift(L.dir==='rtl' ? 1 : -1)} disabled={L.dir==='rtl' ? year>=maxY : year<=minY} className="alt-yr-btn">
          <svg width="7" height="11" viewBox="0 0 7 11" fill="none"><path d="M5.5 9.5L1.5 5.5L5.5 1.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </button>
        <span className="alt-yr-val">{year}</span>
        <button type="button" onClick={() => shift(L.dir==='rtl' ? -1 : 1)} disabled={L.dir==='rtl' ? year<=minY : year>=maxY} className="alt-yr-btn">
          <svg width="7" height="11" viewBox="0 0 7 11" fill="none"><path d="M1.5 1.5L5.5 5.5L1.5 9.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </button>
      </div>
      <p className="alt-picker-section">{L.monthSection}</p>
      <div className="alt-chips">
        {MONTH_KEYS.map((k,i) => (
          <button key={k} type="button" className={`alt-chip${active===k?' alt-chip-on':''}`} onClick={() => pick(k)}>{L.monthShort[i]}</button>
        ))}
      </div>
      <p className="alt-picker-section">{L.periodSection}</p>
      <div className="alt-chips">
        {['q1','q2','q3','q4','h1','h2'].map(k => (
          <button key={k} type="button" className={`alt-chip${active===k?' alt-chip-on':''}`} onClick={() => pick(k)}>{L.periods[k]}</button>
        ))}
        <button type="button" className={`alt-chip alt-chip-wide${active==='full'?' alt-chip-on':''}`} onClick={() => pick('full')}>{L.periods.full}</button>
      </div>
      <div className="alt-picker-div" />
      <div className="alt-custom">
        <div className="alt-custom-f"><label>{L.from}</label><input type="date" value={draftStart} onChange={e => { setActive(null); setDraftStart(e.target.value); }} /></div>
        <span className="alt-custom-arrow">{L.dateRangeSep}</span>
        <div className="alt-custom-f"><label>{L.to}</label><input type="date" value={draftEnd} onChange={e => { setActive(null); setDraftEnd(e.target.value); }} /></div>
      </div>
      <div className="alt-picker-div" />
      <div className="alt-footer">
        <button type="button" className="alt-cancel" onClick={onClose}>{L.close}</button>
        <button type="button" className="alt-apply" onClick={() => { onChange(draftStart, draftEnd); onClose(); }}>{L.apply}</button>
      </div>
    </div>
  );
}

// ─── period hero ──────────────────────────────────────────────────
function PeriodHero({ start, end, onChange, availableYears, L }: {
  start: string; end: string; onChange: (s: string, e: string) => void;
  availableYears: number[]; L: LC;
}) {
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(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 (
    <div ref={ref} className="dalt-hero">
      <div className="dalt-hero-inner">
        <div>
          <div className="dalt-hero-name">{periodNameL(start, end, L)}</div>
          <div className="dalt-hero-range">{dateRangeTextL(start, end, L)}</div>
        </div>
        <button type="button" className="dalt-hero-btn" onClick={() => setOpen(v => !v)} aria-expanded={open}>
          {open ? L.close : L.changePeriod}
          <svg width="10" height="10" viewBox="0 0 10 10" fill="none" style={{ transform: open?'rotate(180deg)':'none', transition:'transform 0.2s' }}>
            <path d="M2 3.5L5 6.5L8 3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
      </div>
      {open && <InlinePicker start={start} end={end} onChange={onChange} onClose={() => setOpen(false)} availableYears={availableYears} L={L} />}
    </div>
  );
}

// ─── 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<HTMLDivElement>(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 (
    <div ref={ref} className="altms">
      <button type="button" className={`altms-trigger${value.length>0?' altms-trigger--active':''}`} onClick={() => setOpen(v => !v)} aria-expanded={open} aria-haspopup="listbox">
        <span className="altms-label">{label}</span>
        <svg className={`altms-chevron${open?' altms-chevron--open':''}`} width="10" height="10" viewBox="0 0 10 10" fill="none">
          <path d="M2 3.5L5 6.5L8 3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </button>
      {open && (
        <div className="altms-dropdown" role="listbox" aria-multiselectable="true">
          <div className="altms-list">
            {options.map(opt => (
              <label key={opt} className={`altms-option${value.includes(opt)?' altms-option--checked':''}`}>
                <input type="checkbox" className="altms-check" checked={value.includes(opt)} onChange={() => toggle(opt)} aria-label={opt} />
                <span className="altms-check-box">{value.includes(opt) && <svg width="10" height="8" viewBox="0 0 10 8" fill="none"><path d="M1 4L3.5 6.5L9 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>}</span>
                <span className="altms-opt-label">{opt}</span>
              </label>
            ))}
          </div>
          {value.length>0 && <button type="button" className="altms-clear" onClick={() => { onChange([]); setOpen(false); }}>{clearLabel}</button>}
        </div>
      )}
    </div>
  );
}

// ─── 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 (
    <div className="alt-metric">
      <p className="alt-metric-title">{title}</p>
      <div className="alt-metric-value">{fmt(curr)}</div>
      <div className="alt-metric-footer">
        {isFinite(change)
          ? <span className={`alt-change ${isPos?'alt-change--up':isNeg?'alt-change--down':'alt-change--flat'}`}>{isPos?'▲':isNeg?'▼':'—'} {Math.abs(change).toFixed(1)}%</span>
          : <span className="alt-change alt-change--up">{newLabel??'New'}</span>}
        <span className="alt-metric-prev">{fmt(prev)}</span>
      </div>
    </div>
  );
}

// ─── main page ────────────────────────────────────────────────────
export default function DashboardDemo({ data, seasons: _seasons, includeVAT, setIncludeVAT, allowedMuseums, allowedChannels }: Props) {
  const { lang: activeLang, setLanguage } = useLanguage();
  const L = activeLang === 'ar' ? AR : EN;
  const curr = currentMonth();
  const [start, setStart] = useState(curr.start);
  const [end,   setEnd]   = useState(curr.end);
  const [selDistricts, setSelDistricts] = useState<string[]>([]);
  const [selChannels,  setSelChannels]  = useState<string[]>([]);
  const [selMuseums,   setSelMuseums]   = useState<string[]>([]);
  const [metric, setMetric] = useState('revenue');
  const [gran,   setGran]   = useState('week');
  const [museumChartType,   setMuseumChartType]   = useState<'bar'|'pie'>('bar');
  const [channelChartType,  setChannelChartType]  = useState<'bar'|'pie'>('pie');
  const [districtChartType, setDistrictChartType] = useState<'bar'|'pie'>('pie');
  const [museumDisplayMode,   setMuseumDisplayMode]   = useState<'absolute'|'percent'>('absolute');
  const [channelDisplayMode,  setChannelDisplayMode]  = useState<'absolute'|'percent'>('absolute');
  const [districtDisplayMode, setDistrictDisplayMode] = useState<'absolute'|'percent'>('absolute');

  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<number>(); 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 allDistricts = useMemo(() => getUniqueDistricts(perm), [perm]);
  const allChannels  = useMemo(() => getUniqueChannels(perm),  [perm]);
  const allMuseums   = useMemo(() => getUniqueMuseums(perm),   [perm]);

  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 filteredData = useMemo(() => applyFilters(filterDataByDateRange(perm, start, end, {})), [perm, start, end, applyFilters]);
  const prevStart = shiftYear(start), prevEnd = shiftYear(end);
  const prevData  = useMemo(() => applyFilters(filterDataByDateRange(perm, prevStart, prevEnd, {})), [perm, prevStart, prevEnd, applyFilters]);

  const currM = useMemo(() => calculateMetrics(filteredData, includeVAT), [filteredData, 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<string,string> = { revenue: revenueField, visitors:'visits', tickets:'tickets' };
    return rows.reduce((s,r) => s + parseFloat(String((r as any)[f[m]]||0)), 0);
  }, [revenueField]);

  const trendData = useMemo(() => {
    const group = (rows: MuseumRecord[], ps: string) => {
      const s = new Date(ps); const acc: Record<number, MuseumRecord[]> = {};
      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<number,number> = {};
      Object.entries(acc).forEach(([k,v]) => res[Number(k)] = getVal(v, metric)); return res;
    };
    const pg = group(prevData, prevStart), cg = group(filteredData, start);
    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(start).getMonth()+i)%12] : `D${i+1}`
    );
    const prevYear = parseInt(start.slice(0,4))-1;
    return {
      labels,
      datasets: [
        { label:`${prevYear}`, data:labels.map((_,i) => pg[i+1]||0), borderColor:chartColors.muted, backgroundColor:'transparent', borderWidth:1.5, tension:0.4, pointRadius:0, borderDash:[4,3] },
        { label:start.slice(0,4), data:labels.map((_,i) => cg[i+1]||0), borderColor:chartColors.primary, backgroundColor:chartColors.primary+'18', borderWidth:2.5, tension:0.4, fill:true, pointRadius:gran==='week'?3:1, pointBackgroundColor:chartColors.primary },
      ]
    };
  }, [filteredData, prevData, prevStart, start, metric, gran, getVal, L]);

  const museumData = useMemo(() => {
    const g = groupByMuseum(filteredData, includeVAT);
    const getM = (d: typeof g[string]) => metric==='visitors' ? d.visitors : metric==='tickets' ? d.tickets : d.revenue;
    const entries = Object.entries(g).sort((a,b) => getM(b[1]) - getM(a[1]));
    return { labels:entries.map(([k]) => k), datasets:[{ label:metric, data:entries.map(([,v]) => getM(v)), backgroundColor:chartPalette, borderRadius:4 }] };
  }, [filteredData, includeVAT, metric]);

  const channelData = useMemo(() => {
    const g = groupByChannel(filteredData, includeVAT);
    const getM = (d: typeof g[string]) => metric==='visitors' ? d.visitors : metric==='tickets' ? d.tickets : d.revenue;
    const entries = Object.entries(g).sort((a,b) => getM(b[1]) - getM(a[1]));
    return { labels:entries.map(([k]) => k), datasets:[{ label:metric, data:entries.map(([,v]) => getM(v)), backgroundColor:chartPalette, borderRadius:4 }] };
  }, [filteredData, includeVAT, metric]);

  const districtData = useMemo(() => {
    const g = groupByDistrict(filteredData, includeVAT);
    const getM = (d: typeof g[string]) => metric==='visitors' ? d.visitors : metric==='tickets' ? d.tickets : d.revenue;
    const entries = Object.entries(g).sort((a,b) => getM(b[1]) - getM(a[1]));
    return { labels:entries.map(([k]) => k), datasets:[{ label:metric, data:entries.map(([,v]) => getM(v)), backgroundColor:chartPalette.map(c => c+'cc'), borderRadius:4 }] };
  }, [filteredData, includeVAT, metric]);

  const toPercent = (chartData: any) => {
    const total = chartData.datasets[0].data.reduce((s: number, v: number) => s+v, 0);
    if (total===0) return chartData;
    return { ...chartData, datasets: [{ ...chartData.datasets[0], data: chartData.datasets[0].data.map((v: number) => parseFloat(((v/total)*100).toFixed(1))) }] };
  };

  const museumDisplay   = useMemo(() => museumDisplayMode==='percent' ? toPercent(museumData)   : museumData,   [museumData,   museumDisplayMode]);
  const channelDisplay  = useMemo(() => channelDisplayMode==='percent' ? toPercent(channelData)  : channelData,  [channelData,  channelDisplayMode]);
  const districtDisplay = useMemo(() => districtDisplayMode==='percent' ? toPercent(districtData) : districtData, [districtData, districtDisplayMode]);

  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 (qe<sd||qs>ed) 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(start, end), [start, end, 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 baseOpts  = useMemo(() => createBaseOptions(false), []);
  const chartOpts: any = { ...baseOpts, plugins:{ ...baseOpts.plugins, legend:{ position:'top', align:'end', labels:{ boxWidth:10, padding:10, font:{ size:11 } } } } };
  const barHorizOpts: any = { ...chartOpts, indexAxis:'y', plugins:{ ...chartOpts.plugins, legend:{ display:false } } };
  const barNoLegend: any  = { ...chartOpts, plugins:{ ...chartOpts.plugins, legend:{ display:false } } };
  const pieOptions: any = useMemo(() => ({
    responsive: true, maintainAspectRatio: false,
    plugins: {
      legend: { display:true, position:'right', labels:{ boxWidth:12, padding:10, font:{ size:11 }, color:'#64748b' } },
      tooltip: baseOpts.plugins.tooltip,
      datalabels: { display:false },
    }
  }), [baseOpts]);

  const metricOpts = [{ value:'revenue', label:L.revenue }, { value:'visitors', label:L.visitors }, { value:'tickets', label:L.tickets }];
  const granOpts   = [{ value:'day', label:L.daily }, { value:'week', label:L.weekly }, { value:'month', label:L.monthly }];
  const hasFilters = selDistricts.length>0 || selChannels.length>0 || selMuseums.length>0;

  return (
    <div className="alt-page" dir={L.dir}>
      <style>{`
        ${L.fontImport}

        .alt-page { max-width:1100px; margin:0 auto; padding:48px 24px 80px; font-family:${L.bodyFont}; width:100%; box-sizing:border-box; }

        /* ── header ── */
        .alt-back { display:inline-flex; align-items:center; gap:6px; font-size:.8125rem; color:var(--text-muted); text-decoration:none; margin-bottom:28px; transition:color .15s; }
        .alt-back:hover { color:var(--accent); }
        .alt-page-title { font-family:${L.displayFont}; font-size:2.25rem; font-weight:400; color:var(--text-primary); margin:0 0 6px; letter-spacing:-.03em; line-height:1.15; }
        .alt-page-sub { font-size:.9375rem; color:var(--text-muted); margin:0 0 40px; font-weight:300; }

        /* ── hero ── */
        .dalt-hero { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); overflow:hidden; margin-bottom:24px; }
        .dalt-hero-inner { display:flex; align-items:center; justify-content:space-between; padding:24px 28px; gap:16px; flex-wrap:wrap; }
        .dalt-hero-name { font-family:${L.displayFont}; font-size:2.5rem; font-weight:400; color:var(--text-primary); line-height:1; letter-spacing:-.025em; margin-bottom:6px; }
        .dalt-hero-range { font-family:${L.monoFont}; font-size:.875rem; color:var(--text-muted); letter-spacing:.01em; }
        .dalt-hero-btn { display:inline-flex; align-items:center; gap:5px; font-family:${L.bodyFont}; font-size:.8125rem; font-weight:500; color:var(--text-muted); background:none; border:1px solid var(--border); border-radius:8px; padding:7px 12px; cursor:pointer; transition:color .15s,border-color .15s; white-space:nowrap; }
        .dalt-hero-btn:hover { color:var(--accent); border-color:var(--accent); }

        /* ── picker ── */
        .alt-picker { border-top:1px solid var(--border); padding:16px 24px 20px; background:var(--bg); animation:altPickIn 180ms cubic-bezier(.16,1,.3,1); }
        @keyframes altPickIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
        .alt-picker-year { display:flex; align-items:center; gap:16px; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--border); }
        .alt-yr-val { font-family:${L.displayFont}; font-size:1.25rem; color:var(--text-primary); min-width:50px; text-align:center; }
        .alt-yr-btn { width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:7px; background:var(--surface); color:var(--text-secondary); cursor:pointer; transition:background .12s,border-color .12s,color .12s; }
        .alt-yr-btn:hover:not(:disabled) { background:var(--accent); border-color:var(--accent); color:var(--text-inverse); }
        .alt-yr-btn:disabled { opacity:.3; cursor:not-allowed; }
        .alt-picker-section { font-size:.625rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin:10px 0 6px; }
        .alt-chips { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:4px; }
        .alt-chip { font-family:${L.bodyFont}; padding:4px 9px; border:1px solid var(--border); border-radius:6px; background:var(--surface); color:var(--text-secondary); font-size:.8rem; font-weight:500; cursor:pointer; transition:background .1s,border-color .1s,color .1s; }
        .alt-chip:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-light); }
        .alt-chip-on { background:var(--accent)!important; border-color:var(--accent)!important; color:var(--text-inverse)!important; font-weight:600!important; }
        .alt-chip-wide { padding-left:14px; padding-right:14px; }
        .alt-picker-div { height:1px; background:var(--border); margin:12px 0 10px; }
        .alt-custom { display:flex; align-items:flex-end; gap:8px; }
        .alt-custom-f { flex:1; display:flex; flex-direction:column; gap:4px; }
        .alt-custom-f label { font-size:.625rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); }
        .alt-custom-f input[type="date"] { padding:7px 9px; border:1px solid var(--border); border-radius:7px; font-size:.825rem; background:var(--surface); color:var(--text-primary); width:100%; }
        .alt-custom-f input[type="date"]:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 2px rgba(37,99,235,.12); }
        .alt-custom-arrow { font-size:.75rem; color:var(--text-muted); padding-bottom:9px; flex-shrink:0; }
        .alt-footer { display:flex; justify-content:flex-end; gap:8px; }
        .alt-cancel,.alt-apply { padding:7px 16px; border-radius:7px; font-size:.825rem; font-weight:600; cursor:pointer; font-family:${L.bodyFont}; transition:background .12s,color .12s; }
        .alt-cancel { background:transparent; border:1px solid var(--border); color:var(--text-secondary); }
        .alt-cancel:hover { background:var(--bg-secondary); }
        .alt-apply { background:var(--accent); border:1px solid transparent; color:#fff; }
        .alt-apply:hover { opacity:.88; }

        /* ── multi-select ── */
        .altms { position:relative; }
        .altms-trigger { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text-secondary); font-family:${L.bodyFont}; font-size:.875rem; cursor:pointer; transition:border-color .15s,color .15s,background .15s; white-space:nowrap; }
        .altms-trigger:hover { border-color:var(--accent); color:var(--accent); }
        .altms-trigger--active { border-color:var(--accent); color:var(--accent); background:var(--accent-light); }
        .altms-label { max-width:140px; overflow:hidden; text-overflow:ellipsis; }
        .altms-chevron { transition:transform .18s; flex-shrink:0; color:currentColor; }
        .altms-chevron--open { transform:rotate(180deg); }
        .altms-dropdown { position:absolute; top:calc(100% + 6px); left:0; z-index:200; min-width:200px; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12); overflow:hidden; animation:altPickIn 140ms cubic-bezier(.16,1,.3,1); }
        [dir="rtl"] .altms-dropdown { left:auto; right:0; }
        .altms-list { max-height:220px; overflow-y:auto; padding:6px; display:flex; flex-direction:column; gap:2px; }
        .altms-option { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px; cursor:pointer; transition:background .1s; }
        .altms-option:hover { background:var(--bg); }
        .altms-option--checked { background:var(--accent-light); }
        .altms-check { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
        .altms-check-box { width:16px; height:16px; border:1.5px solid var(--border); border-radius:4px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .1s,border-color .1s; }
        .altms-option--checked .altms-check-box { background:var(--accent); border-color:var(--accent); color:var(--text-inverse); }
        .altms-opt-label { font-family:${L.bodyFont}; font-size:.875rem; color:var(--text-primary); }
        .altms-clear { width:100%; padding:8px 14px; border-top:1px solid var(--border); background:none; border-left:none; border-right:none; border-bottom:none; font-family:${L.bodyFont}; font-size:.8125rem; color:var(--danger); cursor:pointer; text-align:start; transition:background .1s; }
        .altms-clear:hover { background:var(--danger-light); }

        /* ── filter bar ── */
        .alt-filter-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:32px; padding:14px 20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
        .alt-filter-label { font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); white-space:nowrap; }
        .alt-filter-sep { width:1px; height:20px; background:var(--border); flex-shrink:0; }
        .alt-vat-toggle { margin-inline-start:auto; display:flex; align-items:center; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
        .alt-vat-opt { font-family:${L.bodyFont}; font-size:.75rem; font-weight:500; padding:5px 10px; background:var(--surface); color:var(--text-muted); cursor:pointer; border:none; transition:background .1s,color .1s; }
        .alt-vat-opt--on { background:var(--accent); color:var(--text-inverse); }
        .alt-filter-reset { font-size:.8125rem; color:var(--text-muted); background:none; border:none; cursor:pointer; padding:4px 6px; transition:color .15s; font-family:${L.bodyFont}; }
        .alt-filter-reset:hover { color:var(--danger); }

        /* ── metrics ── */
        .alt-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:40px; }
        .alt-metric { background:var(--surface); padding:24px 22px; }
        .alt-metric-title { font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin:0 0 12px; }
        .alt-metric-value { font-family:${L.displayFont}; font-size:1.875rem; font-weight:400; color:var(--text-primary); line-height:1; margin-bottom:10px; letter-spacing:-.02em; }
        .alt-metric-footer { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
        .alt-change { font-size:.75rem; font-weight:600; padding:2px 8px; border-radius:20px; white-space:nowrap; font-family:${L.bodyFont}; }
        .alt-change--up   { background:var(--success-light); color:var(--success); }
        .alt-change--down { background:var(--danger-light);  color:var(--danger);  }
        .alt-change--flat { background:var(--muted-light);   color:var(--text-muted); }
        .alt-metric-prev { font-size:.75rem; color:var(--text-muted); font-family:${L.monoFont}; }

        /* ── section heading ── */
        .alt-section-heading { display:flex; align-items:center; gap:12px; margin:0 0 20px; }
        .alt-section-heading h2 { font-family:${L.displayFont}; font-size:1.375rem; font-weight:400; color:var(--text-primary); margin:0; letter-spacing:-.02em; }
        .alt-section-heading::after { content:''; flex:1; height:1px; background:var(--border); }

        /* ── charts ── */
        .dalt-charts-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
        .dalt-chart-full { grid-column:1/-1; }
        .alt-chart-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px 24px 20px; min-width:0; overflow:hidden; }
        .alt-chart-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; gap:12px; flex-wrap:wrap; }
        .alt-chart-title { font-family:${L.displayFont}; font-size:1.25rem; font-weight:400; color:var(--text-primary); margin:0; letter-spacing:-.02em; font-style:italic; }
        .alt-chart-controls { display:flex; gap:5px; flex-wrap:wrap; }
        .alt-ctrl { font-family:${L.bodyFont}; font-size:.75rem; font-weight:500; padding:4px 10px; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--text-secondary); cursor:pointer; transition:background .1s,border-color .1s,color .1s; }
        .alt-ctrl:hover { border-color:var(--accent); color:var(--accent); }
        .alt-ctrl-on { background:var(--accent)!important; border-color:var(--accent)!important; color:var(--text-inverse)!important; }
        .alt-ctrl-sep { width:1px; height:20px; background:var(--border); align-self:center; }
        .alt-chart-wrap { position:relative; height:260px; overflow:hidden; direction:ltr; width:100%; }
        .alt-chart-wrap--tall { height:320px; }

        /* ── responsive ── */
        @media (max-width:700px) {
          .dalt-hero-name { font-size:1.875rem; }
          .dalt-charts-grid { grid-template-columns:1fr; }
          .dalt-chart-full { grid-column:auto; }
          .alt-metrics { grid-template-columns:1fr 1fr; }
          .alt-page-title { font-size:1.75rem; }
          .altms-label { max-width:100px; }
        }
      `}</style>

      <h1 className="alt-page-title">{L.pageTitle}</h1>
      <p className="alt-page-sub">{L.pageSub}</p>

      <PeriodHero start={start} end={end} onChange={(s,e) => { setStart(s); setEnd(e); }} availableYears={availableYears} L={L} />

      <div className="alt-filter-bar">
        <span className="alt-filter-label">{L.filter}</span>
        <div className="alt-filter-sep" />
        <AltMultiSelect value={selDistricts} options={allDistricts} onChange={setSelDistricts} allLabel={L.allDistricts} countLabel={L.countDistricts} clearLabel={L.clearSel} />
        <AltMultiSelect value={selChannels}  options={allChannels}  onChange={setSelChannels}  allLabel={L.allChannels}  countLabel={L.countChannels}  clearLabel={L.clearSel} />
        <AltMultiSelect value={selMuseums}   options={allMuseums}   onChange={setSelMuseums}   allLabel={L.allMuseums}   countLabel={L.countMuseums}   clearLabel={L.clearSel} />
        {hasFilters && <button type="button" className="alt-filter-reset" onClick={() => { setSelDistricts([]); setSelChannels([]); setSelMuseums([]); }}>{L.reset}</button>}
        <div className="alt-vat-toggle">
          <button type="button" className={`alt-vat-opt${!includeVAT?' alt-vat-opt--on':''}`} onClick={() => setIncludeVAT(false)}>{L.exclVAT}</button>
          <button type="button" className={`alt-vat-opt${includeVAT ?' alt-vat-opt--on':''}`} onClick={() => setIncludeVAT(true)}>{L.inclVAT}</button>
        </div>
        <div className="alt-vat-toggle">
          <button type="button" className={`alt-vat-opt${activeLang==='en'?' alt-vat-opt--on':''}`} onClick={() => setLanguage('en')}>EN</button>
          <button type="button" className={`alt-vat-opt${activeLang==='ar'?' alt-vat-opt--on':''}`} onClick={() => setLanguage('ar')}>AR</button>
        </div>
      </div>

      <div className="alt-section-heading"><h2>{L.keyMetrics}</h2></div>
      <div className="alt-metrics">
        <MetricCard title={L.revenue}     curr={currM.revenue}          prev={prevM.revenue}          isCurrency newLabel={L.newLabel} />
        <MetricCard title={L.visitors}    curr={currM.visitors}         prev={prevM.visitors}                    newLabel={L.newLabel} />
        <MetricCard title={L.tickets}     curr={currM.tickets}          prev={prevM.tickets}                     newLabel={L.newLabel} />
        <MetricCard title={L.avgRev}      curr={currM.avgRevPerVisitor} prev={prevM.avgRevPerVisitor} isCurrency newLabel={L.newLabel} />
        {currPilgrims!==null && prevPilgrims!==null &&
          <MetricCard title={L.pilgrims}  curr={currPilgrims}           prev={prevPilgrims}                      newLabel={L.newLabel} />}
        {currCapture!==null && prevCapture!==null &&
          <MetricCard title={L.captureRate} curr={parseFloat(currCapture.toFixed(2))} prev={parseFloat((prevCapture??0).toFixed(2))} newLabel={L.newLabel} />}
      </div>

      <div className="alt-section-heading"><h2>{L.charts}</h2></div>
      <div className="dalt-charts-grid">

        <div className="alt-chart-card dalt-chart-full">
          <div className="alt-chart-header">
            <h3 className="alt-chart-title">{L.trendTitle}</h3>
            <div className="alt-chart-controls">
              {metricOpts.map(o => <button key={o.value} type="button" className={`alt-ctrl${metric===o.value?' alt-ctrl-on':''}`} onClick={() => setMetric(o.value)}>{o.label}</button>)}
              <div className="alt-ctrl-sep" />
              {granOpts.map(o => <button key={o.value} type="button" className={`alt-ctrl${gran===o.value?' alt-ctrl-on':''}`} onClick={() => setGran(o.value)}>{o.label}</button>)}
            </div>
          </div>
          <div className="alt-chart-wrap alt-chart-wrap--tall"><Line data={trendData} options={chartOpts} /></div>
        </div>

        <div className="alt-chart-card">
          <div className="alt-chart-header">
            <h3 className="alt-chart-title">{L.museumTitle}</h3>
            <div className="alt-chart-controls">
              {metricOpts.map(o => <button key={o.value} type="button" className={`alt-ctrl${metric===o.value?' alt-ctrl-on':''}`} onClick={() => setMetric(o.value)}>{o.label}</button>)}
              <div className="alt-ctrl-sep" />
              <button type="button" className={`alt-ctrl${museumChartType==='bar'?' alt-ctrl-on':''}`} onClick={() => setMuseumChartType('bar')}>{L.barLabel}</button>
              <button type="button" className={`alt-ctrl${museumChartType==='pie'?' alt-ctrl-on':''}`} onClick={() => setMuseumChartType('pie')}>{L.pieLabel}</button>
              <div className="alt-ctrl-sep" />
              <button type="button" className={`alt-ctrl${museumDisplayMode==='absolute'?' alt-ctrl-on':''}`} onClick={() => setMuseumDisplayMode('absolute')}>{L.absLabel}</button>
              <button type="button" className={`alt-ctrl${museumDisplayMode==='percent'?' alt-ctrl-on':''}`} onClick={() => setMuseumDisplayMode('percent')}>{L.pctLabel}</button>
            </div>
          </div>
          <div className="alt-chart-wrap alt-chart-wrap--tall">
            {museumChartType==='pie' ? <Pie data={museumDisplay} options={pieOptions} /> : <Bar data={museumDisplay} options={barHorizOpts} />}
          </div>
        </div>

        <div className="alt-chart-card">
          <div className="alt-chart-header">
            <h3 className="alt-chart-title">{L.channelTitle}</h3>
            <div className="alt-chart-controls">
              {metricOpts.map(o => <button key={o.value} type="button" className={`alt-ctrl${metric===o.value?' alt-ctrl-on':''}`} onClick={() => setMetric(o.value)}>{o.label}</button>)}
              <div className="alt-ctrl-sep" />
              <button type="button" className={`alt-ctrl${channelChartType==='bar'?' alt-ctrl-on':''}`} onClick={() => setChannelChartType('bar')}>{L.barLabel}</button>
              <button type="button" className={`alt-ctrl${channelChartType==='pie'?' alt-ctrl-on':''}`} onClick={() => setChannelChartType('pie')}>{L.pieLabel}</button>
              <div className="alt-ctrl-sep" />
              <button type="button" className={`alt-ctrl${channelDisplayMode==='absolute'?' alt-ctrl-on':''}`} onClick={() => setChannelDisplayMode('absolute')}>{L.absLabel}</button>
              <button type="button" className={`alt-ctrl${channelDisplayMode==='percent'?' alt-ctrl-on':''}`} onClick={() => setChannelDisplayMode('percent')}>{L.pctLabel}</button>
            </div>
          </div>
          <div className="alt-chart-wrap">
            {channelChartType==='pie' ? <Pie data={channelDisplay} options={pieOptions} /> : <Bar data={channelDisplay} options={barNoLegend} />}
          </div>
        </div>

        <div className="alt-chart-card dalt-chart-full">
          <div className="alt-chart-header">
            <h3 className="alt-chart-title">{L.districtTitle}</h3>
            <div className="alt-chart-controls">
              {metricOpts.map(o => <button key={o.value} type="button" className={`alt-ctrl${metric===o.value?' alt-ctrl-on':''}`} onClick={() => setMetric(o.value)}>{o.label}</button>)}
              <div className="alt-ctrl-sep" />
              <button type="button" className={`alt-ctrl${districtChartType==='bar'?' alt-ctrl-on':''}`} onClick={() => setDistrictChartType('bar')}>{L.barLabel}</button>
              <button type="button" className={`alt-ctrl${districtChartType==='pie'?' alt-ctrl-on':''}`} onClick={() => setDistrictChartType('pie')}>{L.pieLabel}</button>
              <div className="alt-ctrl-sep" />
              <button type="button" className={`alt-ctrl${districtDisplayMode==='absolute'?' alt-ctrl-on':''}`} onClick={() => setDistrictDisplayMode('absolute')}>{L.absLabel}</button>
              <button type="button" className={`alt-ctrl${districtDisplayMode==='percent'?' alt-ctrl-on':''}`} onClick={() => setDistrictDisplayMode('percent')}>{L.pctLabel}</button>
            </div>
          </div>
          <div className="alt-chart-wrap">
            {districtChartType==='pie' ? <Pie data={districtDisplay} options={pieOptions} /> : <Bar data={districtDisplay} options={barNoLegend} />}
          </div>
        </div>

      </div>
    </div>
  );
}
