// screen-settings-extras.jsx — Brands, Detection, Tone, Phases, Team tabs
// Five custom Settings screens that don't fit the legacy SettingsScreen file.
const { useState: useStateE, useMemo: useMemoE } = React;

/* ========================= BRANDS & HEALTH ========================= */
function SettingsBrandsScreen() {
  const app = useApp();
  const [editing, setEditing] = useStateE(null);
  const jobByBrand = useMemoE(() => {
    const map = {};
    CRAWL_JOBS.forEach(j => { if (!map[j.brand] || j.startedAt > map[j.brand].startedAt) map[j.brand] = j; });
    return map;
  }, []);

  return (
    <div className="page-pad wide">
      <div className="row" style={{ marginBottom: 14, flexWrap: 'wrap', gap: 12 }}>
        <div style={{ flex: 1, minWidth: 240 }}>
          <div className="t-h1">Brand catalog & health</div>
          <div className="t-sm dim" style={{ marginTop: 2 }}>
            {BRANDS.length} brand · {BRANDS.filter(b => !b.disabledReason).length} đang chạy · {BRANDS.filter(b => b.isFallback).length} fallback aggregator
          </div>
        </div>
        <Button variant="ghost" size="sm" icon="rotate" onClick={() => app.toast && app.toast('Đang refresh trạng thái brand…', 'rotate')}>Refresh health</Button>
        <Button variant="primary" size="sm" icon="plus" onClick={() => app.toast && app.toast('Modal thêm brand mới sẽ ra Batch 9', 'sparkle')}>Thêm brand</Button>
      </div>

      <div className="card" style={{ overflow: 'hidden' }}>
        <table className="tbl">
          <thead>
            <tr>
              <th>Brand</th>
              <th style={{ width: 110 }}>Kiểu scrape</th>
              <th style={{ width: 80, textAlign: 'right' }}>Weight</th>
              <th style={{ width: 100, textAlign: 'right' }}>Pages</th>
              <th style={{ width: 120 }}>Last crawl</th>
              <th style={{ width: 110 }}>Trạng thái</th>
              <th style={{ width: 40 }}></th>
            </tr>
          </thead>
          <tbody>
            {BRANDS.map(b => {
              const j = jobByBrand[b.key];
              const stat = b.disabledReason ? 'disabled' : (b.isFallback ? 'fallback' : 'active');
              const statTone = stat === 'active' ? 'green' : stat === 'fallback' ? 'yellow' : 'red';
              return (
                <tr key={b.key} onClick={() => setEditing(b)}>
                  <td>
                    <div className="row gap-sm">
                      <BrandLogo brand={b} size={22} />
                      <div>
                        <div className="t-sm strong">{b.name}</div>
                        <div className="t-2xs dimmer mono">{b.key}</div>
                      </div>
                    </div>
                  </td>
                  <td className="t-xs mono dim">{b.kind || 'n/a'}</td>
                  <td className="t-sm mono strong" style={{ textAlign: 'right' }}>{b.weight || 5}</td>
                  <td className="t-xs mono dim" style={{ textAlign: 'right' }}>{b.pages || '–'}</td>
                  <td className="t-xs dim">{j ? new Date(j.startedAt).toLocaleString('vi-VN', { hour: '2-digit', minute: '2-digit', day: '2-digit', month: '2-digit' }) : '–'}</td>
                  <td>
                    <Badge variant={statTone} icon={stat === 'active' ? 'check' : stat === 'fallback' ? 'rotate' : 'ban'}>
                      {stat === 'active' ? 'Active' : stat === 'fallback' ? 'Fallback' : 'Disabled'}
                    </Badge>
                  </td>
                  <td><Icon name="chevronR" size={14} style={{ color: 'var(--text-3)' }} /></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      {editing && <BrandEditDrawer brand={editing} onClose={() => setEditing(null)} />}
    </div>
  );
}

function BrandEditDrawer({ brand, onClose }) {
  const app = useApp();
  const [draft, setDraft] = useStateE({
    name: brand.name,
    kind: brand.kind || 'json_api',
    weight: brand.weight || 5,
    pages: brand.pages || 1,
    sourceUrl: brand.sourceUrl || brand.url || '',
    intervalMin: brand.intervalMin || 30,
    fallback: brand.fallback || '',
    alertRate24: brand.alertRate24 || 70,
  });
  const set = (k, v) => setDraft(d => ({ ...d, [k]: v }));
  return (
    <Drawer title={'Cấu hình ' + brand.name} sub={brand.key + ' · ' + (brand.kind || 'unknown')} onClose={onClose}
      foot={<>
        <Button variant="ghost" onClick={onClose}>Hủy</Button>
        <Button variant="danger" icon="ban" onClick={() => { app.toast && app.toast('Đã disable brand', 'ban'); onClose(); }}>Disable</Button>
        <Button variant="primary" icon="save" onClick={() => { app.toast && app.toast('Đã lưu cấu hình brand', 'check'); onClose(); }}>Lưu</Button>
      </>}>
      <Field label="Tên hiển thị"><input className="input" value={draft.name} onChange={e => set('name', e.target.value)} /></Field>
      <div style={{ height: 12 }}></div>
      <Field label="URL nguồn (sale)" hint="Endpoint API hoặc trang HTML để scrape">
        <input className="input mono" value={draft.sourceUrl} onChange={e => set('sourceUrl', e.target.value)} placeholder="https://www.uniqlo.com/jp/api/..." />
      </Field>
      <div style={{ height: 12 }}></div>
      <div className="grid-2" style={{ gap: 12 }}>
        <Field label="Kiểu scrape">
          <select className="select" value={draft.kind} onChange={e => set('kind', e.target.value)}>
            <option value="json_api">json_api</option>
            <option value="html_parse">html_parse</option>
            <option value="rakuten_search">rakuten_search</option>
            <option value="manual">manual (form input)</option>
          </select>
        </Field>
        <Field label="Số page" hint="Tối đa pagination mỗi lần">
          <input type="number" className="input" min="1" max="20" value={draft.pages} onChange={e => set('pages', +e.target.value)} />
        </Field>
        <Field label="Brand weight" hint="1-10, dùng cho Deal Score">
          <input type="number" className="input" min="0" max="10" value={draft.weight} onChange={e => set('weight', +e.target.value)} />
        </Field>
        <Field label="Interval (phút)" hint="Tần suất cron">
          <input type="number" className="input" min="5" max="1440" value={draft.intervalMin} onChange={e => set('intervalMin', +e.target.value)} />
        </Field>
        <Field label="Fallback adapter" hint="Brand thay thế khi block">
          <select className="select" value={draft.fallback} onChange={e => set('fallback', e.target.value)}>
            <option value="">(không)</option>
            {BRANDS.filter(b => b.isFallback && b.key !== brand.key).map(b => (
              <option key={b.key} value={b.key}>{b.name}</option>
            ))}
          </select>
        </Field>
        <Field label="Alert khi success-rate24h <" hint="% — gửi alert Telegram">
          <input type="number" className="input" min="0" max="100" value={draft.alertRate24} onChange={e => set('alertRate24', +e.target.value)} />
        </Field>
      </div>
      <div className="divider"></div>
      <div className="t-2xs strong dimmer" style={{ marginBottom: 8 }}>CRAWL JOB GẦN NHẤT</div>
      {CRAWL_JOBS.filter(j => j.brand === brand.key).slice(0, 3).map(j => (
        <div key={j.id} className="panel" style={{ padding: 10, marginBottom: 8 }}>
          <div className="row gap-sm">
            <Badge variant={j.status === 'ok' ? 'green' : j.status === 'partial' ? 'yellow' : 'red'} icon={j.status === 'ok' ? 'check' : j.status === 'partial' ? 'alert' : 'x'}>{j.status}</Badge>
            <span className="t-xs mono dim">{j.durationS}s</span>
            <span className="t-xs mono dim">{j.productsFound} SP</span>
            <span className="t-xs dimmer" style={{ marginLeft: 'auto' }}>{j.startedAt.slice(11, 16)}</span>
          </div>
          {j.error && <div className="t-2xs" style={{ color: 'var(--red)', marginTop: 6 }}>{j.error}</div>}
        </div>
      ))}
      {CRAWL_JOBS.filter(j => j.brand === brand.key).length === 0 && (
        <div className="t-xs dimmer">Chưa có job nào cho brand này.</div>
      )}
    </Drawer>
  );
}

/* ========================= FIELD DETECTION ========================= */
function SettingsDetectionScreen() {
  const app = useApp();
  const [testText, setTestText] = useStateE('メンズ エアリズムコットンクルーネックT 綿100% 黒 DV9553-100');
  const groups = Object.keys(DETECTION_RULES);
  const matches = useMemoE(() => {
    const r = {};
    groups.forEach(g => {
      r[g] = DETECTION_RULES[g].filter(rule => {
        try { return new RegExp(rule.pattern, 'i').test(testText); }
        catch (e) { return false; }
      }).map(rule => rule.label);
    });
    return r;
  }, [testText]);

  return (
    <div className="page-pad wide">
      <div className="row" style={{ marginBottom: 14 }}>
        <div style={{ flex: 1 }}>
          <div className="t-h1">Field Detection</div>
          <div className="t-sm dim" style={{ marginTop: 2 }}>Regex/dictionary để auto-trích category, material, color, product code từ text Nhật/Anh.</div>
        </div>
        <Button variant="primary" size="sm" icon="save" onClick={() => app.toast && app.toast('Đã lưu rules (demo)', 'check')}>Lưu thay đổi</Button>
      </div>

      <div className="card card-pad" style={{ marginBottom: 16, background: 'var(--bg-2)' }}>
        <div className="t-2xs strong dimmer" style={{ marginBottom: 8 }}>SANDBOX · DÁN TEXT SẢN PHẨM ĐỂ TEST LIVE</div>
        <textarea className="textarea mono" rows={3} value={testText} onChange={e => setTestText(e.target.value)} />
        <div className="row" style={{ marginTop: 10, gap: 8, flexWrap: 'wrap' }}>
          {groups.map(g => (
            <div key={g} className="row gap-sm" style={{ padding: '6px 10px', background: 'var(--surface)', borderRadius: 'var(--r-md)', border: '1px solid var(--border)' }}>
              <span className="t-2xs strong dimmer">{g}:</span>
              {matches[g].length > 0
                ? matches[g].map(m => <Badge key={m} variant="accent">{m}</Badge>)
                : <span className="t-2xs dimmer">no match</span>}
            </div>
          ))}
        </div>
      </div>

      <div className="grid-2" style={{ gap: 16, alignItems: 'start' }}>
        {groups.map(g => (
          <div key={g} className="card card-pad">
            <div className="between" style={{ marginBottom: 12 }}>
              <div>
                <div className="t-h2" style={{ textTransform: 'capitalize' }}>{g.replace(/([A-Z])/g, ' $1').trim()}</div>
                <div className="t-2xs dimmer">{DETECTION_RULES[g].length} rule · case-insensitive regex</div>
              </div>
              <Button variant="ghost" size="sm" icon="plus" onClick={() => app.toast && app.toast('Thêm rule sẽ enable Batch 4.5', 'plus')}>Rule</Button>
            </div>
            {DETECTION_RULES[g].map((rule, i) => {
              const hit = matches[g].includes(rule.label);
              return (
                <div key={i} className="row gap-sm" style={{ padding: '8px 10px', marginBottom: 6, background: hit ? 'var(--accent-soft)' : 'var(--bg-2)', borderRadius: 'var(--r-md)', border: '1px solid ' + (hit ? 'var(--accent)' : 'var(--border)') }}>
                  <code className="mono t-2xs" style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: 'var(--text-2)' }}>{rule.pattern}</code>
                  <span className="t-2xs strong" style={{ color: hit ? 'var(--accent)' : 'var(--text-3)' }}>{rule.label}</span>
                </div>
              );
            })}
          </div>
        ))}
      </div>
    </div>
  );
}

/* ========================= TONE & VOICE ========================= */
function SettingsToneScreen() {
  const app = useApp();
  const [editing, setEditing] = useStateE(null);

  return (
    <div className="page-pad wide">
      <div className="row" style={{ marginBottom: 14, flexWrap: 'wrap', gap: 12 }}>
        <div style={{ flex: 1, minWidth: 240 }}>
          <div className="t-h1">Tone & Voice</div>
          <div className="t-sm dim" style={{ marginTop: 2 }}>{TONE_PRESETS.length} preset · áp dụng vào Tạo bài AI + Caption Lab. Đồng bộ với Tone Library bên Nội dung.</div>
        </div>
        <Button variant="ghost" size="sm" icon="bot" onClick={() => app.toast && app.toast('Đang sync với LLM prompt template…', 'bot')}>Sync prompt</Button>
        <Button variant="primary" size="sm" icon="plus" onClick={() => app.toast && app.toast('Thêm tone preset (sẽ ra Batch 6)', 'plus')}>Thêm tone</Button>
      </div>

      <div className="grid-3" style={{ gap: 16, alignItems: 'start' }}>
        {TONE_PRESETS.map(t => (
          <div key={t.id} className="card card-pad" style={{ cursor: 'pointer' }} onClick={() => setEditing(t)}>
            <div className="row gap-sm" style={{ marginBottom: 8 }}>
              <span style={{ fontSize: 22 }}>{t.emoji.split('')[0]}</span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="t-h2 clip-1">{t.name}</div>
                <div className="t-2xs dimmer clip-1">{t.persona}</div>
              </div>
              <Icon name="edit" size={14} style={{ color: 'var(--text-3)' }} />
            </div>
            <div className="panel" style={{ padding: 10, marginBottom: 10, background: 'var(--bg-2)' }}>
              <div className="t-xs" style={{ lineHeight: 1.5 }}>"{t.sample}"</div>
            </div>
            <div className="t-2xs strong dimmer" style={{ marginBottom: 4 }}>HASHTAG</div>
            <div className="row gap-sm" style={{ flexWrap: 'wrap' }}>
              {t.hashtagSet.map(h => <Badge key={h} variant="neutral">{h}</Badge>)}
            </div>
            <div className="divider" style={{ margin: '10px 0' }}></div>
            <div className="grid-2" style={{ gap: 8 }}>
              <div>
                <div className="t-2xs strong" style={{ color: 'var(--green)', marginBottom: 4 }}>DO</div>
                {t.do.slice(0, 2).map((x, i) => <div key={i} className="t-2xs dim clip-1">• {x}</div>)}
              </div>
              <div>
                <div className="t-2xs strong" style={{ color: 'var(--red)', marginBottom: 4 }}>DON'T</div>
                {t.dont.slice(0, 2).map((x, i) => <div key={i} className="t-2xs dim clip-1">• {x}</div>)}
              </div>
            </div>
          </div>
        ))}
      </div>

      {editing && (
        <Drawer title={'Edit tone · ' + editing.name} sub={editing.persona} onClose={() => setEditing(null)}
          foot={<>
            <Button variant="ghost" onClick={() => setEditing(null)}>Đóng</Button>
            <Button variant="primary" icon="save" onClick={() => { app.toast && app.toast('Đã lưu tone preset', 'check'); setEditing(null); }}>Lưu</Button>
          </>}>
          <Field label="Persona"><textarea className="textarea" rows={2} defaultValue={editing.persona} /></Field>
          <div style={{ height: 10 }}></div>
          <Field label="Emoji set"><input className="input" defaultValue={editing.emoji} /></Field>
          <div style={{ height: 10 }}></div>
          <Field label="Hashtag set (phân tách dấu phẩy)"><input className="input" defaultValue={editing.hashtagSet.join(', ')} /></Field>
          <div style={{ height: 10 }}></div>
          <Field label="DO (mỗi dòng 1 quy tắc)"><textarea className="textarea" rows={3} defaultValue={editing.do.join('\n')} /></Field>
          <div style={{ height: 10 }}></div>
          <Field label="DON'T (mỗi dòng 1 quy tắc)"><textarea className="textarea" rows={3} defaultValue={editing.dont.join('\n')} /></Field>
          <div style={{ height: 10 }}></div>
          <Field label="Caption mẫu" hint="Ví dụ để LLM tham chiếu phong cách"><textarea className="textarea" rows={3} defaultValue={editing.sample} /></Field>
        </Drawer>
      )}
    </div>
  );
}

/* ========================= CAMPAIGN PHASES ========================= */
function SettingsPhasesScreen() {
  const app = useApp();
  return (
    <div className="page-pad" style={{ maxWidth: 980 }}>
      <div className="row" style={{ marginBottom: 14 }}>
        <div style={{ flex: 1 }}>
          <div className="t-h1">Campaign Phases</div>
          <div className="t-sm dim" style={{ marginTop: 2 }}>Các pha của 1 chiến dịch sale. Gap thời gian + loại nội dung mỗi pha. Áp dụng cho lịch tự động.</div>
        </div>
        <Button variant="primary" size="sm" icon="save" onClick={() => app.toast && app.toast('Đã lưu cấu hình phases', 'check')}>Lưu</Button>
      </div>

      <div className="card card-pad">
        <div style={{ position: 'relative' }}>
          {PHASES.map((ph, i) => (
            <div key={ph.id} style={{ display: 'grid', gridTemplateColumns: '60px 1fr', gap: 16, paddingBottom: i === PHASES.length - 1 ? 0 : 18, position: 'relative' }}>
              {/* Timeline */}
              <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <div style={{ width: 36, height: 36, borderRadius: '50%', background: ph.color, display: 'grid', placeItems: 'center', color: '#fff', fontWeight: 700, flexShrink: 0, zIndex: 1 }}>{i + 1}</div>
                {i < PHASES.length - 1 && <div style={{ flex: 1, width: 2, background: 'var(--border-2)', marginTop: 4 }}></div>}
              </div>
              {/* Body */}
              <div className="panel" style={{ padding: 14, marginBottom: 4 }}>
                <div className="row" style={{ marginBottom: 8 }}>
                  <div style={{ flex: 1 }}>
                    <div className="t-h2" style={{ color: ph.color }}>{ph.name}</div>
                    <div className="t-2xs dimmer mono">phase ID: {ph.id}</div>
                  </div>
                  <Badge variant="neutral" icon="clock">
                    {ph.daysBefore > 0 ? 'T-' + ph.daysBefore : ph.daysBefore === 0 ? 'T-day' : 'T+' + Math.abs(ph.daysBefore)}
                  </Badge>
                </div>
                <div className="grid-2" style={{ gap: 12, marginBottom: 10 }}>
                  <Field label="Days before / after (T)" hint="Số ngày so với T-day (chiến dịch live)">
                    <input type="number" className="input sm" defaultValue={ph.daysBefore} />
                  </Field>
                  <Field label="Loại nội dung mặc định">
                    <input className="input sm" defaultValue={ph.contentType} />
                  </Field>
                </div>
                <Field label="Câu mẫu LLM dùng để học phong cách phase này">
                  <textarea className="textarea" rows={2} defaultValue={ph.sample} />
                </Field>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="banner banner-warn" style={{ marginTop: 14 }}>
        <Icon name="alert" size={16} style={{ color: 'var(--yellow)' }} />
        <span className="t-xs">Gap tối thiểu giữa 2 phase liên tiếp: 12 giờ. Nếu campaign quá ngắn (≤ 3 ngày), hệ thống tự bỏ pha Teaser + Afterparty.</span>
      </div>
    </div>
  );
}

/* ========================= TEAM & ROLES ========================= */
const MOCK_TEAM = [
  { id: 'u1', name: 'Phạm Nhật Quang', email: 'quang@nhatquang.shop', role: 'owner',   active: true,  lastSeen: 'Đang online' },
  { id: 'u2', name: 'Lê Phạm',          email: 'le@madiad.com',        role: 'admin',   active: true,  lastSeen: '5 phút trước' },
  { id: 'u3', name: 'Nhi Linh',         email: 'nhi@nhatquang.shop',   role: 'content', active: true,  lastSeen: '32 phút trước' },
  { id: 'u4', name: 'Thanh Vy',         email: 'vy@nhatquang.shop',    role: 'content', active: true,  lastSeen: '2 giờ trước' },
  { id: 'u5', name: 'Tuấn Anh',         email: 'tuan@madiad.com',      role: 'viewer',  active: false, lastSeen: '6 ngày trước' },
];
const ROLE_DESC = {
  owner:   { label: 'Owner',   tone: 'accent', desc: 'Toàn quyền — billing, brand config, xóa data' },
  admin:   { label: 'Admin',   tone: 'green',  desc: 'Vận hành — approve, edit, schedule, settings (trừ team/billing)' },
  content: { label: 'Content', tone: 'blue',   desc: 'Tạo nội dung — Caption Lab, Visual Lab, Tone (không settings)' },
  viewer:  { label: 'Viewer',  tone: 'neutral',desc: 'Chỉ đọc — analytics + archive' },
};
const MOCK_AUDIT = [
  { who: 'Lê Phạm',   action: 'Duyệt 3 sản phẩm AIRism Tee', at: '12 phút trước' },
  { who: 'Nhi Linh',  action: 'Sửa caption post #200',         at: '34 phút trước' },
  { who: 'Lê Phạm',   action: 'Đổi tỉ giá 196 → khóa rate',    at: '2 giờ trước' },
  { who: 'Thanh Vy',  action: 'Tạo 2 nháp post Light Down GU', at: '3 giờ trước' },
  { who: 'P.N. Quang',action: 'Thêm brand "Beams"',            at: '5 giờ trước' },
];

function SettingsTeamScreen() {
  const app = useApp();
  return (
    <div className="page-pad" style={{ maxWidth: 980 }}>
      <div className="row" style={{ marginBottom: 14, flexWrap: 'wrap', gap: 12 }}>
        <div style={{ flex: 1, minWidth: 240 }}>
          <div className="t-h1">Team & Roles</div>
          <div className="t-sm dim" style={{ marginTop: 2 }}>{MOCK_TEAM.length} user · {MOCK_TEAM.filter(u => u.active).length} active. Role-based access kiểm soát từng tính năng.</div>
        </div>
        <Button variant="primary" size="sm" icon="plus" onClick={() => app.toast && app.toast('Invite user qua email (demo)', 'send')}>Mời thành viên</Button>
      </div>

      <div className="grid-4" style={{ marginBottom: 16, gap: 12 }}>
        {Object.entries(ROLE_DESC).map(([k, r]) => (
          <div key={k} className="card card-pad">
            <Badge variant={r.tone} icon="user">{r.label}</Badge>
            <div className="t-xs dim" style={{ marginTop: 8, lineHeight: 1.5 }}>{r.desc}</div>
            <div className="t-2xs dimmer mono" style={{ marginTop: 6 }}>{MOCK_TEAM.filter(u => u.role === k).length} người</div>
          </div>
        ))}
      </div>

      <div className="card" style={{ overflow: 'hidden', marginBottom: 16 }}>
        <table className="tbl">
          <thead>
            <tr>
              <th>Thành viên</th>
              <th style={{ width: 110 }}>Role</th>
              <th style={{ width: 160 }}>Last seen</th>
              <th style={{ width: 90, textAlign: 'right' }}>Active</th>
              <th style={{ width: 40 }}></th>
            </tr>
          </thead>
          <tbody>
            {MOCK_TEAM.map(u => {
              const r = ROLE_DESC[u.role];
              return (
                <tr key={u.id} style={{ cursor: 'default' }}>
                  <td>
                    <div className="row gap-sm">
                      <div style={{ width: 32, height: 32, borderRadius: '50%', background: 'var(--accent-soft)', color: 'var(--accent)', display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 13 }}>
                        {u.name.split(' ').slice(-1)[0][0]}
                      </div>
                      <div>
                        <div className="t-sm strong">{u.name}</div>
                        <div className="t-2xs dimmer mono">{u.email}</div>
                      </div>
                    </div>
                  </td>
                  <td><Badge variant={r.tone}>{r.label}</Badge></td>
                  <td className="t-xs dim">{u.lastSeen}</td>
                  <td style={{ textAlign: 'right' }}><Toggle on={u.active} onChange={() => app.toast && app.toast('Đã ' + (u.active ? 'tạm khóa' : 'mở') + ' ' + u.name, 'user')} /></td>
                  <td><Button variant="ghost" size="sm" icon="dots" /></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      <div className="card card-pad">
        <div className="between" style={{ marginBottom: 12 }}>
          <div>
            <div className="t-h2">Audit log</div>
            <div className="t-2xs dimmer">5 thao tác gần nhất · giữ 90 ngày</div>
          </div>
          <Button variant="ghost" size="sm" icon="history">Xem toàn bộ</Button>
        </div>
        {MOCK_AUDIT.map((a, i) => (
          <div key={i} className="row gap-sm" style={{ padding: '8px 0', borderBottom: i === MOCK_AUDIT.length - 1 ? 'none' : '1px solid var(--border)' }}>
            <div style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)' }}></div>
            <span className="t-sm strong" style={{ minWidth: 120 }}>{a.who}</span>
            <span className="t-sm dim" style={{ flex: 1 }}>{a.action}</span>
            <span className="t-2xs dimmer">{a.at}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, {
  SettingsBrandsScreen, SettingsDetectionScreen, SettingsToneScreen,
  SettingsPhasesScreen, SettingsTeamScreen,
});