/* ============================================================
   Faollik tarixi (audit log) — faqat super adminlar
   ============================================================ */
const LOG_META = {
  create:   { icon: 'plus',   color: 'var(--st-delivered)', bg: 'var(--st-delivered-bg)', label: 'Zakaz yaratildi' },
  edit:     { icon: 'edit',   color: 'var(--st-planned)',   bg: 'var(--st-planned-bg)',   label: 'Tahrirlandi' },
  move:     { icon: 'arrowR', color: 'var(--ink-3)',        bg: 'var(--bg-2)',            label: 'Ko\u02bbchirildi' },
  plan:     { icon: 'cal',    color: 'var(--st-planned)',   bg: 'var(--st-planned-bg)',   label: 'Rejalashtirildi' },
  reorder:  { icon: 'drag',   color: 'var(--st-transit)',   bg: 'var(--st-transit-bg)',   label: 'Navbat o\u02bbzgartirildi' },
  settings: { icon: 'gear',   color: 'var(--st-loading)',   bg: 'var(--st-loading-bg)',   label: 'Sozlama' },
  auth:     { icon: 'user',   color: 'var(--ink-4)',        bg: 'var(--bg-2)',            label: 'Kirish' },
};

function logTime(ts) {
  const d = new Date(ts);
  const p = n => (n < 10 ? '0' + n : n);
  return p(d.getHours()) + ':' + p(d.getMinutes());
}
function logDay(ts) {
  const d = new Date(ts); const now = new Date(2026, 5, 10);
  const diff = Math.round((now - new Date(d.getFullYear(), d.getMonth(), d.getDate())) / 86400000);
  if (diff === 0) return 'Bugun';
  if (diff === 1) return 'Kecha';
  const months = ['yanvar','fevral','mart','aprel','may','iyun','iyul','avgust','sentabr','oktabr','noyabr','dekabr'];
  return d.getDate() + ' ' + months[d.getMonth()];
}

function LogView({ log }) {
  const [filter, setFilter] = useState('all');
  const filters = [
    { key: 'all', label: 'Hammasi' },
    { key: 'reorder', label: 'Navbat' },
    { key: 'order', label: 'Zakazlar' },
    { key: 'settings', label: 'Sozlamalar' },
  ];
  const shown = log.filter(e => {
    if (filter === 'all') return true;
    if (filter === 'order') return ['create', 'edit', 'move', 'plan'].includes(e.type);
    return e.type === filter;
  });

  // kunlar bo'yicha guruhlash
  const groups = [];
  shown.forEach(e => {
    const day = logDay(e.ts);
    let g = groups[groups.length - 1];
    if (!g || g.day !== day) { g = { day, items: [] }; groups.push(g); }
    g.items.push(e);
  });

  const reorderCount = log.filter(e => e.type === 'reorder').length;

  return (
    <div style={{ padding: '8px 28px 32px', overflowY: 'auto', height: '100%' }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 16, margin: '6px 0 18px' }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
            <h2 style={{ fontSize: 20, fontWeight: 800, letterSpacing: '-.02em', margin: 0 }}>Faollik tarixi</h2>
            <span className="chip" style={{ background: 'var(--brand-tint)', color: 'var(--brand-700)' }}><Icon name="lock" size={12} /> Faqat super admin</span>
          </div>
          <p style={{ fontSize: 12.5, color: 'var(--ink-4)', margin: '5px 0 0' }}>Har bir amal — kim, qachon va nimani o'zgartirgani shu yerda qayd etiladi</p>
        </div>
        <div style={{ display: 'flex', gap: 6 }}>
          {filters.map(f => (
            <button key={f.key} onClick={() => setFilter(f.key)}
              style={{ padding: '7px 12px', borderRadius: 100, fontSize: 12.5, fontWeight: 700, border: '1px solid var(--border)',
                       background: filter === f.key ? 'var(--brand)' : 'var(--surface)', color: filter === f.key ? '#fff' : 'var(--ink-2)' }}>
              {f.label}{f.key === 'reorder' && reorderCount ? ` · ${reorderCount}` : ''}
            </button>
          ))}
        </div>
      </div>

      {shown.length === 0 && (
        <div style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)', padding: 40 }}>
          <Empty icon="info" text="Bu turkumda hozircha yozuvlar yo'q" />
        </div>
      )}

      <div style={{ display: 'grid', gap: 18 }}>
        {groups.map((g, gi) => (
          <div key={gi}>
            <div style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '.06em', margin: '0 2px 9px' }}>{g.day}</div>
            <div style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)', overflow: 'hidden', boxShadow: 'var(--sh-1)' }}>
              {g.items.map((e, i) => {
                const m = LOG_META[e.type] || LOG_META.move;
                const role = DB.ROLES[e.role];
                return (
                  <div key={e.id} style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '12px 16px',
                                           borderBottom: i < g.items.length - 1 ? '1px solid var(--border)' : 'none',
                                           background: e.type === 'reorder' ? 'rgba(142,116,255,.035)' : 'transparent' }}>
                    <span style={{ width: 32, height: 32, borderRadius: 8, background: m.bg, color: m.color, display: 'grid', placeItems: 'center', flex: 'none' }}>
                      <Icon name={m.icon} size={16} stroke={2} />
                    </span>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink)' }} dangerouslySetInnerHTML={{ __html: e.text }} />
                      <div style={{ display: 'flex', alignItems: 'center', gap: 7, fontSize: 11.5, color: 'var(--ink-4)', marginTop: 2 }}>
                        <span style={{ fontWeight: 700, color: role && role.super ? 'var(--brand-700)' : 'var(--ink-3)' }}>{e.userName}</span>
                        <span style={{ width: 3, height: 3, borderRadius: '50%', background: 'var(--ink-4)' }} />
                        <span>{role ? role.label : e.role}</span>
                      </div>
                    </div>
                    <span className="tnum" style={{ fontSize: 12, color: 'var(--ink-4)', fontWeight: 600, flex: 'none' }}>{logTime(e.ts)}</span>
                  </div>
                );
              })}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.LogView = LogView;