/**
 * Recent activity card (mcp-ai-spec §6.2.6): last 50 MCP calls —
 * time, tool, actor label, ok/error, duration — with an empty state.
 */
import { RefreshCw } from 'lucide-react';
import type { McpActivityEntry } from './types';
import { McpCard } from './card';
import { Button } from '@/components/ui/button';
import { __ } from '../../lib/i18n';

function formatTs(ts: number): string {
  if (!ts) return '—';
  return new Date(ts * 1000).toLocaleString();
}

export function ActivityLog({
  entries,
  loading,
  onRefresh,
}: {
  entries: McpActivityEntry[];
  loading: boolean;
  onRefresh: () => void;
}) {
  return (
    <McpCard
      title={__('Recent activity', 'llmagnet-llm-txt-generator')}
      description={__('The last 50 MCP calls handled by this server.', 'llmagnet-llm-txt-generator')}
      actions={
        <Button type="button" variant="outline" size="xs" onClick={onRefresh} disabled={loading} aria-label={__('Refresh activity', 'llmagnet-llm-txt-generator')}>
          <RefreshCw className={`h-3.5 w-3.5 ${loading ? 'animate-spin' : ''}`} aria-hidden />
          {__('Refresh', 'llmagnet-llm-txt-generator')}
        </Button>
      }
    >
      {entries.length === 0 ? (
        <p className="py-8 text-center text-sm text-gray-500">
          {__('No MCP calls yet — connect a client above.', 'llmagnet-llm-txt-generator')}
        </p>
      ) : (
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-gray-200 text-xs uppercase tracking-wide text-gray-500">
                <th scope="col" className="py-2 pe-4 text-start font-medium">
                  {__('Time', 'llmagnet-llm-txt-generator')}
                </th>
                <th scope="col" className="py-2 pe-4 text-start font-medium">
                  {__('Actor', 'llmagnet-llm-txt-generator')}
                </th>
                <th scope="col" className="py-2 pe-4 text-start font-medium">
                  {__('Tool', 'llmagnet-llm-txt-generator')}
                </th>
                <th scope="col" className="py-2 pe-4 text-start font-medium">
                  {__('Result', 'llmagnet-llm-txt-generator')}
                </th>
                <th scope="col" className="py-2 text-start font-medium">
                  {__('Duration', 'llmagnet-llm-txt-generator')}
                </th>
              </tr>
            </thead>
            <tbody>
              {entries.map((entry, i) => (
                <tr key={`${entry.ts}-${i}`} className="border-b border-gray-100">
                  <td className="whitespace-nowrap py-2 pe-4 text-gray-600">
                    {formatTs(entry.ts)}
                  </td>
                  <td className="py-2 pe-4 text-gray-800">
                    {entry.auth === 'auth_failed' ? (
                      <span className="text-red-600">
                        {__('auth failed', 'llmagnet-llm-txt-generator')}
                      </span>
                    ) : (
                      entry.auth || '—'
                    )}
                  </td>
                  <td className="py-2 pe-4">
                    {entry.tool ? (
                      <code dir="ltr" className="text-xs text-gray-700">
                        {entry.tool}
                      </code>
                    ) : (
                      <span className="text-gray-400">—</span>
                    )}
                  </td>
                  <td className="py-2 pe-4">
                    <span
                      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
                        entry.ok ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-700'
                      }`}
                    >
                      {entry.ok
                        ? __('OK', 'llmagnet-llm-txt-generator')
                        : __('Error', 'llmagnet-llm-txt-generator')}
                    </span>
                  </td>
                  <td className="whitespace-nowrap py-2 text-gray-600">{entry.ms} ms</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </McpCard>
  );
}