export const SessionTable = (
  { sessions, currentSessionId}: {
    sessions: any[];
    currentSessionId: string;
  },
) => {
  return (
    <div class="card desktop-only" style="display: none;">
      <div class="table-container">
        <table>
          <thead>
            <tr>
              <th>Type & Label</th>
              <th>Permissions</th>
              <th>Activity</th>
              <th>Expires</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {sessions.length === 0
              ? (
                <tr>
                  <td
                    colSpan={5}
                    style="text-align: center; padding: 2rem; color: var(--text-muted);"
                  >
                    No active sessions found.
                  </td>
                </tr>
              )
              : (
                sessions.map((session) => {
                  const isCurrent = session.id === currentSessionId;
                  const isAgent = !!session.is_agent;
                  const scopes = Array.isArray(session.custom_scopes)
                    ? session.custom_scopes
                    : [];

                  return (
                    <tr key={session.id}>
                      <td>
                        <div style="display: flex; align-items: center; gap: 0.5rem;">
                          <span style="font-size: 1.1rem;">
                            {isAgent ? "🔑" : isCurrent ? "📱" : "💻"}
                          </span>
                          <div>
                            <strong style="color: var(--text-primary);">
                              {session.label ||
                                (isCurrent ? "This Device" : "Remote Device")}
                            </strong>
                            <div style="font-size: 0.75rem; color: var(--text-muted); font-family: monospace;">
                              {session.id.substring(0, 14)}...
                            </div>
                          </div>
                        </div>
                      </td>
                      <td>
                        {isAgent
                          ? (
                            <span class="badge badge-info">
                              {scopes.length > 0
                                ? `${scopes.length} Scopes`
                                : "Delegated"}
                            </span>
                          )
                          : (
                            <span class="badge badge-success">
                              Interactive
                            </span>
                          )}
                      </td>
                      <td style="color: var(--text-secondary); font-size: 0.85rem;">
                        {session.last_activity_action
                          ? (
                            <div>
                              <span style="color: var(--primary); font-family: monospace; font-size: 0.8rem;">
                                {session.last_activity_action}
                              </span>
                              <div style="font-size: 0.75rem; color: var(--text-muted);">
                                {new Date(
                                  session.last_activity_at ||
                                    session.created_at,
                                ).toLocaleTimeString()}
                              </div>
                            </div>
                          )
                          : (
                            <span>
                              {new Date(session.created_at)
                                .toLocaleDateString()}
                            </span>
                          )}
                      </td>
                      <td style="color: var(--text-secondary); font-size: 0.85rem;">
                        {new Date(session.expires_at).toLocaleString()}
                      </td>
                      <td>
                        <div style="display: flex; gap: 0.35rem; align-items: center;">
                          {isAgent && (
                            <>
                              <button
                                type="button"
                                class="btn-outline"
                                style="padding: 0.25rem 0.5rem; font-size: 0.75rem; min-height: 30px;"
                                onclick={`extendSession('${session.id}', 1)`}
                                title="Extend session by 1 hour"
                              >
                                +1h
                              </button>
                              <button
                                type="button"
                                class="btn-outline"
                                style="padding: 0.25rem 0.5rem; font-size: 0.75rem; min-height: 30px;"
                                onclick={`openEditScopesModal('${session.id}', '${
                                  session.label || "Delegated"
                                }', ${JSON.stringify(JSON.stringify(scopes))})`}
                                title="Edit permissions"
                              >
                                Scopes
                              </button>
                            </>
                          )}
                          {!isCurrent && (
                            <button
                              type="button"
                              class="btn-danger revoke-btn"
                              data-session-id={session.id}
                              style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 30px;"
                            >
                              Revoke
                            </button>
                          )}
                        </div>
                      </td>
                    </tr>
                  );
                })
              )}
          </tbody>
        </table>
      </div>
    </div>
  );
};