const Analytics = () => {
  const t = (k) => window.__t ? window.__t(k) : k;
  const d = window.__data;
  const maxAppt = Math.max(...d.topDoctors.map(x => x.appointments));
  const mixTotal = d.channelMix.reduce((s, c) => s + c.value, 0);
  const maxLoad = Math.max(...d.specialties.map(s => s.bookings_today));
  const metricMap = {
    'Bookings MTD': t('an.metric.bookings'), 'Revenue MTD': t('an.metric.revenue'),
    'Doctor utilisation': t('an.metric.util'), 'No-show rate': t('an.metric.noShow'),
    'Avg. consultation': t('an.metric.avgConsult'), 'SLA breach': t('an.metric.slaBreach')
  };

  return (
    <div className="content view">
      <div className="section-head">
        <div>
          <div className="sub">{t('an.sub')}</div>
          <h2>{t('an.title').replace(t('an.title.em'), '').trim()} <em>{t('an.title.em')}</em></h2>
        </div>
        <div className="pill-tabs">
          <button>{t('an.tab.7d')}</button>
          <button className="active">{t('an.tab.30d')}</button>
          <button>{t('an.tab.qtd')}</button>
          <button>{t('an.tab.ytd')}</button>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12, marginBottom: 16 }}>
        {d.analyticsMetrics.map((m, i) => (
          <div key={i} className="card" style={{ padding: '14px 16px' }}>
            <div className="mono" style={{ fontSize: 10, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.12em' }}>{metricMap[m.label] || m.label}</div>
            <div style={{ fontSize: 22, fontWeight: 600, fontFamily: 'var(--serif)', fontStyle: 'italic', marginTop: 4 }}>{m.val}</div>
            <div style={{ fontSize: 11, color: m.deltaDir === 'pos' ? 'var(--pos)' : 'var(--neg)', marginTop: 2 }}>{m.delta}</div>
          </div>
        ))}
      </div>

      <div className="grid cols-3" style={{ marginBottom: 16 }}>
        <div className="card">
          <div className="card-head">
            <div>
              <div className="sub">{t('an.lb.sub')}</div>
              <h3>{t('an.lb.title').replace(t('an.lb.title.em'), '').trim()} <em>{t('an.lb.title.em')}</em></h3>
            </div>
            <div className="pill-tabs"><button className="active">{t('an.lb.tab.visits')}</button><button>{t('an.lb.tab.revenue')}</button></div>
          </div>
          <div className="card-body flush">
            <div style={{ display: 'grid', gridTemplateColumns: '32px 36px 1fr 80px 110px', padding: '12px 18px', fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.1em', gap: 12, borderBottom: '1px solid var(--line)' }}>
              <div>#</div><div></div><div>{t('an.lb.col.doctor')}</div><div>{t('an.lb.col.visits')}</div><div>{t('an.lb.col.util')}</div>
            </div>
            {d.topDoctors.map((doc, i) => (
              <div key={doc.ref} style={{ display: 'grid', gridTemplateColumns: '32px 36px 1fr 80px 110px', padding: '12px 18px', borderTop: '1px solid var(--line)', alignItems: 'center', gap: 12, fontSize: 13 }}>
                <div className="mono" style={{ fontSize: 11, fontWeight: 600, color: i < 3 ? 'var(--accent-deep)' : 'var(--fg-3)' }}>{String(i + 1).padStart(2, '0')}</div>
                <div style={{ width: 28, height: 28, borderRadius: 6, background: 'var(--accent-soft)', color: 'var(--accent-deep)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--mono)', fontSize: 10, fontWeight: 700 }}>{doc.name.split(' ').slice(-1)[0].slice(0,2).toUpperCase()}</div>
                <div>
                  <div style={{ fontWeight: 500, fontSize: 13 }}>{doc.name}</div>
                  <div style={{ fontSize: 11, color: 'var(--fg-3)' }}>{doc.specialty}</div>
                </div>
                <div className="mono" style={{ fontWeight: 600 }}>{doc.appointments}</div>
                <div>
                  <div style={{ height: 5, background: 'var(--bg-soft)', borderRadius: 3, overflow: 'hidden' }}>
                    <div style={{ height: '100%', width: `${doc.utilisation}%`, background: doc.utilisation >= 85 ? 'var(--pos)' : 'var(--accent)' }} />
                  </div>
                  <div className="mono" style={{ fontSize: 9.5, color: 'var(--fg-3)', marginTop: 4, textTransform: 'uppercase', letterSpacing: '0.1em' }}>{doc.utilisation}% · {doc.fee} QAR</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <div>
              <div className="sub">{t('an.mix.sub')}</div>
              <h3>{t('an.mix.title').replace(t('an.mix.title.em'), '').trim()} <em>{t('an.mix.title.em')}</em></h3>
            </div>
          </div>
          <div className="card-body">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {d.channelMix.map((c, i) => (
                <div key={i}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 5, fontSize: 12.5 }}>
                    <span style={{ fontWeight: 500 }}>{c.name}</span>
                    <span className="mono" style={{ color: 'var(--fg-3)' }}>{c.value}%</span>
                  </div>
                  <div style={{ height: 6, background: 'var(--bg-soft)', borderRadius: 3, overflow: 'hidden' }}>
                    <div style={{ height: '100%', width: `${(c.value / mixTotal) * 100}%`, background: c.color }} />
                  </div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 18, padding: 12, background: 'var(--accent-soft)', border: '1px solid var(--accent-line)', borderRadius: 6 }}>
              <div className="mono" style={{ fontSize: 9.5, color: 'var(--accent-deep)', textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 6 }}>{t('an.mix.insightLabel')}</div>
              <div style={{ fontSize: 12.5, lineHeight: 1.5, color: 'var(--fg-1)' }}>
                {t('an.mix.insight')}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="grid cols-2">
        <div className="card">
          <div className="card-head">
            <div>
              <div className="sub">{t('an.load.sub')}</div>
              <h3>{t('an.load.title').replace(t('an.load.title.em'), '').trim()} <em>{t('an.load.title.em')}</em></h3>
            </div>
          </div>
          <div className="card-body flush">
            {d.specialties.map((s, i) => (
              <div key={s.code} style={{ padding: '10px 18px', borderTop: i === 0 ? 'none' : '1px solid var(--line)', display: 'grid', gridTemplateColumns: '1fr 50px 110px', gap: 10, alignItems: 'center' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ width: 8, height: 8, borderRadius: 2, background: s.color }} />
                  <span style={{ fontSize: 12.5 }}>{s.name}</span>
                  <span className="mono" style={{ fontSize: 9.5, color: 'var(--fg-4)' }}>{s.code}</span>
                </div>
                <div className="mono" style={{ fontSize: 12, fontWeight: 600, textAlign: 'right' }}>{s.bookings_today}</div>
                <div style={{ height: 5, background: 'var(--bg-soft)', borderRadius: 3, overflow: 'hidden' }}>
                  <div style={{ height: '100%', width: `${(s.bookings_today / maxLoad) * 100}%`, background: s.color }} />
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <div>
              <div className="sub">{t('an.themes.sub')}</div>
              <h3>{t('an.themes.title').replace(t('an.themes.title.em'), '').trim()} <em>{t('an.themes.title.em')}</em></h3>
            </div>
          </div>
          <div className="card-body">
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
              {[
                { t: 'routine cleaning',     n: 184 },
                { t: 'cardiac follow-up',    n: 142 },
                { t: 'pediatric vaccination', n: 128 },
                { t: 'antenatal first visit', n: 112 },
                { t: 'skin rash',             n: 98 },
                { t: 'sports injury',         n: 84 },
                { t: 'ENT — sinus',           n: 76 },
                { t: 'eye check',             n: 64 },
                { t: 'BP review',             n: 58 },
                { t: 'mental health',         n: 52 },
                { t: 'wait time complaint',   n: 14 }
              ].map((tag, i) => {
                const size = 11 + Math.min(8, tag.n / 25);
                return (
                  <span key={i} style={{
                    fontSize: size, fontWeight: tag.n > 100 ? 600 : 500,
                    padding: '4px 10px', borderRadius: 4,
                    background: tag.n > 100 ? 'var(--accent-soft)' : 'var(--bg-soft)',
                    color: tag.n > 100 ? 'var(--accent-deep)' : 'var(--fg-2)',
                    border: `1px solid ${tag.n > 100 ? 'var(--accent-line)' : 'var(--line)'}`
                  }}>
                    {tag.t} <span className="mono" style={{ fontSize: 9.5, opacity: 0.7, marginLeft: 4 }}>{tag.n}</span>
                  </span>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.Analytics = Analytics;