// Audit Log — Gitea commit history

const { fmtRel } = window.CIE_DATA;
const { useLang } = window.CIE_I18N;

function AuditLog({ servers: rawServers }) {
  const { t } = useLang();
  const [commits, setCommits]     = useState([]);
  const [loading, setLoading]     = useState(false);
  const [loadErr, setLoadErr]     = useState('');
  const [serverFilter, setServerFilter] = useState('all');

  const serverIds = useMemo(
    () => rawServers ? rawServers.map(s => s.id || s) : [],
    [rawServers]
  );

  const load = (sid) => {
    setLoading(true);
    setLoadErr('');
    setCommits([]);
    const req = sid === 'all'
      ? CIE_API.getAuditLog()
      : CIE_API.getServerAuditLog(sid);
    req
      .then(data => setCommits(data || []))
      .catch(err => setLoadErr(err.message))
      .finally(() => setLoading(false));
  };

  useEffect(() => { load(serverFilter); }, [serverFilter]);

  // Визначаємо який сервер зачепив коміт
  const getCommitServer = (files) => {
    if (!files?.length) return null;
    const match = files[0].match(/^([^/]+)\//);
    return match ? match[1] : null;
  };

  return (
    <div className="view">
      <div className="view-head" style={{flexShrink:0}}>
        <div>
          <h1>{t('audit.title')}</h1>
          <div className="sub">{t('audit.subtitle')}</div>
        </div>
        <div className="actions">
          <button className="btn ghost sm" onClick={() => load(serverFilter)} disabled={loading}>
            {loading ? t('loading') : t('dash.refresh')}
          </button>
        </div>
      </div>

      {/* Server filter */}
      <div className="filterbar" style={{flexShrink:0}}>
        <div className="group">
          <div className={`seg ${serverFilter==='all'?'on':''}`} onClick={() => setServerFilter('all')}>
            {t('all')}
          </div>
          {serverIds.map(sid => (
            <div key={sid} className={`seg ${serverFilter===sid?'on':''}`} onClick={() => setServerFilter(sid)}>
              {sid}
            </div>
          ))}
        </div>
      </div>

      {loading && <div className="empty" style={{paddingTop:80}}>{t('loading')}</div>}
      {loadErr && <div className="empty" style={{paddingTop:80, color:'var(--err)'}}>✗ {loadErr}</div>}

      {!loading && !loadErr && commits.length === 0 && (
        <div className="empty" style={{paddingTop:80}}>{t('audit.no_commits')}</div>
      )}

      {!loading && !loadErr && commits.length > 0 && (
        <table className="tbl" style={{marginTop:0}}>
          <thead>
            <tr>
              <th style={{width:64}}>{t('audit.col_sha')}</th>
              <th style={{width:110}}>{t('audit.col_server')}</th>
              <th>{t('audit.col_message')}</th>
              <th style={{width:120}}>{t('audit.col_author')}</th>
              <th style={{width:110}}>{t('audit.col_date')}</th>
            </tr>
          </thead>
          <tbody>
            {commits.map((c, i) => {
              const srv = getCommitServer(c.files);
              return (
                <tr key={i}>
                  <td>
                    <span style={{
                      fontFamily:'var(--mono)', fontSize:11,
                      background:'var(--surface-3)', padding:'2px 6px',
                      borderRadius:3, color:'var(--text-dim)',
                      letterSpacing:'0.04em',
                    }}>{c.sha}</span>
                  </td>
                  <td>
                    {srv ? (
                      <span style={{
                        fontFamily:'var(--mono)', fontSize:10,
                        background:'rgba(120,200,130,0.08)',
                        border:'1px solid var(--accent-dim)',
                        color:'var(--accent)', padding:'1px 6px', borderRadius:3,
                      }}>{srv}</span>
                    ) : (
                      <span style={{color:'var(--text-faint)', fontFamily:'var(--mono)', fontSize:10}}>—</span>
                    )}
                  </td>
                  <td style={{fontFamily:'var(--mono)', fontSize:11.5}}>{c.message}</td>
                  <td style={{fontFamily:'var(--mono)', fontSize:11, color:'var(--text-dim)'}}>{c.author}</td>
                  <td style={{fontFamily:'var(--mono)', fontSize:11, color:'var(--text-mute)'}}>
                    {fmtRel(c.date)}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      )}
    </div>
  );
}

window.AuditLog = AuditLog;