// DirectionB.jsx — "פער האכיפה" Enforcement Gap.
// Leads with the gauge + the stark 1 : N ratio between acts and enforcement.
const { useState: useStateB } = React;

function DirectionB() {
  const [filter, setFilter] = useStateB({ year: 2025, month: 0, district: null });
  // gauge / ratio are annual concepts — compute on the whole year regardless of month
  const yearFilter = { year: filter.year, month: 0, district: filter.district };
  const k = EI.kpis(filter);
  const ky = EI.kpis(yearFilter);
  const rows = EI.byDistrict(filter);
  const buckets = EI.durationBuckets(filter);
  const actions = ky.fines + ky.closures;
  const ratio = actions ? Math.round(ky.annual / actions) : 0;
  const enforcedPct = (actions / ky.annual) * 100;

  const miniCard = (value, label, tip, opts = {}) => (
    <Tip label={tip} block style={{ flex: 1 }}>
      <div style={{ background: '#fff', border: '1px solid #ECECEA', borderRadius: 16, padding: '18px 20px', height: '100%', boxSizing: 'border-box', textAlign: 'right' }}>
        <div style={{ fontWeight: 800, fontSize: 36, color: '#D20035', lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>
          <CountUp value={value} decimals={opts.decimals || 0} suffix={opts.suffix || ''} />
        </div>
        <div style={{ fontWeight: 600, fontSize: 14.5, color: '#333', marginTop: 9, lineHeight: 1.35 }}><Hoverable>{label}</Hoverable></div>
      </div>
    </Tip>
  );

  return (
    <div style={{ width: '100%', maxWidth: 1320, margin: '0 auto', fontFamily: "'Assistant',sans-serif", background: '#fff', direction: 'rtl', boxSizing: 'border-box' }}>
      {/* header */}
      <div style={{ padding: '34px 44px 22px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, borderBottom: '1px solid #ECECEA' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <ChainMark size={46} />
          <div>
            <h1 style={{ margin: 0, fontWeight: 800, fontSize: 38, color: '#D20035', letterSpacing: '-0.02em' }}>{EI.meta.title}</h1>
            <p style={{ margin: '2px 0 0', fontWeight: 700, fontSize: 18, color: '#1D1D1B' }}>{EI.meta.subtitle}</p>
          </div>
        </div>
        <img src="assets/tfht-logo.png" alt="המטה" style={{ height: 66, width: 'auto' }} />
      </div>

      <div style={{ padding: '18px 44px', background: '#FBFBFA', borderBottom: '1px solid #ECECEA' }}>
        <FilterBar filter={filter} setFilter={setFilter} />
      </div>

      {/* hero: gauge + ratio */}
      <div style={{ padding: '30px 44px', display: 'grid', gridTemplateColumns: '1fr 1.15fr', gap: 30, alignItems: 'stretch' }}>
        {/* gauge */}
        <div style={{ background: '#1D1D1B', borderRadius: 22, padding: '28px 30px', color: '#fff', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{ fontWeight: 700, fontSize: 16, color: 'rgba(255,255,255,.7)', marginBottom: 6 }}>שיעור האכיפה בשנת {filter.year}</div>
          <Gauge rate={ky.enforcementRate} size={300} />
          <div style={{ fontWeight: 800, fontSize: 60, color: '#fff', lineHeight: 1, marginTop: 4 }}>
            <CountUp value={ky.enforcementRate} decimals={2} suffix="%" />
          </div>
          <Tip label="המחוג כמעט נצמד לקצה ה'אפס' — האכיפה מכסה שבריר אחוז ממעשי הזנות בפועל.">
            <div style={{ fontWeight: 600, fontSize: 15, color: 'rgba(255,255,255,.65)', marginTop: 8, borderBottom: '2px dotted rgba(255,255,255,.4)' }}>מהמעשים נאכפים</div>
          </Tip>
        </div>

        {/* ratio + proportion bar */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20, justifyContent: 'center' }}>
          <div style={{ background: '#D20035', borderRadius: 22, padding: '30px 34px', color: '#fff', boxShadow: '0 12px 30px rgba(210,0,53,.22)' }}>
            <div style={{ fontWeight: 700, fontSize: 19, color: 'rgba(255,255,255,.9)' }}>פעולת אכיפה אחת בלבד על כל</div>
            <div style={{ fontWeight: 800, fontSize: 76, lineHeight: 1, margin: '6px 0', letterSpacing: '-0.02em' }}>
              <Tip label={`${eiFmt(actions)} פעולות אכיפה (קנסות + סגירות) מול הערכה של ${eiFmt(ky.annual)} מעשי זנות בשנה.`}>
                <span style={{ borderBottom: '3px dotted rgba(255,255,255,.45)' }}><CountUp value={ratio} /></span>
              </Tip>
            </div>
            <div style={{ fontWeight: 700, fontSize: 22 }}>מעשי זנות</div>
          </div>
          <div style={{ background: '#fff', border: '1px solid #ECECEA', borderRadius: 18, padding: '20px 24px' }}>
            <div style={{ fontWeight: 700, fontSize: 15, color: '#5B5B59', marginBottom: 12 }}>
              מתוך כ-<span style={{ color: '#1D1D1B', fontWeight: 800 }}>{eiFmt(ky.annual)}</span> מעשי זנות בשנה
            </div>
            <Tip label={`רק ${enforcedPct.toFixed(3)}% מהפס מלא — הפס כמעט ריק לחלוטין.`} block>
              <div style={{ position: 'relative', height: 26, background: '#F4F2F1', borderRadius: 8, overflow: 'hidden' }}>
                <div style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: `${Math.max(0.4, enforcedPct)}%`, background: '#D20035' }} />
              </div>
            </Tip>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, fontWeight: 700, fontSize: 12.5, color: '#9a9a98' }}>
              <span>לא נאכף ({eiFmt(ky.unenforced)})</span>
              <span style={{ color: '#D20035' }}>נאכף ({eiFmt(actions)})</span>
            </div>
          </div>
        </div>
      </div>

      {/* mini KPI row */}
      <div style={{ padding: '0 44px 28px', display: 'flex', gap: 16 }}>
        {miniCard(k.closures, 'סגירות מנהליות', 'צווי סגירה מנהליים לבתי בושת בתקופה הנבחרת.')}
        {miniCard(k.fines, 'קנסות לצרכנים', 'קנסות שניתנו ללקוחות זנות מכוח החוק לאיסור צריכת זנות.')}
        {miniCard(k.reopened, 'נפתחו בחזרה תוך חודש', 'בתי בושת שנפתחו מחדש בתוך חודש מתום תוקף צו הסגירה.')}
        {miniCard(k.avgDuration, 'ימי סגירה בממוצע', 'משך הזמן הממוצע שצו סגירה היה בתוקף.', { suffix: ' י׳' })}
      </div>

      {/* bar + duration */}
      <div style={{ padding: '0 44px 30px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 34, alignItems: 'start' }}>
        <div>
          <SectionTitle sub="לחצו על מחוז לסינון">סגירות לפי מחוז</SectionTitle>
          <BarChart rows={rows} metric="closures" filter={filter} setFilter={setFilter} />
        </div>
        <div style={{ background: '#FBFBFA', border: '1px solid #ECECEA', borderRadius: 20, padding: '22px 24px' }}>
          <SectionTitle sub={`${k.reopened} מתוך ${k.closures} נפתחו בחזרה תוך חודש`}>משך הסגירה</SectionTitle>
          <DurationTimeline buckets={buckets} />
        </div>
      </div>

      <div style={{ padding: '0 44px 32px' }}><SourceNote /></div>
    </div>
  );
}
window.DirectionB = DirectionB;