'use client';

import { logoutAction } from '../app/actions';

type Props = {
  session: {
    user: {
      name: string;
      email: string;
      status: string;
      lastLoginAt: string | null;
      twoFactorEnabled: boolean;
      twoFactorConfirmedAt: string | null;
    };
    session: {
      issuedAt: string | null;
      expiresAt: string | null;
      refreshExpiresAt: string | null;
      currentIp: string | null;
      policy: 'single-session';
    };
  };
  labels: {
    sessionEyebrow: string;
    sessionTitle: string;
    sessionCopy: string;
    sessionBadge: string;
    signedInAs: string;
    accessIssued: string;
    accessExpires: string;
    refreshExpires: string;
    currentIp: string;
    lastLogin: string;
    unavailable: string;
    notAvailable: string;
    signOutRevoke: string;
    revokeCopy: string;
  };
};

function formatDateTime(value: string | null, fallback: string) {
  if (!value) return fallback;

  return new Intl.DateTimeFormat('en-US', {
    dateStyle: 'medium',
    timeStyle: 'short',
  }).format(new Date(value));
}

export function SecuritySessionCard({ session, labels }: Props) {
  return (
    <article className="surface-card security-session-card">
      <div className="security-session-head">
        <div>
          <p className="page-eyebrow">{labels.sessionEyebrow}</p>
          <h2>{labels.sessionTitle}</h2>
          <p className="page-copy">{labels.sessionCopy}</p>
        </div>
        <span className="security-session-badge">{labels.sessionBadge}</span>
      </div>

      <div className="security-session-grid">
        <div className="security-session-item">
          <strong>{labels.signedInAs}</strong>
          <span>{session.user.name}</span>
          <small>{session.user.email}</small>
        </div>
        <div className="security-session-item">
          <strong>{labels.accessIssued}</strong>
          <span>{formatDateTime(session.session.issuedAt, labels.notAvailable)}</span>
        </div>
        <div className="security-session-item">
          <strong>{labels.accessExpires}</strong>
          <span>{formatDateTime(session.session.expiresAt, labels.notAvailable)}</span>
        </div>
        <div className="security-session-item">
          <strong>{labels.refreshExpires}</strong>
          <span>{formatDateTime(session.session.refreshExpiresAt, labels.notAvailable)}</span>
        </div>
        <div className="security-session-item">
          <strong>{labels.currentIp}</strong>
          <span>{session.session.currentIp || labels.unavailable}</span>
        </div>
        <div className="security-session-item">
          <strong>{labels.lastLogin}</strong>
          <span>{formatDateTime(session.user.lastLoginAt, labels.notAvailable)}</span>
        </div>
      </div>

      <div className="security-session-actions">
        <form action={logoutAction}>
          <button type="submit" className="invite-submit-button">
            {labels.signOutRevoke}
          </button>
        </form>
        <p className="page-copy">
          {labels.revokeCopy}
        </p>
      </div>
    </article>
  );
}
