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

/**
 * IdentityCard — shows your own Shade identity: fingerprint, registration ID,
 * when it was initialized and last rotated.
 */
export function IdentityCard(): React.ReactElement {
  const { state, loading, error } = useShadeState();
  const { theme } = useShadeContext();

  return (
    <WidgetShell title="Identity">
      {loading && !state ? (
        <div style={{ color: theme.textMuted, fontSize: 13 }}>Loading…</div>
      ) : error ? (
        <div style={{ color: theme.danger, fontSize: 13 }}>{error.message}</div>
      ) : !state?.identity.fingerprint ? (
        <div style={{ color: theme.textMuted, fontSize: 13 }}>No identity initialized yet</div>
      ) : (
        <>
          <div
            style={{
              fontFamily: theme.fontMono,
              fontSize: 12,
              color: theme.text,
              wordBreak: 'break-all',
              padding: 12,
              background: theme.bg,
              borderRadius: 6,
              border: `1px solid ${theme.border}`,
              lineHeight: 1.6,
            }}
          >
            {state.identity.fingerprint}
          </div>
          <div
            style={{
              display: 'flex',
              gap: 16,
              marginTop: 12,
              fontSize: 11,
              color: theme.textMuted,
            }}
          >
            <div>
              <span style={{ color: theme.textDim }}>Reg ID</span>{' '}
              <span style={{ fontFamily: theme.fontMono, color: theme.text }}>
                {state.identity.registrationId}
              </span>
            </div>
            <div>
              <span style={{ color: theme.textDim }}>Initialized</span>{' '}
              {formatRelative(state.identity.lastInitialized)}
            </div>
            {state.identity.lastRotated && (
              <div>
                <span style={{ color: theme.textDim }}>Rotated</span>{' '}
                {formatRelative(state.identity.lastRotated)}
              </div>
            )}
          </div>
        </>
      )}
    </WidgetShell>
  );
}
