EpicNext-Cms/src/components/admin/dashboard.tsx

"use client";

import type { ReactNode } from "react";

export interface OnlineUser {
  id: number;
  username: string;
  look: string;
  roomId: number | null;
  roomName: string | null;
  lastActivity: Date;
}

type State = "ok" | "warn" | "danger" | "neutral";

/** A single live-status tile (online users, emulator, DB, …). */
export function StatusCard({
  label,
  value,
  hint,
  state = "neutral",
  icon,
}: {
  label: string;
  value: ReactNode;
  hint?: string;
  state?: State;
  icon?: string;
}) {
  return (
    <div className={`admin-stat-card ${state}`}>
      <div className="admin-stat-top">
        <span className="admin-stat-label">{label}</span>
        {icon ? (
          <span className="admin-stat-icon" aria-hidden>
            {icon}
          </span>
        ) : null}
      </div>
      <div className="admin-stat-value">{value}</div>
      {hint ? <div className="admin-stat-hint">{hint}</div> : null}
    </div>
  );
}

/** A row in the system-diagnostics list with an ok/warn/error pill. */
export function DiagnosticRow({
  label,
  detail,
  state,
}: {
  label: string;
  detail: string;
  state: Exclude<State, "neutral">;
}) {
  const text = state === "ok" ? "OK" : state === "warn" ? "WARN" : "ERROR";
  return (
    <div className="admin-diag-row">
      <span className={`admin-dot ${state}`} aria-hidden />
      <span className="admin-diag-label">{label}</span>
      <span className="admin-diag-detail muted">{detail}</span>
      <span className={`admin-badge ${state === "ok" ? "ok" : state === "danger" ? "danger" : ""}`}>
        {text}
      </span>
    </div>
  );
}

/** Small labelled key/value used in the server-info card. */
export function InfoItem({ label, value }: { label: string; value: ReactNode }) {
  return (
    <div className="admin-info-item">
      <span className="muted">{label}</span>
      <strong>{value}</strong>
    </div>
  );
}

/** Live list of online users with room and activity tracking */
export function OnlineUsersWidget({
  users,
  isLoading = false,
}: {
  users: OnlineUser[];
  isLoading?: boolean;
}) {
  const formatLastSeen = (date: Date) => {
    const now = new Date();
    const diff = Math.floor((now.getTime() - date.getTime()) / 1000);
    
    if (diff < 60) return "Just now";
    if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
    if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
    return `${Math.floor(diff / 86400)}d ago`;
  };

  return (
    <div className="online-users-widget">
      <div className="widget-header">
        <h3>Online Now</h3>
        <span className="online-count">
          {isLoading ? "..." : users.length} users
        </span>
      </div>
      
      <div className="online-users-list">
        {users.length === 0 ? (
          <div className="empty-state">
            <span className="muted">No users online</span>
          </div>
        ) : (
          users.map((user) => (
            <div key={user.id} className="online-user-row">
              <div className="user-avatar-container">
                <img
                  src={`https://www.habbo.com/habbo-imaging/avatarimage?width=50&height=62&direction=2&headonly=1&crop=face&action=wav&gender=m&look=${encodeURIComponent(user.look)}`}
                  alt={user.username}
                  className="user-avatar"
                  loading="lazy"
                />
                {user.roomId && user.roomName && (
                  <div className="room-indicator">
                    <span className="room-dot" />
                  </div>
                )}
              </div>
              
              <div className="user-info">
                <div className="user-name">
                  <a href={`/u/${user.username}`} className="user-link">
                    {user.username}
                  </a>
                </div>
                <div className="user-status">
                  {user.roomId && user.roomName ? (
                    <span className="in-room">
                      🏠 {user.roomName}
                    </span>
                  ) : (
                    <span className="afk">⏱️ {formatLastSeen(user.lastActivity)}</span>
                  )}
                </div>
              </div>
            </div>
          ))
        )}
      </div>

      <style jsx>{`
        .online-users-widget {
          background: var(--color-surface);
          border-radius: 12px;
          border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);
          padding: 1.5rem;
        }
        
        .widget-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 1rem;
        }
        
        .widget-header h3 {
          margin: 0;
          font-size: 1.125rem;
          font-weight: 600;
          color: var(--color-text);
        }
        
        .online-count {
          font-size: 0.875rem;
          color: var(--color-text-muted);
          background: color-mix(in srgb, var(--color-primary) 10%, transparent);
          padding: 0.25rem 0.75rem;
          border-radius: 999px;
        }
        
        .online-users-list {
          max-height: 320px;
          overflow-y: auto;
          display: flex;
          flex-direction: column;
          gap: 0.75rem;
        }
        
        .empty-state {
          padding: 2rem;
          text-align: center;
          background: color-mix(in srgb, var(--color-text-muted) 5%, transparent);
          border-radius: 8px;
        }
        
        .online-user-row {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          padding: 0.75rem;
          background: color-mix(in srgb, var(--color-text-muted) 5%, transparent);
          border-radius: 8px;
          transition: all 0.15s ease;
        }
        
        .online-user-row:hover {
          background: color-mix(in srgb, var(--color-text-muted) 10%, transparent);
          transform: translateX(2px);
        }
        
        .user-avatar-container {
          position: relative;
          width: 50px;
          height: 62px;
          flex-shrink: 0;
        }
        
        .user-avatar {
          width: 100%;
          height: 100%;
          border-radius: 4px;
          object-fit: cover;
          border: 1px solid color-mix(in srgb, var(--color-text-muted) 20%, transparent);
        }
        
        .room-indicator {
          position: absolute;
          bottom: -2px;
          right: -2px;
        }
        
        .room-dot {
          width: 10px;
          height: 10px;
          background: #22c55e;
          border-radius: 999px;
          border: 2px solid var(--color-surface);
          display: block;
        }
        
        .user-info {
          flex: 1;
          min-width: 0;
        }
        
        .user-name {
          font-weight: 500;
          color: var(--color-text);
          margin-bottom: 0.25rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .user-name .user-link {
          color: inherit;
          text-decoration: none;
          transition: color 0.15s ease;
        }
        
        .user-name .user-link:hover {
          color: var(--color-primary);
          text-decoration: underline;
        }
        
        .user-status {
          font-size: 0.75rem;
          color: var(--color-text-muted);
        }
        
        .in-room {
          color: #22c55e;
          font-weight: 500;
        }
        
        .afk {
          color: #ef4444;
        }
      `}</style>
    </div>
  );
}