/*
Copyright (C) 2025 QuantumNous

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.

For commercial licensing, please contact support@quantumnous.com
*/

import React, { useMemo } from 'react';
import { ArrowUpRight, Clock, Inbox } from 'lucide-react';
import { renderQuota, renderNumber, timestamp2string } from '../../helpers';

const isSuccess = (l) =>
  l?.type === 0 || l?.status === 0 || l?.type === 'success' || l?.type === undefined;

const RecentActivity = ({ logs = [], className = '' }) => {
  const recent = useMemo(() => logs.slice(0, 10), [logs]);

  return (
    <div
      className={`relative overflow-hidden rounded-2xl border border-slate-200 bg-white transition-shadow hover:shadow-md dark:border-white/5 dark:bg-white/[0.02] dark:hover:shadow-black/20 ${className}`}
    >
      <div className='flex items-center justify-between p-6 pb-4'>
        <div className='flex items-center gap-3'>
          <div className='flex h-10 w-10 items-center justify-center rounded-xl bg-slate-100 text-slate-600 dark:bg-white/5 dark:text-white/70'>
            <Clock size={18} />
          </div>
          <div>
            <div className='text-sm font-semibold text-slate-900 dark:text-white'>最近调用</div>
            <div className='mt-0.5 text-[11px] text-slate-400 tabular-nums dark:text-white/40'>
              共{' '}
              <span className='font-semibold text-slate-900 dark:text-white'>
                {recent.length}
              </span>{' '}
              条记录
            </div>
          </div>
        </div>
        <a
          href='/console/log'
          className='flex items-center gap-1 text-xs text-slate-500 transition-colors hover:text-slate-900 dark:text-white/60 dark:hover:text-white'
        >
          查看全部 <ArrowUpRight size={11} />
        </a>
      </div>

      {recent.length === 0 ? (
        <div className='flex flex-col items-center justify-center px-6 py-14'>
          <div className='mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-slate-100 dark:bg-white/5'>
            <Inbox size={28} className='text-slate-400 dark:text-white/30' />
          </div>
          <h3 className='text-sm font-semibold text-slate-900 dark:text-white'>暂无使用记录</h3>
          <p className='mt-1 text-xs text-slate-500 dark:text-white/40'>
            开始使用 API 后，您的使用历史将显示在这里
          </p>
        </div>
      ) : (
        <div className='overflow-hidden border-t border-slate-100 dark:border-white/5'>
          <table className='w-full text-sm'>
            <thead>
              <tr className='border-b border-slate-100 bg-slate-50/50 text-slate-500 dark:border-white/5 dark:bg-white/[0.02] dark:text-white/40'>
                <th className='w-[140px] px-6 py-2.5 text-left font-mono text-[10px] font-normal uppercase tracking-wider'>
                  time
                </th>
                <th className='px-2 py-2.5 text-left font-mono text-[10px] font-normal uppercase tracking-wider'>
                  model
                </th>
                <th className='w-[120px] px-2 py-2.5 text-right font-mono text-[10px] font-normal uppercase tracking-wider'>
                  tokens
                </th>
                <th className='w-[120px] px-2 py-2.5 text-right font-mono text-[10px] font-normal uppercase tracking-wider'>
                  cost
                </th>
                <th className='w-[120px] px-6 py-2.5 text-right font-mono text-[10px] font-normal uppercase tracking-wider'>
                  status
                </th>
              </tr>
            </thead>
            <tbody>
              {recent.map((l) => {
                const ok = isSuccess(l);
                return (
                  <tr
                    key={l.id}
                    className='border-b border-slate-100 transition-colors last:border-b-0 hover:bg-slate-50/50 dark:border-white/5 dark:hover:bg-white/[0.02]'
                  >
                    <td className='whitespace-nowrap px-6 py-3 font-mono text-xs tabular-nums text-slate-500 dark:text-white/50'>
                      {timestamp2string(l.created_at).slice(5, 16)}
                    </td>
                    <td className='max-w-[300px] truncate px-2 py-3 text-slate-700 dark:text-white/90'>
                      {l.model_name || '—'}
                    </td>
                    <td className='px-2 py-3 text-right font-mono text-xs tabular-nums text-slate-500 dark:text-white/70'>
                      {renderNumber(l.token_used || 0)}
                    </td>
                    <td className='px-2 py-3 text-right font-mono text-xs tabular-nums text-slate-500 dark:text-white/70'>
                      {renderQuota(l.quota || 0)}
                    </td>
                    <td className='whitespace-nowrap px-6 py-3 text-right'>
                      <span
                        className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 ${
                          ok
                            ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400'
                            : 'bg-red-50 text-red-600 dark:bg-red-500/10 dark:text-red-400'
                        }`}
                      >
                        <span
                          className={`h-1.5 w-1.5 rounded-full ${
                            ok ? 'bg-emerald-500' : 'bg-red-500'
                          }`}
                        />
                        <span className='text-xs font-medium'>{ok ? '成功' : '失败'}</span>
                      </span>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
};

export default RecentActivity;