import React from 'react';
import { useShadeState } from '../useShadeState.js';
import { useShadeContext } from '../ShadeProvider.js';
import { WidgetShell, formatRelative } from './shared.js';

/**
 * SessionList — table of all active Shade sessions with per-session stats.
 */
export function SessionList(): React.ReactElement {
  const { state, loading, error } = useShadeState();
  const { theme } = useShadeContext();

  return (
    <WidgetShell
      title="Sessions"
      status={
        <span style={{ fontSize: 11, color: theme.textMuted }}>
          {state?.sessions.length ?? 0} active
        </span>
      }
    >
      {loading && !state ? (
        <div style={{ color: theme.textMuted, fontSize: 13 }}>Loading…</div>
      ) : error ? (
        <div style={{ color: theme.danger, fontSize: 13 }}>{error.message}</div>
      ) : !state?.sessions.length ? (
        <div style={{ color: theme.textMuted, fontSize: 13, padding: '16px 0', textAlign: 'center' }}>
          No active sessions
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {state.sessions.map((s) => (
            <div
              key={s.address}
              style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                padding: 10,
                background: theme.bg,
                border: `1px solid ${theme.border}`,
                borderRadius: 6,
                gap: 12,
              }}
            >
              <div style={{ minWidth: 0, flex: 1 }}>
                <div
                  style={{
                    fontSize: 13,
                    color: theme.text,
                    fontWeight: 500,
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap',
                  }}
                >
                  {s.address}
                </div>
                <div
                  style={{
                    fontSize: 10,
                    color: theme.textDim,
                    fontFamily: theme.fontMono,
                    marginTop: 2,
                  }}
                >
                  {s.remoteIdentityKeyHash}
                </div>
              </div>
              <div style={{ display: 'flex', gap: 12, fontSize: 11, color: theme.textMuted, flexShrink: 0 }}>
                <div title="Messages sent">
                  <span style={{ color: theme.accent }}>↑</span> {s.messageCountSent}
                </div>
                <div title="Messages received">
                  <span style={{ color: theme.accent }}>↓</span> {s.messageCountReceived}
                </div>
                <div title="DH ratchet steps">
                  <span style={{ color: theme.textDim }}>⟳</span> {s.dhRatchetSteps}
                </div>
                <div style={{ minWidth: 60, textAlign: 'right' }}>{formatRelative(s.lastActivity)}</div>
              </div>
            </div>
          ))}
        </div>
      )}
    </WidgetShell>
  );
}
